こちらは、2021年2月11日に公開された以下のドキュメントを翻訳したものとなります。
WebGL Case Study: Rebuiling the Star-Loard PBR Demo
2014年、PlayCanvasはPBR(物理ベースレンダリング)を統合した最初のWebGLエンジンとなりました。それを記念して作成したのが、Star-Lordの技術デモです。
この6年ほどの間に、PlayCanvasは劇的に進歩しました。そこで、最新のエンジン機能をフル活用し、このデモを再公開することにしました。
最も大きな改善点は、ロード時間に関するものです。まず、いくつかの主要な統計データを比較してみましょう。
Star-Lord 2014 | Star-Lord 2021 | 変動率(%) | |
HTTPリクエスト | 220 | 39 | ↓ 82.3% |
プレロード転送量 (MB) | 10.1 | 5.6 | ↓ 44.6% |
合計転送量 (MB) | 13.7 | 9.9 | ↓ 27.7% |
合計リソース(MB) | 26.0 | 12.1 | ↓ 53.5% |
ロード時間(秒) * | 1.8 | 1.2 | ↓ 33.3% |
非常に大きな進歩があった点が分かります!それでは、このデモの2つのビルドにはどのような違いがあるのでしょうか?1つずつ確認していきましょう。
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%を占めています!このように、アプリ内にプレロードではなくストリーミングできるアセットがないか、十分に検討してください。
アセットのプレロードとストリーミングについては、こちらのユーザーマニュアルを参照してください。
コメント
0件のコメント
サインインしてコメントを残してください。