2017-10-17 29 views
0

Je charge le modèle .obj dans Three.js et crée ensuite des maillages indépendants à partir de ses faces pour une animation réellement intéressante. Mais le problème est une très mauvaise performance avec autant de mailles.Three.js optimisation des performances avec 10000 mailles

En fait, maillage simple avec 10000 faces fonctionne magnifiquement. Mais les 10000 mailles séparées (créées à partir de ces faces) fonctionnent mal - même sans animation, juste une scène statique.

Comment puis-je optimiser les performances en sauvegardant une telle animation?

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

Voici le code crée des mailles:

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

Important: après la fin de l'animation je remplacer 10 000 mailles avec un maillage unique (objet d'origine du chargeur) - et vous peut voir une grande amélioration de la performance. Il ne s'agit pas d'animation - je l'ai vérifié: même sans animation, 10 000 mailles ont la même mauvaise performance. Si je comprends bien, il s'agit de différentes géométries dans chaque maillage. Mais je ne sais pas comment résoudre ce problème (

S'il vous plaît prendre en compte le fait que je ne fasse pas double emploi géométrie -. C'est le problème

+0

jetez un oeil à https://threejs.org/examples/?q=buffer#webgl_buffergeometry_instancing – gaitat

+0

Possible dupliquer de [Comment optimiser le rendu de nombreux sphereGeometry dans three.js?] (Https://stackoverflow.com/ questions/22028288/comment-optimiser-rendre-de-plusieurs-sphérgéométrie-en-trois-js) –

Répondre

0

la géométrie de chaque maille est unique Vous obtenez en tête de nombreux drawcalls et webGL changement d'état. le rendu comme l'un maillage est un appel nul vs 10.000.

Vous pouvez utiliser trois de InstancedBufferGeometry pour fusionner ces derniers dans un seul appel, sans dupliquer la géométrie (économisant ainsi à la fois la mémoire et les frais généraux).

Cette classe malheureusement ne fonctionne pas avec les matériaux par défaut, les ombres, etc. structure de bas niveau.

j'ai écrit une abstraction plus de ce qui devrait fonctionner sur le même niveau que THREE.Mesh et de travailler avec des ombres, AO, profondeur, etc.

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

1

Il existe déjà un certain nombre de réponses ici sur stackoverflow à propos de le coût de performance des tirages et des changements d'état, donc je ne vais pas entrer dans cela. Vous avez besoin d'obtenir le nombre de tirages vers le bas pour rendre efficacement. Comment faire est entièrement à votre problème et votre créativité. Ma suggestion serait d'utiliser une seule BufferGeometry: Vous pouvez simplement animer toutes les positions de vertex dans une seule géométrie de tampon. Vous devez conserver l'état (translation, rotation, etc.) en dehors de la géométrie, mais vous pouvez écrire du code qui transforme librement tous vos triangles comme s'il s'agissait d'objets uniques.