Merge pull request #15500 from Oletus/cleanup-addressing-uniforms-in-examples

Always use strings for uniform names in examples

examples/js/objects/Fire.js

@@ -58,7 +58,7 @@ THREE.Fire = function ( geometry, options ) {
 
 		}
 
-		this.sourceMaterial.uniforms.sourceMap.value = this.internalSource;
+		this.sourceMaterial.uniforms[ "sourceMap" ].value = this.internalSource;
 		this.sourceMaterial.needsUpdate = true;
 
 		return this.sourceData;
@@ -121,7 +121,7 @@ THREE.Fire = function ( geometry, options ) {
 	// (0 -> 127 = 0.0 -> 1.0, 128 -> 255 = -1.0 -> 0.0 )
 	this.setSourceMap = function ( texture ) {
 
-		this.sourceMaterial.uniforms.sourceMap.value = texture;
+		this.sourceMaterial.uniforms[ "sourceMap" ].value = texture;
 
 	};
 
@@ -190,8 +190,8 @@ THREE.Fire = function ( geometry, options ) {
 		transparent: false
 	} );
 
-	this.diffuseMaterial.uniforms.oneOverWidth.value = oneOverWidth;
-	this.diffuseMaterial.uniforms.oneOverHeight.value = oneOverHeight;
+	this.diffuseMaterial.uniforms[ "oneOverWidth" ].value = oneOverWidth;
+	this.diffuseMaterial.uniforms[ "oneOverHeight" ].value = oneOverHeight;
 
 	this.diffuseMesh = new THREE.Mesh( this.fieldGeometry, this.diffuseMaterial );
 	this.fieldScene.add( this.diffuseMesh );
@@ -206,8 +206,8 @@ THREE.Fire = function ( geometry, options ) {
 		transparent: false
 	} );
 
-	this.driftMaterial.uniforms.oneOverWidth.value = oneOverWidth;
-	this.driftMaterial.uniforms.oneOverHeight.value = oneOverHeight;
+	this.driftMaterial.uniforms[ "oneOverWidth" ].value = oneOverWidth;
+	this.driftMaterial.uniforms[ "oneOverHeight" ].value = oneOverHeight;
 
 	this.driftMesh = new THREE.Mesh( this.fieldGeometry, this.driftMaterial );
 	this.fieldScene.add( this.driftMesh );
@@ -222,8 +222,8 @@ THREE.Fire = function ( geometry, options ) {
 		transparent: false
 	} );
 
-	this.projMaterial1.uniforms.oneOverWidth.value = oneOverWidth;
-	this.projMaterial1.uniforms.oneOverHeight.value = oneOverHeight;
+	this.projMaterial1.uniforms[ "oneOverWidth" ].value = oneOverWidth;
+	this.projMaterial1.uniforms[ "oneOverHeight" ].value = oneOverHeight;
 
 	this.projMesh1 = new THREE.Mesh( this.fieldGeometry, this.projMaterial1 );
 	this.fieldScene.add( this.projMesh1 );
@@ -239,8 +239,8 @@ THREE.Fire = function ( geometry, options ) {
 	} );
 
 
-	this.projMaterial2.uniforms.oneOverWidth.value = oneOverWidth;
-	this.projMaterial2.uniforms.oneOverHeight.value = oneOverHeight;
+	this.projMaterial2.uniforms[ "oneOverWidth" ].value = oneOverWidth;
+	this.projMaterial2.uniforms[ "oneOverHeight" ].value = oneOverHeight;
 
 	this.projMesh2 = new THREE.Mesh( this.fieldGeometry, this.projMaterial2 );
 	this.fieldScene.add( this.projMesh2 );
@@ -256,8 +256,8 @@ THREE.Fire = function ( geometry, options ) {
 	} );
 
 
-	this.projMaterial3.uniforms.oneOverWidth.value = oneOverWidth;
-	this.projMaterial3.uniforms.oneOverHeight.value = oneOverHeight;
+	this.projMaterial3.uniforms[ "oneOverWidth" ].value = oneOverWidth;
+	this.projMaterial3.uniforms[ "oneOverHeight" ].value = oneOverHeight;
 
 	this.projMesh3 = new THREE.Mesh( this.fieldGeometry, this.projMaterial3 );
 	this.fieldScene.add( this.projMesh3 );
@@ -280,31 +280,31 @@ THREE.Fire = function ( geometry, options ) {
 		transparent: true
 	} );
 
-	this.material.uniforms.densityMap.value = this.field1.texture;
+	this.material.uniforms[ "densityMap" ].value = this.field1.texture;
 
 	this.configShaders = function ( dt ) {
 
-		this.diffuseMaterial.uniforms.diffuse.value = dt * 0.05 * this.diffuse;
-		this.diffuseMaterial.uniforms.viscosity.value = dt * 0.05 * this.viscosity;
-		this.diffuseMaterial.uniforms.expansion.value = Math.exp( this.expansion * - 1.0 );
-		this.diffuseMaterial.uniforms.swirl.value = Math.exp( this.swirl * - 0.1 );
-		this.diffuseMaterial.uniforms.drag.value = Math.exp( this.drag * - 0.1 );
-		this.diffuseMaterial.uniforms.burnRate.value = this.burnRate * dt * 0.01;
-		this.driftMaterial.uniforms.windVector.value = this.windVector;
-		this.driftMaterial.uniforms.airSpeed.value = dt * this.airSpeed * 0.001 * textureHeight;
-		this.material.uniforms.color1.value = this.color1;
-		this.material.uniforms.color2.value = this.color2;
-		this.material.uniforms.color3.value = this.color3;
-		this.material.uniforms.colorBias.value = this.colorBias;
+		this.diffuseMaterial.uniforms[ "diffuse" ].value = dt * 0.05 * this.diffuse;
+		this.diffuseMaterial.uniforms[ "viscosity" ].value = dt * 0.05 * this.viscosity;
+		this.diffuseMaterial.uniforms[ "expansion" ].value = Math.exp( this.expansion * - 1.0 );
+		this.diffuseMaterial.uniforms[ "swirl" ].value = Math.exp( this.swirl * - 0.1 );
+		this.diffuseMaterial.uniforms[ "drag" ].value = Math.exp( this.drag * - 0.1 );
+		this.diffuseMaterial.uniforms[ "burnRate" ].value = this.burnRate * dt * 0.01;
+		this.driftMaterial.uniforms[ "windVector" ].value = this.windVector;
+		this.driftMaterial.uniforms[ "airSpeed" ].value = dt * this.airSpeed * 0.001 * textureHeight;
+		this.material.uniforms[ "color1" ].value = this.color1;
+		this.material.uniforms[ "color2" ].value = this.color2;
+		this.material.uniforms[ "color3" ].value = this.color3;
+		this.material.uniforms[ "colorBias" ].value = this.colorBias;
 
 	};
 
 	this.clearDiffuse = function () {
 
-		this.diffuseMaterial.uniforms.expansion.value = 1.0;
-		this.diffuseMaterial.uniforms.swirl.value = 1.0;
-		this.diffuseMaterial.uniforms.drag.value = 1.0;
-		this.diffuseMaterial.uniforms.burnRate.value = 0.0;
+		this.diffuseMaterial.uniforms[ "expansion" ].value = 1.0;
+		this.diffuseMaterial.uniforms[ "swirl" ].value = 1.0;
+		this.diffuseMaterial.uniforms[ "drag" ].value = 1.0;
+		this.diffuseMaterial.uniforms[ "burnRate" ].value = 0.0;
 
 	};
 
