Examples: Simplify some buffer geometry examples

examples/webgl_buffergeometry.html

@@ -82,14 +82,14 @@
 
 				var geometry = new THREE.BufferGeometry();
 
-				var positions = new Float32Array( triangles * 3 * 3 );
-				var normals = new Float32Array( triangles * 3 * 3 );
-				var colors = new Float32Array( triangles * 3 * 3 );
+				var positions = [];
+				var normals = [];
+				var colors = [];
 
 				var color = new THREE.Color();
 
-				var n = 800, n2 = n/2;	// triangles spread in the cube
-				var d = 12, d2 = d/2;	// individual triangle size
+				var n = 800, n2 = n / 2;	// triangles spread in the cube
+				var d = 12, d2 = d / 2;	// individual triangle size
 
 				var pA = new THREE.Vector3();
 				var pB = new THREE.Vector3();
@@ -98,7 +98,7 @@
 				var cb = new THREE.Vector3();
 				var ab = new THREE.Vector3();
 
-				for ( var i = 0; i < positions.length; i += 9 ) {
+				for ( var i = 0; i < triangles; i ++ ) {
 
 					// positions
 
@@ -118,17 +118,9 @@
 					var cy = y + Math.random() * d - d2;
 					var cz = z + Math.random() * d - d2;
 
-					positions[ i ]     = ax;
-					positions[ i + 1 ] = ay;
-					positions[ i + 2 ] = az;
-
-					positions[ i + 3 ] = bx;
-					positions[ i + 4 ] = by;
-					positions[ i + 5 ] = bz;
-
-					positions[ i + 6 ] = cx;
-					positions[ i + 7 ] = cy;
-					positions[ i + 8 ] = cz;
+					positions.push( ax, ay, az );
+					positions.push( bx, by, bz );
+					positions.push( cx, cy, cz );
 
 					// flat face normals
 
@@ -146,17 +138,9 @@
 					var ny = cb.y;
 					var nz = cb.z;
 
-					normals[ i ]     = nx;
-					normals[ i + 1 ] = ny;
-					normals[ i + 2 ] = nz;
-
-					normals[ i + 3 ] = nx;
-					normals[ i + 4 ] = ny;
-					normals[ i + 5 ] = nz;
-
-					normals[ i + 6 ] = nx;
-					normals[ i + 7 ] = ny;
-					normals[ i + 8 ] = nz;
+					normals.push( nx, ny, nz );
+					normals.push( nx, ny, nz );
+					normals.push( nx, ny, nz );
 
 					// colors
 
@@ -166,25 +150,17 @@
 
 					color.setRGB( vx, vy, vz );
 
-					colors[ i ]     = color.r;
-					colors[ i + 1 ] = color.g;
-					colors[ i + 2 ] = color.b;
-
-					colors[ i + 3 ] = color.r;
-					colors[ i + 4 ] = color.g;
-					colors[ i + 5 ] = color.b;
-
-					colors[ i + 6 ] = color.r;
-					colors[ i + 7 ] = color.g;
-					colors[ i + 8 ] = color.b;
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
 				function disposeArray() { this.array = null; }
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
-				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'normal', new THREE.Float32BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
 
 				geometry.computeBoundingSphere();
 

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -85,15 +85,12 @@
 
 		var particles = 100000;
 
-		var WIDTH = window.innerWidth;
-		var HEIGHT = window.innerHeight;
-
 		init();
 		animate();
 
 		function init() {
 
-			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );
+			camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 			camera.position.z = 300;
 
 			scene = new THREE.Scene();
@@ -122,31 +119,29 @@
 
 			geometry = new THREE.BufferGeometry();
 
-			var positions = new Float32Array( particles * 3 );
-			var colors = new Float32Array( particles * 3 );
-			var sizes = new Float32Array( particles );
+			var positions = [];
+			var colors = [];
+			var sizes = [];
 
 			var color = new THREE.Color();
 
-			for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {
+			for ( var i = 0; i < particles; i ++ ) {
 
-				positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;
-				positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;
-				positions[ i3 + 2 ] = ( Math.random() * 2 - 1 ) * radius;
+				positions.push( ( Math.random() * 2 - 1 ) * radius );
+				positions.push( ( Math.random() * 2 - 1 ) * radius );
+				positions.push( ( Math.random() * 2 - 1 ) * radius );
 
 				color.setHSL( i / particles, 1.0, 0.5 );
 
-				colors[ i3 + 0 ] = color.r;
-				colors[ i3 + 1 ] = color.g;
-				colors[ i3 + 2 ] = color.b;
+				colors.push( color.r, color.g, color.b );
 
-				sizes[ i ] = 20;
+				sizes.push( 20 );;
 
 			}
 
-			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );
-			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );
+			geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+			geometry.addAttribute( 'customColor', new THREE.Float32BufferAttribute( colors, 3 ) );
+			geometry.addAttribute( 'size', new THREE.Float32BufferAttribute( sizes, 1 ) );
 
 			particleSystem = new THREE.Points( geometry, shaderMaterial );
 
@@ -154,7 +149,7 @@
 
 			renderer = new THREE.WebGLRenderer();
 			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( WIDTH, HEIGHT );
+			renderer.setSize( window.innerWidth, window.innerHeight );
 
 			var container = document.getElementById( 'container' );
 			container.appendChild( renderer.domElement );

examples/webgl_buffergeometry_lines.html

@@ -62,14 +62,13 @@
 
 				scene = new THREE.Scene();
 
-
 				var segments = 10000;
 
 				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
+				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
-				var positions = new Float32Array( segments * 3 );
-				var colors = new Float32Array( segments * 3 );
+				var positions = [];
+				var colors = [];
 
 				var r = 800;
 
@@ -81,20 +80,20 @@
 
 					// positions
 
-					positions[ i * 3 ] = x;
-					positions[ i * 3 + 1 ] = y;
-					positions[ i * 3 + 2 ] = z;
+					positions.push( x, y, z );
 
 					// colors
 
-					colors[ i * 3 ] = ( x / r ) + 0.5;
-					colors[ i * 3 + 1 ] = ( y / r ) + 0.5;
-					colors[ i * 3 + 2 ] = ( z / r ) + 0.5;
+
+
+					colors.push( ( x / r ) + 0.5 );
+					colors.push( ( y / r ) + 0.5 );
+					colors.push( ( z / r ) + 0.5 );
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 

examples/webgl_buffergeometry_lines_indexed.html

@@ -61,81 +61,95 @@
 				scene = new THREE.Scene();
 
 				var geometry = new THREE.BufferGeometry();
-				var material = new THREE.LineBasicMaterial({ vertexColors: THREE.VertexColors });
+				var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
+				var indices = [];
 				var positions = [];
-				var next_positions_index = 0;
 				var colors = [];
-				var indices_array = [];
+
+				var next_positions_index = 0;
 
 				//
 
 				var iteration_count = 4;
 				var rangle = 60 * Math.PI / 180.0;
 
-				function add_vertex(v) {
+				function add_vertex( v ) {
+
+					if ( next_positions_index == 0xffff ) console.error( 'Too many points.' );
+
+					positions.push( v.x, v.y, v.z );
+					colors.push( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
 
-					if (next_positions_index == 0xffff) throw new Error("Too many points");
+					return next_positions_index ++;
 
-					positions.push(v.x, v.y, v.z);
-					colors.push(Math.random()*0.5+0.5, Math.random()*0.5+0.5, 1);
-					return next_positions_index++;
 				}
 
 				// simple Koch curve
-				function snowflake_iteration(p0, p4, depth) {
+				
+				function snowflake_iteration( p0, p4, depth ) {
 
-					if (--depth < 0) {
+					if ( -- depth < 0 ) {
+
+						var i = next_positions_index - 1; // p0 already there
+						add_vertex( p4 );
+						indices.push( i, i + 1 );
 
-						var i = next_positions_index-1; // p0 already there
-						add_vertex(p4);
-						indices_array.push(i, i+1);
 						return;
+
 					}
 
-					var v = p4.clone().sub(p0);
-					var v_tier = v.clone().multiplyScalar(1.0/3.0);
-					var p1 = p0.clone().add(v_tier);
+					var v = p4.clone().sub( p0 );
+					var v_tier = v.clone().multiplyScalar( 1 / 3 );
+					var p1 = p0.clone().add( v_tier );
 
-					var angle = Math.atan2(v.y, v.x) + rangle;
+					var angle = Math.atan2( v.y, v.x ) + rangle;
 					var length = v_tier.length();
 					var p2 = p1.clone();
-					p2.x += Math.cos(angle) * length;
-					p2.y += Math.sin(angle) * length;
+					p2.x += Math.cos( angle ) * length;
+					p2.y += Math.sin( angle ) * length;
 
-					var p3 = p0.clone().add(v_tier).add(v_tier);
+					var p3 = p0.clone().add( v_tier ).add( v_tier );
+
+					snowflake_iteration( p0, p1, depth );
+					snowflake_iteration( p1, p2, depth );
+					snowflake_iteration( p2, p3, depth );
+					snowflake_iteration( p3, p4, depth );
 
-					snowflake_iteration(p0, p1, depth);
-					snowflake_iteration(p1, p2, depth);
-					snowflake_iteration(p2, p3, depth);
-					snowflake_iteration(p3, p4, depth);
 				}
 
-				function snowflake(points, loop, x_offset) {
+				function snowflake( points, loop, x_offset ) {
+
+					for ( var iteration = 0; iteration != iteration_count; iteration ++ ) {
 
-					for (var iteration = 0; iteration != iteration_count; ++iteration) {
+						add_vertex( points[ 0 ] );
+
+						for ( var p_index=0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
+
+							snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );
 
-						add_vertex(points[0]);
-						for (var p_index=0, p_count=points.length-1; p_index != p_count; ++p_index) {
-							snowflake_iteration(points[p_index], points[p_index+1], iteration);
 						}
 
-						if (loop) snowflake_iteration(points[points.length-1], points[0], iteration);
+						if ( loop ) snowflake_iteration( points[ points.length - 1 ], points[ 0 ], iteration );
 
 						// translate input curve for next iteration
-						for (var p_index=0, p_count=points.length; p_index != p_count; ++p_index) {
+
+						for ( var p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
+
 							points[p_index].x += x_offset;
+
 						}
 
 					}
+
 				}
 
 				var y = 0;
 				snowflake
 				(
 					[
-						new THREE.Vector3(0, y+0, 0),
-						new THREE.Vector3(500, y+0, 0)
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 500, y, 0 )
 					],
 					false, 600
 				);
@@ -144,9 +158,9 @@
 				snowflake
 				(
 					[
-						new THREE.Vector3(0, y+0, 0),
-						new THREE.Vector3(250, y+400, 0),
-						new THREE.Vector3(500, y+0, 0)
+						new THREE.Vector3( 0, y, 0) ,
+						new THREE.Vector3( 250, y + 400, 0 ),
+						new THREE.Vector3( 500, y, 0 )
 					],
 					true, 600
 				);
@@ -155,10 +169,10 @@
 				snowflake
 				(
 					[
-						new THREE.Vector3(0, y+0, 0),
-						new THREE.Vector3(500, y, 0),
-						new THREE.Vector3(500, y+500, 0),
-						new THREE.Vector3(0, y+500, 0)
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 500, y, 0 ),
+						new THREE.Vector3( 500, y + 500, 0 ),
+						new THREE.Vector3( 0, y + 500, 0 )
 					],
 					true, 600
 				);
@@ -167,21 +181,22 @@
 				snowflake
 				(
 					[
-						new THREE.Vector3(250, y+0, 0),
-						new THREE.Vector3(500, y+0, 0),
-						new THREE.Vector3(250, y+0, 0),
-						new THREE.Vector3(250, y+250, 0),
-						new THREE.Vector3(250, y+0, 0),
-						new THREE.Vector3(0, y, 0),
-						new THREE.Vector3(250, y+0, 0),
-						new THREE.Vector3(250, y-250, 0),
-						new THREE.Vector3(250, y+0, 0)
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 500, y, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 250, y + 250, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 0, y, 0 ),
+						new THREE.Vector3( 250, y, 0 ),
+						new THREE.Vector3( 250, y - 250, 0 ),
+						new THREE.Vector3( 250, y, 0 )
 					],
 					false, 600
 				);
-				// --------------------------------
 
-				geometry.setIndex( indices_array );
+				//
+
+				geometry.setIndex( indices );
 				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
 				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 				geometry.computeBoundingSphere();
@@ -191,7 +206,7 @@
 				mesh.position.y -= 1200;
 
 				parent_node = new THREE.Object3D();
-				parent_node.add(mesh);
+				parent_node.add( mesh );
 
 				scene.add( parent_node );
 
@@ -239,8 +254,6 @@
 
 				var time = Date.now() * 0.001;
 
-				//mesh.rotation.x = time * 0.25;
-				//mesh.rotation.y = time * 0.5;
 				parent_node.rotation.z = time * 0.5;
 
 				renderer.render( scene, camera );

examples/webgl_buffergeometry_points.html

@@ -69,14 +69,14 @@
 
 				var geometry = new THREE.BufferGeometry();
 
-				var positions = new Float32Array( particles * 3 );
-				var colors = new Float32Array( particles * 3 );
+				var positions = [];
+				var colors = [];
 
 				var color = new THREE.Color();
 
 				var n = 1000, n2 = n / 2; // particles spread in the cube
 
-				for ( var i = 0; i < positions.length; i += 3 ) {
+				for ( var i = 0; i < particles; i ++ ) {
 
 					// positions
 
@@ -84,9 +84,7 @@
 					var y = Math.random() * n - n2;
 					var z = Math.random() * n - n2;
 
-					positions[ i ]     = x;
-					positions[ i + 1 ] = y;
-					positions[ i + 2 ] = z;
+					positions.push( x, y, z );
 
 					// colors
 
@@ -96,14 +94,12 @@
 
 					color.setRGB( vx, vy, vz );
 
-					colors[ i ]     = color.r;
-					colors[ i + 1 ] = color.g;
-					colors[ i + 2 ] = color.b;
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ) );
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
 
 				geometry.computeBoundingSphere();
 

examples/webgl_buffergeometry_rawshader.html

@@ -113,30 +113,29 @@
 
 				var geometry = new THREE.BufferGeometry();
 
-				var vertices = new Float32Array( triangles * 3 * 3 );
+				var positions = [];
+				var colors = [];
 
-				for ( var i = 0, l = triangles * 3 * 3; i < l; i += 3 ) {
+				for ( var i = 0; i < triangles; i ++ ) {
 
-					vertices[ i     ] = Math.random() - 0.5;
-					vertices[ i + 1 ] = Math.random() - 0.5;
-					vertices[ i + 2 ] = Math.random() - 0.5;
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
+					positions.push( Math.random() - 0.5 );
 
-				}
-
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) );
-
-				var colors = new Uint8Array( triangles * 3 * 4 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
+					colors.push( Math.random() * 255 );
 
-				for ( var i = 0, l = triangles * 3 * 4; i < l; i += 4 ) {
+				}
 
-					colors[ i     ] = Math.random() * 255;
-					colors[ i + 1 ] = Math.random() * 255;
-					colors[ i + 2 ] = Math.random() * 255;
-					colors[ i + 3 ] = Math.random() * 255;
+				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
 
-				}
+				colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
 
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 4, true ) );
+				geometry.addAttribute( 'position', positionAttribute );
+				geometry.addAttribute( 'color', colorAttribute );
 
 				// material
 

examples/webgl_buffergeometry_uint.html

@@ -82,22 +82,15 @@
 
 				var geometry = new THREE.BufferGeometry();
 
-				var indices = new Uint32Array( triangles * 3 );
-
-				for ( var i = 0; i < indices.length; i ++ ) {
-
-					indices[ i ] = i;
-
-				}
-
-				var positions = new Float32Array( triangles * 3 * 3 );
-				var normals = new Int16Array( triangles * 3 * 3 );
-				var colors = new Uint8Array( triangles * 3 * 3 );
+				var indices = [];
+				var positions = [];
+				var normals = [];
+				var colors = [];
 
 				var color = new THREE.Color();
 
-				var n = 800, n2 = n/2;	// triangles spread in the cube
-				var d = 12, d2 = d/2;	// individual triangle size
+				var n = 800, n2 = n / 2;	// triangles spread in the cube
+				var d = 12, d2 = d / 2;	// individual triangle size
 
 				var pA = new THREE.Vector3();
 				var pB = new THREE.Vector3();
@@ -106,7 +99,7 @@
 				var cb = new THREE.Vector3();
 				var ab = new THREE.Vector3();
 
-				for ( var i = 0; i < positions.length; i += 9 ) {
+				for ( var i = 0; i < triangles; i ++ ) {
 
 					// positions
 
@@ -126,17 +119,9 @@
 					var cy = y + Math.random() * d - d2;
 					var cz = z + Math.random() * d - d2;
 
-					positions[ i ]     = ax;
-					positions[ i + 1 ] = ay;
-					positions[ i + 2 ] = az;
-
-					positions[ i + 3 ] = bx;
-					positions[ i + 4 ] = by;
-					positions[ i + 5 ] = bz;
-
-					positions[ i + 6 ] = cx;
-					positions[ i + 7 ] = cy;
-					positions[ i + 8 ] = cz;
+					positions.push( ax, ay, az );
+					positions.push( bx, by, bz );
+					positions.push( cx, cy, cz );
 
 					// flat face normals
 
@@ -154,17 +139,9 @@
 					var ny = cb.y;
 					var nz = cb.z;
 
-					normals[ i ]     = nx * 32767;
-					normals[ i + 1 ] = ny * 32767;
-					normals[ i + 2 ] = nz * 32767;
-
-					normals[ i + 3 ] = nx * 32767;
-					normals[ i + 4 ] = ny * 32767;
-					normals[ i + 5 ] = nz * 32767;
-
-					normals[ i + 6 ] = nx * 32767;
-					normals[ i + 7 ] = ny * 32767;
-					normals[ i + 8 ] = nz * 32767;
+					normals.push( nx * 32767, ny * 32767, nz * 32767 );
+					normals.push( nx * 32767, ny * 32767, nz * 32767 );
+					normals.push( nx * 32767, ny * 32767, nz * 32767 );
 
 					// colors
 
@@ -174,24 +151,22 @@
 
 					color.setRGB( vx, vy, vz );
 
-					colors[ i ]     = color.r * 255;
-					colors[ i + 1 ] = color.g * 255;
-					colors[ i + 2 ] = color.b * 255;
+					colors.push( color.r * 255, color.g * 255, color.b * 255 );
+					colors.push( color.r * 255, color.g * 255, color.b * 255 );
+					colors.push( color.r * 255, color.g * 255, color.b * 255 );
 
-					colors[ i + 3 ] = color.r * 255;
-					colors[ i + 4 ] = color.g * 255;
-					colors[ i + 5 ] = color.b * 255;
+				}
 
-					colors[ i + 6 ] = color.r * 255;
-					colors[ i + 7 ] = color.g * 255;
-					colors[ i + 8 ] = color.b * 255;
+				var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
+				var normalAttribute = new THREE.Int16BufferAttribute( normals, 3 );
+				var colorAttribute = new THREE.Uint8BufferAttribute( colors, 3 );
 
-				}
+				normalAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
+				colorAttribute.normalized = true;
 
-				geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );
-				geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
-				geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3, true ) );
-				geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3, true ) );
+				geometry.addAttribute( 'position', positionAttribute );
+				geometry.addAttribute( 'normal',  normalAttribute );
+				geometry.addAttribute( 'color',colorAttribute );
 
 				geometry.computeBoundingSphere();