Minor fixes to GPUComputationRenderer and its demos: (#9118)

- Added texture minifier and magnifier filters to variables.
 - Added missing null dependencies check in compute()
 - Two simple loop optimizations (store count in a variable)
 - Water demo: Improved noise appearance by raising noise z parameter.
 - Code formatting (indentation) and clean up.

examples/js/GPUComputationRenderer.js

@@ -129,7 +129,9 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 			dependencies: null,
 			renderTargets: [],
 			wrapS: null,
-			wrapT: null
+			wrapT: null,
+			minFilter: THREE.NearestFilter,
+			magFilter: THREE.NearestFilter
 		};
 
 		this.variables.push( variable );
@@ -163,8 +165,8 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 			var variable = this.variables[ i ];
 
 			// Creates rendertargets and initialize them with input texture
-			variable.renderTargets[ 0 ] = this.createRenderTarget( variable.wrapS, variable.wrapT );
-			variable.renderTargets[ 1 ] = this.createRenderTarget( variable.wrapS, variable.wrapT );
+			variable.renderTargets[ 0 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
+			variable.renderTargets[ 1 ] = this.createRenderTarget( sizeX, sizeY, variable.wrapS, variable.wrapT, variable.minFilter, variable.magFilter );
 			this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 0 ] );
 			this.renderTexture( variable.initialValueTexture, variable.renderTargets[ 1 ] );
 
@@ -172,6 +174,7 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 			var material = variable.material;
 			var uniforms = material.uniforms;
 			if ( variable.dependencies !== null ) {
+
 				for ( var d = 0; d < variable.dependencies.length; d++ ) {
 
 					var depVar = variable.dependencies[ d ];
@@ -196,7 +199,7 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 
 					uniforms[ depVar.name ] = { value: null };
 
-					material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + variable.material.fragmentShader;
+					material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
 
 				}
 			}
@@ -213,17 +216,21 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 		var currentTextureIndex = this.currentTextureIndex;
 		var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
 
