テクスチャ圧縮フォーマットPVRTCのTips CEDEC2013復習編(2)

ウェブテクノロジ R&D部の上田です。

今回は前回に引き続いて、CEDEC2013の公募セッションから、テクスチャ圧縮フォーマットのPVRTCに関するTipsをピックアップしてご紹介したいと思います。

なお、CEDEC2013公募セッションの全スライド資料は、下記からダウンロードできますので、本記事で興味を持たれた方は、ぜひそちらもご覧ください。
CEDEC2013『工程の手戻りを最小限に 圧縮テクスチャ(PVRTC・DXTC・ETC)における傾向と対策』発表資料

>PVRTCのTips

1.1 UIパーツ圧縮時の劣化対策

PVRTCのTips一つ目は、UIパーツをPVRTC圧縮した時に発生する劣化の対処法です。
cedec2013_pvrtc01_lanc_per50上の図のように、UIパーツのような画像サイズが小さくて色のクッキリしている画像をPVRTC圧縮すると、色がにじむように劣化してしまうことが多いです。
このような場合、劣化を回避する一つの方法として、文字・輪郭・背景などをそれぞれ別パーツにして圧縮し、表示する時に合成する、というものがあります。
cedec2013_pvrtc02_lanc_per50このように、文字・輪郭・背景とそれぞれを別パーツにしてから圧縮し、表示する時に重ねて表示するようにします。
cedec2013_pvrtc03_lanc_per50こうすることで、UIパーツを直接圧縮するよりも、綺麗な表示を実現することができます。ただし、画像を別パーツに分割することで、全体のファイルサイズの増加や表示する時のリソース使用量が増加してしまう、といった副作用もあります。

1.2 テクスチャアトラス作成時の注意点

二番目のTipsは、テクスチャアトラス作成時の注意点です。
下の図はカラーバーをPVRTC圧縮したものですが、接触していないカラーブロックの間で色が干渉してしまっています。(カラーブロック間の薄緑部分は透過色部分です)
cedec2013_pvrtc04_lanc_per50このように、PVRTC圧縮ではパーツが接触していなくても、色が干渉して劣化してしまうことがあります。
このような劣化が発生した場合には、単純にパーツ間のマージンを増やすことで解決できます。
cedec2013_pvrtc05_lanc_per50マージンを倍にすることで、色の干渉による劣化を防ぐことができました。
実際のところ、テクスチャアトラスをPVRTCで圧縮する場合、各パーツ間のマージンは8ピクセル程度は作っておく方が良い結果が出る傾向にあります。

1.3 アルファグラデーション対策

PVRTCでアルファグラデーション画像を圧縮すると、アルファチャンネル部分が劣化していることが多いです。
cedec2013_pvrtc06_lanc_per50上の図では、オリジナル画像に比べてアルファグラデーションがもやもやとした雲のように劣化しています。
この原因としては、PVRTCはアルファチャンネルの扱いが苦手、ということがあります。
cedec2013_pvrtc07_lanc_per50上の図は、PVRTC4bppモードで4×4ピクセルに割り当てられるビット数を、アルファ有りの場合とアルファ無しの場合で比較しています。
PVRTCではアルファがある画像も無い画像も、4×4ピクセルに割り当てられるビット数は64ビットで一定になっています。
そのため、同じようにアルファチャンネルを扱うDXTCが、4×4ピクセルあたり64ビットをアルファチャンネルに割り当てるのに対して、PVRTCではアルファチャンネルに割り当てるビット数がすごく少なくなっています。
結果として、PVRTCはアルファチャンネルの扱いが苦手となっているのです。
それならば、アルファグラデーション画像を綺麗に圧縮するにはどうすればいいの?ということなんですが、こんな方法があります。
cedec2013_pvrtc08_lanc_per50つまり、アルファグラデーションは劣化しやすいので、RGBプレーンのみで同じグラデーション表現が使える場合であれば、アルファグラデーションを使わない、という方法です。特定の条件でのみ使える解決法ですが、ちょっとしたテクニックの一つとして覚えておくと良いでしょう。

1.4 PVRTC 2bppモードの特性

Tipsの4つ目は、PVRTC2bppモードの特性についての話です。

例えば次のような例を考えてみましょう。
cedec2013_pvrtc09_lanc_per50PVRTC2bppモードは、PVRTC4bppモードと比べて、圧縮率が2倍になっているので、当然劣化の度合いも大きくなっています。特に上の例のような、色の変化がクッキリしていてファイルサイズの小さい画像は、かなり劣化します。
ところが、PVRTC2bppモードにはその圧縮特性に特徴があって、ちょっとした工夫で少しだけ劣化を抑えることができます。
cedec2013_pvrtc10_lanc_per50上の解説のように、PVRTC2bppモードでは8×4ピクセルあたり64ビットを割り当てて圧縮しているのですが、PVRTC4bppモードに比べて、割り当てられているピクセルが水平方向について2倍になっています。

このため、PVRTC2bppモードは水平方向に劣化しやすいという特性があります。

この特性を先程の「あ」の画像を使って検証してみます。
cedec2013_pvrtc11_lanc_per50このように、縦と横の一方だけを半分にしたものと、両方を半分のサイズにしたものを比べてみます。
cedec2013_pvrtc12_lanc_per50こうしてみると、わずかな違いではあるんですが、縦に半分のサイズにしたものを拡大した場合が、他の2つの場合と比べて劣化が少なくなります。
ちなみに、同じことをPVRTC4bppモードで試してみると、
cedec2013_pvrtc13_lanc_per50分かるほどの違いは出なくなります。
このようにPVRTC2bppモードの特性として、垂直方向に比べて水平方向に劣化しやすいということがあるので、特に水平方向にダウンサイジングする時には注意する必要があります。

1.5 Clear PVRTCを使ってみよう!

最後に、CEDEC2013では公募セッションだった関係上、あまり触れることができなかった弊社の「Clear PVRTC」についてご紹介しましょう。

弊社製品 OPTPiX imésta 7 for Mobile & Social に付属している機能「Clear PVRTC」を利用すると、標準ツールでPVRTC圧縮した時には、こんなに汚くなってしまう画像も、

pvr_sample_nashipvr_sample_nashi_up

こんなに↓綺麗になります。

pvr_sample_clearpvr_sample_clear_up

※ピンク色の部分は透過色です
※Web掲載用にPNG画像に変換しています

また、
cedec2013_pvrtc14_lanc_per50こんな劣化に対しても、「Clear PVRTC」を使うことで、
cedec2013_pvrtc15_lanc_per50劣化の度合いを抑えることができます。
「Clear PVRTC」は従来のPVRTCと互換性を維持しているので、ファイルサイズや実行時のGPUパフォーマンスはそのままに、画質の向上を実現しています。

また、書き文字やUIパーツといった画像については高い効果を発揮することが多い特性をもっていて、1.1でご紹介したテクニックを組み合わせることで、さらなる画質向上が期待できます。

「Clear PVRTC」ぜひ一度お試しください。
無料トライアルはこちらから。


PVRTCについては、以下の記事でさらに詳細な説明を記載しています。そちらをご覧いただけるとPVRTCに関する知識を更に深めることができると思います。
PVRTC圧縮のアルゴリズムとは?

タグ , , , , | 2018/06/22 更新 |

コメントはこちら

※ コメントは承認後に公開されます。