GLB テクスチャ圧縮: KTX2 および WebP

テクスチャ変換により、GLB に埋め込まれた画像が変更されます。このツールでは、KTX2 または WebP を選択して、品質、スケール、および最大サイズの制御を有効にします。この比較中は三角形の保持を変更しないようにして、テクスチャ設定の効果を確認しやすくします。

ビューアがロードできる形式を選択してください

ディメンションとエンコード品質は異なる役割を果たします

50% テクスチャ スケールは幅と高さを半分にし、ミップマップ前のピクセルの 4 分の 1 を残します。最大サイズの設定により、出力サイズも制限されます。エンコード品質は画像のサイズではなくコーデックを制御するため、WebP の品質 8 は、ETC1S または UASTC の品質 8 と同等ではありません。

サイズ変更後に、レタリング、アルファエッジ、表面の細かいディテールを検査します。法線マップは、小さな値を変更するとシェーディングが変化する可能性があるため、特に注意が必要です。アプリケーションで使用されている照明とズーム レベルでテクスチャをテストします。

1024 × 1024 テクスチャ 1 枚を使用した比較

このフィクスチャは、ネイティブ gltfpack 1.3 によってエンコードされた、生成された勾配とノイズ PNG を備えた CC0 リップル メッシュです。すべての行は Meshopt 圧縮、8,192 個の三角形、変換が適用される品質 8 を使用します。これらは完全な GLB サイズであり、分離されたテクスチャ サイズではありません。この表は、ビジュアル品質や GPU メモリではなく、バイト数を測定します。

同じ表面の質感を比較する

これらのクローズ ビューでは、同じメッシュ、カメラ、照明、マテリアル設定が使用されます。これらは、Three.js 0.180.0 のテーブルから実際のファイルをレンダリングします。生成されたテクスチャには、グラデーションと細かいノイズが含まれています。これらの詳細を検査するのに役立ちますが、レタリング、透明度、または法線マップを表すものではありません。

これらのキャプチャでは、ETC1S バージョンはピンク色の表面上の細かいノイズの一部を滑らかにしますが、UASTC は斑点のある外観をより多く保持しています。ハーフサイズの WebP バージョンでは、小さな変化がよりはっきりとぼやけます。この観察結果をファイル サイズの表と比較してください。これらの詳細を保持するには、エンコードごとに異なるコストがかかります。

画像をフルサイズで開き、色や表面の細部の小さな変化を比較してください。 Web ページではプレビューが縮小されるため、違いが隠れてしまう可能性があります。これらのスクリーンショットは、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