GLBのテクスチャ圧縮：KTX2とWebP

テクスチャ変換はGLB内の画像を変更します。このツールではKTX2かWebPを選ぶと、品質、縮小率、最大サイズを調整できます。テクスチャ設定の影響を見分けやすくするため、比較中は三角形保持率を変えないでください。

ビューアーで読める形式を選ぶ

寸法とエンコード品質は役割が異なる

テクスチャ縮小率を50%にすると、幅と高さが半分になり、ミップマップを除く画素数は4分の1になります。最大サイズの設定も出力寸法を制限します。エンコード品質は画像寸法ではなくコーデックを制御するため、WebPの品質8とETC1SやUASTCの品質8は同等ではありません。

縮小後は文字、アルファ境界、表面の細部を確認してください。法線マップは小さな値の変化が陰影に影響するため、特に注意が必要です。アプリケーションと同じ照明と拡大率で確認しましょう。

1024 × 1024テクスチャ1枚で比較

このテストデータは、CC0の波形メッシュに生成したグラデーションとノイズのPNGを付け、ネイティブgltfpack 1.3でエンコードしたものです。すべての行でMeshopt圧縮と8,192個の三角形を使い、変換時の品質は8です。数値はテクスチャ単体ではなくGLB全体のサイズです。画質やGPUメモリではなく、バイト数を測っています。

同じ表面でテクスチャを比較

同じメッシュ、カメラ、照明、マテリアル設定で拡大表示しています。表にある実際のファイルをThree.js 0.180.0で描画しました。生成テクスチャのグラデーションや細かいノイズは、それらの変化を見るのに適していますが、文字、透明部分、法線マップの例ではありません。

この画像では、ETC1Sはピンクの表面の細かなノイズがやや滑らかになり、UASTCは粒状の見た目をより多く残しています。半サイズのWebPは小さな変化のぼけがより目立ちます。ファイルサイズ表と合わせて見ると、細部を残すために必要な容量がエンコードごとに異なることが分かります。

画像を原寸で開き、色の小さな変化や表面の細部を比べてください。ページ上の縮小表示では差が見えにくくなります。これらは1つのブラウザーとGPUによる参考画像であり、品質の点数や、すべての端末で同じ描画になる保証ではありません。

例：テクスチャの縦横を半分にしてWebPで出力

gltfpack -i input.glb -o output.glb -cc -tw -tq 8 -tj 1 -ts 0.5 -kn -km -ke

画面で「ファイルを小さく」を選び、WebPに設定して、詳細設定のテクスチャ縮小率を50%にします。画素数の上限も必要でなければ、最大テクスチャサイズは変えません。使用前に、使用先のビューアーで結果を開き直してください。

Three.jsでKTX2とMeshoptの読み込みを設定 →

エンジンの資料： gltfpack