@@ -340,7 +340,7 @@ THREE.Fire = function ( geometry, options ) {
 
 		this.sourceMesh.visible = true;
 
-		this.sourceMaterial.uniforms.densityMap.value = this.field0.texture;
+		this.sourceMaterial.uniforms[ "densityMap" ].value = this.field0.texture;
 
 		renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
 
@@ -354,7 +354,7 @@ THREE.Fire = function ( geometry, options ) {
 
 		this.diffuseMesh.visible = true;
 
-		this.diffuseMaterial.uniforms.densityMap.value = this.field0.texture;
+		this.diffuseMaterial.uniforms[ "densityMap" ].value = this.field0.texture;
 
 		renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
 
@@ -368,7 +368,7 @@ THREE.Fire = function ( geometry, options ) {
 
 		this.driftMesh.visible = true;
 
-		this.driftMaterial.uniforms.densityMap.value = this.field0.texture;
+		this.driftMaterial.uniforms[ "densityMap" ].value = this.field0.texture;
 
 		renderer.render( this.fieldScene, this.orthoCamera, this.field1 );
 
@@ -384,13 +384,13 @@ THREE.Fire = function ( geometry, options ) {
 
 		this.projMesh1.visible = true;
 
-		this.projMaterial1.uniforms.densityMap.value = this.field0.texture;
+		this.projMaterial1.uniforms[ "densityMap" ].value = this.field0.texture;
 
 		renderer.render( this.fieldScene, this.orthoCamera, this.fieldProj );
 
 		this.projMesh1.visible = false;
 
-		this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
+		this.projMaterial2.uniforms[ "densityMap" ].value = this.fieldProj.texture;
 
 		// Projection pass 2
 
@@ -404,14 +404,14 @@ THREE.Fire = function ( geometry, options ) {
 			this.field1 = this.fieldProj;
 			this.fieldProj = temp;
 
-			this.projMaterial2.uniforms.densityMap.value = this.fieldProj.texture;
+			this.projMaterial2.uniforms[ "densityMap" ].value = this.fieldProj.texture;
 
 		}
 
 		this.projMesh2.visible = false;
 
-		this.projMaterial3.uniforms.densityMap.value = this.field0.texture;
-		this.projMaterial3.uniforms.projMap.value = this.fieldProj.texture;
+		this.projMaterial3.uniforms[ "densityMap" ].value = this.field0.texture;
+		this.projMaterial3.uniforms[ "projMap" ].value = this.fieldProj.texture;
 
 		// Projection pass 3
 

examples/js/objects/Lensflare.js

@@ -199,8 +199,8 @@ THREE.Lensflare = function () {
 			// render pink quad
 
 			var uniforms = material1a.uniforms;
-			uniforms.scale.value = scale;
-			uniforms.screenPosition.value = positionScreen;
+			uniforms[ "scale" ].value = scale;
+			uniforms[ "screenPosition" ].value = positionScreen;
 
 			renderer.renderBufferDirect( camera, null, geometry, material1a, mesh1, null );
 
@@ -211,8 +211,8 @@ THREE.Lensflare = function () {
 			// restore graphics
 
 			var uniforms = material1b.uniforms;
-			uniforms.scale.value = scale;
-			uniforms.screenPosition.value = positionScreen;
+			uniforms[ "scale" ].value = scale;
+			uniforms[ "screenPosition" ].value = positionScreen;
 
 			renderer.renderBufferDirect( camera, null, geometry, material1b, mesh1, null );
 
@@ -227,15 +227,15 @@ THREE.Lensflare = function () {
 
 				var uniforms = material2.uniforms;
 
-				uniforms.color.value.copy( element.color );
-				uniforms.map.value = element.texture;
-				uniforms.screenPosition.value.x = positionScreen.x + vecX * element.distance;
-				uniforms.screenPosition.value.y = positionScreen.y + vecY * element.distance;
+				uniforms[ "color" ].value.copy( element.color );
+				uniforms[ "map" ].value = element.texture;
+				uniforms[ "screenPosition" ].value.x = positionScreen.x + vecX * element.distance;
+				uniforms[ "screenPosition" ].value.y = positionScreen.y + vecY * element.distance;
 
 				var size = element.size / viewport.w;
 				var invAspect = viewport.w / viewport.z;
 
-				uniforms.scale.value.set( size * invAspect, size );
+				uniforms[ "scale" ].value.set( size * invAspect, size );
 
 				material2.uniformsNeedUpdate = true;
 

examples/js/objects/Reflector.js

@@ -58,9 +58,9 @@ THREE.Reflector = function ( geometry, options ) {
 		vertexShader: shader.vertexShader
 	} );
 
-	material.uniforms.tDiffuse.value = renderTarget.texture;
-	material.uniforms.color.value = color;
-	material.uniforms.textureMatrix.value = textureMatrix;
+	material.uniforms[ "tDiffuse" ].value = renderTarget.texture;
+	material.uniforms[ "color" ].value = color;
+	material.uniforms[ "textureMatrix" ].value = textureMatrix;
 
 	this.material = material;
 	this.renderOrder = - Infinity; // render first

examples/js/objects/Refractor.js

@@ -56,9 +56,9 @@ THREE.Refractor = function ( geometry, options ) {
 		transparent: true // ensures, refractors are drawn from farthest to closest
 	} );
 
-	this.material.uniforms.color.value = color;
-	this.material.uniforms.tDiffuse.value = renderTarget.texture;
-	this.material.uniforms.textureMatrix.value = textureMatrix;
+	this.material.uniforms[ "color" ].value = color;
+	this.material.uniforms[ "tDiffuse" ].value = renderTarget.texture;
+	this.material.uniforms[ "textureMatrix" ].value = textureMatrix;
 
 	// functions
 

examples/js/objects/Sky.js

@@ -34,12 +34,12 @@ THREE.Sky.prototype = Object.create( THREE.Mesh.prototype );
 THREE.Sky.SkyShader = {
 
 	uniforms: {
-		luminance: { value: 1 },
-		turbidity: { value: 2 },
-		rayleigh: { value: 1 },
-		mieCoefficient: { value: 0.005 },
-		mieDirectionalG: { value: 0.8 },
-		sunPosition: { value: new THREE.Vector3() }
+		"luminance": { value: 1 },
+		"turbidity": { value: 2 },
+		"rayleigh": { value: 1 },
+		"mieCoefficient": { value: 0.005 },
+		"mieDirectionalG": { value: 0.8 },
+		"sunPosition": { value: new THREE.Vector3() }
 	},
 
 	vertexShader: [

examples/js/objects/Water.js

@@ -69,17 +69,17 @@ THREE.Water = function ( geometry, options ) {
 			THREE.UniformsLib[ 'fog' ],
 			THREE.UniformsLib[ 'lights' ],
 			{
-				normalSampler: { value: null },
-				mirrorSampler: { value: null },
-				alpha: { value: 1.0 },
-				time: { value: 0.0 },
-				size: { value: 1.0 },
-				distortionScale: { value: 20.0 },
-				textureMatrix: { value: new THREE.Matrix4() },
-				sunColor: { value: new THREE.Color( 0x7F7F7F ) },
-				sunDirection: { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
-				eye: { value: new THREE.Vector3() },
-				waterColor: { value: new THREE.Color( 0x555555 ) }
+				"normalSampler": { value: null },
+				"mirrorSampler": { value: null },
+				"alpha": { value: 1.0 },
+				"time": { value: 0.0 },
+				"size": { value: 1.0 },
+				"distortionScale": { value: 20.0 },
+				"textureMatrix": { value: new THREE.Matrix4() },
+				"sunColor": { value: new THREE.Color( 0x7F7F7F ) },
+				"sunDirection": { value: new THREE.Vector3( 0.70707, 0.70707, 0 ) },
+				"eye": { value: new THREE.Vector3() },
+				"waterColor": { value: new THREE.Color( 0x555555 ) }
 			}
 		] ),
 
@@ -190,17 +190,17 @@ THREE.Water = function ( geometry, options ) {
 		fog: fog
 	} );
 
-	material.uniforms.mirrorSampler.value = renderTarget.texture;
-	material.uniforms.textureMatrix.value = textureMatrix;
-	material.uniforms.alpha.value = alpha;
-	material.uniforms.time.value = time;
-	material.uniforms.normalSampler.value = normalSampler;
-	material.uniforms.sunColor.value = sunColor;
-	material.uniforms.waterColor.value = waterColor;
-	material.uniforms.sunDirection.value = sunDirection;
-	material.uniforms.distortionScale.value = distortionScale;
-
-	material.uniforms.eye.value = eye;
+	material.uniforms[ "mirrorSampler" ].value = renderTarget.texture;
+	material.uniforms[ "textureMatrix" ].value = textureMatrix;
+	material.uniforms[ "alpha" ].value = alpha;
+	material.uniforms[ "time" ].value = time;
+	material.uniforms[ "normalSampler" ].value = normalSampler;
+	material.uniforms[ "sunColor" ].value = sunColor;
+	material.uniforms[ "waterColor" ].value = waterColor;
+	material.uniforms[ "sunDirection" ].value = sunDirection;
+	material.uniforms[ "distortionScale" ].value = distortionScale;
+
+	material.uniforms[ "eye" ].value = eye;
 
 	scope.material = material;
 

examples/js/objects/Water2.js

@@ -85,14 +85,14 @@ THREE.Water = function ( geometry, options ) {
 	if ( flowMap !== undefined ) {
 
 		this.material.defines.USE_FLOWMAP = '';
-		this.material.uniforms.tFlowMap = {
+		this.material.uniforms[ "tFlowMap" ] = {
 			type: 't',
 			value: flowMap
 		};
 
 	} else {
 
-		this.material.uniforms.flowDirection = {
+		this.material.uniforms[ "flowDirection" ] = {
 			type: 'v2',
 			value: flowDirection
 		};
@@ -104,23 +104,23 @@ THREE.Water = function ( geometry, options ) {
 	normalMap0.wrapS = normalMap0.wrapT = THREE.RepeatWrapping;
 	normalMap1.wrapS = normalMap1.wrapT = THREE.RepeatWrapping;
 
-	this.material.uniforms.tReflectionMap.value = reflector.getRenderTarget().texture;
-	this.material.uniforms.tRefractionMap.value = refractor.getRenderTarget().texture;
-	this.material.uniforms.tNormalMap0.value = normalMap0;
-	this.material.uniforms.tNormalMap1.value = normalMap1;
+	this.material.uniforms[ "tReflectionMap" ].value = reflector.getRenderTarget().texture;
+	this.material.uniforms[ "tRefractionMap" ].value = refractor.getRenderTarget().texture;
+	this.material.uniforms[ "tNormalMap0" ].value = normalMap0;
+	this.material.uniforms[ "tNormalMap1" ].value = normalMap1;
 
 	// water
 
-	this.material.uniforms.color.value = color;
-	this.material.uniforms.reflectivity.value = reflectivity;
-	this.material.uniforms.textureMatrix.value = textureMatrix;
+	this.material.uniforms[ "color" ].value = color;
+	this.material.uniforms[ "reflectivity" ].value = reflectivity;
+	this.material.uniforms[ "textureMatrix" ].value = textureMatrix;
 
 	// inital values
 
-	this.material.uniforms.config.value.x = 0; // flowMapOffset0
-	this.material.uniforms.config.value.y = halfCycle; // flowMapOffset1
-	this.material.uniforms.config.value.z = halfCycle; // halfCycle
-	this.material.uniforms.config.value.w = scale; // scale
+	this.material.uniforms[ "config" ].value.x = 0; // flowMapOffset0
+	this.material.uniforms[ "config" ].value.y = halfCycle; // flowMapOffset1
+	this.material.uniforms[ "config" ].value.z = halfCycle; // halfCycle
+	this.material.uniforms[ "config" ].value.w = scale; // scale
 
 	// functions
 
@@ -142,7 +142,7 @@ THREE.Water = function ( geometry, options ) {
 	function updateFlow() {
 
 		var delta = clock.getDelta();
-		var config = scope.material.uniforms.config;
+		var config = scope.material.uniforms[ "config" ];
 
 		config.value.x += flowSpeed * delta; // flowMapOffset0
 		config.value.y = config.value.x + halfCycle; // flowMapOffset1

examples/webgl2_materials_texture3d.html

@@ -181,7 +181,7 @@
 
 				if ( mesh ) {
 
-					var value = mesh.material.uniforms.depth.value;
+					var value = mesh.material.uniforms[ "depth" ].value;
 
 					value += depthStep;
 
@@ -194,7 +194,7 @@
 
 					}
 
-					mesh.material.uniforms.depth.value = value;
+					mesh.material.uniforms[ "depth" ].value = value;
 
 				}
 

examples/webgl2_materials_texture3d_volume.html

@@ -143,12 +143,12 @@
 
 				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
 
-				uniforms.u_data.value = texture;
-				uniforms.u_size.value.set( volume.xLength, volume.yLength, volume.zLength );
-				uniforms.u_clim.value.set( volconfig.clim1, volconfig.clim2 );
-				uniforms.u_renderstyle.value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
-				uniforms.u_renderthreshold.value = volconfig.isothreshold; // For ISO renderstyle
-				uniforms.u_cmdata.value = cmtextures[ volconfig.colormap ];
+				uniforms[ "u_data" ].value = texture;
+				uniforms[ "u_size" ].value.set( volume.xLength, volume.yLength, volume.zLength );
+				uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
+				uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
+				uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
+				uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
 				material = new THREE.ShaderMaterial( {
 					uniforms: uniforms,
@@ -174,10 +174,10 @@
 
 		function updateUniforms() {
 
-			material.uniforms.u_clim.value.set( volconfig.clim1, volconfig.clim2 );
-			material.uniforms.u_renderstyle.value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
-			material.uniforms.u_renderthreshold.value = volconfig.isothreshold; // For ISO renderstyle
-			material.uniforms.u_cmdata.value = cmtextures[ volconfig.colormap ];
+			material.uniforms[ "u_clim" ].value.set( volconfig.clim1, volconfig.clim2 );
+			material.uniforms[ "u_renderstyle" ].value = volconfig.renderstyle == 'mip' ? 0 : 1; // 0: MIP, 1: ISO
+			material.uniforms[ "u_renderthreshold" ].value = volconfig.isothreshold; // For ISO renderstyle
+			material.uniforms[ "u_cmdata" ].value = cmtextures[ volconfig.colormap ];
 
 			render();
 

examples/webgl_buffergeometry_instancing.html

@@ -188,8 +188,8 @@
 			var material = new THREE.RawShaderMaterial( {
 
 				uniforms: {
-					time: { value: 1.0 },
-					sineTime: { value: 1.0 }
+					"time": { value: 1.0 },
+					"sineTime": { value: 1.0 }
 				},
 				vertexShader: document.getElementById( 'vertexShader' ).textContent,
 				fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
@@ -260,8 +260,8 @@
 			var object = scene.children[ 0 ];
 
 			object.rotation.y = time * 0.0005;
-			object.material.uniforms.time.value = time * 0.005;
-			object.material.uniforms.sineTime.value = Math.sin( object.material.uniforms.time.value * 0.05 );
+			object.material.uniforms[ "time" ].value = time * 0.005;
+			object.material.uniforms[ "sineTime" ].value = Math.sin( object.material.uniforms[ "time" ].value * 0.05 );
 
 			renderer.render( scene, camera );
 

examples/webgl_buffergeometry_instancing_billboards.html

@@ -162,8 +162,8 @@
 
 			material = new THREE.RawShaderMaterial( {
 				uniforms: {
-					map: { value: new THREE.TextureLoader().load( 'textures/sprites/circle.png' ) },
-					time: { value: 0.0 }
+					"map": { value: new THREE.TextureLoader().load( 'textures/sprites/circle.png' ) },
+					"time": { value: 0.0 }
 				},
 				vertexShader: document.getElementById( 'vshader' ).textContent,
 				fragmentShader: document.getElementById( 'fshader' ).textContent,
@@ -210,7 +210,7 @@
 
 			var time = performance.now() * 0.0005;
 
-			material.uniforms.time.value = time;
+			material.uniforms[ "time" ].value = time;
 
 			mesh.rotation.x = time * 0.2;
 			mesh.rotation.y = time * 0.4;

examples/webgl_custom_attributes.html

@@ -109,13 +109,13 @@
 
 			uniforms = {
 
-				amplitude: { value: 1.0 },
-				color: { value: new THREE.Color( 0xff2200 ) },
-				texture: { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
+				"amplitude": { value: 1.0 },
+				"color": { value: new THREE.Color( 0xff2200 ) },
+				"texture": { value: new THREE.TextureLoader().load( "textures/water.jpg" ) }
 
 			};
 
-			uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
+			uniforms[ "texture" ].value.wrapS = uniforms[ "texture" ].value.wrapT = THREE.RepeatWrapping;
 
 			var shaderMaterial = new THREE.ShaderMaterial( {
 
@@ -184,8 +184,8 @@
 
 			sphere.rotation.y = sphere.rotation.z = 0.01 * time;
 
-			uniforms.amplitude.value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
-			uniforms.color.value.offsetHSL( 0.0005, 0, 0 );
+			uniforms[ "amplitude" ].value = 2.5 * Math.sin( sphere.rotation.y * 0.125 );
+			uniforms[ "color" ].value.offsetHSL( 0.0005, 0, 0 );
 
 			for ( var i = 0; i < displacement.length; i ++ ) {
 

examples/webgl_gpgpu_birds.html

@@ -510,10 +510,10 @@
 
 				var valuesChanger = function () {
 
-					velocityUniforms.seperationDistance.value = effectController.seperation;
-					velocityUniforms.alignmentDistance.value = effectController.alignment;
-					velocityUniforms.cohesionDistance.value = effectController.cohesion;
-					velocityUniforms.freedomFactor.value = effectController.freedom;
+					velocityUniforms[ "seperationDistance" ].value = effectController.seperation;
+					velocityUniforms[ "alignmentDistance" ].value = effectController.alignment;
+					velocityUniforms[ "cohesionDistance" ].value = effectController.cohesion;
+					velocityUniforms[ "freedomFactor" ].value = effectController.freedom;
 
 				};
 
@@ -531,7 +531,7 @@
 
 			function initComputeRenderer() {
 
-    				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
+				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
@@ -547,16 +547,16 @@
 				positionUniforms = positionVariable.material.uniforms;
 				velocityUniforms = velocityVariable.material.uniforms;
 
-				positionUniforms.time = { value: 0.0 };
-				positionUniforms.delta = { value: 0.0 };
-				velocityUniforms.time = { value: 1.0 };
-				velocityUniforms.delta = { value: 0.0 };
-				velocityUniforms.testing = { value: 1.0 };
-				velocityUniforms.seperationDistance = { value: 1.0 };
-				velocityUniforms.alignmentDistance = { value: 1.0 };
-				velocityUniforms.cohesionDistance = { value: 1.0 };
-				velocityUniforms.freedomFactor = { value: 1.0 };
-				velocityUniforms.predator = { value: new THREE.Vector3() };
+				positionUniforms[ "time" ] = { value: 0.0 };
+				positionUniforms[ "delta" ] = { value: 0.0 };
+				velocityUniforms[ "time" ] = { value: 1.0 };
+				velocityUniforms[ "delta" ] = { value: 0.0 };
+				velocityUniforms[ "testing" ] = { value: 1.0 };
+				velocityUniforms[ "seperationDistance" ] = { value: 1.0 };
+				velocityUniforms[ "alignmentDistance" ] = { value: 1.0 };
+				velocityUniforms[ "cohesionDistance" ] = { value: 1.0 };
+				velocityUniforms[ "freedomFactor" ] = { value: 1.0 };
+				velocityUniforms[ "predator" ] = { value: new THREE.Vector3() };
 				velocityVariable.material.defines.BOUNDS = BOUNDS.toFixed( 2 );
 
 				velocityVariable.wrapS = THREE.RepeatWrapping;
@@ -579,11 +579,11 @@
 
 				// For Vertex and Fragment
 				birdUniforms = {
-					color: { value: new THREE.Color( 0xff2200 ) },
-					texturePosition: { value: null },
-					textureVelocity: { value: null },
-					time: { value: 1.0 },
-					delta: { value: 0.0 }
+					"color": { value: new THREE.Color( 0xff2200 ) },
+					"texturePosition": { value: null },
+					"textureVelocity": { value: null },
+					"time": { value: 1.0 },
+					"delta": { value: 0.0 }
 				};
 
 				// ShaderMaterial
@@ -707,22 +707,22 @@
 				if ( delta > 1 ) delta = 1; // safety cap on large deltas
 				last = now;
 
-				positionUniforms.time.value = now;
-				positionUniforms.delta.value = delta;
-				velocityUniforms.time.value = now;
-				velocityUniforms.delta.value = delta;
-				birdUniforms.time.value = now;
-				birdUniforms.delta.value = delta;
+				positionUniforms[ "time" ].value = now;
+				positionUniforms[ "delta" ].value = delta;
+				velocityUniforms[ "time" ].value = now;
+				velocityUniforms[ "delta" ].value = delta;
+				birdUniforms[ "time" ].value = now;
+				birdUniforms[ "delta" ].value = delta;
 
-				velocityUniforms.predator.value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );
+				velocityUniforms[ "predator" ].value.set( 0.5 * mouseX / windowHalfX, - 0.5 * mouseY / windowHalfY, 0 );
 
 				mouseX = 10000;
 				mouseY = 10000;
 
 				gpuCompute.compute();
 
-				birdUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
-				birdUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+				birdUniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+				birdUniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
 
 				renderer.render( scene, camera );
 

examples/webgl_gpgpu_protoplanet.html

@@ -390,8 +390,8 @@
 
 				velocityUniforms = velocityVariable.material.uniforms;
 
-				velocityUniforms.gravityConstant = { value: 0.0 };
-				velocityUniforms.density = { value: 0.0 };
+				velocityUniforms[ "gravityConstant" ] = { value: 0.0 };
+				velocityUniforms[ "density" ] = { value: 0.0 };
 
 				var error = gpuCompute.init();
 
@@ -450,10 +450,10 @@
 				geometry.addAttribute( 'uv', new THREE.BufferAttribute( uvs, 2 ) );
 
 				particleUniforms = {
-					texturePosition: { value: null },
-					textureVelocity: { value: null },
-					cameraConstant: { value: getCameraConstant( camera ) },
-					density: { value: 0.0 }
+					"texturePosition": { value: null },
+					"textureVelocity": { value: null },
+					"cameraConstant": { value: getCameraConstant( camera ) },
+					"density": { value: 0.0 }
 				};
 
 				// ShaderMaterial
@@ -538,15 +538,15 @@
 
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				particleUniforms.cameraConstant.value = getCameraConstant( camera );
+				particleUniforms[ "cameraConstant" ].value = getCameraConstant( camera );
 
 			}
 
 			function dynamicValuesChanger() {
 
-				velocityUniforms.gravityConstant.value = effectController.gravityConstant;
-				velocityUniforms.density.value = effectController.density;
-				particleUniforms.density.value = effectController.density;
+				velocityUniforms[ "gravityConstant" ].value = effectController.gravityConstant;
+				velocityUniforms[ "density" ].value = effectController.density;
+				particleUniforms[ "density" ].value = effectController.density;
 
 			}
 
@@ -604,8 +604,8 @@
 
 				gpuCompute.compute();
 
-				particleUniforms.texturePosition.value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
-				particleUniforms.textureVelocity.value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
+				particleUniforms[ "texturePosition" ].value = gpuCompute.getCurrentRenderTarget( positionVariable ).texture;
+				particleUniforms[ "textureVelocity" ].value = gpuCompute.getCurrentRenderTarget( velocityVariable ).texture;
 
 				renderer.render( scene, camera );
 

examples/webgl_gpgpu_water.html

@@ -399,8 +399,8 @@
 
 				var valuesChanger = function () {
 
-					heightmapVariable.material.uniforms.mouseSize.value = effectController.mouseSize;
-					heightmapVariable.material.uniforms.viscosityConstant.value = effectController.viscosity;
+					heightmapVariable.material.uniforms[ "mouseSize" ].value = effectController.mouseSize;
+					heightmapVariable.material.uniforms[ "viscosityConstant" ].value = effectController.viscosity;
 					spheresEnabled = effectController.spheresEnabled;
 					for ( var i = 0; i < NUM_SPHERES; i ++ ) {
 
@@ -447,7 +447,7 @@
 					uniforms: THREE.UniformsUtils.merge( [
 						THREE.ShaderLib[ 'phong' ].uniforms,
 						{
-							heightmap: { value: null }
+							"heightmap": { value: null }
 						}
 					] ),
 					vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
@@ -463,10 +463,10 @@
 				material.shininess = 50;
 
 				// Sets the uniforms with the material values
-				material.uniforms.diffuse.value = material.color;
-				material.uniforms.specular.value = material.specular;
-				material.uniforms.shininess.value = Math.max( material.shininess, 1e-4 );
-				material.uniforms.opacity.value = material.opacity;
+				material.uniforms[ "diffuse" ].value = material.color;
+				material.uniforms[ "specular" ].value = material.specular;
+				material.uniforms[ "shininess" ].value = Math.max( material.shininess, 1e-4 );
+				material.uniforms[ "opacity" ].value = material.opacity;
 
 				// Defines
 				material.defines.WIDTH = WIDTH.toFixed( 1 );
@@ -502,10 +502,10 @@
 
 				gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );
 
-				heightmapVariable.material.uniforms.mousePos = { value: new THREE.Vector2( 10000, 10000 ) };
-				heightmapVariable.material.uniforms.mouseSize = { value: 20.0 };
-				heightmapVariable.material.uniforms.viscosityConstant = { value: 0.98 };
-				heightmapVariable.material.uniforms.heightCompensation = { value: 0 };
+				heightmapVariable.material.uniforms[ "mousePos" ] = { value: new THREE.Vector2( 10000, 10000 ) };
+				heightmapVariable.material.uniforms[ "mouseSize" ] = { value: 20.0 };
+				heightmapVariable.material.uniforms[ "viscosityConstant" ] = { value: 0.98 };
+				heightmapVariable.material.uniforms[ "heightCompensation" ] = { value: 0 };
 				heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );
 
 				var error = gpuCompute.init();
@@ -592,10 +592,10 @@
 
 				for ( var i = 0; i < 10; i ++ ) {
 
-					smoothShader.uniforms.texture.value = currentRenderTarget.texture;
+					smoothShader.uniforms[ "texture" ].value = currentRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
 
-					smoothShader.uniforms.texture.value = alternateRenderTarget.texture;
+					smoothShader.uniforms[ "texture" ].value = alternateRenderTarget.texture;
 					gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
 
 				}
@@ -632,7 +632,7 @@
 
 				var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
 
-				readWaterLevelShader.uniforms.texture.value = currentRenderTarget.texture;
+				readWaterLevelShader.uniforms[ "texture" ].value = currentRenderTarget.texture;
 				var gl = renderer.context;
 
 				for ( var i = 0; i < NUM_SPHERES; i ++ ) {
@@ -644,7 +644,7 @@
 						// Read water level and orientation
 						var u = 0.5 * sphere.position.x / BOUNDS_HALF + 0.5;
 						var v = 1 - ( 0.5 * sphere.position.z / BOUNDS_HALF + 0.5 );
-						readWaterLevelShader.uniforms.point1.value.set( u, v );
+						readWaterLevelShader.uniforms[ "point1" ].value.set( u, v );
 						gpuCompute.doRenderTarget( readWaterLevelShader, readWaterLevelRenderTarget );
 						gl.readPixels( 0, 0, 4, 1, gl.RGBA, gl.UNSIGNED_BYTE, readWaterLevelImage );
 						var pixels = new Float32Array( readWaterLevelImage.buffer );
@@ -763,11 +763,11 @@
 					if ( intersects.length > 0 ) {
 
 					    var point = intersects[ 0 ].point;
-					    uniforms.mousePos.value.set( point.x, point.z );
+					    uniforms[ "mousePos" ].value.set( point.x, point.z );
 
 					} else {
 
-					    uniforms.mousePos.value.set( 10000, 10000 );
+					    uniforms[ "mousePos" ].value.set( 10000, 10000 );
 
 					}
 
@@ -775,7 +775,7 @@
 
 				} else {
 
-					uniforms.mousePos.value.set( 10000, 10000 );
+					uniforms[ "mousePos" ].value.set( 10000, 10000 );
 
 				}
 
@@ -789,7 +789,7 @@
 				}
 
 				// Get compute output in custom uniform
-				waterUniforms.heightmap.value = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture;
+				waterUniforms[ "heightmap" ].value = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture;
 
 				// Render
 				renderer.render( scene, camera );

examples/webgl_hdr.html

@@ -137,9 +137,9 @@
 				materialHDR = new THREE.ShaderMaterial( {
 
 					uniforms: {
-						tDiffuse: { value: texture },
-						exposure: { value: 0.125 },
-						brightMax: { value: 0.5 }
+						"tDiffuse": { value: texture },
+						"exposure": { value: 0.125 },
+						"brightMax": { value: 0.5 }
 					},
 					vertexShader: getText( 'vs-hdr' ),
 					fragmentShader: getText( 'fs-hdr' )
@@ -196,7 +196,7 @@
 
 				var delta = clock.getDelta() * 5;
 
-				if ( materialHDR.uniforms.exposure.value > 0 || materialHDR.uniforms.exposure.value < 1 ) {
+				if ( materialHDR.uniforms[ "exposure" ].value > 0 || materialHDR.uniforms[ "exposure" ].value < 1 ) {
 
 					rate = 0.25;
 
@@ -206,13 +206,13 @@
 
 				}
 
-				if ( materialHDR.uniforms.exposure.value > 5 || materialHDR.uniforms.exposure.value <= 0 ) {
+				if ( materialHDR.uniforms[ "exposure" ].value > 5 || materialHDR.uniforms[ "exposure" ].value <= 0 ) {
 
 					sign *= - 1;
 
 				}
 
-				materialHDR.uniforms.exposure.value += sign * rate * delta;
+				materialHDR.uniforms[ "exposure" ].value += sign * rate * delta;
 
 				renderer.render( scene, camera );
 

examples/webgl_interactive_instances_gpu.html

@@ -583,11 +583,11 @@
 				objectCount ++;
 
 				object.material = material.clone();
-				object.material.uniforms.color.value.setHex( Math.random() * 0xffffff );
+				object.material.uniforms[ "color" ].value.setHex( Math.random() * 0xffffff );
 				materialList.push( object.material );
 
 				pickingObject.material = pickingMaterial.clone();
-				pickingObject.material.uniforms.pickingColor.value.setHex( i + 1 );
+				pickingObject.material.uniforms[ "pickingColor" ].value.setHex( i + 1 );
 				materialList.push( pickingObject.material );
 
 				pickingData[ i + 1 ] = object;
@@ -613,7 +613,7 @@
 				vertexShader: vert,
 				fragmentShader: frag,
 				uniforms: {
-					color: {
+					"color": {
 						value: new THREE.Color()
 					}
 				}
@@ -624,7 +624,7 @@
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag,
 				uniforms: {
-					pickingColor: {
+					"pickingColor": {
 						value: new THREE.Color()
 					}
 				}

examples/webgl_lights_hemisphere.html

@@ -167,14 +167,14 @@
 				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
 				var fragmentShader = document.getElementById( 'fragmentShader' ).textContent;
 				var uniforms = {
-					topColor: { value: new THREE.Color( 0x0077ff ) },
-					bottomColor: { value: new THREE.Color( 0xffffff ) },
-					offset: { value: 33 },
-					exponent: { value: 0.6 }
+					"topColor": { value: new THREE.Color( 0x0077ff ) },
+					"bottomColor": { value: new THREE.Color( 0xffffff ) },
+					"offset": { value: 33 },
+					"exponent": { value: 0.6 }
 				};
-				uniforms.topColor.value.copy( hemiLight.color );
+				uniforms[ "topColor" ].value.copy( hemiLight.color );
 
-				scene.fog.color.copy( uniforms.bottomColor.value );
+				scene.fog.color.copy( uniforms[ "bottomColor" ].value );
 
 				var skyGeo = new THREE.SphereBufferGeometry( 4000, 32, 15 );
 				var skyMat = new THREE.ShaderMaterial( { vertexShader: vertexShader, fragmentShader: fragmentShader, uniforms: uniforms, side: THREE.BackSide } );

examples/webgl_marchingcubes.html

@@ -276,14 +276,14 @@
 				dottedMaterial = createShaderMaterial( "dotted", light, ambientLight ),
 				dottedMaterial2 = createShaderMaterial( "dotted", light, ambientLight );
 
-			hatchingMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
-			hatchingMaterial2.uniforms.uLineColor1.value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms.uLineColor2.value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms.uLineColor3.value.setHSL( 0, 0.8, 0.5 );
-			hatchingMaterial2.uniforms.uLineColor4.value.setHSL( 0.1, 0.8, 0.5 );
+			hatchingMaterial2.uniforms[ "uBaseColor" ].value.setRGB( 0, 0, 0 );
+			hatchingMaterial2.uniforms[ "uLineColor1" ].value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms[ "uLineColor2" ].value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms[ "uLineColor3" ].value.setHSL( 0, 0.8, 0.5 );
+			hatchingMaterial2.uniforms[ "uLineColor4" ].value.setHSL( 0.1, 0.8, 0.5 );
 
-			dottedMaterial2.uniforms.uBaseColor.value.setRGB( 0, 0, 0 );
-			dottedMaterial2.uniforms.uLineColor1.value.setHSL( 0.05, 1.0, 0.5 );
+			dottedMaterial2.uniforms[ "uBaseColor" ].value.setRGB( 0, 0, 0 );
+			dottedMaterial2.uniforms[ "uLineColor1" ].value.setHSL( 0.05, 1.0, 0.5 );
 
 			var texture = new THREE.TextureLoader().load( "textures/UV_Grid_Sm.jpg" );
 			texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
@@ -391,10 +391,10 @@
 
 			var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
 
-			material.uniforms.uDirLightPos.value = light.position;
-			material.uniforms.uDirLightColor.value = light.color;
+			material.uniforms[ "uDirLightPos" ].value = light.position;
+			material.uniforms[ "uDirLightColor" ].value = light.color;
 
-			material.uniforms.uAmbientLightColor.value = ambientLight.color;
+			material.uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
 
 			return material;
 
@@ -588,7 +588,7 @@
 
 				if ( current_material === "dotted2" ) {
 
-					effect.material.uniforms.uLineColor1.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
+					effect.material.uniforms[ "uLineColor1" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 				} else if ( current_material === "hatching2" ) {
 
@@ -601,7 +601,7 @@
 
 				} else {
 
-					effect.material.uniforms.uBaseColor.value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
+					effect.material.uniforms[ "uBaseColor" ].value.setHSL( effectController.hue, effectController.saturation, effectController.lightness );
 
 				}
 

examples/webgl_postprocessing_fxaa.html

@@ -61,9 +61,9 @@
 					texture.magFilter = THREE.LinearFilter;
 
 					var fxaaMaterial = new THREE.ShaderMaterial( THREE.FXAAShader );
-					fxaaMaterial.uniforms.tDiffuse.value = texture;
-					fxaaMaterial.uniforms.resolution.value.x = 1 / image.naturalWidth;
-					fxaaMaterial.uniforms.resolution.value.y = 1 / image.naturalHeight;
+					fxaaMaterial.uniforms[ "tDiffuse" ].value = texture;
+					fxaaMaterial.uniforms[ "resolution" ].value.x = 1 / image.naturalWidth;
+					fxaaMaterial.uniforms[ "resolution" ].value.y = 1 / image.naturalHeight;
 
 					var basicMaterial = new THREE.MeshBasicMaterial( { map: texture } );
 

examples/webgl_postprocessing_pixel.html

@@ -66,7 +66,7 @@
 
 			function updateGUI() {
 
-				pixelPass.uniforms.pixelSize.value = params.pixelSize;
+				pixelPass.uniforms[ "pixelSize" ].value = params.pixelSize;
 
 			}
 
@@ -76,7 +76,7 @@
 				camera.updateProjectionMatrix();
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				pixelPass.uniforms.resolution.value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
+				pixelPass.uniforms[ "resolution" ].value.set( window.innerWidth, window.innerHeight ).multiplyScalar( window.devicePixelRatio );
 
 			}
 
@@ -145,8 +145,8 @@
 				composer.addPass( new THREE.RenderPass( scene, camera ) );
 
 				pixelPass = new THREE.ShaderPass( THREE.PixelShader );
-				pixelPass.uniforms.resolution.value = new THREE.Vector2( window.innerWidth, window.innerHeight );
-				pixelPass.uniforms.resolution.value.multiplyScalar( window.devicePixelRatio );
+				pixelPass.uniforms[ "resolution" ].value = new THREE.Vector2( window.innerWidth, window.innerHeight );
+				pixelPass.uniforms[ "resolution" ].value.multiplyScalar( window.devicePixelRatio );
 				pixelPass.renderToScreen = true;
 				composer.addPass( pixelPass );
 

examples/webgl_postprocessing_rgb_halftone.html

@@ -167,31 +167,31 @@
 		var controller, gui, onGUIChange;
 
 		controller = {
-			radius: halftonePass.uniforms.radius.value,
-			rotateR: halftonePass.uniforms.rotateR.value / ( Math.PI / 180 ),
-			rotateG: halftonePass.uniforms.rotateG.value / ( Math.PI / 180 ),
-			rotateB: halftonePass.uniforms.rotateB.value / ( Math.PI / 180 ),
-			scatter: halftonePass.uniforms.scatter.value,
-			shape: halftonePass.uniforms.shape.value,
-			greyscale: halftonePass.uniforms.greyscale.value,
-			blending: halftonePass.uniforms.blending.value,
-			blendingMode: halftonePass.uniforms.blendingMode.value,
-			disable: halftonePass.uniforms.disable.value
+			radius: halftonePass.uniforms[ "radius" ].value,
+			rotateR: halftonePass.uniforms[ "rotateR" ].value / ( Math.PI / 180 ),
+			rotateG: halftonePass.uniforms[ "rotateG" ].value / ( Math.PI / 180 ),
+			rotateB: halftonePass.uniforms[ "rotateB" ].value / ( Math.PI / 180 ),
+			scatter: halftonePass.uniforms[ "scatter" ].value,
+			shape: halftonePass.uniforms[ "shape" ].value,
+			greyscale: halftonePass.uniforms[ "greyscale" ].value,
+			blending: halftonePass.uniforms[ "blending" ].value,
+			blendingMode: halftonePass.uniforms[ "blendingMode" ].value,
+			disable: halftonePass.uniforms[ "disable" ].value
 		};
 
 		onGUIChange = function () {
 
 			// update uniforms
-			halftonePass.uniforms.radius.value = controller.radius;
-			halftonePass.uniforms.rotateR.value = controller.rotateR * ( Math.PI / 180 );
-			halftonePass.uniforms.rotateG.value = controller.rotateG * ( Math.PI / 180 );
-			halftonePass.uniforms.rotateB.value = controller.rotateB * ( Math.PI / 180 );
-			halftonePass.uniforms.scatter.value = controller.scatter;
-			halftonePass.uniforms.shape.value = controller.shape;
-			halftonePass.uniforms.greyscale.value = controller.greyscale;
-			halftonePass.uniforms.blending.value = controller.blending;
-			halftonePass.uniforms.blendingMode.value = controller.blendingMode;
-			halftonePass.uniforms.disable.value = controller.disable;
+			halftonePass.uniforms[ "radius" ].value = controller.radius;
+			halftonePass.uniforms[ "rotateR" ].value = controller.rotateR * ( Math.PI / 180 );
+			halftonePass.uniforms[ "rotateG" ].value = controller.rotateG * ( Math.PI / 180 );
+			halftonePass.uniforms[ "rotateB" ].value = controller.rotateB * ( Math.PI / 180 );
+			halftonePass.uniforms[ "scatter" ].value = controller.scatter;
+			halftonePass.uniforms[ "shape" ].value = controller.shape;
+			halftonePass.uniforms[ "greyscale" ].value = controller.greyscale;
+			halftonePass.uniforms[ "blending" ].value = controller.blending;
+			halftonePass.uniforms[ "blendingMode" ].value = controller.blendingMode;
+			halftonePass.uniforms[ "disable" ].value = controller.disable;
 
 		};
 

examples/webgl_postprocessing_sobel.html

@@ -119,8 +119,8 @@
 
 				effectSobel = new THREE.ShaderPass( THREE.SobelOperatorShader );
 				effectSobel.renderToScreen = true;
-				effectSobel.uniforms.resolution.value.x = window.innerWidth;
-				effectSobel.uniforms.resolution.value.y = window.innerHeight;
+				effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth;
+				effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
 				composer.addPass( effectSobel );
 
 				var controls = new THREE.OrbitControls( camera );
@@ -146,8 +146,8 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				composer.setSize( window.innerWidth, window.innerHeight );
 
-				effectSobel.uniforms.resolution.value.x = window.innerWidth;
-				effectSobel.uniforms.resolution.value.y = window.innerHeight;
+				effectSobel.uniforms[ "resolution" ].value.x = window.innerWidth;
+				effectSobel.uniforms[ "resolution" ].value.y = window.innerHeight;
 
 			}
 

examples/webgl_read_float_buffer.html

@@ -132,7 +132,7 @@
 
 				material = new THREE.ShaderMaterial( {
 
-					uniforms: { time: { value: 0.0 } },
+					uniforms: { "time": { value: 0.0 } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragment_shader_pass_1' ).textContent
 
@@ -140,7 +140,7 @@
 
 				var materialScreen = new THREE.ShaderMaterial( {
 
-					uniforms: { tDiffuse: { value: rtTexture.texture } },
+					uniforms: { "tDiffuse": { value: rtTexture.texture } },
 					vertexShader: document.getElementById( 'vertexShader' ).textContent,
 					fragmentShader: document.getElementById( 'fragment_shader_screen' ).textContent,
 
@@ -228,13 +228,13 @@
 
 				}
 
-				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
+				if ( material.uniforms[ "time" ].value > 1 || material.uniforms[ "time" ].value < 0 ) {
 
 					delta *= - 1;
 
 				}
 
-				material.uniforms.time.value += delta;
+				material.uniforms[ "time" ].value += delta;
 
 				renderer.clear();
 

examples/webgl_refraction.html

@@ -103,7 +103,7 @@
 			} );
 
 			dudvMap.wrapS = dudvMap.wrapT = THREE.RepeatWrapping;
-			refractor.material.uniforms.tDudv.value = dudvMap;
+			refractor.material.uniforms[ "tDudv" ].value = dudvMap;
 
 			// light
 
@@ -150,7 +150,7 @@
 
 		function render() {
 
-			refractor.material.uniforms.time.value += clock.getDelta();
+			refractor.material.uniforms[ "time" ].value += clock.getDelta();
 
 			renderer.render( scene, camera );
 

examples/webgl_rtt.html

@@ -244,13 +244,13 @@
 
 				}
 
-				if ( material.uniforms.time.value > 1 || material.uniforms.time.value < 0 ) {
+				if ( material.uniforms[ "time" ].value > 1 || material.uniforms[ "time" ].value < 0 ) {
 
 					delta *= - 1;
 
 				}
 
-				material.uniforms.time.value += delta;
+				material.uniforms[ "time" ].value += delta;
 
 				renderer.clear();
 

examples/webgl_shader.html

@@ -116,7 +116,7 @@
 				var geometry = new THREE.PlaneBufferGeometry( 2, 2 );
 
 				uniforms = {
-					time: { value: 1.0 }
+					"time": { value: 1.0 }
 				};
 
 				var material = new THREE.ShaderMaterial( {
@@ -152,7 +152,7 @@
 
 				requestAnimationFrame( animate );
 
-				uniforms.time.value = timestamp / 1000;
+				uniforms[ "time" ].value = timestamp / 1000;
 
 				renderer.render( scene, camera );
 

examples/webgl_shader2.html

@@ -191,15 +191,15 @@
 				var geometry = new THREE.BoxBufferGeometry( 0.75, 0.75, 0.75 );
 
 				uniforms1 = {
-					time: { value: 1.0 }
+					"time": { value: 1.0 }
 				};
 
 				uniforms2 = {
-					time: { value: 1.0 },
-					texture: { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
+					"time": { value: 1.0 },
+					"texture": { value: new THREE.TextureLoader().load( 'textures/disturb.jpg' ) }
 				};
 
-				uniforms2.texture.value.wrapS = uniforms2.texture.value.wrapT = THREE.RepeatWrapping;
+				uniforms2[ "texture" ].value.wrapS = uniforms2[ "texture" ].value.wrapT = THREE.RepeatWrapping;
 
 				var params = [
 					[ 'fragment_shader1', uniforms1 ],
@@ -262,8 +262,8 @@
 
 				var delta = clock.getDelta();
 
-				uniforms1.time.value += delta * 5;
-				uniforms2.time.value = clock.elapsedTime;
+				uniforms1[ "time" ].value += delta * 5;
+				uniforms2[ "time" ].value = clock.elapsedTime;
 
 				for ( var i = 0; i < scene.children.length; i ++ ) {
 

examples/webgl_shader_lava.html

@@ -143,17 +143,17 @@
 
 				uniforms = {
 
-					fogDensity: { value: 0.45 },
-					fogColor: { value: new THREE.Vector3( 0, 0, 0 ) },
-					time: { value: 1.0 },
-					uvScale: { value: new THREE.Vector2( 3.0, 1.0 ) },
-					texture1: { value: textureLoader.load( 'textures/lava/cloud.png' ) },
-					texture2: { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
+					"fogDensity": { value: 0.45 },
+					"fogColor": { value: new THREE.Vector3( 0, 0, 0 ) },
+					"time": { value: 1.0 },
+					"uvScale": { value: new THREE.Vector2( 3.0, 1.0 ) },
+					"texture1": { value: textureLoader.load( 'textures/lava/cloud.png' ) },
+					"texture2": { value: textureLoader.load( 'textures/lava/lavatile.jpg' ) }
 
 				};
 
-				uniforms.texture1.value.wrapS = uniforms.texture1.value.wrapT = THREE.RepeatWrapping;
-				uniforms.texture2.value.wrapS = uniforms.texture2.value.wrapT = THREE.RepeatWrapping;
+				uniforms[ "texture1" ].value.wrapS = uniforms[ "texture1" ].value.wrapT = THREE.RepeatWrapping;
+				uniforms[ "texture2" ].value.wrapS = uniforms[ "texture2" ].value.wrapT = THREE.RepeatWrapping;
 
 				var size = 0.65;
 
@@ -224,7 +224,7 @@
 
 				var delta = 5 * clock.getDelta();
 
-				uniforms.time.value += 0.2 * delta;
+				uniforms[ "time" ].value += 0.2 * delta;
 
 				mesh.rotation.y += 0.0125 * delta;
 				mesh.rotation.x += 0.05 * delta;

examples/webgl_shaders_ocean.html

@@ -115,11 +115,11 @@
 
 				var uniforms = sky.material.uniforms;
 
-				uniforms.turbidity.value = 10;
-				uniforms.rayleigh.value = 2;
-				uniforms.luminance.value = 1;
-				uniforms.mieCoefficient.value = 0.005;
-				uniforms.mieDirectionalG.value = 0.8;
+				uniforms[ "turbidity" ].value = 10;
+				uniforms[ "rayleigh" ].value = 2;
+				uniforms[ "luminance" ].value = 1;
+				uniforms[ "mieCoefficient" ].value = 0.005;
+				uniforms[ "mieDirectionalG" ].value = 0.8;
 
 				var parameters = {
 					distance: 400,
@@ -140,8 +140,8 @@
 					light.position.y = parameters.distance * Math.sin( phi ) * Math.sin( theta );
 					light.position.z = parameters.distance * Math.sin( phi ) * Math.cos( theta );
 
-					sky.material.uniforms.sunPosition.value = light.position.copy( light.position );
-					water.material.uniforms.sunDirection.value.copy( light.position ).normalize();
+					sky.material.uniforms[ "sunPosition" ].value = light.position.copy( light.position );
+					water.material.uniforms[ "sunDirection" ].value.copy( light.position ).normalize();
 
 					cubeCamera.update( renderer, scene );
 
@@ -242,7 +242,7 @@
 				sphere.rotation.x = time * 0.5;
 				sphere.rotation.z = time * 0.51;
 
-				water.material.uniforms.time.value += 1.0 / 60.0;
+				water.material.uniforms[ "time" ].value += 1.0 / 60.0;
 
 				renderer.render( scene, camera );
 

examples/webgl_shaders_ocean2.html

@@ -113,9 +113,9 @@
 							RESOLUTION: res
 						} );
 
-					this.ms_Ocean.materialOcean.uniforms.u_projectionMatrix = { value: this.ms_Camera.projectionMatrix };
-					this.ms_Ocean.materialOcean.uniforms.u_viewMatrix = { value: this.ms_Camera.matrixWorldInverse };
-					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition = { value: this.ms_Camera.position };
+					this.ms_Ocean.materialOcean.uniforms[ "u_projectionMatrix" ] = { value: this.ms_Camera.projectionMatrix };
+					this.ms_Ocean.materialOcean.uniforms[ "u_viewMatrix" ] = { value: this.ms_Camera.matrixWorldInverse };
+					this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ] = { value: this.ms_Camera.position };
 					this.ms_Scene.add( this.ms_Ocean.oceanMesh );
 
 					var gui = new dat.GUI();
@@ -193,18 +193,18 @@
 
 					if ( this.ms_Ocean.changed ) {
 
-						this.ms_Ocean.materialOcean.uniforms.u_size.value = this.ms_Ocean.size;
-						this.ms_Ocean.materialOcean.uniforms.u_sunDirection.value.set( this.ms_Ocean.sunDirectionX, this.ms_Ocean.sunDirectionY, this.ms_Ocean.sunDirectionZ );
-						this.ms_Ocean.materialOcean.uniforms.u_exposure.value = this.ms_Ocean.exposure;
+						this.ms_Ocean.materialOcean.uniforms[ "u_size" ].value = this.ms_Ocean.size;
+						this.ms_Ocean.materialOcean.uniforms[ "u_sunDirection" ].value.set( this.ms_Ocean.sunDirectionX, this.ms_Ocean.sunDirectionY, this.ms_Ocean.sunDirectionZ );
+						this.ms_Ocean.materialOcean.uniforms[ "u_exposure" ].value = this.ms_Ocean.exposure;
 						this.ms_Ocean.changed = false;
 
 					}
 
-					this.ms_Ocean.materialOcean.uniforms.u_normalMap.value = this.ms_Ocean.normalMapFramebuffer.texture;
-					this.ms_Ocean.materialOcean.uniforms.u_displacementMap.value = this.ms_Ocean.displacementMapFramebuffer.texture;
-					this.ms_Ocean.materialOcean.uniforms.u_projectionMatrix.value = this.ms_Camera.projectionMatrix;
-					this.ms_Ocean.materialOcean.uniforms.u_viewMatrix.value = this.ms_Camera.matrixWorldInverse;
-					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition.value = this.ms_Camera.position;
+					this.ms_Ocean.materialOcean.uniforms[ "u_normalMap" ].value = this.ms_Ocean.normalMapFramebuffer.texture;
+					this.ms_Ocean.materialOcean.uniforms[ "u_displacementMap" ].value = this.ms_Ocean.displacementMapFramebuffer.texture;
+					this.ms_Ocean.materialOcean.uniforms[ "u_projectionMatrix" ].value = this.ms_Camera.projectionMatrix;
+					this.ms_Ocean.materialOcean.uniforms[ "u_viewMatrix" ].value = this.ms_Camera.matrixWorldInverse;
+					this.ms_Ocean.materialOcean.uniforms[ "u_cameraPosition" ].value = this.ms_Camera.position;
 					this.ms_Ocean.materialOcean.depthTest = true;
 					//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
 					this.Display();

examples/webgl_shaders_sky.html

@@ -96,11 +96,11 @@
 				function guiChanged() {
 
 					var uniforms = sky.material.uniforms;
-					uniforms.turbidity.value = effectController.turbidity;
-					uniforms.rayleigh.value = effectController.rayleigh;
-					uniforms.luminance.value = effectController.luminance;
-					uniforms.mieCoefficient.value = effectController.mieCoefficient;
-					uniforms.mieDirectionalG.value = effectController.mieDirectionalG;
+					uniforms[ "turbidity" ].value = effectController.turbidity;
+					uniforms[ "rayleigh" ].value = effectController.rayleigh;
+					uniforms[ "luminance" ].value = effectController.luminance;
+					uniforms[ "mieCoefficient" ].value = effectController.mieCoefficient;
+					uniforms[ "mieDirectionalG" ].value = effectController.mieDirectionalG;
 
 					var theta = Math.PI * ( effectController.inclination - 0.5 );
 					var phi = 2 * Math.PI * ( effectController.azimuth - 0.5 );
@@ -111,7 +111,7 @@
 
 					sunSphere.visible = effectController.sun;
 
-					uniforms.sunPosition.value.copy( sunSphere.position );
+					uniforms[ "sunPosition" ].value.copy( sunSphere.position );
 
 					renderer.render( scene, camera );
 

examples/webgl_shaders_tonemapping.html

@@ -287,7 +287,7 @@
 				// Skybox
 				adaptiveLuminanceMat = new THREE.ShaderMaterial( {
 					uniforms: {
-						map: { value: null }
+						"map": { value: null }
 					},
 					vertexShader: vBGShader,
 					fragmentShader: pBGShader,
@@ -298,7 +298,7 @@
 
 				currentLuminanceMat = new THREE.ShaderMaterial( {
 					uniforms: {
-						map: { value: null }
+						"map": { value: null }
 					},
 					vertexShader: vBGShader,
 					fragmentShader: pBGShader,
@@ -445,8 +445,8 @@
 				if ( adaptToneMappingPass ) {
 
 					adaptToneMappingPass.setAdaptionRate( params.adaptionRate );
-					adaptiveLuminanceMat.uniforms.map.value = adaptToneMappingPass.luminanceRT;
-					currentLuminanceMat.uniforms.map.value = adaptToneMappingPass.currentLuminanceRT;
+					adaptiveLuminanceMat.uniforms[ "map" ].value = adaptToneMappingPass.luminanceRT;
+					currentLuminanceMat.uniforms[ "map" ].value = adaptToneMappingPass.currentLuminanceRT;
 
 					adaptToneMappingPass.enabled = params.enabled;
 					adaptToneMappingPass.setMaxLuminance( params.maxLuminance );

examples/webgl_terrain_dynamic.html

@@ -297,17 +297,17 @@
 
 				uniformsNoise = {
 
-					time: { value: 1.0 },
-					scale: { value: new THREE.Vector2( 1.5, 1.5 ) },
-					offset: { value: new THREE.Vector2( 0, 0 ) }
+					"time": { value: 1.0 },
+					"scale": { value: new THREE.Vector2( 1.5, 1.5 ) },
+					"offset": { value: new THREE.Vector2( 0, 0 ) }
 
 				};
 
 				uniformsNormal = THREE.UniformsUtils.clone( normalShader.uniforms );
 
-				uniformsNormal.height.value = 0.05;
-				uniformsNormal.resolution.value.set( rx, ry );
-				uniformsNormal.heightMap.value = heightMap.texture;
+				uniformsNormal[ "height" ].value = 0.05;
+				uniformsNormal[ "resolution" ].value.set( rx, ry );
+				uniformsNormal[ "heightMap" ].value = heightMap.texture;
 
 				var vertexShader = document.getElementById( 'vertexShader' ).textContent;
 

examples/webgl_tiled_forward.html

@@ -230,10 +230,10 @@
 		var materials = [];
 
 		var Heads = [
-			{ type: 'physical', uniforms: { diffuse: 0x888888, metalness: 1.0, roughness: 0.66 }, defines: {} },
-			{ type: 'standard', uniforms: { diffuse: 0x666666, metalness: 0.1, roughness: 0.33 }, defines: {} },
-			{ type: 'phong', uniforms: { diffuse: 0x777777, shininess: 20 }, defines: {} },
-			{ type: 'phong', uniforms: { diffuse: 0x555555, shininess: 10 }, defines: { TOON: 1 } }
+			{ type: 'physical', uniforms: { "diffuse": 0x888888, "metalness": 1.0, "roughness": 0.66 }, defines: {} },
+			{ type: 'standard', uniforms: { "diffuse": 0x666666, "metalness": 0.1, "roughness": 0.33 }, defines: {} },
+			{ type: 'phong', uniforms: { "diffuse": 0x777777, "shininess": 20 }, defines: {} },
+			{ type: 'phong', uniforms: { "diffuse": 0x555555, "shininess": 10 }, defines: { TOON: 1 } }
 		];
 
 		function init( geom ) {
@@ -255,10 +255,10 @@
 					transparent: tIndex === index ? true : false,
 				} );
 
-				mtl.uniforms.opacity.value = tIndex === index ? 0.9 : 1;
-				mtl.uniforms.tileData = State.tileData;
-				mtl.uniforms.tileTexture = State.tileTexture;
-				mtl.uniforms.lightTexture = State.lightTexture;
+				mtl.uniforms[ "opacity" ].value = tIndex === index ? 0.9 : 1;
+				mtl.uniforms[ "tileData" ] = State.tileData;
+				mtl.uniforms[ "tileTexture" ] = State.tileTexture;
+				mtl.uniforms[ "lightTexture" ] = State.lightTexture;
 
 				for ( var u in conf.uniforms ) {
 

examples/webgl_water.html

@@ -173,24 +173,24 @@
 
 			gui.addColor( params, 'color' ).onChange( function ( value ) {
 
-				water.material.uniforms.color.value.set( value );
+				water.material.uniforms[ "color" ].value.set( value );
 
 			} );
 			gui.add( params, 'scale', 1, 10 ).onChange( function ( value ) {
 
-				water.material.uniforms.config.value.w = value;
+				water.material.uniforms[ "config" ].value.w = value;
 
 			} );
 			gui.add( params, 'flowX', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
-				water.material.uniforms.flowDirection.value.x = value;
-				water.material.uniforms.flowDirection.value.normalize();
+				water.material.uniforms[ "flowDirection" ].value.x = value;
+				water.material.uniforms[ "flowDirection" ].value.normalize();
 
 			} );
 			gui.add( params, 'flowY', - 1, 1 ).step( 0.01 ).onChange( function ( value ) {
 
-				water.material.uniforms.flowDirection.value.y = value;
-				water.material.uniforms.flowDirection.value.normalize();
+				water.material.uniforms[ "flowDirection" ].value.y = value;
+				water.material.uniforms[ "flowDirection" ].value.normalize();
 
 			} );