Merge branch 'gpgpu_birds_buffer' of https://github.com/zz85/three.js into dev

Conflicts:
	examples/webgl_gpgpu_birds.html

examples/js/SimulatorRenderer.js → examples/js/SimulationRenderer.js

@@ -10,7 +10,7 @@
  *
  */
 
-function SimulatorRenderer(WIDTH, renderer) {
+function SimulationRenderer(WIDTH, renderer) {
 
 	WIDTH = WIDTH || 4;
 	var camera = new THREE.Camera();

examples/webgl_gpgpu_birds.html

@@ -43,11 +43,10 @@
 		<script src="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 
-		<script src="js/SimulatorRenderer.js"></script>
+		<script src="js/SimulationRenderer.js"></script>
 
 		<!--
 		TODO: If you're reading this, you may wish to improve this example by
-			- Replacing the custom BirdGeometry with a BufferGeometry?
 			- Create a better shading for the birds?
 			- Refactoring the SimulationRenderer to a more generic TextureRenderer / making the GPGPU workflow easier?
 
@@ -289,8 +288,6 @@
 			uniform sampler2D texturePosition;
 			uniform sampler2D textureVelocity;
 
-			varying vec3 vNormal;
-			varying vec2 vUv;
 			varying vec4 vColor;
 			varying float z;
 
@@ -298,8 +295,6 @@
 
 			void main() {
 
-				vNormal = normal;
-
 				vec4 tmpPos = texture2D( texturePosition, reference );
 				vec3 pos = tmpPos.xyz;
 				vec3 velocity = normalize(texture2D( textureVelocity, reference ).xyz);
@@ -352,8 +347,6 @@
 		<!-- bird geometry shader -->
 		<script type="x-shader/x-fragment" id="birdFS">
 
-			varying vec3 vNormal;
-			varying vec2 vUv;
 			varying vec4 vColor;
 			varying float z;
 
@@ -364,15 +357,6 @@
 				float z2 = 0.2 + ( 1000. - z ) / 1000. * vColor.x;
 				gl_FragColor = vec4( z2, z2, z2, 1. );
 
-				// vec3 light = vec3( 0.0, 1.0, 1.0 );
-				// light = normalize( light );
-				// float dProd = dot( vNormal, light ) ; //* 0.5 + 0.5;
-				// vec4 tcolor = vColor;
-				// vec4 gray = vec4( vec3( tcolor.r * 0.3 + tcolor.g * 0.59 + tcolor.b * 0.11 ), 1.0 );
-
-				// gl_FragColor =  gray * dProd;
-				// gl_FragColor =  vec4( dProd  * tcolor );
-
 			}
 
 		</script>
@@ -388,89 +372,94 @@
 			/* TEXTURE WIDTH FOR SIMULATION */
 			var WIDTH = hash || 32; 
 
-			var BIRDS = 1024;
+			var BIRDS = WIDTH * WIDTH;
 
-			// Custom Geometry
+			// Custom Geometry - using 3 triangles each. No UVs, no normals currently.
 			THREE.BirdGeometry = function () {
 
-				THREE.Geometry.call( this );
+				var triangles = BIRDS * 3;
+				var points = triangles * 3;
+
+				THREE.BufferGeometry.call( this );
+				// THREE.Geometry2.call( this, points );
+
+				var vertices = new Float32Array( points * 3 );
+				var birdColors = new Float32Array( points * 3 );
+				var references = new Float32Array( points * 2 );
+				var birdVertex = new Float32Array( points );
 
-				BIRDS = WIDTH * WIDTH;
+				this.addAttribute( 'position', vertices, 3 );
+				this.addAttribute( 'birdColor', birdColors, 3 );
+				this.addAttribute( 'reference', references, 2 );
+				this.addAttribute( 'birdVertex', birdVertex, 1 );
 
-				var verts = this.vertices;
-				var faces = this.faces;
-				var uvs = this.faceVertexUvs[ 0 ];
+				// this.addAttribute( 'normal', new Float32Array( points * 3 ), 3 );
+
+
+				var v = 0;
+
+				function verts_push() {
+					for (var i=0; i < arguments.length; i++) {
+						vertices[v++] = arguments[i];
+					}
+				}
 
-				var fi = 0;
+				var wingsSpan = 20;
 
 				for (var f = 0; f<BIRDS; f++ ) {
-					verts.push(
-						new THREE.Vector3(0, -0, -20),
-						new THREE.Vector3(0, 4, -20),
-						new THREE.Vector3(0, 0, 30)
+
+					// Body
+					verts_push(
+						0, -0, -20,
+						0, 4, -20,
+						0, 0, 30
 					);
 
-					faces.push(new THREE.Face3(
-						fi++,
-						fi++,
-						fi++
-					));
+					// Left Wing
+					verts_push(
+						0, 0, -15,
+						-wingsSpan, 0, 0,
+						0, 0, 15
+					);
 
-					uvs.push([
-						new THREE.Vector2(0, 0),
-						new THREE.Vector2(0, 1),
-						new THREE.Vector2(1, 1)
-					]);
+					// Right Wing
+					verts_push(
+						0, 0, 15,
+						wingsSpan, 0, 0,
+						0, 0, -15
+					);
 
-					var wingsSpan = 20;
+				}
 
-					verts.push(
-						new THREE.Vector3(0, 0, -15),
-						new THREE.Vector3(-wingsSpan, 0, 0),
-						new THREE.Vector3(0, 0, 15)
-					);
+				for( var v = 0; v < triangles * 3; v++ ) {
 
-					verts.push(
-						new THREE.Vector3(0, 0, 15),
-						new THREE.Vector3(wingsSpan, 0, 0),
-						new THREE.Vector3(0, 0, -15)
+					var i = ~~(v / 3);
+					var x = (i % WIDTH) / WIDTH;
+					var y = ~~(i / WIDTH) / WIDTH;
+
+					var c = new THREE.Color(
+						0x444444 +
+						~~(v / 9) / BIRDS * 0x666666
 					);
 
-					faces.push(new THREE.Face3(
-						fi++,
-						fi++,
-						fi++
-					));
-
-					faces.push(new THREE.Face3(
-						fi++,
-						fi++,
-						fi++
-					));
-
-					uvs.push([
-						new THREE.Vector2(0, 0),
-						new THREE.Vector2(0, 1),
-						new THREE.Vector2(1, 1)
-					]);
-
-					uvs.push([
-						new THREE.Vector2(0, 0),
-						new THREE.Vector2(0, 1),
-						new THREE.Vector2(1, 1)
-					]);
+					birdColors[ v * 3 + 0 ] = c.r;
+					birdColors[ v * 3 + 1 ] = c.g;
+					birdColors[ v * 3 + 2 ] = c.b;
+
+					references[ v * 2     ] = x;
+					references[ v * 2 + 1 ] = y;
+
+					birdVertex[ v         ] = v % 9;
 
 				}
 
 				this.applyMatrix( new THREE.Matrix4().makeScale( 0.2, 0.2, 0.2 ) );
 
-				this.computeFaceNormals();
-				this.computeVertexNormals();
 
 			}
 
 
-			THREE.BirdGeometry.prototype = Object.create( THREE.Geometry.prototype );
+			THREE.BirdGeometry.prototype = Object.create( THREE.BufferGeometry.prototype ); // Geometry2
 
 
 			var container, stats;
@@ -539,7 +528,7 @@
 				renderer.autoClear = true;
 
 				////////
-				simulator = new SimulatorRenderer(WIDTH, renderer);
+				simulator = new SimulationRenderer(WIDTH, renderer);
 
 				simulator.init();
 
@@ -633,18 +622,18 @@
 
 				// For Vertex Shaders
 				birdAttributes = {
-					index: { type: 'i', value: [] },
-					birdColor: {	type: 'c', value: [] },
-					reference: { type: 'v2', value: [] },
-					birdVertex: { type: 'f', value: [] },
+					// index: { type: 'i', value: [] },
+					birdColor: { type: 'c', value: null },
+					reference: { type: 'v2', value: null },
+					birdVertex: { type: 'f', value: null }
 				};
 
 				// For Vertex and Fragment
 				birdUniforms = {
 
-					color:     { type: "c", value: new THREE.Color( 0xff2200 ) },
-					texturePosition:     { type: "t", value: null },
-					textureVelocity:     { type: "t", value: null },
+					color: { type: "c", value: new THREE.Color( 0xff2200 ) },
+					texturePosition: { type: "t", value: null },
+					textureVelocity: { type: "t", value: null },
 					time: { type: "f", value: 1.0 },
 					delta: { type: "f", value: 0.0 },
 
@@ -657,33 +646,12 @@
 					attributes:     birdAttributes,
 					vertexShader:   document.getElementById( 'birdVS' ).textContent,
 					fragmentShader: document.getElementById( 'birdFS' ).textContent,
-					side: THREE.DoubleSide,
-					// wireframe: true
+					side: THREE.DoubleSide
 
 				});
 
 				// geometry.dynamic = false;
 
-				var vertices = geometry.vertices;
-				var birdColors = birdAttributes.birdColor.value;
-				var references = birdAttributes.reference.value;
-				var birdVertex = birdAttributes.birdVertex.value;
-
-				for( var v = 0; v < vertices.length; v++ ) {
-
-					var i = ~~(v / 3);
-					var x = (i % WIDTH) / WIDTH;
-					var y = ~~(i / WIDTH) / WIDTH;
-
-					birdColors[ v ] = new THREE.Color(
-						0x444444 +
-						~~(v / 9) / BIRDS * 0x666666
-					);
-					references[ v ] = new THREE.Vector2( x, y );
-					birdVertex[ v ] = v % 9;
-
-				}
-
 
 				// var 
 				birdMesh = new THREE.Mesh( geometry, shaderMaterial );