Three.js使用10000個網格進行性能優化

我在Three.js中加載.obj模型，然後從其面上創建獨立的網格以獲得真正有趣的動畫。但是，這個問題是一個非常糟糕的表現，如此多的網格。Three.js使用10000個網格進行性能優化

實際上，單面網面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); 
     } 
    );`

重要：動畫完成後我代替10個000齧合一個單目（從裝載機原始對象） - 然後你可以看到性能的大幅提升。這不是關於動畫 - 我檢查過它：即使沒有動畫，10000個網格也有相同的不良表現。

據我所知，它是關於每個網格中不同的幾何形狀。但我不知道如何解決這個問題（

請考慮，我不重複的幾何圖形 - ！每個網格的形狀都是獨一無二的也就是這個問題

來源

2017-10-17 Потапов Петр

看看https://threejs.org/examples/?q=buffer#webgl_buffergeometry_instancing – gaitat

[如何優化three.js中許多sphereGeometry的渲染？]（https://stackoverflow.com/問題/ 22028288 /如何對優化渲染-的一對多-spheregeometry，在三-JS） –

您從衆多drawcalls得到開銷和WebGL的狀態變化。渲染爲一個網格是一個單一的繪製調用VS 10.000

您可以使用三種的InstancedBufferGeometry這些合併成一個呼叫，而無需重複的幾何形狀（從而節省了內存和開銷）。

這不幸的是，它不適用於默認材質，陰影等。這是相當的低級別的結構。

我寫的這進一步抽象，應該在同一水平作爲工作和THREE.Mesh與陰影，AO，深度合作等

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

來源

2017-10-17 20:45:23 pailhead

已經有許多的答案在這裏對計算器抽獎和狀態變化的性能成本，所以我不會進入這一點。您需要獲取有效渲染的drawcalls數量。如何做到這一點完全取決於你確切的問題和你的創造力。

我的建議是使用單個BufferGeometry：您可以在單個緩衝區幾何體內爲所有頂點位置設置動畫。您需要將狀態（平移，旋轉等）保持在幾何圖形之外，但是您可以編寫可自由轉換所有三角形的代碼，就好像它們是單個對象一樣。

來源

2017-10-17 23:06:33

Three.js使用10000個網格進行性能優化

回答

相關問題