3Dウェブ最適化ツール

「ウェブ対応」の意味を勘で決めるのはやめる

ウェブサイトに載る3Dモデルは、必ずどこかのバジェットに収まらなければなりません。ところが、そのバジェットを書き出している人はほとんどいません。結果として、おなじみのループが始まります。書き出して、アップして、スマートフォンが息切れするのを眺めて、テクスチャを少しだけ小さくしてまた書き出す、その繰り返しです。このツールは順序を逆にします。モデルの行き先——デスクトップ、モバイル、WebXR——を選べば、何かを変える前に、どの上限をどれだけ超えているかを正確に教えてくれます。

バジェットはすべて公開

WebXRの列がいちばん厳しいのは意図的です。ヘッドセットは高解像度でシーン全体を1フレームに2回描き、しかも72–90 Hzの締め切りに間に合わせなければなりません。三角形バジェットがモバイルの半分なのは悲観論ではなく、算数です。

見落とされがちな指標がテクスチャメモリ

4096 × 4096のテクスチャはGPU上でRGBAとして約67 MB、ミップチェーンまで含めればおよそ89 MBです。元は2 MBのJPEGとして配布されていたかもしれないファイルが、です。それが8枚もあれば、GLBがどれだけ小さくてもミドルレンジのスマートフォンはメモリを使い果たします。だからこのツールはGPUテクスチャメモリをファイルサイズとは別に評価します。そして、テクスチャを2048から1024へ半分にすると、削れるバイト数の4倍のメモリが浮くのもこのためです。

プランが実際にやること

最大5つのアクション。いずれも解析が理由を見つけたときだけ提案され、その理由が必ず添えられます。

• クリーンアップ — dedup、prune、weld。常にやる価値があり、常に可逆です。
• 簡略化 — 三角形バジェットまでの四次誤差による簡略化。超過している場合のみ。
• バッチ化 — instance、palette、join で、ドローコールとマテリアルをまとめて減らします。
• テクスチャ — 算出した目標サイズへリサイズし、WebPで再エンコードします。
• 圧縮 — 量子化に加えてDracoまたはMeshopt。

順序が固定なのは、順序が効くからです。頂点結合は簡略化の前、インスタンス化はメッシュ結合の前、エンコードは必ず最後。納得できないアクションはオフにしてください。

正直な限界

すべてのバジェットを満たしても60 fpsが保証されるわけではありません。オーバードロー、半透明、シェーダーのコストは静的なファイルからは見えないからです。また join が結合できるのは同じマテリアルを共有するメッシュだけです。処理はすべてローカルで動きます——アセットがブラウザの外に出ることはありません。