Improved instancing example.

examples/webgl_instancing.html

@@ -16,8 +16,10 @@
 
 			var camera, scene, renderer, stats;
 
+			var mesh;
 			var amount = 12;
 			var count = Math.pow( amount, 3 );
+			var dummy = new THREE.Object3D();
 
 			init();
 			animate();
@@ -30,12 +32,10 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
 				var material = new THREE.MeshNormalMaterial();
-				// var material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } ); // overdraw
+				// check overdraw
+				// var material = new THREE.MeshBasicMaterial( { color: 0xff0000, opacity: 0.1, transparent: true } );
 
-			 	var mesh = new THREE.InstancedMesh( geometry, material, count );
-				scene.add( mesh );
 
 				var loader = new THREE.BufferGeometryLoader();
 				loader.load( 'models/json/suzanne_buffergeometry.json', function ( geometry ) {
@@ -43,7 +43,8 @@
 					geometry.computeVertexNormals();
 					geometry.scale( 0.5, 0.5, 0.5 );
 
-					mesh.geometry = geometry;
+					mesh = new THREE.InstancedMesh( geometry, material, count );
+					scene.add( mesh );
 
 				} );
 
@@ -81,43 +82,45 @@
 				requestAnimationFrame( animate );
 
 				render();
+
 				stats.update();
 
 			}
 
 			function render() {
 
-				var time = Date.now() * 0.001;
+				if ( mesh ) {
+
+					var time = Date.now() * 0.001;
 
-				var mesh = scene.children[ 0 ];
-				mesh.rotation.x = Math.sin( time / 4 );
-				mesh.rotation.y = Math.sin( time / 2 );
+					mesh.rotation.x = Math.sin( time / 4 );
+					mesh.rotation.y = Math.sin( time / 2 );
 
-				var dummy = new THREE.Object3D();
+					var i = 0;
 
-				var i = 0;
+					for ( var x = 0; x < amount; x ++ ) {
 
-				for ( var x = 0; x < amount; x ++ ) {
+						for ( var y = 0; y < amount; y ++ ) {
 
-					for ( var y = 0; y < amount; y ++ ) {
+							for ( var z = 0; z < amount; z ++ ) {
 
-						for ( var z = 0; z < amount; z ++ ) {
+								dummy.position.set( 6 - x, 6 - y, 6 - z );
+								dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );
+								dummy.rotation.z = dummy.rotation.y * 2;
 
-							dummy.position.set( 6 - x, 6 - y, 6 - z );
-							dummy.rotation.y = ( Math.sin( x / 4 + time ) + Math.sin( y / 4 + time ) + Math.sin( z / 4 + time ) );
-							dummy.rotation.z = dummy.rotation.y * 2;
+								dummy.updateMatrix();
 
-							dummy.updateMatrix();
+								mesh.setMatrixAt( i ++, dummy.matrix );
 
-							mesh.setMatrixAt( i ++, dummy.matrix );
+							}
 
 						}
 
 					}
 
-				}
+					mesh.instanceMatrix.needsUpdate = true;
 
-				mesh.instanceMatrix.needsUpdate = true;
+				}
 
 				renderer.render( scene, camera );