スライド 1

Size: px

Start display at page:

Download "スライド 1"

みずきよせ
5 years ago
Views:

1 知っておきたい画像データ圧縮の仕組みと特長 ~DXTC と PVRTC~ 株式会社ウェブテクノロジ R&D グループマネージャ小野知之

2 Agenda 本講演の目的アプリ開発者に向けてアプリ内で使用可能な圧縮画像フォーマットの特徴を解説しますどんな場合にどんな圧縮画像フォーマットが向いているのかが理解できるようになります前半 - 復習パート JPEG,PNGなどの圧縮画像の特徴についておさらいしますブラウザベースのアプリやウェブ制作者の参考にもなるように配慮しました後半 3Dテクスチャ圧縮 3Dテクスチャ圧縮の特徴と注意点圧縮アルゴリズム概略

3 ウェブテクロノジのご紹介創業 23 年目になる池袋のソフト開発会社です

主な採用実績おさわり探偵なめこ栽培キット Deluxe Beeworks / SUCCESS All rights reserved ケイオスリングスオメガメディアビジョン / スクウェアエニックス 2011 SQUARE ENIX CO.,LTD All Rights Reserved.

初音ミク -Project DIVA- セガ SEGA / Crypton Future Media, Inc. ファイナルファンタジー X-2 スクウェアエニックス 2003 SQUARE ENIX CO., LTD. All Rights Reserved.

4 主な採用実績おさわり探偵なめこ栽培キット Deluxe Beeworks / SUCCESS All rights reserved ケイオスリングスオメガメディアビジョン / スクウェアエニックス 2011 SQUARE ENIX CO.,LTD All Rights Reserved. CHARACTER DESIGN: Yusuke Naora Developed by Media.Vision Inc. まっぷるマガジンキャンバスマップル Copyright(C) MAPPLE ON Co., Ltd. All rights Reserved. 初音ミク -Project DIVA- セガ SEGA / Crypton Future Media, Inc. ファイナルファンタジー X-2 スクウェアエニックス 2003 SQUARE ENIX CO., LTD. All Rights Reserved. MAIN CHARACTER DESIGN:TETSUYA NOMURA ALTERNATE COSTUME DESIGN:TETSU TSUKAMOTO 不思議のダンジョン風来のシレン 3 ~ からくり屋敷の眠り姫 ~ 開発 : スパイクチュンソフト販売 : セガ 2008 Spike Chunsoft Co., Ltd./ すぎやまこういち Android Android Android PSP PS2 Wii ios ios ios この他にも数多くのゲームおよびコンテンツ制作現場で採用

5 昔はこんな仕事もしていました

6 Agenda 本講演の目的アプリ開発者に向けてアプリ内で使用可能な圧縮画像フォーマットの特徴を解説しますどんな場合にどんな圧縮画像フォーマットが向いているのかが理解できるようになります前半 - 復習パート JPEG,PNGなどの圧縮画像の特徴についておさらいしますブラウザベースのアプリやウェブ制作者の参考にもなるように配慮しました後半 3Dテクスチャ圧縮 3Dテクスチャ圧縮の特徴と注意点圧縮アルゴリズム概略

7 復習 - JPEG キーポイント写真などの自然画の圧縮に向いている GUI パーツのようなくっきりした文字やアイコン主体の画像の圧縮には向いていない * 画面キャプチャやバナーにも向いていない * アルファ ( 透過度 ) を持てない * 圧縮効率という意味で

8 余談 - JPEG JPEG はどうやって画像を圧縮しているのか人間の視覚の特性にあわせて情報を間引いている人間の目は明るさの変化には敏感だが色の変化には鈍感細かい変化を省く 8x8 ピクセルごとに圧縮している圧縮率を高くするとブロックノイズが出るのはそのためサンプリング比で色情報をどのくらい間引くかが変わる 4:4:4 色情報の間引きなし 4:2:2 色情報は 1/2 4:2:0 色情報は 1/4 4:1:1 色情報は 1/4

9 復習 - GIF アプリ内で利用する意味はあまりない (PNG を使う方が良い ) ブラウザベースのアプリでも注意が必要アニメーション可能だが Android のブラウザでは機種によって正しく表示できない場合がある (Android の一部機種で静止 GIF も正しく表示されないという報告もある )

10 復習 - PNG GUI パーツのような文字アイコン主体のくっきりした画像に向いている * バナーのような写真と文字で構成された画像は PNG8 が品質と容量のバランスが一番良い * 階調アルファを持てる ( 美しい GUI パーツには必須 ) * 圧縮効率という意味で

