fps パフォーマンスが重要な webgl のゲームで、2D HUD を作成する最も効率的な方法は何ですか? 3 つのオプションを考えることができますが、それぞれのパフォーマンス コストがどれくらいで、どれが最も効率的であると推奨されるかは不明です。
では、次の 3 つのオプション間の相対的なパフォーマンス コストはいくらになるでしょうか。
A: 正投影カメラを使用して 3D のポリゴンでハッドをレンダリングし、元のシーンにブレンドします。利点は、コンテナーの手動配置を犠牲にして、高度な opengl 効果が可能であることです。
B: html/css で HUD を構築し、ブラウザーに合成を任せます。この場合、ブラウザの構成に大きなパフォーマンス ヒットがありますか?
C: 3D キャンバスの上に 2D キャンバスを描画し、ブラウザに合成させます。これは可能ですか?マウスイベントやフォーカスなどのキャンバス間のイベント伝播に問題がありますか?
どうもありがとう！
オプション Aはおそらく技術的には最速ですが、手動で処理する必要がある他の問題が多数発生します。テキスト (ヘルス、弾薬など) を更新する場合は、テキスト レンダリング ルーチンを考え出す必要があります。マウスまたはキーボードを介して UI を操作する場合は、それを自分で処理する必要があります。ネイティブのブラウザー ウィジェットよりも優れたエクスペリエンスを実際に生み出すのに十分なほど堅牢かつ効率的にそれを行う可能性はほとんどありません。ポイントは、可能性を少し速くするのは大変な作業です。
オプション Bは、私の意見では、進むべき道です。ブラウザーは合成に非常に優れており、非常にクレイジーで詳細な HUD を実行していない限り、そのためにパフォーマンス ヒットが発生しますが、アプリの他の部分 (JS ロジックなど) と比較して、ヒットは無視できると思います。さらに、これは時間が経つにつれて「魔法のように」改善され、ブラウザーがより効率的に機能するようになるルートです。IMO ここでの最大の欠点は、最新かつ最高の CSS 効果を使用して HUD を希望どおりにスタイルすると、レンダリングのバグが発生する可能性があることですが、これも時間の経過とともに解消されるはずです.
オプション Cは、私の知る限り、単一のキャンバス内では不可能です。別の 2D キャンバスを 3D キャンバスの上に重ねて、そこに HUD を描画することもできますが、その時点では、A と B のすべての問題を継承しており、利点はありません。おすすめする正当な理由が見当たりません。
多くのネイティブ 3D プラットフォームに対する WebGL の大きな利点の 1 つは、地球上で最も広く使用され、最も柔軟な UI フレームワークの 1 つ (HTML) に簡単にアクセスできることです。その利点を無視することは、目に見える利益がほとんどない途方もない努力になるでしょう. 利用可能なツールを使用し、それによって失われたミリ秒についてあまり気にしないでください。ゲームに取り組んでいる間に直面する問題ははるかに大きく、この特定の車輪を再発明しようとするよりも、時間と労力をそこに費やす方がはるかに良いことをお約束します.