WebGLケーススタディ：Star-Lord PBRデモの再構築

こちらは、2021年2月11日に公開された以下のドキュメントを翻訳したものとなります。

WebGL Case Study: Rebuiling the Star-Loard PBR Demo

 

2014年、PlayCanvasはPBR（物理ベースレンダリング）を統合した最初のWebGLエンジンとなりました。それを記念して作成したのが、Star-Lordの技術デモです。

この6年ほどの間に、PlayCanvasは劇的に進歩しました。そこで、最新のエンジン機能をフル活用し、このデモを再公開することにしました。

最も大きな改善点は、ロード時間に関するものです。まず、いくつかの主要な統計データを比較してみましょう。

非常に大きな進歩があった点が分かります！それでは、このデモの2つのビルドにはどのような違いがあるのでしょうか？１つずつ確認していきましょう。

JSONメッシュをGLBに変換

2020年10月、PlayCanvasはすべてのモデルとアニメーションのデータを保存するため、正式にJSONからglTF 2.0（GLB）に移行しました。圧縮したGLBは圧縮したJSONとほぼ同じサイズですが、ダウンロード後の解析が飛躍的に速くなります。またGLBファイルが使用するシステムメモリは、同等のJSONファイルよりも少なくなります。すべてのアセットをJSONからGLBに変換する作業は簡単です。まず「Asset Tasks」グループにあるプロジェクト設定「Convert to GLB」をtrueにします。

次に、すべての FBX ファイルを再アップロードすると.json アセットではなく .glb アセットが生成されます。最後に、右クリックのコンテキストメニューにあるReplaceコマンドを使って、.jsonアセット（またすべてのマテリアルも）を.glbアセットに置換します。

これで、古いJSONアセット（および参照されていない関連マテリアル）を削除できます。

Basis圧縮テクスチャ

先月、弊社はBasisテクスチャ圧縮機能のエディタへの統合を発表しました。Star-Lordは、もともとDXT、PVR、ETC圧縮テクスチャを使用するよう設定されていました。ダウンロードサイズの比較は以下の通りです。

テクスチャ形式	ダウンロードサイズ (MB)
DXT	7.56
PVR	6.09
ETC1	7.18
Basis	2.38

上記のとおり、アップデート版でのダウンロードサイズは大幅に減少しました。

また、わずか2回のクリックでアプリのテクスチャにBasis圧縮を適用できます：

 

エディタ内でキューブマップを事前フィルタリング

PlayCanvasに初めてPBRが実装された際、エディタはキューブマップを事前フィルタリングできませんでした。この変換は、RGBM形式のキューブマップ面をエディタに追加して外部から行う必要がありました：

各キューブマップには6つのミップレベル、また各レベルには6つの面がありました。たとえば5種類のキューブマップを使用する場合、デモの220個のHTTPリクエストのうち180個がこれらのPNGファイルに対するものとなっていました！

現在では、エディタを使用して非常に簡単に6つのHDRキューブマップ面をインポートした後にキューブマップを作成し、そのキューブマップを事前フィルタリングできるようになりました。

結果的にこのデモでは180個のPNGファイルではなく、わずか5個のDDSファイルをロードします。処理速度が格段に向上しました。

 

アセットを非同期でロード

最適なロードタイムを実現するには、アプリの機能に必要なもののみをロードすることが重要です。厳密にいって、音楽はアプリの起動に絶対に必要な前提条件ではありません。そこで、このデモでは、音楽トラックを含むmp3アセットを非同期でロードし、ダウンロード後すぐに自動再生するようにしました。このアセットは3.9MBで、アプリのペイロードの約40%を占めています！このように、アプリ内にプレロードではなくストリーミングできるアセットがないか、十分に検討してください。

アセットのプレロードとストリーミングについては、こちらのユーザーマニュアルを参照してください。

お役立ちリンク

• Star-Lordプロジェクト
• Star-Lordアプリ
• ユーザーマニュアル：Optimizing Load Time
• ユーザーマニュアル：物理ベースレンダリング