11 復習インデックスカラーとはインデックスカラーピクセル画像の場合色数データ容量 2 8 =256 色 256x256x1+256x3=66,304 バイト * 画像データ自体の情報量 ( ヘッダ情報等は除く )

12 復習インデックスカラーキーポイント 256 色に減色するとデータ容量は 1/3 になる ( アルファ付なら 1/4) 16 色に減色すれば 1/6( アルファ付なら 1/8) アプリに組み込む際には PNG で圧縮するのでさらに小さくなる輪郭がクッキリしているので GUI パーツやバナーに向いている 256 色以下の色数で画像を表現するため減色ツールの性能で画質が大きく変わる

13 復習 - WebP Android 4.0 以上ではアプリから使用可能アプリ内で閉じている画像に使う場合はメリットあり非可逆圧縮は Android 3.1 以降から使える ( アンドキュメント ) Google が開発した静止画フォーマット最後発なので JPEG と PNG を合わせて高性能化したような規格ブラウザでは Chrome など一部が対応するのみ普及しているとは言いがたい JPEG のような非可逆圧縮 PNG のような可逆圧縮ともサポート非可逆圧縮では圧縮率可変階調アルファを持てる ( 非可逆圧縮においても ) JPEG,PNG より圧縮率が高い

14 復習まとめ JPEG GIF PNG WebP 写真などの自然画の圧縮に向いているメニューのようなくっきりした文字やアイコン主体の画像の圧縮には向いていない * アルファ ( 透過度 ) は持てないアプリ内で利用する意味はあまりない (PNG を使う方が良い ) メニューのような文字アイコン主体のくっきりした画像に向いている * バナーのような写真と文字で構成された画像は PNG8 が品質と容量のバランスが一番良い * 階調アルファを持てる Android 4.0 以上ではアプリ内で使用可能アプリ内で閉じている画像に使う場合はメリットあり * 圧縮効率という意味で

15 参考 JPEG の弱点極端な例ですが PNG 880x50ピクセル 32色 PNG 7,993バイト (OPTPiX iméstaで減色) JPEG 880x50ピクセル JPEG 8,779バイト

16 参考 JPEG の弱点 PNG 880x200 ピクセル 128 色 PNG 74,484 バイト OPTPiX imésta で減色

17 参考 JPEG の弱点 JPEG 880x200 ピクセル JPEG 74,708 バイト

18 余談 facebook ページのカバー画像は JPEG をアップロードするとサーバー側で高圧縮率で再圧縮されてしまう PNG でアップロードすれば PNG のままなので画質劣化がない (2013/3 現在の仕様 )

19 Agenda 本講演の目的アプリ開発者に向けてアプリ内で使用可能な圧縮画像フォーマットの特徴を解説しますどんな場合にどんな圧縮画像フォーマットが向いているのかが理解できるようになります前半 - 復習パート JPEG,PNGなどの圧縮画像の特徴についておさらいしますブラウザベースのアプリやウェブ制作者の参考にもなるように配慮しました後半 3Dテクスチャ圧縮 3Dテクスチャ圧縮の特徴と注意点圧縮アルゴリズム概略

20 3D テクスチャとは

21 3D テクスチャとは

22 主な 3D テクスチャ圧縮テクスチャの種類変換元画像圧縮率インデックスカラーインデックスカラー ( アルファ付 ) RGB 24bpp 1/3(256 色 )*1, 1/6(16 色 )*2 RGBA 32bpp 1/4(256 色 )*3, 1/8(16 色 ) *4 DXT1(S3TC) RGB 24bpp 1/6 DXT1(S3TC) RGBA 32bpp 1/8 DXT2~5 RGBA 32bpp 1/4 PVRTC PVRTC RGB 24bpp RGBA 32bpp 1/6(4bpp) 1/12(2bpp) 1/8(4bpp) 1/16(2bpp) ETC RGB 24bpp 1/6 *1 ピクセルデータの他に 3x256 バイトのパレット情報が必要 *2 ピクセルデータの他に 3x16 バイトのパレット情報が必要 *3 ピクセルデータの他に 4x256 バイトのパレット情報が必要 *4 ピクセルデータの他に 4x16 バイトのパレット情報が必要

23 主な 3D ハードと主な対応テクスチャテクスチャの種類 1995~2000 年頃 2000~2005 年頃 2005~2010 年頃 2010~2013 年頃インデックスカラー PlayStation アルファ付インデックスカラー PlayStation 2 DXTC (S3TC) GAMECUBE Xbox PC(DirextX) PlayStation 3 PSP Wii Xbox360 PC(DirextX) PS4( 推定 ) Wii U PC(DirextX) 一部の Android 端末 PVRTC iphone iphone/ipad PS Vita 一部の Android 端末 ETC Android 端末 Nintendo 3DS * 各ハードウェアの発売日を表すものではありません * PlayStation GAMECUBE NINTENDO 3DS Wii Xbox は各社の商標です * 事情により一部推定および未記載の情報があります

