Refactored uniforms cloning into separate file so that it can be reused also...

Refactored uniforms cloning into separate file so that it can be reused also for MeshShaderMaterials.

Also changed MeshShaderMaterial demos to show how to use cloning. For these particular demos uniforms cloning is not really necessary as they use only one instance of shader material, but for example, if there were two normal mapped models in one scene, each model would need separate material with own uniforms.

examples/materials_normalmap.html

@@ -153,9 +153,8 @@
 
 				// normal map shader
 				
-				var fragment_shader = ShaderUtils.lib[ "normal" ].fragment_shader;
-				var vertex_shader = ShaderUtils.lib[ "normal" ].vertex_shader;
-				var uniforms = ShaderUtils.lib[ "normal" ].uniforms;
+				var shader = ShaderUtils.lib[ "normal" ];
+				var uniforms = Uniforms.clone( shader.uniforms );
 
 				uniforms[ "enableAO" ].value = true;
 				uniforms[ "enableDiffuse" ].value = false;
@@ -181,10 +180,8 @@
 				
 				uniforms[ "uShininess" ].value = shininess;
 
-				var material1 = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader, 
-															    vertex_shader: vertex_shader, 
-															    uniforms: uniforms
-															  } );
+				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
+				var material1 = new THREE.MeshShaderMaterial( parameters );
 
 				var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess } );
 

examples/materials_normalmap2.html

@@ -141,9 +141,8 @@
 
 				var ambient = 0x444444, diffuse = 0x888888, specular = 0x080810, shininess = 2;
 
-				var fragment_shader = ShaderUtils.lib[ "normal" ].fragment_shader;
-				var vertex_shader = ShaderUtils.lib[ "normal" ].vertex_shader;
-				var uniforms = ShaderUtils.lib[ "normal" ].uniforms;
+				var shader = ShaderUtils.lib[ "normal" ];
+				var uniforms = Uniforms.clone( shader.uniforms );
  
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 				uniforms[ "uNormalScale" ].value = - 0.75;
@@ -167,10 +166,8 @@
 
 				uniforms[ "uShininess" ].value = shininess;
 
-				var material = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader, 
-									    vertex_shader: vertex_shader, 
-									    uniforms: uniforms
-									  } );
+				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
+				var material = new THREE.MeshShaderMaterial( parameters );
 
 				loader = new THREE.Loader( true );
 				document.body.appendChild( loader.statusDomElement );

examples/materials_shaders_fresnel.html

@@ -92,16 +92,13 @@
 				var images = ImageUtils.loadArray( urls );
 				var textureCube = new THREE.Texture( images );
 
-				var fragment_shader = ShaderUtils.lib["fresnel"].fragment_shader;
-				var vertex_shader = ShaderUtils.lib["fresnel"].vertex_shader;
-				var uniforms = ShaderUtils.lib["fresnel"].uniforms;
+				var shader = ShaderUtils.lib["fresnel"];
+				var uniforms = Uniforms.clone( shader.uniforms );
 
 				uniforms["tCube"].texture = textureCube;
 
-				var material = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader, 
-															   vertex_shader: vertex_shader, 
-															   uniforms: uniforms
-															} );
+				var parameters = { fragment_shader: shader.fragment_shader, vertex_shader: shader.vertex_shader, uniforms: uniforms };
+				var material = new THREE.MeshShaderMaterial( parameters );
 
 				for ( var i = 0; i < 200; i ++ ) {
 
@@ -111,6 +108,7 @@
 					mesh.position.z = Math.random() * 10000 - 5000;
 					mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 4 + 1;
 					scene.addObject( mesh );
+					
 				}
 
 				SceneUtils.addPanoramaCubeWebGL( sceneCube, 100000, textureCube );

examples/uqbiquity_test.html

@@ -53,6 +53,7 @@
 		<script type="text/javascript" src="../src/materials/ParticleCircleMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/ParticleDOMMaterial.js"></script>
 		<script type="text/javascript" src="../src/materials/Texture.js"></script>
+		<script type="text/javascript" src="../src/materials/Uniforms.js"></script>
 		<script type="text/javascript" src="../src/materials/mappings/CubeReflectionMapping.js"></script>
 		<script type="text/javascript" src="../src/materials/mappings/CubeRefractionMapping.js"></script>
 		<script type="text/javascript" src="../src/materials/mappings/LatitudeReflectionMapping.js"></script>

src/materials/Uniforms.js

+var Uniforms = {
+	
+	clone: function( uniforms_src ) {
+		
+		var u, p, parameter, uniforms_dst = {};
+		
+		for ( u in uniforms_src ) {
+			
+			uniforms_dst[ u ] = {};
+			
+			for ( p in uniforms_src[ u ] ) {
+				
+				parameter_src = uniforms_src[ u ][ p ];
+				
+				if ( parameter_src instanceof THREE.Color ||
+					 parameter_src instanceof THREE.Vector3 ||
+					 parameter_src instanceof THREE.Texture ) {
+				
+					uniforms_dst[ u ][ p ] = parameter_src.clone();
+					
+				} else {
+					
+					uniforms_dst[ u ][ p ] = parameter_src;
+					
+				}
+				
+			}
+			
+		}
+		
+		return uniforms_dst;
+		
+	}
+	
+}

src/renderers/WebGLRenderer.js

@@ -371,44 +371,12 @@ THREE.WebGLRenderer = function ( parameters ) {
 		geometryChunk.__webGLLineCount = lineArray.length;
 
 	};
-
-	function cloneUniforms( uniforms_src ) {
-		
-		var u, p, parameter, uniforms_dst = {};
-		
-		for ( u in uniforms_src ) {
-			
-			uniforms_dst[ u ] = {};
-			
-			for ( p in uniforms_src[ u ] ) {
-				
-				parameter_src = uniforms_src[ u ][ p ];
-				
-				if ( parameter_src instanceof THREE.Color ||
-					 parameter_src instanceof THREE.Vector3 ||
-					 parameter_src instanceof THREE.Texture ) {
-				
-					uniforms_dst[ u ][ p ] = parameter_src.clone();
-					
-				} else {
-					
-					uniforms_dst[ u ][ p ] = parameter_src;
-					
-				}
-				
-			}
-			
-		}
-		
-		return uniforms_dst;
-		
-	};
 	
 	function setMaterialShaders( material, shaders ) {
 
 		material.fragment_shader = shaders.fragment_shader;
 		material.vertex_shader = shaders.vertex_shader;
-		material.uniforms = cloneUniforms( shaders.uniforms );
+		material.uniforms = Uniforms.clone( shaders.uniforms );
 
 	};
 

utils/build.py

@@ -48,6 +48,7 @@ COMMON_FILES = [
 'materials/ParticleCircleMaterial.js',
 'materials/ParticleDOMMaterial.js',
 'materials/Texture.js',
+'materials/Uniforms.js',
 'materials/mappings/CubeReflectionMapping.js',
 'materials/mappings/CubeRefractionMapping.js',
 'materials/mappings/LatitudeReflectionMapping.js',
@@ -235,6 +236,7 @@ WEBGL_FILES = [
 'materials/ParticleBasicMaterial.js',
 'materials/ParticleCircleMaterial.js',
 'materials/Texture.js',
+'materials/Uniforms.js',
 'materials/mappings/CubeReflectionMapping.js',
 'materials/mappings/CubeRefractionMapping.js',
 'materials/mappings/LatitudeReflectionMapping.js',