Shader Learn

08 Lo que Three.js escribe por ti

Instancias: diez mil en una llamada de dibujo

Las mismas cajas, dibujadas como mallas separadas y como un solo InstancedMesh.

Arrastra para girar
2100
Explicación

Arrastra los números subrayados a izquierda y derecha

const mesh = new THREE.InstancedMesh(  geometry, material, );for (let i = 0; i < count; i++) {  matrix.setPosition(x, 0, z);  mesh.setMatrixAt(i, matrix);}scene.add(mesh); // 1 llamada de dibujo
draw calls–· triángulos–
Llamada de dibujoCada vez que la CPU pide a la GPU dibujar un lote de triángulos. Más llamadas, más trabajo para la CPU.

Cada Mesh es una llamada de dibujo; un InstancedMesh dibuja miles de copias en una sola llamada.

Pruébalo

  • Con «Mallas separadas», sube la cantidad y observa cómo crecen las llamadas
  • Cambia a InstancedMesh: las llamadas se reducen a 1