GPUの最適化手法として「圧縮テクスチャー」という画像を扱うための技術があります。画像ファイルと言えばJPGやPNGなどを思い浮かべる開発者が多いと思いますが、圧縮テクスチャーはGPUに最適化された画像形式です。圧縮テクスチャーは主にコンシューマーゲームやUnityなどで使用されていますが、ウェブコンテンツにおいてもWebGL開発で圧縮テクスチャーが役立ちます。

本記事ではWebGLを使った圧縮テクスチャーの使用方法と、Adobeが開発した圧縮テクスチャーフォーマットであるATF(エーティーエフ)テクスチャーについてそれぞれ解説します。まずはデモをご覧ください。

▲圧縮テクスチャーを表示するデモ。ATFファイルを読み込むことで、OS環境に応じて最適な圧縮テクスチャーを表示している

圧縮テクスチャーとは

通常、WebGLにおいてテクスチャー画像にはJPGやPNGが多く使われますが、実はGPU自体はこれらの画像フォーマットをデコードできません。そのため、WebGLではtexImage2D()命令で画像をGPUに転送する時、内部的にRGB(RGBA)形式にCPUでデコードしてからGPUに転送されます。

たとえば、1024px * 1024pxのJPGファイルをテクスチャーとして使用する場合、一律で1024 * 1024 * 3(ピクセルあたりのバイト数) = 3MBの情報にデコードされ、GPUに転送されます。いかに圧縮率の高いJPGでファイルシステム上のサイズを小さくしても、GPUに展開されると画像サイズに比例した大きな容量となります。

これは、GPUへ転送する際にCPUでのデコード処理と転送コストが高くなることと、VRAM(GPU上のメモリ)を多く使用することを意味します。特に使用できるVRAMの少ないモバイル環境では、テクスチャーの使用メモリの増大はコンテンツを作る上でかせとなります。

メリット

そこで対策として出てくるのが圧縮テクスチャーです。圧縮テクスチャーはGPUがデコードできるフォーマットです。圧縮されたデータはそのままGPUへ転送され、VRAMに配置されます。そして、シェーダーからのテクスチャーフェッチ(読み込み)時に初めてデコードされます。

GPUでテクスチャーフェッチ時にデコードされると聞くと遅くなるイメージがあるかもしれませんが、テクスチャーキャッシュを効率よく利用でき、VRAMへのメモリアクセスが削減できるため、むしろ非圧縮の形式より高速になるようです。

デメリット

圧縮テクスチャーにはいいことばかりではなく、大きな問題がふたつあります。ひとつはフォーマットが非可逆圧縮であり、画質劣化やノイズ発生の可能性があります。これについては画像の作成時に工夫することで改善できます。下記の記事に役立つ資料が公開されているので参考ください。

もうひとつの問題は、GPUごとに対応する圧縮フォーマットが異なり、環境によって使えるフォーマット/使えないフォーマットがバラバラなことです。

下記に代表的な圧縮テクスチャーフォーマットを挙げます。

DXT1/DXT5

DXTC(DirectX Texture Compression)ないしS3TC(S3 Texture Compression)は、S3 Graphicsの開発した圧縮テクスチャー形式で、主にWindowsとmacOSで使用できます。DXT1はアルファチャンネルに対応していませんが、DXT5は対応しています。

PVRTC

PVRTC(PowerVR Texture Compression)は、Imagination Technologiesの開発した圧縮テクスチャー形式で、主にiOSで使用できます。アルファチャンネルに対応しています。
※ iPhone 8/8 Plus/Xに搭載されているA11 Bionicチップには、Imagination Technologies社製でなく、Apple自社製のGPU(iOS GPU family 4)が採用されていますが、PVRTCはサポートされています。

ETC1

ETC(Ericsson Texture Compression)は、Ericsson Researchの開発した圧縮テクスチャー形式で、主にAndroidで使用できます。アルファチャンネルには対応していません。

ETC2

ETC2は、ETC1を拡張した圧縮テクスチャー形式で、主にOpenGL ES 3.0以上のiOSとAndroidで使用できます。アルファチャンネルに対応しています。OpenGL ES 3.0では必須の圧縮テクスチャー形式ですが、多くのデスクトップ向けGPUでハードウェアサポートされていないことから、派生規格であるWebGL 2.0では拡張機能になりました。

他にも圧縮テクスチャー形式はありますが、今回関係するのはこの4つです。WebGL 2.0の機能であるETC2を除くと、WebGLでの対応はおおまかに以下のように考えて良いでしょう。

プラットフォーム圧縮テクスチャー形式
Windows/macOSDXT1/DXT5
iOSPVRTC
AndroidETC1

次のページではWebGLでの圧縮テクスチャーの使用方法について解説します。