Examples: Refactoring gpgpu renderer based on @WestLangley suggestion #4069

examples/js/SimulatorRenderer.js

@@ -88,7 +88,30 @@ function SimulatorRenderer(WIDTH, renderer) {
 
 	scene.add( mesh );
 
-	this.getRenderTarget = function() {
+	var flipflop = true;
+	var rtPosition1, rtPosition2, rtVelocity1, rtVelocity2;
+
+	function init() {
+		var dtPosition = generateDataTexture();
+		var dtVelocity = generateVelocityTexture();
+
+		rtPosition1 = getRenderTarget();
+		rtPosition2 = rtPosition1.clone();
+		rtVelocity1 = rtPosition1.clone();
+		rtVelocity2 = rtPosition1.clone();
+
+		simulator.renderTexture(dtPosition, rtPosition1);
+		simulator.renderTexture(rtPosition1, rtPosition2);
+
+		simulator.renderTexture(dtVelocity, rtVelocity1);
+		simulator.renderTexture(rtVelocity1, rtVelocity2);
+
+		simulator.velocityUniforms.testing.value = 10;
+	}
+
+	this.init = init;
+
+	function getRenderTarget() {
 		var renderTarget = new THREE.WebGLRenderTarget(WIDTH, WIDTH, {
 			wrapS: THREE.RepeatWrapping,
 			wrapT: THREE.RepeatWrapping,
@@ -103,7 +126,7 @@ function SimulatorRenderer(WIDTH, renderer) {
 	}
 
 	// Takes a texture, and render out as another texture
-	this.renderTexture = function( input, output ) {
+	this.renderTexture = function ( input, output ) {
 		mesh.material = passThruShader;
 		uniforms.texture.value = input;
 		renderer.render( scene, camera, output );
@@ -117,6 +140,7 @@ function SimulatorRenderer(WIDTH, renderer) {
 		positionShader.uniforms.time.value = performance.now();
 		positionShader.uniforms.delta.value = delta;
 		renderer.render( scene, camera, output );
+		this.currentPosition = output;
 	}
 
 	this.renderVelocity = function(position, velocity, output, delta) {
@@ -126,6 +150,87 @@ function SimulatorRenderer(WIDTH, renderer) {
 		velocityShader.uniforms.time.value = performance.now();
 		velocityShader.uniforms.delta.value = delta;
 		renderer.render( scene, camera, output );
+		this.currentVelocity = output;
+	}
+
+	this.simulate = function( delta ) {
+
+		if (flipflop) {
+
+			simulator.renderVelocity( rtPosition1, rtVelocity1, rtVelocity2, delta );
+			simulator.renderPosition( rtPosition1, rtVelocity2, rtPosition2, delta );
+
+		} else {
+
+			simulator.renderVelocity( rtPosition2, rtVelocity2, rtVelocity1, delta );
+			simulator.renderPosition( rtPosition2, rtVelocity1, rtPosition1, delta );
+
+		}
+
+		flipflop = !flipflop;
+
+	}
+
+	function generateDataTexture() {
+
+		var x, y, z;
+
+		var w = WIDTH, h = WIDTH;
+
+		var a = new Float32Array(PARTICLES * 4);
+
+		for (var k = 0; k < PARTICLES; k++) {
+
+			x = Math.random() * BOUNDS - BOUNDS_HALF;
+			y = Math.random() * BOUNDS - BOUNDS_HALF;
+			z = Math.random() * BOUNDS - BOUNDS_HALF;
+
+			a[ k*4 + 0 ] = x;
+			a[ k*4 + 1 ] = y;
+			a[ k*4 + 2 ] = z;
+			a[ k*4 + 3 ] = 1;
+
+		}
+
+		var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBAFormat, THREE.FloatType );
+		texture.minFilter = THREE.NearestFilter;
+		texture.magFilter = THREE.NearestFilter;
+		texture.needsUpdate = true;
+		texture.flipY = false;
+
+		return texture;
+
+	}
+
+	function generateVelocityTexture() {
+
+		var x, y, z;
+
+		var w = WIDTH, h = WIDTH;
+
+		var a = new Float32Array(PARTICLES * 4);
+
+		for (var k = 0; k < PARTICLES; k++) {
+
+			x = Math.random() - 0.5;
+			y = Math.random() - 0.5;
+			z = Math.random() - 0.5;
+
+			a[ k*4 + 0 ] = x * 10;
+			a[ k*4 + 1 ] = y * 10;
+			a[ k*4 + 2 ] = z * 10;
+			a[ k*4 + 3 ] = 1;
+
+		}
+
+		var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBAFormat, THREE.FloatType );
+		texture.minFilter = THREE.NearestFilter;
+		texture.magFilter = THREE.NearestFilter;
+		texture.needsUpdate = true;
+		texture.flipY = false;
+
+		return texture;
+
 	}
 
 }

examples/webgl_gpgpu_birds.html

@@ -515,9 +515,6 @@
 
 
 			var simulator;
-			var flipflop = true;
-			var rtPosition1, rtPosition2, rtVelocity1, rtVelocity2;
-
 
 			init();
 			animate();
@@ -545,21 +542,7 @@
 				////////
 				simulator = new SimulatorRenderer(WIDTH, renderer);
 
-				var dtPosition = generateDataTexture();
-				var dtVelocity = generateVelocityTexture();
-
-				rtPosition1 = simulator.getRenderTarget();
-				rtPosition2 = rtPosition1.clone();
-				rtVelocity1 = rtPosition1.clone();
-				rtVelocity2 = rtPosition1.clone();
-
-				simulator.renderTexture(dtPosition, rtPosition1);
-				simulator.renderTexture(rtPosition1, rtPosition2);
-
-				simulator.renderTexture(dtVelocity, rtVelocity1);
-				simulator.renderTexture(rtVelocity1, rtVelocity2);
-
-				simulator.velocityUniforms.testing.value = 10;
+				simulator.init();
 
 				/////////
 
@@ -789,21 +772,13 @@
 				// 	delta = 0.0001;
 				// }
 
-				if (!paused)
-				if (flipflop) {
-					simulator.renderVelocity( rtPosition1, rtVelocity1, rtVelocity2, delta );
-					simulator.renderPosition( rtPosition1, rtVelocity2, rtPosition2, delta );
-					birdUniforms.texturePosition.value = rtPosition2;
-					birdUniforms.textureVelocity.value = rtVelocity2;
-
-				} else {
-					simulator.renderVelocity( rtPosition2, rtVelocity2, rtVelocity1, delta );
-					simulator.renderPosition( rtPosition2, rtVelocity1, rtPosition1, delta );
-					birdUniforms.texturePosition.value = rtPosition1;
-					birdUniforms.textureVelocity.value = rtVelocity1;
+				if (!paused) {
+					simulator.simulate( delta );
+
+					birdUniforms.texturePosition.value = simulator.currentPosition;
+					birdUniforms.textureVelocity.value = simulator.currentVelocity;
 				}
 
-				flipflop = !flipflop;
 
 				simulator.velocityUniforms.predator.value.set( mouseX / windowHalfX, -mouseY / windowHalfY, 0 );
 
@@ -824,67 +799,7 @@
 			}
 
 
-			function generateDataTexture() {
-
-				var x, y, z;
-
-				var w = WIDTH, h = WIDTH;
-
-				var a = new Float32Array(PARTICLES * 4);
-
-				for (var k = 0; k < PARTICLES; k++) {
-
-					x = Math.random() * BOUNDS - BOUNDS_HALF;
-					y = Math.random() * BOUNDS - BOUNDS_HALF;
-					z = Math.random() * BOUNDS - BOUNDS_HALF;
-
-					a[ k*4 + 0 ] = x;
-					a[ k*4 + 1 ] = y;
-					a[ k*4 + 2 ] = z;
-					a[ k*4 + 3 ] = 1;
-
-				}
-
-				var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBAFormat, THREE.FloatType );
-				texture.minFilter = THREE.NearestFilter;
-				texture.magFilter = THREE.NearestFilter;
-				texture.needsUpdate = true;
-				texture.flipY = false;
-
-				return texture;
-
-			}
-
-			function generateVelocityTexture() {
-
-				var x, y, z;
-
-				var w = WIDTH, h = WIDTH;
-
-				var a = new Float32Array(PARTICLES * 4);
-
-				for (var k = 0; k < PARTICLES; k++) {
 
-					x = Math.random() - 0.5;
-					y = Math.random() - 0.5;
-					z = Math.random() - 0.5;
-
-					a[ k*4 + 0 ] = x * 10;
-					a[ k*4 + 1 ] = y * 10;
-					a[ k*4 + 2 ] = z * 10;
-					a[ k*4 + 3 ] = 1;
-
-				}
-
-				var texture = new THREE.DataTexture( a, WIDTH, WIDTH, THREE.RGBAFormat, THREE.FloatType );
-				texture.minFilter = THREE.NearestFilter;
-				texture.magFilter = THREE.NearestFilter;
-				texture.needsUpdate = true;
-				texture.flipY = false;
-
-				return texture;
-
-			}
 
 		</script>
 	</body>