24 DXTC, PVRTC の特性 DXT1 画像 PVRTC(4bpp) 画像 PVRTC(2bpp) 画像

25 DXTC, PVRTC の特性 ( 弱点 ) 元画像 ( フルカラー ) DXT1 画像

26 DXTC, PVRTC の特性 ( 弱点 ) 元画像 ( フルカラー ) PVRTC(4bpp) 画像 PVRTC(2bpp) 画像

27 DXTC, PVRTC の特性 ( 弱点 ) 元画像 ( アルファ付 32bit) * 文字の周囲が透明 α で抜かれている画像

28 DXTC, PVRTC の特性 ( 弱点 ) 標準ツールで圧縮した PVRTC * 文字の周囲が透明 α で抜かれている画像

29 DXTC とは? DirectX Texture Compression S3TC(S3 Texture Compression) の拡張フォーマット : DXT1, DXT2, DXT3, DXT4, DXT5 圧縮単位 : 4 4 ピクセル PC(DirectX) やゲーム機などに広く普及

30 DXTC の圧縮の仕組み (1) 4 4 ピクセルを圧縮の最小単位 (1 ブロック ) とする 1 ブロック (4 4 ピクセル )

31 DXTC の圧縮の仕組み (2) 代表色を 2 色選びそれらの補間色を求める代表色 C0 = 補間色 C2 = =2/3 +1/3 補間色 C3 = =1/3 +2/3 代表色 C1 = * ブロックに無い色でも代表色に使用できます

DXTC の圧縮の仕組み (3) 元のピクセルの色を置き換える代表色 C0 = 0 2 0 0 0 補間色 C2 = 2 3 2 0 0 補間色

32 DXTC の圧縮の仕組み (3) 元のピクセルの色を置き換える代表色 C0 = 補間色 C2 = 補間色 C3 = 代表色 C1 = 色にインデックス番号 (0~3) を割り当て 16 個の配列データとして保存する

33 DXTCのデータと復元 (RGBチャネル) インデックスと二つの色の情報のみになる代表色 C0 代表色 C1 インデックス2ビット 16ピクセル 32 ビット復元 16ビット (RGB565) 2色 32 ビット 1ブロックあたり 64 ビット * DXT2 5のアルファチャネルはこれと異なります

34 DXTC で表現できないパターン DXTC 代表色中間色中間色代表色無い色

35 補足 - DXT1の補間モード代表色の順序で補間方法が変わる代表色 C0 C1 C0 = #F35D1E C1 = #7AD254 補間2色代表色 C0 C1 C0 = #7AD254 C1 = #F35D1E 補間1色 +透過色代表色 C0 補間色 C2 ２３１３補間色 C3 １３２３１代表色 C1 代表色 C0 補間色 C2 代表色 C1 透過色 C3

36 DXTCのフォーマット名前 RGBチャンネルアルファチャンネル圧縮率* DXT1 (S3TC) 代表２値補間２値or１値未使用or 1ビット(抜き) 1/8** DXT2 代表２値補間２値４ビット(16階調) 固定アルファ値 1/4 DXT3 代表２値補間２値４ビット(16階調) 固定アルファ値 1/4 DXT4 代表２値補間２値補間(8階調) アルファ値 1/4 DXT5 代表２値補間２値補間(8階調) アルファ値 1/4 乗算済みアルファ *32ビット非圧縮ARGB画像からの圧縮率 **24ビット非圧縮RGB画像からの圧縮率は1/6

37 PVRTC とは? PowerVR Texture Comression フォーマット : 4bpp, 2bpp 圧縮単位 : 4 4ピクセル画像の縦横サイズは 2 の累乗の正方形 (256x256 等 ) のみスマートフォンでの利用が拡大

38 PVRTC の圧縮の仕組み (1) 4 4 ピクセルを圧縮の最小単位 (1 ブロック ) とする 1 ブロック (4 4 ピクセル )

39 PVRTCの圧縮の仕組み (2) ブロックごとに2色を決める Color A Color B * ブロックに無い色でも指定できます * 実際には複雑な方法で2色を選ぶ必要があります詳細は後述)

40 PVRTC の圧縮の仕組み (3) ピクセルの色をブレンド方法の番号に置き換える番号 Color A Color B 0 = 1 = 5/8 + 3/8 2 = 3/8 + 5/8 3 = この数値を Modulation Data と呼び配列データとして保存する

PVRTC (4bpp) のデータ構造 2色とModulation Dataの情報になる Color A 16 ビット Color B 15 ビット Mode Bit 1 ビット 1

