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
jetez un oeil à https://threejs.org/examples/?q=buffer#webgl_buffergeometry_instancing – gaitat
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) –