-		for ( var i = 0; i < this.variables.length; i++ ) {
+		for ( var i = 0, il = this.variables.length; i < il; i++ ) {
 
 			var variable = this.variables[ i ];
 
 			// Sets texture dependencies uniforms
-			var uniforms = variable.material.uniforms;
-			for ( var d = 0; d < variable.dependencies.length; d++ ) {
+			if ( variable.dependencies !== null ) {
 
-				var depVar = variable.dependencies[ d ];
+				var uniforms = variable.material.uniforms;
+				for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
 
-				uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
+					var depVar = variable.dependencies[ d ];
+
+					uniforms[ depVar.name ].value = depVar.renderTargets[ currentTextureIndex ].texture;
+
+				}
 
 			}
 
@@ -273,19 +280,22 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 	};
 	this.createShaderMaterial = createShaderMaterial;
 
-	this.createRenderTarget = function( wrapS, wrapT, sizeXTexture, sizeYTexture ) {
-		
-		wrapS = wrapS || THREE.ClampToEdgeWrapping;
-		wrapT = wrapT || THREE.ClampToEdgeWrapping;
+	this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
 
 		sizeXTexture = sizeXTexture || sizeX;
 		sizeYTexture = sizeYTexture || sizeY;
 
+		wrapS = wrapS || THREE.ClampToEdgeWrapping;
+		wrapT = wrapT || THREE.ClampToEdgeWrapping;
+
+		minFilter = minFilter || THREE.NearestFilter;
+		magFilter = magFilter || THREE.NearestFilter;
+
 		var renderTarget = new THREE.WebGLRenderTarget( sizeXTexture, sizeYTexture, {
 			wrapS: wrapS,
 			wrapT: wrapT,
-			minFilter: THREE.NearestFilter,
-			magFilter: THREE.NearestFilter,
+			minFilter: minFilter,
+			magFilter: magFilter,
 			format: THREE.RGBAFormat,
 			type: THREE.FloatType,
 			stencilBuffer: false
@@ -319,12 +329,15 @@ function GPUComputationRenderer( sizeX, sizeY, renderer ) {
 
 		this.doRenderTarget( passThruShader, output);
 
+		passThruUniforms.texture.value = null;
+
 	};
 
 	this.doRenderTarget = function( material, output ) {
 
 		mesh.material = material;
 		renderer.render( scene, camera, output );
+		mesh.material = passThruShader;
 
 	};
 

examples/webgl_gpgpu_birds.html

@@ -108,10 +108,10 @@
 			const float SPEED_LIMIT = 9.0;
 
 			float rand(vec2 co){
-			    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+				return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
 			}
 
-			void main()	{
+			void main() {
 
 				zoneRadius = seperationDistance + alignmentDistance + cohesionDistance;
 				separationThresh = seperationDistance / zoneRadius;

examples/webgl_gpgpu_protoplanet.html

@@ -51,7 +51,7 @@
 
 			#define delta ( 1.0 / 60.0 )
 
-			void main()	{
+			void main() {
 
 				vec2 uv = gl_FragCoord.xy / resolution.xy;
 
@@ -63,7 +63,7 @@
 				float mass = tmpVel.w;
 
 				if ( mass == 0.0 ) {
-				    vel = vec3( 0.0 );
+					vel = vec3( 0.0 );
 				}
 
 				// Dynamics
@@ -109,80 +109,80 @@
 				if ( mass > 0.0 ) {
 				    
 
-				float radius = radiusFromMass( mass );
+					float radius = radiusFromMass( mass );
 
-				vec3 acceleration = vec3( 0.0 );
+					vec3 acceleration = vec3( 0.0 );
 
-				// Gravity interaction
-				for ( float y = 0.0; y < height; y++ ) {
+					// Gravity interaction
+					for ( float y = 0.0; y < height; y++ ) {
 
-					for ( float x = 0.0; x < width; x++ ) {
+						for ( float x = 0.0; x < width; x++ ) {
 
-						vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
-						vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
-						vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
-						vec3 vel2 = velTemp2.xyz;
-						float mass2 = velTemp2.w;
+							vec2 secondParticleCoords = vec2( x + 0.5, y + 0.5 ) / resolution.xy;
+							vec3 pos2 = texture2D( texturePosition, secondParticleCoords ).xyz;
+							vec4 velTemp2 = texture2D( textureVelocity, secondParticleCoords );
+							vec3 vel2 = velTemp2.xyz;
+							float mass2 = velTemp2.w;
 
-						float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;
+							float idParticle2 = secondParticleCoords.y * resolution.x + secondParticleCoords.x;
 
-						if ( idParticle == idParticle2 ) {
-							continue;
-						}
+							if ( idParticle == idParticle2 ) {
+								continue;
+							}
 
-						if ( mass2 == 0.0 ) {
-							continue;
-						}
+							if ( mass2 == 0.0 ) {
+								continue;
+							}
 
-						vec3 dPos = pos2 - pos;
-						float distance = length( dPos );
-						float radius2 = radiusFromMass( mass2 );
+							vec3 dPos = pos2 - pos;
+							float distance = length( dPos );
+							float radius2 = radiusFromMass( mass2 );
 
-						if ( distance == 0.0 ) {
-							continue;
-						}
+							if ( distance == 0.0 ) {
+								continue;
+							}
 
-						// Checks collision
+							// Checks collision
 
-						if ( distance < radius + radius2 ) {
-						    
-							if ( idParticle < idParticle2 ) {
+							if ( distance < radius + radius2 ) {
 
-								// This particle is aggregated by the other
-								vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
-								mass += mass2;
-								radius = radiusFromMass( mass );
+								if ( idParticle < idParticle2 ) {
 
-							}
-							else {
+									// This particle is aggregated by the other
+									vel = ( vel * mass + vel2 * mass2 ) / ( mass + mass2 );
+									mass += mass2;
+									radius = radiusFromMass( mass );
+
+								}
+								else {
+
+									// This particle dies
+									mass = 0.0;
+									radius = 0.0;
+									vel = vec3( 0.0 );
+									break;
 
-								// This particle dies
-								mass = 0.0;
-								radius = 0.0;
-								vel = vec3( 0.0 );
-								break;
+								}
 
 							}
-		    
-						}
 
-						float distanceSq = distance * distance;
+							float distanceSq = distance * distance;
 
-						float gravityField = gravityConstant * mass2 / distanceSq;
+							float gravityField = gravityConstant * mass2 / distanceSq;
 
-						gravityField = min( gravityField, 1000.0 );
+							gravityField = min( gravityField, 1000.0 );
 
-						acceleration += gravityField * normalize( dPos );
+							acceleration += gravityField * normalize( dPos );
 
-					}
+						}
 
-					if ( mass == 0.0 ) {
-					    break;
+						if ( mass == 0.0 ) {
+							break;
+						}
 					}
-				}
 
-				// Dynamics
-				vel += delta * acceleration;
+					// Dynamics
+					vel += delta * acceleration;
 
 				}
 
@@ -253,7 +253,7 @@
 
 				float f = length( gl_PointCoord - vec2( 0.5, 0.5 ) );
 				if ( f > 0.5 ) {
-				    discard;
+					discard;
 				}
 				gl_FragColor = vColor;
 

examples/webgl_gpgpu_water.html

@@ -341,8 +341,8 @@
 				var material = new THREE.ShaderMaterial( {
 					uniforms: THREE.UniformsUtils.merge( [
 						THREE.ShaderLib[ 'phong' ].uniforms,
-					    {
-							heightmap: { value: null },
+						{
+							heightmap: { value: null }
 						}
 					] ),
 					vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
@@ -437,7 +437,7 @@
 						var x = i * 128 / WIDTH;
 						var y = j * 128 / WIDTH;
 
-					        pixels[ p + 0 ] = noise( x, y, 0 );
+					        pixels[ p + 0 ] = noise( x, y, 123.4 );
 						pixels[ p + 1 ] = 0;
 						pixels[ p + 2 ] = 0;
 						pixels[ p + 3 ] = 1;