利点を失うことなくジオメトリ/メッシュをマージする

three.jsでは、ジオメトリをマージして、描画呼び出しの量を制限し、パフォーマンスを向上させることができます。1つのマテリアルを使用した簡単なテストで、GTX660 GPUに50.000のキューブ+ 60fpsのシャドウを描画できました。ジオメトリのマージがなければ、5,000の立方体がすでに問題を引き起こしています。

各キューブメッシュを独自にレンダリングする利点をどのように維持するのかと思います。たとえば、すべてが1つのジオメトリにマージされたときにキューブメッシュを選択するにはどうすればよいですか？もちろんそれはデフォルトでは不可能です。

この問題の一般的なテクニックはありますか？結局、マージした後でも、マージされていないメッシュオブジェクトはすべてあります。それで、それらをピッキングに利用するいくつかの方法があるに違いありませんか？

一言で言いたいこと

• 学習目的のゲームのようなSimCity
• 各家は立方体メッシュです
• 50.000家をレンダリングし、家を追加および削除できるようにしたい
• マウスカーソル（ピッキング）による家の選択が可能でなければならない

はい、分かりました。ジオメトリ全体をマージした後も、個々のメッシュが配列に残っています。そのため、レンダリングされていなくても、レイキャスティングにこれらのメッシュを使用できます。これを実現するのにしばらくかかりました。

ピッキングには、このoctree実装を使用します。http：//threejs.org/examples/#webgl_octree_raycasting

これにより、更新ごとの交差テストが50.000から〜500に下がります。octreeがないと、fpsは大幅に減少します。

オレンジのピッキングハルは、実際にはレンダリングされたメッシュ（+1の描画呼び出し）であり、マテリアルとサイズが変更されています。

したがって、次のステップは、ある種のマップ分割を実装することだと思います。つまり、マージされたジオメトリをいくつかの部分に分割します。これは、マージされたジオメトリに大量の頂点があるためです。つまり、マップを画面から99％移動すると、ジオメトリが少なくとも1％表示されているため、グラフィックスカードはすべての頂点を処理する必要があります。したがって、分割されている場合は、表示されている部分のみをレンダリングする必要があります。

ピッキングのために、各キューブのIDを別のレンダーターゲットにレンダーし、カーソルのID値を確認することもできます。利点は、ピッキングがピクセル完全であり、より複雑なジオメトリに対しても効率的に機能することです。

すべてのオブジェクトが同じジオメトリを持つ場合、インスタンス化されたレンダリングを使用できます。1つのストリームはジオメトリを定義し、もう1つのストリームはインスタンスごとのプロパティを定義します（変換など）。錐台カリングでは、可視性テストに基づいて各フレームのインスタンスストリームを構築する必要があります。大量のオブジェクトがある場合は、それらのオブジェクトをルーズオクツリーなどに配置して、カリングを高速化することができます。

three.jsの詳細についてはよくわかりませんが、一般的なOpenGLで考えられる2つのパフォーマンスの問題が頭に浮かびます。

1. インスタンス化を検討しましたか？描画呼び出しも1つだけ必要で、VRAMの使用量も少なくて済みます。
2. ピッキングアルゴリズムを真剣に検討しましたか？たとえば、キュ​​ーブの境界ボリュームがツリーではなくリストにある場合、その大きさの違いが説明されます。

あなたが取ることができる別のアプローチは、ジオメトリにいくつかの頂点属性を構築し、ハイライトロジックをフラグメントシェーダーに入れることです。これは、メモリにデータの2つのコピーを残したくない場合に非常に役立ち、ハイライトの実装方法をより詳細に制御できます。