41 PVRTC (4bpp) のデータ構造 2色とModulation Dataの情報になる Color A 16 ビット Color B 15 ビット Mode Bit 1 ビット復元方法に特徴あり Modulation Data 2ビット 16ピクセル 32 ビット 1ブロックあたり 64 ビット

42 PVRTCの復元 (1) Color A, B をそれぞれ周囲のブロックと補間する 1ブロック(4 4) Color A 補間 4 4ピクセルを補間色で埋める Color B 補間

43 PVRTCの復元 (2) 補間結果のピクセルごとにブレンドする 1ブロック(4 4) Color A Color B Modulation Data に基づいてピクセルごとにブレンドする =A 1 = 5/8 A + 3/8 B 2 = 3/8 A + 5/8 B 3 = 復元 B 補間結果を想定した Color A, B を圧縮時に適切に選んでおく必要がある

44 補足 - PVRTC(4bpp)のモード Mode Bit の値でブレンド方法が変わる番号 Mode Bit = 1 4段階番号 Mode Bit = 0 3段階 +透過 Color A Color B Color A Color B & Alpha = 0

補足 - PVRTC(4bpp)の色形式アルファの有無を選択可能 Color A 先頭ビットで切り替え 16 ビットアルファなし: RGB555 1 アルファあり: ARGB3444 0 Color B Red 5 bit Alpha 3 bit Green 5 bit Red 4 bit

45 補足 - PVRTC(4bpp)の色形式アルファの有無を選択可能 Color A 先頭ビットで切り替え 16 ビットアルファなし: RGB555 1 アルファあり: ARGB Color B Red 5 bit Alpha 3 bit Green 5 bit Red 4 bit Green 4 bit Blue 5 bit Blue 4 bit 15 ビットアルファなし: RGB554 1 アルファあり: ARGB Red 5 bit Alpha 3 bit Green 5 bit Red 4 bit Green 4 bit Blue 4 bit Blue 3 bit

46 まとめ - DXTC, PVRTC の特性 DXT1 画像 PVRTC(4bpp) 画像 PVRTC(2bpp) 画像

47 まとめ - DXTC の弱点元画像 ( フルカラー ) DXT1 画像

48 まとめ - PVRTC の弱点元画像 ( フルカラー ) PVRTC(4bpp) 画像 PVRTC(2bpp) 画像

49 まとめ - DXTC, PVRTC の特性写真のようなテクスチャは劣化が少ない線画や文字 GUIパーツなどクッキリしたテクスチャの圧縮には不向き解決方法圧縮の特性を理解して元絵を作る (手戻りを無くすために開発初期に圧縮画質を評価する) インデックスカラーを使う (ただし描画速度的には不利)

50 最後に少し PR 最後に少し PR

51 最後に少し PR - 弱点の解決元画像 ( アルファ付 32bit) * 文字の周囲が透明 α で抜かれている画像

52 最後に少し PR - 弱点の解決標準ツールで圧縮した PVRTC * 文字の周囲が透明 α で抜かれている画像

53 最後に少し PR - 弱点の解決 OPTPiX imésta で圧縮した PVRTC * 文字の周囲が透明 α で抜かれている画像 * 文字の周囲をアルファで抜いたような画像に高い効果があります

54 最後に少し PR - 弱点の解決 PNG JPEG GIF WebP Index Color (CLUT) DXTC (S3TC) PVRTC ETC

55 ウェブテクロノジのご紹介クリエイターの笑顔のために皆様の困ったことを解決するのがウェブテクノロジの仕事です

56 ウェブテクロノジのご紹介御清聴ありがとうございました

売上推移及び中期目標デジタルエンタテインメント (DE) セグメントの成長により 6 年連続増収見込み今後 DE セグメントを成長ドライバーとして中期目標達成を図る 4,500 4,000 億円売上高推移中期計画 3,000~4,000 億円 3,500 3,000 2,500 2,000

売上推移及び中期目標デジタルエンタテインメント (DE) セグメントの成長により 6 年連続増収見込み今後 DE セグメントを成長ドライバーとして中期目標達成を図る 4,500 4,000 億円売上高推移中期計画 3,000~4,000 億円 3,500 3,000 2,500 2,000 株式会社スクウェアエニックスホールディングス英国 IR 資料 2017 年 2 月 1 売上推移及び中期目標デジタルエンタテインメント (DE) セグメントの成長により 6 年連続増収見込み今後 DE セグメントを成長ドライバーとして中期目標達成を図る 4,500 4,000 億円売上高推移中期計画 3,000~4,000 億円 3,500 3,000 2,500 2,000 1,500