Examples: Use InstancedMesh when possible.

examples/misc_controls_map.html

@@ -81,21 +81,25 @@
 				geometry.translate( 0, 0.5, 0 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 1600 - 800;
-					mesh.position.y = 0;
-					mesh.position.z = Math.random() * 1600 - 800;
-					mesh.scale.x = 20;
-					mesh.scale.y = Math.random() * 80 + 10;
-					mesh.scale.z = 20;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = Math.random() * 1600 - 800;
+					dummy.position.y = 0;
+					dummy.position.z = Math.random() * 1600 - 800;
+					dummy.scale.x = 20;
+					dummy.scale.y = Math.random() * 80 + 10;
+					dummy.scale.z = 20;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );

examples/misc_controls_orbit.html

@@ -79,18 +79,22 @@
 				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 1600 - 800;
-					mesh.position.y = 0;
-					mesh.position.z = Math.random() * 1600 - 800;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = Math.random() * 1600 - 800;
+					dummy.position.y = 0;
+					dummy.position.z = Math.random() * 1600 - 800;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );

examples/misc_controls_trackball.html

@@ -69,18 +69,22 @@
 				const geometry = new THREE.ConeGeometry( 10, 30, 4, 1 );
 				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
 
+				const mesh = new THREE.InstancedMesh( geometry, material, 500 );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < 500; i ++ ) {
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.y = ( Math.random() - 0.5 ) * 1000;
-					mesh.position.z = ( Math.random() - 0.5 ) * 1000;
-					mesh.updateMatrix();
-					mesh.matrixAutoUpdate = false;
-					scene.add( mesh );
+					dummy.position.x = ( Math.random() - 0.5 ) * 1000;
+					dummy.position.y = ( Math.random() - 0.5 ) * 1000;
+					dummy.position.z = ( Math.random() - 0.5 ) * 1000;
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				// lights
 
 				const dirLight1 = new THREE.DirectionalLight( 0xffffff, 3 );

examples/webgl_depth_texture.html

@@ -189,23 +189,29 @@
 				const count = 50;
 				const scale = 5;
 
+				const mesh = new THREE.InstancedMesh( geometry, material, count );
+				const dummy = new THREE.Object3D();
+
 				for ( let i = 0; i < count; i ++ ) {
 
 					const r = Math.random() * 2.0 * Math.PI;
 					const z = ( Math.random() * 2.0 ) - 1.0;
 					const zScale = Math.sqrt( 1.0 - z * z ) * scale;
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.set(
+					dummy.position.set(
 						Math.cos( r ) * zScale,
 						Math.sin( r ) * zScale,
 						z * scale
 					);
-					mesh.rotation.set( Math.random(), Math.random(), Math.random() );
-					scene.add( mesh );
+					dummy.rotation.set( Math.random(), Math.random(), Math.random() );
+
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 			}
 
 			function onWindowResize() {

examples/webgl_postprocessing_fxaa.html

@@ -82,24 +82,28 @@
 				const geometry = new THREE.TetrahedronGeometry( 10 );
 				const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );
 
-				for ( let i = 0; i < 100; i ++ ) {
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
 
-					const mesh = new THREE.Mesh( geometry, material );
+				for ( let i = 0; i < 100; i ++ ) {
 
-					mesh.position.x = Math.random() * 500 - 250;
-					mesh.position.y = Math.random() * 500 - 250;
-					mesh.position.z = Math.random() * 500 - 250;
+					dummy.position.x = Math.random() * 500 - 250;
+					dummy.position.y = Math.random() * 500 - 250;
+					dummy.position.z = Math.random() * 500 - 250;
 
-					mesh.scale.setScalar( Math.random() * 2 + 1 );
+					dummy.scale.setScalar( Math.random() * 2 + 1 );
 
-					mesh.rotation.x = Math.random() * Math.PI;
-					mesh.rotation.y = Math.random() * Math.PI;
-					mesh.rotation.z = Math.random() * Math.PI;
+					dummy.rotation.x = Math.random() * Math.PI;
+					dummy.rotation.y = Math.random() * Math.PI;
+					dummy.rotation.z = Math.random() * Math.PI;
 
-					scene.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				scene.add( mesh );
+
 				//
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_postprocessing_glitch.html

@@ -80,20 +80,31 @@
 				scene.add( object );
 
 				const geometry = new THREE.SphereGeometry( 1, 4, 4 );
+				const material = new THREE.MeshPhongMaterial( { flatShading: true } );
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 100; i ++ ) {
 
-					const material = new THREE.MeshPhongMaterial( { color: 0xffffff * Math.random(), flatShading: true } );
+					dummy.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
+					dummy.position.multiplyScalar( Math.random() * 400 );
+					dummy.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
+
+					const scale = Math.random() * 50;
+					dummy.scale.set( scale, scale, scale );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 ).normalize();
-					mesh.position.multiplyScalar( Math.random() * 400 );
-					mesh.rotation.set( Math.random() * 2, Math.random() * 2, Math.random() * 2 );
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 50;
-					object.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
+
+					color.setHex( 0xffffff * Math.random() );
+					mesh.setColorAt( i, color );
 
 				}
 
+				object.add( mesh );
+
 				scene.add( new THREE.AmbientLight( 0xcccccc ) );
 
 				light = new THREE.DirectionalLight( 0xffffff, 3 );

examples/webgl_postprocessing_sao.html

@@ -84,27 +84,36 @@
 				scene.add( light4 );
 
 				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
+				const material = new THREE.MeshStandardMaterial();
+				material.roughness = 0.5;
+				material.metalness = 0;
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 120 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 120; i ++ ) {
 
-					const material = new THREE.MeshStandardMaterial();
-					material.roughness = 0.5 * Math.random() + 0.25;
-					material.metalness = 0;
-					material.color.setHSL( Math.random(), 1.0, 0.3 );
+					dummy.position.x = Math.random() * 4 - 2;
+					dummy.position.y = Math.random() * 4 - 2;
+					dummy.position.z = Math.random() * 4 - 2;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					const scale = Math.random() * 0.2 + 0.05;
+					dummy.scale.set( scale, scale, scale );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 4 - 2;
-					mesh.position.y = Math.random() * 4 - 2;
-					mesh.position.z = Math.random() * 4 - 2;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 0.2 + 0.05;
-					group.add( mesh );
+					color.setHSL( Math.random(), 1.0, 0.3 );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgl_postprocessing_ssaa.html

@@ -138,27 +138,35 @@
 				scene.add( light4 );
 
 				const geometry = new THREE.SphereGeometry( 3, 48, 24 );
+				const material = new THREE.MeshStandardMaterial();
+				material.roughness = 0.5;
+				material.metalness = 0;
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 120 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 120; i ++ ) {
 
-					const material = new THREE.MeshStandardMaterial();
-					material.roughness = 0.5 * Math.random() + 0.25;
-					material.metalness = 0;
-					material.color.setHSL( Math.random(), 1.0, 0.3 );
+					dummy.position.x = Math.random() * 4 - 2;
+					dummy.position.y = Math.random() * 4 - 2;
+					dummy.position.z = Math.random() * 4 - 2;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					dummy.scale.setScalar( Math.random() * 0.2 + 0.05 );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 4 - 2;
-					mesh.position.y = Math.random() * 4 - 2;
-					mesh.position.z = Math.random() * 4 - 2;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.setScalar( Math.random() * 0.2 + 0.05 );
-					group.add( mesh );
+					color.setHSL( Math.random(), 1.0, 0.3 );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				// postprocessing
 
 				composer = new EffectComposer( renderer );

examples/webgl_postprocessing_ssao.html

@@ -67,26 +67,33 @@
 				scene.add( group );
 
 				const geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				const material = new THREE.MeshLambertMaterial();
+
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
+				const color = new THREE.Color();
 
 				for ( let i = 0; i < 100; i ++ ) {
 
-					const material = new THREE.MeshLambertMaterial( {
-						color: Math.random() * 0xffffff
-					} );
+					dummy.position.x = Math.random() * 400 - 200;
+					dummy.position.y = Math.random() * 400 - 200;
+					dummy.position.z = Math.random() * 400 - 200;
+					dummy.rotation.x = Math.random();
+					dummy.rotation.y = Math.random();
+					dummy.rotation.z = Math.random();
+
+					dummy.scale.setScalar( Math.random() * 10 + 2 );
 
-					const mesh = new THREE.Mesh( geometry, material );
-					mesh.position.x = Math.random() * 400 - 200;
-					mesh.position.y = Math.random() * 400 - 200;
-					mesh.position.z = Math.random() * 400 - 200;
-					mesh.rotation.x = Math.random();
-					mesh.rotation.y = Math.random();
-					mesh.rotation.z = Math.random();
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
-					mesh.scale.setScalar( Math.random() * 10 + 2 );
-					group.add( mesh );
+					color.setHex( Math.random() * 0xffffff );
+					mesh.setColorAt( i, color );
 
 				}
 
+				group.add( mesh );
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 

examples/webgpu_postprocessing_fxaa.html

@@ -75,24 +75,27 @@
 				const geometry = new THREE.TetrahedronGeometry();
 				const material = new THREE.MeshStandardMaterial( { color: 0xf73232, flatShading: true } );
 
-				for ( let i = 0; i < 100; i ++ ) {
+				const mesh = new THREE.InstancedMesh( geometry, material, 100 );
+				const dummy = new THREE.Object3D();
 
-					const mesh = new THREE.Mesh( geometry, material );
+				for ( let i = 0; i < 100; i ++ ) {
 
-					mesh.position.x = Math.random() * 50 - 25;
-					mesh.position.y = Math.random() * 50 - 25;
-					mesh.position.z = Math.random() * 50 - 25;
+					dummy.position.x = Math.random() * 50 - 25;
+					dummy.position.y = Math.random() * 50 - 25;
+					dummy.position.z = Math.random() * 50 - 25;
 
-					mesh.scale.setScalar( Math.random() * 2 + 1 );
+					dummy.scale.setScalar( Math.random() * 2 + 1 );
 
-					mesh.rotation.x = Math.random() * Math.PI;
-					mesh.rotation.y = Math.random() * Math.PI;
-					mesh.rotation.z = Math.random() * Math.PI;
+					dummy.rotation.x = Math.random() * Math.PI;
+					dummy.rotation.y = Math.random() * Math.PI;
+					dummy.rotation.z = Math.random() * Math.PI;
 
-					group.add( mesh );
+					dummy.updateMatrix();
+					mesh.setMatrixAt( i, dummy.matrix );
 
 				}
 
+				group.add( mesh );
 				scene.add( group );
 
 				renderer = new THREE.WebGPURenderer();