WebGLでのテクスチャ圧縮を容易化

[追記]

PlayCanvasでBasisテクスチャ圧縮が可能になりました。

PlayCanvasでBasisテクスチャ圧縮が利用可能に！

---

こちらは、2016年10月25日に公開された以下のドキュメントを翻訳したものとなります。
WebGL Texture Compression Made Easy

非常に良いお知らせです！PlayCanvasでのテクスチャ圧縮が容易になり、より大きいサイズで機能が向上したWebGLアプリケーションの構築が可能になりました。

現在、多くのWebGL開発者はテクスチャをJPGまたはPNG画像からロードしています。これらのファイル形式は転送時に大幅に圧縮されますが（特にJPG）、残念なことにWebGLに渡されると大きなビデオメモリを使用してしまいます。以下の地球の画像を例に考えてみましょう。

この画像のサイズは4096ピクセルx2048ピクセルですが、わずか1.81MBのJPGファイルに圧縮されます。しかし、WebGLではこの画像は24ビットRGBに解凍され、VRMの33.6MBを占めてしまいます！例えば、1つのマテリアルにdiffuse, normal, metalness, gloss, emissive, opacityの6つのマップが備わっているとしましょう。これら6つの画像は合計でVRAMの200MB以上を占めることになります。さらに、アプリケーションに10個以上の固有のマテリアルがあるとしたらどうなるでしょう？ブラウザタブのクラッシュや、エンドユーザーへの悪影響の原因となることは容易に予測できます！

WebGLは、GPU上のハードウェアでサポートされる多数の圧縮テクスチャ形式へのサポートを提供することで、こうした問題点を解決します。各GPUは以下の形式のうち少なくとも1つをサポートしています。これに対し、WebGLはこれらの形式すべてをサポートしています：

• DXT: すべてのデスクトップデバイスおよび一部のAndroidデバイスでサポート
• PVR: すべてのiOSデバイスおよび一部のAndroidデバイスでサポート
• ETC1: 大部分のAndroidデバイスでサポート

PlayCanvasは、テクスチャアセット内の簡単なインスペクタパネルでこれらの形式を圧縮します。地球の画像の例をみると、PlayCanvasでの圧縮結果は以下のようになりました：

最初の数値はGZIP化されたファイルサイズで、2番目の数値はこのテクスチャのVRAM使用量を示しています。元のJPGと比較して、圧縮画像ではVRAM使用量が6分の1になっている点に着目してください。劇的に減少しています！

この記事の冒頭でIフレーム化されていたデモを参照してみましょう。VRAM使用量は以下のとおりです：

テクスチャ圧縮によって、このデモはモバイル向けとなりました。ただし、わずか4MBのデータをロードした後に非常に迅速にロードされている点に留意してください。なぜこんなことが可能なのでしょうか？これらのテクスチャは、詳細レベルと呼ばれる技術を使用しています。この技術を使用すると、まず低い解像度のバージョンがロードされてアプリケーションが起動し、高い解像度のバージョンはバックグラウンドで非同期にストリーミングされます。また、アプリケーションはライトマップをロードする必要が全くない点にも着目してください。これは、PlayCanvasのランタイム・ライトマップ生成機能の使用により、アプリケーションを起動するとライトマップが順次作成されるためです。

PlayCanvasの手法によって、アプリケーションが作動しているデバイス上で最適なテクスチャ形式が確実に選択されます。これに対し、Unity WebGLソリューションではDDSファイルがロードされ、必要に応じてUnity WebGLソリューションをサポートしないプラットフォーム上で解凍されます。つまり、圧縮が最も必要なのはモバイルデバイスであるのに、モバイルデバイスには何ら利点がもたらされません。

要点

• DXT、PVR、ETC1用にワンクリックでテクスチャ圧縮
• WebGLアプリケーションですべてのテクスチャデータについて6倍の効率で圧縮
• PlayCanvasアプリケーションを実行しているデバイスに最適な画像形式を選択
  

本日からOrganizationプランとPersonalプランをお使いのユーザーの皆様は、PlayCanvasテクスチャ圧縮を利用できるようになりました。（詳細情報はマニュアルをご参照ください）。今後、ベータ版の期間を経た後に間もなく、この圧縮機能はすべてのユーザーにお使いいただけるようになります。近日中に皆様にテクスチャを圧縮していただけるようになり、結果としてお客様のWebGLアプリケーションが画期的なレベルに到達します。まだPlayCanvasをお使いでない場合には、ぜひサインアップしてください。皆様に存分にこの機能を活用していただきたいと考えています！

 全画面はこちら