Three.js Leistungsoptimierung mit 10000 Meshes

Question

Ich lade .obj Modell in Three.js und dann unabhängige Meshes von seinen Gesichtern für wirklich interessante Animation. Aber das Problem ist eine sehr schlechte Leistung mit so vielen Maschen.

In der Tat funktioniert einzelne Masche mit 10000 Gesichter wunderbar. Aber getrennte 10000 Meshes (erstellt aus diesen Gesichtern) funktionieren schlecht - auch ohne Animation, nur statische Szene.

Wie kann ich die Leistung beim Speichern solcher Animationen optimieren?

-Link: http://intelligence-group.ru/test.html

Hier ist der Code schafft Maschen:

` 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); 
     } 
    );` 

Wichtig: nach Abschluss der Animation ersetzen i 10 000 Maschen mit einem einzigen Mesh (Originalobjekt aus loader) - und dann Sie kann große Verbesserung der Leistung sehen. Es geht nicht um Animation - ich habe es überprüft: Auch ohne Animation haben 10 000 Mesh die gleiche schlechte Performance.

Wie ich verstehe, geht es um verschiedene Geometrien in jedem Mesh. Aber ich weiß nicht, wie dieses Problem zu lösen (

Bitte berücksichtigen Sie, dass ich Geometrie nicht duplizieren -.! Jede Geometrie der Mesh ist einzigartig Das ist das Problem

Answer 1

Sie erhalten über Kopf aus vielen drawcalls und webgl Zustandsänderung. als ein Mesh-Rendering ist ein einziger Anruf Unentschieden gegen 10.000.

Sie drei die verwenden können InstancedBufferGeometry diese in einem Aufruf zu verschmelzen, ohne die Geometrie zu duplizieren (also sowohl Speicher und Overhead zu speichern).

Diese Klasse funktioniert leider nicht mit Standardmaterialien, Schatten etc. Es ist ein fairer Struktur auf niedriger Ebene

Ich schrieb eine weitere Abstraktion davon, die auf dem gleichen Niveau wie THREE.Mesh und arbeiten mit Schatten, AO, Tiefe usw.

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

Answer 2

Es gibt bereits eine Reihe von Antworten hier auf Stackoverflow arbeiten sollten über die Performance-Kosten von Drawcalls und State-Changes, damit ich darauf nicht eingehen werde. Sie müssen die Anzahl der Drawcalls herunterregeln, um effizient zu rendern. Wie Sie das tun, hängt vollständig von Ihrem genauen Problem und Ihrer Kreativität ab.

Mein Vorschlag wäre, eine einzelne BufferGeometry zu verwenden: Sie könnten nur alle Vertex-Positionen innerhalb einer einzigen Puffer-Geometrie animieren. Sie müssen den Status (Translation, Rotation usw.) außerhalb der Geometrie beibehalten, aber Sie können Code schreiben, der alle Ihre Dreiecke frei transformiert, als wären sie einzelne Objekte.