10000メッシュのThree.jsパフォーマンスの最適化

Question

Three.jsで.objモデルをロードし、面から独立したメッシュを作成して本当に面白いアニメーションを作成します。しかし、この問題は、あまりにも多くのメッシュでは非常に悪いパフォーマンスです。

実際、10000面の単一メッシュは美しく機能します。しかし、分離された10000メッシュ（これらの面から作成されたもの）は、アニメーションなしであっても、静的シーンであってもひどく機能します。

このようなアニメーションを保存してパフォーマンスを最適化するにはどうすればよいですか？

リンク：ここhttp://intelligence-group.ru/test.html

は、コードの作成メッシュです：

` obj_loader.load(
     '/assets/models/zeus.obj', 
     function(object) { 

      var material = new THREE.MeshPhongMaterial({ 
        color: "#eeeeee", 
        shading: THREE.FlatShading, 
        metalness: 0, 
        roughness: 0.5, 
        refractionRatio: 0.25 
      }); 

      var face = new THREE.Face3(0, 1, 2); 

      for (var i = 0; i < object.children.length; i++) { 
       var child = object.children[i]; 
       var geometry = new THREE.Geometry().fromBufferGeometry(child.geometry); 

       for (var i = 0; i < geometry.faces.length; i++) { 
        var new_geometry = new THREE.Geometry(); 
        var a = geometry.faces[i].a; 
        var b = geometry.faces[i].b; 
        var c = geometry.faces[i].c; 
        new_geometry.vertices.push(geometry.vertices[a]); 
        new_geometry.vertices.push(geometry.vertices[b]); 
        new_geometry.vertices.push(geometry.vertices[c]); 

        new_geometry.faces.push(face); 
        new_geometry.computeFaceNormals(); 

        var mesh = new THREE.Mesh(new_geometry, material); 
        group.add(mesh); 
       } 

       full_orig_array(group); //animation function - not the reason of bad optimization! 
      } 

      scene.add(group); 
     } 
    );` 

重要：アニメーションが完了した後、私は1つのメッシュ（ローダーからオリジナルのオブジェクト）で10の000メッシュを置き換える - そして、あなたパフォーマンスの大幅な向上が見られます。それはアニメーションではありません - 私はそれをチェックしました：アニメーションなしでも10 000メッシュは同じ悪い性能を持っています。

私が理解するように、それは各メッシュの異なるジオメトリについてです。しかし、私は（

をこの問題を解決する方法がわからない私は、ジオメトリを複製していないことを考慮に入れてください - 。！各メッシュのジオメトリは一意であることが問題である

Answer 1

あなたは多くのdrawcallsからオーバーヘッド取得し、 WebGLの状態変化。1つのメッシュは10.000対単一の描画呼び出しであるとしてレンダリング。

あなたは（したがって、メモリとオーバーヘッドの両方を節約）ジオメトリを複製せずに、1つのコールにこれらをマージするために3つのInstancedBufferGeometryを使用することができます。

このクラスは残念なことに、デフォルトのマテリアルやシャドウなどでは機能しません。それはかなりです低レベルの構造体。

私は回答数がここ程度のstackoverflowにすでに存在するなどの深さ、AO、

https://www.npmjs.com/package/three-instanced-mesh

Answer 2

をTHREE.Meshと同じレベルに取り組み、影で動作するはずです。このの更なる抽象化を書きましたドローコールと州の変更のパフォーマンスコストので、私はそれに入ることはありません。ドローコールの数を減らして効率的にレンダリングする必要があります。それを行う方法は、あなたの正確な問題とあなたの創造性に完全に従います。

単一のBufferGeometryを使用することをお勧めします。単一のバッファジオメトリ内のすべての頂点位置をアニメーション化するだけで済みます。ジオメトリの外側に状態（翻訳、回転など）を維持する必要がありますが、すべての三角形を単一のオブジェクトのように自由に変換するコードを記述することができます。