Merge pull request #16886 from aardgoose/example-webgl2-fixes

Example webgl2 fixes

examples/js/misc/GPUComputationRenderer.js

@@ -97,7 +97,7 @@
  * @param {WebGLRenderer} renderer The renderer
   */
 
-THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
+THREE.GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {
 
 	this.variables = [];
 
@@ -109,7 +109,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 	camera.position.z = 1;
 
 	var passThruUniforms = {
-		texture: { value: null }
+		passThruTexture: { value: null }
 	};
 
 	var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
@@ -118,7 +118,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 	scene.add( mesh );
 
 
-	this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {
+	this.addVariable = function ( variableName, computeFragmentShader, initialValueTexture ) {
 
 		var material = this.createShaderMaterial( computeFragmentShader );
 
@@ -140,15 +140,16 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.setVariableDependencies = function( variable, dependencies ) {
+	this.setVariableDependencies = function ( variable, dependencies ) {
 
 		variable.dependencies = dependencies;
 
 	};
 
-	this.init = function() {
+	this.init = function () {
 
-		if ( ! renderer.extensions.get( "OES_texture_float" ) ) {
+		if ( ! renderer.extensions.get( "OES_texture_float" ) &&
+			 ! renderer.capabilities.isWebGL2 ) {
 
 			return "No OES_texture_float support for float textures.";
 
@@ -160,7 +161,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 		}
 
-		for ( var i = 0; i < this.variables.length; i++ ) {
+		for ( var i = 0; i < this.variables.length; i ++ ) {
 
 			var variable = this.variables[ i ];
 
@@ -175,7 +176,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 			var uniforms = material.uniforms;
 			if ( variable.dependencies !== null ) {
 
-				for ( var d = 0; d < variable.dependencies.length; d++ ) {
+				for ( var d = 0; d < variable.dependencies.length; d ++ ) {
 
 					var depVar = variable.dependencies[ d ];
 
@@ -183,16 +184,20 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 						// Checks if variable exists
 						var found = false;
-						for ( var j = 0; j < this.variables.length; j++ ) {
+						for ( var j = 0; j < this.variables.length; j ++ ) {
 
 							if ( depVar.name === this.variables[ j ].name ) {
+
 								found = true;
 								break;
+
 							}
 
 						}
 						if ( ! found ) {
+
 							return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;
+
 						}
 
 					}
@@ -202,7 +207,9 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 					material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
 
 				}
+
 			}
+
 		}
 
 		this.currentTextureIndex = 0;
@@ -211,12 +218,12 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.compute = function() {
+	this.compute = function () {
 
 		var currentTextureIndex = this.currentTextureIndex;
 		var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
 
-		for ( var i = 0, il = this.variables.length; i < il; i++ ) {
+		for ( var i = 0, il = this.variables.length; i < il; i ++ ) {
 
 			var variable = this.variables[ i ];
 
@@ -224,7 +231,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 			if ( variable.dependencies !== null ) {
 
 				var uniforms = variable.material.uniforms;
-				for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
+				for ( var d = 0, dl = variable.dependencies.length; d < dl; d ++ ) {
 
 					var depVar = variable.dependencies[ d ];
 
@@ -240,15 +247,16 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 		}
 
 		this.currentTextureIndex = nextTextureIndex;
+
 	};
 
-	this.getCurrentRenderTarget = function( variable ) {
+	this.getCurrentRenderTarget = function ( variable ) {
 
 		return variable.renderTargets[ this.currentTextureIndex ];
 
 	};
 
-	this.getAlternateRenderTarget = function( variable ) {
+	this.getAlternateRenderTarget = function ( variable ) {
 
 		return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];
 
@@ -282,7 +290,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	this.createShaderMaterial = createShaderMaterial;
 
-	this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
+	this.createRenderTarget = function ( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
 
 		sizeXTexture = sizeXTexture || sizeX;
 		sizeYTexture = sizeYTexture || sizeY;
@@ -308,7 +316,7 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.createTexture = function() {
+	this.createTexture = function () {
 
 		var a = new Float32Array( sizeX * sizeY * 4 );
 		var texture = new THREE.DataTexture( a, sizeX, sizeY, THREE.RGBAFormat, THREE.FloatType );
@@ -318,21 +326,21 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.renderTexture = function( input, output ) {
+	this.renderTexture = function ( input, output ) {
 
 		// Takes a texture, and render out in rendertarget
 		// input = Texture
 		// output = RenderTarget
 
-		passThruUniforms.texture.value = input;
+		passThruUniforms.passThruTexture.value = input;
 
-		this.doRenderTarget( passThruShader, output);
+		this.doRenderTarget( passThruShader, output );
 
-		passThruUniforms.texture.value = null;
+		passThruUniforms.passThruTexture.value = null;
 
 	};
 
-	this.doRenderTarget = function( material, output ) {
+	this.doRenderTarget = function ( material, output ) {
 
 		var currentRenderTarget = renderer.getRenderTarget();
 
@@ -359,13 +367,13 @@ THREE.GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	function getPassThroughFragmentShader() {
 
-		return	"uniform sampler2D texture;\n" +
+		return	"uniform sampler2D passThruTexture;\n" +
 				"\n" +
 				"void main() {\n" +
 				"\n" +
 				"	vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +
 				"\n" +
-				"	gl_FragColor = texture2D( texture, uv );\n" +
+				"	gl_FragColor = texture2D( passThruTexture, uv );\n" +
 				"\n" +
 				"}\n";
 

examples/js/shaders/OceanShaders.js

@@ -110,9 +110,11 @@ THREE.OceanShaders[ 'ocean_initial_spectrum' ] = {
 			'return sqrt(G * k * (1.0 + pow2(k / KM)));',
 		'}',
 
+		'#if __VERSION__ == 100',
 		'float tanh (float x) {',
 			'return (1.0 - exp(-2.0 * x)) / (1.0 + exp(-2.0 * x));',
 		'}',
+		'#endif',
 
 		'void main (void) {',
 			'vec2 coordinates = gl_FragCoord.xy - 0.5;',

examples/js/shaders/SMAAShader.js

@@ -180,9 +180,11 @@ THREE.SMAAWeightsShader = {
 		"varying vec4 vOffset[3];",
 		"varying vec2 vPixcoord;",
 
+		"#if __VERSION__ == 100",
 		"vec2 round( vec2 x ) {",
 			"return sign( x ) * floor( abs( x ) + 0.5 );",
 		"}",
+		"#endif",
 
 		"float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {",
 			// Not required if searchTex accesses are set to point:

examples/jsm/misc/GPUComputationRenderer.js

@@ -112,7 +112,7 @@ import {
 	WebGLRenderTarget
 } from "../../../build/three.module.js";
 
-var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
+var GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {
 
 	this.variables = [];
 
@@ -124,7 +124,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 	camera.position.z = 1;
 
 	var passThruUniforms = {
-		texture: { value: null }
+		passThruTexture: { value: null }
 	};
 
 	var passThruShader = createShaderMaterial( getPassThroughFragmentShader(), passThruUniforms );
@@ -133,7 +133,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 	scene.add( mesh );
 
 
-	this.addVariable = function( variableName, computeFragmentShader, initialValueTexture ) {
+	this.addVariable = function ( variableName, computeFragmentShader, initialValueTexture ) {
 
 		var material = this.createShaderMaterial( computeFragmentShader );
 
@@ -155,15 +155,16 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.setVariableDependencies = function( variable, dependencies ) {
+	this.setVariableDependencies = function ( variable, dependencies ) {
 
 		variable.dependencies = dependencies;
 
 	};
 
-	this.init = function() {
+	this.init = function () {
 
-		if ( ! renderer.extensions.get( "OES_texture_float" ) ) {
+		if ( ! renderer.extensions.get( "OES_texture_float" ) &&
+			 ! renderer.capabilities.isWebGL2 ) {
 
 			return "No OES_texture_float support for float textures.";
 
@@ -175,7 +176,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 		}
 
-		for ( var i = 0; i < this.variables.length; i++ ) {
+		for ( var i = 0; i < this.variables.length; i ++ ) {
 
 			var variable = this.variables[ i ];
 
@@ -190,7 +191,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 			var uniforms = material.uniforms;
 			if ( variable.dependencies !== null ) {
 
-				for ( var d = 0; d < variable.dependencies.length; d++ ) {
+				for ( var d = 0; d < variable.dependencies.length; d ++ ) {
 
 					var depVar = variable.dependencies[ d ];
 
@@ -198,16 +199,21 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 						// Checks if variable exists
 						var found = false;
-						for ( var j = 0; j < this.variables.length; j++ ) {
+						for ( var j = 0; j < this.variables.length; j ++ ) {
 
 							if ( depVar.name === this.variables[ j ].name ) {
+
 								found = true;
 								break;
+
 							}
 
 						}
+
 						if ( ! found ) {
+
 							return "Variable dependency not found. Variable=" + variable.name + ", dependency=" + depVar.name;
+
 						}
 
 					}
@@ -217,7 +223,9 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 					material.fragmentShader = "\nuniform sampler2D " + depVar.name + ";\n" + material.fragmentShader;
 
 				}
+
 			}
+
 		}
 
 		this.currentTextureIndex = 0;
@@ -226,12 +234,12 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.compute = function() {
+	this.compute = function () {
 
 		var currentTextureIndex = this.currentTextureIndex;
 		var nextTextureIndex = this.currentTextureIndex === 0 ? 1 : 0;
 
-		for ( var i = 0, il = this.variables.length; i < il; i++ ) {
+		for ( var i = 0, il = this.variables.length; i < il; i ++ ) {
 
 			var variable = this.variables[ i ];
 
@@ -239,7 +247,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 			if ( variable.dependencies !== null ) {
 
 				var uniforms = variable.material.uniforms;
-				for ( var d = 0, dl = variable.dependencies.length; d < dl; d++ ) {
+				for ( var d = 0, dl = variable.dependencies.length; d < dl; d ++ ) {
 
 					var depVar = variable.dependencies[ d ];
 
@@ -255,15 +263,16 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 		}
 
 		this.currentTextureIndex = nextTextureIndex;
+
 	};
 
-	this.getCurrentRenderTarget = function( variable ) {
+	this.getCurrentRenderTarget = function ( variable ) {
 
 		return variable.renderTargets[ this.currentTextureIndex ];
 
 	};
 
-	this.getAlternateRenderTarget = function( variable ) {
+	this.getAlternateRenderTarget = function ( variable ) {
 
 		return variable.renderTargets[ this.currentTextureIndex === 0 ? 1 : 0 ];
 
@@ -297,7 +306,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	this.createShaderMaterial = createShaderMaterial;
 
-	this.createRenderTarget = function( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
+	this.createRenderTarget = function ( sizeXTexture, sizeYTexture, wrapS, wrapT, minFilter, magFilter ) {
 
 		sizeXTexture = sizeXTexture || sizeX;
 		sizeYTexture = sizeYTexture || sizeY;
@@ -323,7 +332,7 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.createTexture = function() {
+	this.createTexture = function () {
 
 		var a = new Float32Array( sizeX * sizeY * 4 );
 		var texture = new DataTexture( a, sizeX, sizeY, RGBAFormat, FloatType );
@@ -333,21 +342,21 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	};
 
-	this.renderTexture = function( input, output ) {
+	this.renderTexture = function ( input, output ) {
 
 		// Takes a texture, and render out in rendertarget
 		// input = Texture
 		// output = RenderTarget
 
-		passThruUniforms.texture.value = input;
+		passThruUniforms.passThruTexture.value = input;
 
-		this.doRenderTarget( passThruShader, output);
+		this.doRenderTarget( passThruShader, output );
 
-		passThruUniforms.texture.value = null;
+		passThruUniforms.passThruTexture.value = null;
 
 	};
 
-	this.doRenderTarget = function( material, output ) {
+	this.doRenderTarget = function ( material, output ) {
 
 		var currentRenderTarget = renderer.getRenderTarget();
 
@@ -374,13 +383,13 @@ var GPUComputationRenderer = function( sizeX, sizeY, renderer ) {
 
 	function getPassThroughFragmentShader() {
 
-		return	"uniform sampler2D texture;\n" +
+		return	"uniform sampler2D passThruTexture;\n" +
 				"\n" +
 				"void main() {\n" +
 				"\n" +
 				"	vec2 uv = gl_FragCoord.xy / resolution.xy;\n" +
 				"\n" +
-				"	gl_FragColor = texture2D( texture, uv );\n" +
+				"	gl_FragColor = texture2D( passThruTexture, uv );\n" +
 				"\n" +
 				"}\n";
 

examples/jsm/shaders/OceanShaders.js

@@ -114,9 +114,11 @@ OceanShaders[ 'ocean_initial_spectrum' ] = {
 			'return sqrt(G * k * (1.0 + pow2(k / KM)));',
 		'}',
 
+		'#if __VERSION__ == 100',
 		'float tanh (float x) {',
 			'return (1.0 - exp(-2.0 * x)) / (1.0 + exp(-2.0 * x));',
 		'}',
+		'#endif',
 
 		'void main (void) {',
 			'vec2 coordinates = gl_FragCoord.xy - 0.5;',

examples/jsm/shaders/SMAAShader.js

@@ -184,9 +184,11 @@ var SMAAWeightsShader = {
 		"varying vec4 vOffset[3];",
 		"varying vec2 vPixcoord;",
 
+		"#if __VERSION__ == 100",
 		"vec2 round( vec2 x ) {",
 			"return sign( x ) * floor( abs( x ) + 0.5 );",
 		"}",
+		"#endif",
 
 		"float SMAASearchLength( sampler2D searchTex, vec2 e, float bias, float scale ) {",
 			// Not required if searchTex accesses are set to point:

examples/webgl_buffergeometry_custom_attributes_particles.html

@@ -32,7 +32,7 @@
 
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
-			uniform sampler2D texture;
+			uniform sampler2D pointTexture;
 
 			varying vec3 vColor;
 
@@ -40,7 +40,7 @@
 
 				gl_FragColor = vec4( vColor, 1.0 );
 
-				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 
 			}
 
@@ -80,7 +80,7 @@
 
 				uniforms = {
 
-					texture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
+					pointTexture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
 
 				};
 

examples/webgl_custom_attributes.html

@@ -38,7 +38,7 @@
 			varying vec2 vUv;
 
 			uniform vec3 color;
-			uniform sampler2D texture;
+			uniform sampler2D colorTexture;
 
 			void main() {
 
@@ -47,7 +47,7 @@
 
 				float dProd = dot( vNormal, light ) * 0.5 + 0.5;
 
-				vec4 tcolor = texture2D( texture, vUv );
+				vec4 tcolor = texture2D( colorTexture, vUv );
 				vec4 gray = vec4( vec3( tcolor.r * 0.3 + tcolor.g * 0.59 + tcolor.b * 0.11 ), 1.0 );
 
 				gl_FragColor = gray * vec4( vec3( dProd ) * vec3( color ), 1.0 );
@@ -94,11 +94,11 @@
 
 					"amplitude": { value: 1.0 },
 					"color": { value: new Color( 0xff2200 ) },
-					"texture": { value: new TextureLoader().load( "textures/water.jpg" ) }
+					"colorTexture": { value: new TextureLoader().load( "textures/water.jpg" ) }
 
 				};
 
-				uniforms[ "texture" ].value.wrapS = uniforms[ "texture" ].value.wrapT = RepeatWrapping;
+				uniforms[ "colorTexture" ].value.wrapS = uniforms[ "colorTexture" ].value.wrapT = RepeatWrapping;
 
 				var shaderMaterial = new ShaderMaterial( {
 

examples/webgl_custom_attributes_points.html

@@ -35,14 +35,14 @@
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
 			uniform vec3 color;
-			uniform sampler2D texture;
+			uniform sampler2D pointTexture;
 
 			varying vec3 vColor;
 
 			void main() {
 
 				gl_FragColor = vec4( color * vColor, 1.0 );
-				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 
 			}
 
@@ -126,7 +126,7 @@
 
 					uniforms: {
 						color: { value: new Color( 0xffffff ) },
-						texture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
+						pointTexture: { value: new TextureLoader().load( "textures/sprites/spark1.png" ) }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

examples/webgl_custom_attributes_points2.html

@@ -35,13 +35,13 @@
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
 			uniform vec3 color;
-			uniform sampler2D texture;
+			uniform sampler2D pointTexture;
 
 			varying vec3 vColor;
 
 			void main() {
 
-				vec4 color = vec4( color * vColor, 1.0 ) * texture2D( texture, gl_PointCoord );
+				vec4 color = vec4( color * vColor, 1.0 ) * texture2D( pointTexture, gl_PointCoord );
 
 				gl_FragColor = color;
 
@@ -137,7 +137,7 @@
 
 					uniforms: {
 						color: { value: new Color( 0xffffff ) },
-						texture: { value: texture }
+						pointTexture: { value: texture }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

examples/webgl_custom_attributes_points3.html

@@ -35,13 +35,13 @@
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
 			uniform vec3 color;
-			uniform sampler2D texture;
+			uniform sampler2D pointTexture;
 
 			varying vec4 vColor;
 
 			void main() {
 
-				vec4 outColor = texture2D( texture, gl_PointCoord );
+				vec4 outColor = texture2D( pointTexture, gl_PointCoord );
 
 				if ( outColor.a < 0.5 ) discard;
 
@@ -210,7 +210,7 @@
 					uniforms: {
 						amplitude: { value: 1.0 },
 						color: { value: new Color( 0xffffff ) },
-						texture: { value: texture }
+						pointTexture: { value: texture }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent

examples/webgl_gpgpu_water.html

@@ -62,7 +62,7 @@
 		<!-- This is just a smoothing 'compute shader' for using manually: -->
 		<script id="smoothFragmentShader" type="x-shader/x-fragment">
 
-			uniform sampler2D texture;
+			uniform sampler2D smoothTexture;
 
 			void main()	{
 
@@ -71,11 +71,11 @@
 				vec2 uv = gl_FragCoord.xy * cellSize;
 
 				// Computes the mean of texel and 4 neighbours
-				vec4 textureValue = texture2D( texture, uv );
-				textureValue += texture2D( texture, uv + vec2( 0.0, cellSize.y ) );
-				textureValue += texture2D( texture, uv + vec2( 0.0, - cellSize.y ) );
-				textureValue += texture2D( texture, uv + vec2( cellSize.x, 0.0 ) );
-				textureValue += texture2D( texture, uv + vec2( - cellSize.x, 0.0 ) );
+				vec4 textureValue = texture2D( smoothTexture, uv );
+				textureValue += texture2D( smoothTexture, uv + vec2( 0.0, cellSize.y ) );
+				textureValue += texture2D( smoothTexture, uv + vec2( 0.0, - cellSize.y ) );
+				textureValue += texture2D( smoothTexture, uv + vec2( cellSize.x, 0.0 ) );
+				textureValue += texture2D( smoothTexture, uv + vec2( - cellSize.x, 0.0 ) );
 
 				textureValue /= 5.0;
 
@@ -91,7 +91,7 @@
 
 			uniform vec2 point1;
 
-			uniform sampler2D texture;
+			uniform sampler2D levelTexture;
 
 			// Integer to float conversion from https://stackoverflow.com/questions/17981163/webgl-read-pixels-from-floating-point-render-target
 
@@ -142,11 +142,11 @@
 
 				vec2 cellSize = 1.0 / resolution.xy;
 
-				float waterLevel = texture2D( texture, point1 ).x;
+				float waterLevel = texture2D( levelTexture, point1 ).x;
 
 				vec2 normal = vec2(
-					( texture2D( texture, point1 + vec2( - cellSize.x, 0 ) ).x - texture2D( texture, point1 + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
-					( texture2D( texture, point1 + vec2( 0, - cellSize.y ) ).x - texture2D( texture, point1 + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS );
+					( texture2D( levelTexture, point1 + vec2( - cellSize.x, 0 ) ).x - texture2D( levelTexture, point1 + vec2( cellSize.x, 0 ) ).x ) * WIDTH / BOUNDS,
+					( texture2D( levelTexture, point1 + vec2( 0, - cellSize.y ) ).x - texture2D( levelTexture, point1 + vec2( 0, cellSize.y ) ).x ) * WIDTH / BOUNDS );
 
 				if ( gl_FragCoord.x < 1.5 ) {
 
@@ -486,12 +486,12 @@
 				}
 
 				// Create compute shader to smooth the water surface and velocity
-				smoothShader = gpuCompute.createShaderMaterial( document.getElementById( 'smoothFragmentShader' ).textContent, { texture: { value: null } } );
+				smoothShader = gpuCompute.createShaderMaterial( document.getElementById( 'smoothFragmentShader' ).textContent, { smoothTexture: { value: null } } );
 
 				// Create compute shader to read water level
 				readWaterLevelShader = gpuCompute.createShaderMaterial( document.getElementById( 'readWaterLevelFragmentShader' ).textContent, {
 					point1: { value: new Vector2() },
-					texture: { value: null }
+					levelTexture: { value: null }
 				} );
 				readWaterLevelShader.defines.WIDTH = WIDTH.toFixed( 1 );
 				readWaterLevelShader.defines.BOUNDS = BOUNDS.toFixed( 1 );
@@ -562,10 +562,10 @@
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					smoothShader.uniforms[ "texture" ].value = currentRenderTarget.texture;
+					smoothShader.uniforms[ "smoothTexture" ].value = currentRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
 
-					smoothShader.uniforms[ "texture" ].value = alternateRenderTarget.texture;
+					smoothShader.uniforms[ "smoothTexture" ].value = alternateRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
 
 				}
@@ -602,7 +602,7 @@
 
 				var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
 
-				readWaterLevelShader.uniforms[ "texture" ].value = currentRenderTarget.texture;
+				readWaterLevelShader.uniforms[ "levelTexture" ].value = currentRenderTarget.texture;
 
 				for ( var i = 0; i < NUM_SPHERES; i ++ ) {
 

examples/webgl_interactive_points.html

@@ -35,7 +35,7 @@
 		<script type="x-shader/x-fragment" id="fragmentshader">
 
 			uniform vec3 color;
-			uniform sampler2D texture;
+			uniform sampler2D pointTexture;
 
 			varying vec3 vColor;
 
@@ -43,7 +43,7 @@
 
 				gl_FragColor = vec4( color * vColor, 1.0 );
 
-				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );
+				gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
 
 				if ( gl_FragColor.a < ALPHATEST ) discard;
 
@@ -124,7 +124,7 @@
 
 					uniforms: {
 						color: { value: new Color( 0xffffff ) },
-						texture: { value: new TextureLoader().load( "textures/sprites/disc.png" ) }
+						pointTexture: { value: new TextureLoader().load( "textures/sprites/disc.png" ) }
 					},
 					vertexShader: document.getElementById( 'vertexshader' ).textContent,
 					fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

examples/webgl_lightshafts.html

@@ -49,14 +49,14 @@
 
 		uniform float attenuation;
 		uniform vec3 color;
-		uniform sampler2D texture;
+		uniform sampler2D colorTexture;
 
 		varying vec2 vUv;
 		varying float vAlpha;
 
 		void main() {
 
-			vec4 textureColor = texture2D( texture, vUv );
+			vec4 textureColor = texture2D( colorTexture, vUv );
 			gl_FragColor = vec4( textureColor.rgb * color.rgb, textureColor.a * vAlpha );
 			gl_FragColor.a *= pow( gl_FragCoord.z, attenuation );
 
@@ -130,7 +130,7 @@
 						value: new Color( 0xdadc9f )
 					},
 					// the visual representation of the ray highly depends on the used texture
-					texture: {
+					colorTexture: {
 						value: texture
 					},
 					// global time value for animation

examples/webgl_postprocessing_unreal_bloom_selective.html

@@ -33,9 +33,9 @@
 
 			varying vec2 vUv;
 
-			vec4 getTexture( sampler2D texture ) {
+			vec4 getTexture( sampler2D texelToLinearTexture ) {
 
-				return mapTexelToLinear( texture2D( texture , vUv ) );
+				return mapTexelToLinear( texture2D( texelToLinearTexture , vUv ) );
 
 			}
 

examples/webgl_shader2.html

@@ -56,7 +56,7 @@
 
 			uniform float time;
 
-			uniform sampler2D texture;
+			uniform sampler2D colorTexture;
 
 			varying vec2 vUv;
 
@@ -73,7 +73,7 @@
 				uv /= 10.0;
 				uv += time * 0.05;
 
-				vec3 color = texture2D( texture, uv ).rgb;
+				vec3 color = texture2D( colorTexture, uv ).rgb;
 
 				gl_FragColor = vec4( color * r * 1.5, 1.0 );
 
@@ -174,10 +174,10 @@
 
 				uniforms2 = {
 					"time": { value: 1.0 },
-					"texture": { value: new TextureLoader().load( 'textures/disturb.jpg' ) }
+					"colorTexture": { value: new TextureLoader().load( 'textures/disturb.jpg' ) }
 				};
 
-				uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = RepeatWrapping;
+				uniforms2[ "colorTexture" ].value.wrapS = uniforms2[ "colorTexture" ].value.wrapT = RepeatWrapping;
 
 				var params = [
 					[ 'fragment_shader1', uniforms1 ],