three.jsで3Dテクスチャを使用して何百万ものボクセルをレンダリングする

Question

ボクセル表現を三角形のセットとしてレンダリングするためにthree.jsを使用しています。私は500万の三角形を快適にレンダリングしましたが、それは限界であるようです。それをオンラインで見ることができますhere。

解像度3でダブリンモデルを選択すると、多くの三角形が描画されます。

私は今のところこれを取得するには、すべてのトリックを使用していた（バッファジオメトリ、ボクセルカリング、複数のバッファ）が、私はそれはOpenGLの三角形が達成できる最大量をヒットしていると思います。

通常、大量のボクセルは3Dテクスチャの画像セットとしてレンダリングされますが、2Dテクスチャを3Dテクスチャにハックする方法についてはいくつかの記事がありますが、テクスチャサイズに最大限の制限があるようです。

私はこのアプローチを使用してチュートリアルや例を検索しましたが、何も見つかりませんでした。誰もがこのアプローチをthree.jsで使用していました

Answer 1

あなたのシーンは2倍にレンダリングされます。あなたはWEBGL_depth_texture拡張子 - which have pretty good supportを使うことができます - ただ一つのレンダーパスが必要です。拡張機能が利用できない場合、低パーパス - ダブルパスにフォールバックすることができます。

あなたのボクセルの素材は両面です。それは意図的なことかもしれませんが、それは巨額の借り入れを作り出すかもしれません。

デモでは、MeshPhongMaterialと指向性ライトを使用します。これは不必要に複雑な素材です。ジオメトリには法線がないため、照明を使用できません。より単純な消灯材を使用してください。

• は、前処理、あなたのジオメトリにhttps://github.com/GPUOpen-Tools/amd-tootleようなものを試してみてください。

  あなたの目標は、そのフレームレートが頂点シェーダに拘束されると仮定すると、頂点の膨大な量をレンダリングすることです。プリフェッチ頂点キャッシュと頂点キャッシュに焦点を当てる。

• 頂点バッファが使用する帯域幅を減らします。頂点は「グリッド」上に配置されているので、頂点の位置を3つの浮動小数点数ではなく3つの浮動小数点数として保存することができ、VBOのサイズを2減らすことができます。あなただけvec3位置よりも多くの属性が必要な場合）

• は、一般的に、1つの単一のインターリーブVBOを使用する代わりに、ATTRIBあたり1、フラグメントシェーダ

• が必要とする可変長の量を減らします。