ここでは、インタラクティブな Web ベースのエクスペリエンスを作成するのに適していることが実証されているいくつかの最適化手法を推奨します。この章は主に、Verge3Day Europe 2019 カンファレンスでの Soft8Soft の講演に基づいています。
推奨: NSDT エディタを使用して、プログラム可能な 3D シーンをすばやく構築します
1. ジオメトリ/グリッド
ジオメトリはモデルの主な形状を形成するため、3D アプリケーションの基礎となります。よりスムーズな反射と高速なレンダリングを実現するには、メッシュをできるだけ規則的に保つ必要があります。最初に、シーンに必要な詳細レベルを決定し、モデリング中はこれに従う必要があります。
折り目をモデリングするときは、ポリゴンを追加するよりもスムージング グループを使用することをお勧めします。
円筒モデルを使用する場合は、その中心のポリゴンの数を減らすように努めてください。
いずれにせよ、ユーザーに表示されない余分な詳細をモデルに含めないでください。下の図に示すように、オレンジ色のハイライトされたエッジはモデル全体の詳細レベルを定義するため、これを参照として使用できます。
2.ノーマルマップ
WebGL のパフォーマンスを最適化する一般的な方法は、ハイポリ モデルからローポリ モデルに法線マップをベイク処理してポリゴン数を減らすことです。
ただし、8 ビット イメージの精度には限界があるため、法線マップでは目に見えるアーティファクトが生成される場合があります。考えられる解決策のいくつかを以下に示します。高精度 (16 ビット) 画像を使用するとファイルが大きくなりますが、法線マップでスムージング グループを使用する 2 番目の方法は非常に時間がかかり、きれいな結果が保証されません。3 番目の方法は場合によっては機能する可能性があります。表面が非常に粗い場合は、マテリアルにノイズを追加してこれらのアーティファクトを軽減することを検討してください。
私たちの経験では、光沢のあるオブジェクトに対する最適な解決策は、スムージング グループを使用し、法線マップを使用せずに中間ポリゴン ジオメトリを使用することであることがわかりました。
最後に、非常に詳細なメッシュの代わりに法線マップを使用したい場合があります。
- オブジェクトはさまざまな表面で構成されています。
- 表面が粗く、精密なワークが得られません。
- オブジェクトが遠くにある、または小さいため、ユーザーはアーティファクトに気づきません。
3. テクスチャリング
これは、PBR パイプライン (および一般的に) で使用される典型的なテクスチャのセットです。
ご覧のとおり、ほとんどが白黒です。したがって、画像ごとに最大 4 つのマップを使用して、黒と白のテクスチャを 1 つの画像の RGBA チャネルに結合できます。
白黒テクスチャしかない場合は、それをアルファ チャネルにパックすることで、既存の RGB テクスチャと組み合わせることができます。最後に、結合する画像がない場合は、白黒画像を 95% 圧縮の JPEG 形式に変換し、グレースケール モードを有効にすることができます。
テクスチャ サイズを削減するもう 1 つの方法は、UV 空間を最適化することです。UV アンラップがよりコンパクトになるほど、イメージはテクスチャ空間をより効率的に使用します。したがって、品質を損なうことなく、より小さな画像を取得できます。
4. 頂点カラー
画像の代わりに頂点カラーを使用することは、読み込みを高速化し、WebGL アプリケーションの全体的なパフォーマンスを向上させる効果的な方法です。ただし、さまざまな頂点の色を分離するためにモデルに追加する必要がある余分なエッジが犠牲になります。
頂点カラーを使用して、粗さ、金属性、鏡面、またはその他のパラメーターを定義することもできます。このようなマテリアルの例を以下に示します。ここでは頂点カラーのみが使用されています。
5. シェーダの数
これは、シーン内のさまざまなマテリアル/シェーダを減らすのに非常に役立ちます。WebGL でのシェーダー処理は、特に Windows で読み込み時間が長くなる可能性があります。さらに、シェーダが少なくなると、エンジンがレンダリング中にシェーダ間の切り替えに費やす時間が短縮され、パフォーマンスが向上します。
テクスチャのみが異なる同様のマテリアルがある場合は、1 つのマテリアルだけを使用し、実行時にそのテクスチャをロード/交換できます。これは、置換テクスチャ パズルまたは JavaScript を使用して行うことができます。これにより、シェーダの数が最適化されるだけでなく、アプリケーションの起動時にロードされる画像の数も削減されます。
これはそのような最適化の例です。これらのタイヤはすべて 1 つのマテリアルのみで表現され、テクスチャを交換することで構成されます。
シェーダの数を減らすために、2 つ以上の単純なマテリアルを 1 つの大きなマテリアルに結合できます。このテクニックは、実行速度が速く、アニメーションによるトランジションも可能であるため、これらのマテリアル間を切り替える予定がある場合 (コンフィギュレーター アプリケーションを作成している場合など)、特に効果的です。
6. ドローコール
さらに、ドローコールの数という別の重要な側面があります。この数値は、印刷パフォーマンス情報パズル出力のジオメトリ バッファー セクションから取得できます。これは、各オブジェクトに 1 つのマテリアルのみが割り当てられている場合、個別のオブジェクトの数とほぼ同等ですが、マルチマテリアル オブジェクトのレンダリングにはより多くの描画呼び出しが必要になります。
したがって、可能な場合はメッシュを組み込み、固有のマテリアルの使用を減らして描画呼び出しの数を減らし、パフォーマンスを向上させる必要があります。
このオンライン ツールを使用してマテリアルをバッチ最適化できます。
https://gltf.nsdt.cloud
アニメーション化されたオブジェクトがある場合でも、そのパーツを結合し、ボーンを使用してアニメーション化することができます。これは、個別のオブジェクトをアニメーション化する場合に便利な場合があります。
7. ハイダイナミックレンジ照明
光源を使用せずに HDR 画像だけでシーンを照らすと、パフォーマンスが大幅に向上します。HDR ファイルのサイズは 1 MB 未満である場合があります。
8. シャドウ
動的シャドウは、オブジェクトを適切にレンダリングするのに役立つ場合にのみ使用してください。下の画像では、産業用ロボットのデモンストレーションで使用されているダイナミック シェーディングがロボット モデルの形状を強調しています。モデル自体は回転できるため、影によってオブジェクトのどの部分もユーザーから隠れることはありません。一方、スクーターのデモでは影によって多くの詳細がぼやけています。
アプリケーション内でオブジェクトが動かない場合は、シャドウ マップとアンビエント オクルージョン マップをベイクし、それらをオブジェクトの下のプレーンに適用できます。
9. モデル形式
WebGL アプリケーションに最も適した 3D モデル形式は GLTF です。そのため、3D モデルを GLTF またはバイナリ GLB として保存することを忘れないでください。または、NSDT 3DConvert を使用して他の形式のモデルを GLTF または GLB に変換してください。
