Prettified dynamic Uniforms. @arose note that I've changed the object, camera order. See #7048.

examples/webgl_interactive_instances_gpu.html

@@ -604,36 +604,32 @@
 			var vert = document.getElementById( 'vertMaterial' ).textContent;
 			var frag = document.getElementById( 'fragMaterial' ).textContent;
 
+			function updateColor( object, camera ) {
+
+				this.value.setHex( object.userData.color );
+
+			}
+
 			var material = new THREE.RawShaderMaterial( {
 				vertexShader: vert,
 				fragmentShader: frag,
 				uniforms: {
-					color: {
-						type: "c",
-						value: new THREE.Color(),
-						updateFunction: function( uniform, camera, object ) {
-
-							uniform.value.setHex( object.userData.color );
-
-						}
-					}
+					color: new THREE.Uniform( 'c', new THREE.Color() ).onUpdate( updateColor )
 				}
 			} );
 			materialList.push( material );
 
+			function updatePickingColor( object, camera ) {
+
+				this.value.setHex( object.userData.pickingColor );
+
+			}
+
 			var pickingMaterial = new THREE.RawShaderMaterial( {
 				vertexShader: "#define PICKING\n" + vert,
 				fragmentShader: "#define PICKING\n" + frag,
 				uniforms: {
-					pickingColor: {
-						type: "c",
-						value: new THREE.Color(),
-						updateFunction: function( uniform, camera, object ) {
-
-							uniform.value.setHex( object.userData.pickingColor );
-
-						}
-					}
+					pickingColor: new THREE.Uniform( 'c', new THREE.Color() ).onUpdate( updatePickingColor )
 				}
 			} );
 			materialList.push( pickingMaterial );
@@ -1070,4 +1066,4 @@
 	</script>
 
 </body>
-</html>
+</html>

src/core/Uniform.js

@@ -0,0 +1,27 @@
+/**
+ * @author mrdoob / http://mrdoob.com/
+ */
+
+THREE.Uniform = function ( type, value ) {
+
+	this.type = type;
+	this.value = value;
+
+	this.dynamic = false;
+
+};
+
+THREE.Uniform.prototype = {
+
+	constructor: THREE.Uniform,
+
+	onUpdate: function ( callback ) {
+
+		this.dynamic = true;
+		this.onUpdateCallback = callback;
+
+		return this;
+
+	}
+
+};

src/renderers/WebGLRenderer.js

@@ -1531,7 +1531,7 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 			var uniform = materialProperties.uniformsList[ j ][ 0 ];
 
-			if( typeof uniform.updateFunction === "function" ){
+			if ( uniform.dynamic === true ) {
 
 				materialProperties.hasDynamicUniforms = true;
 				break;
@@ -1831,9 +1831,9 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 		}
 
-		if( materialProperties.hasDynamicUniforms === true ){
+		if ( materialProperties.hasDynamicUniforms === true ) {
 
-			updateDynamicUniforms( materialProperties.uniformsList, camera, object );
+			updateDynamicUniforms( materialProperties.uniformsList, object, camera );
 
 		}
 
@@ -1841,18 +1841,18 @@ THREE.WebGLRenderer = function ( parameters ) {
 
 	}
 
-	function updateDynamicUniforms ( uniforms, camera, object ) {
+	function updateDynamicUniforms ( uniforms, object, camera ) {
 
 		var dynamicUniforms = [];
 
 		for ( var j = 0, jl = uniforms.length; j < jl; j ++ ) {
 
 			var uniform = uniforms[ j ][ 0 ];
-			var updateFunction = uniform.updateFunction;
+			var onUpdateCallback = uniform.onUpdateCallback;
 
-			if( typeof updateFunction === "function" ){
+			if ( onUpdateCallback !== undefined ) {
 
-				updateFunction( uniform, camera, object );
+				onUpdateCallback.bind( uniform )( object, camera );
 				dynamicUniforms.push( uniforms[ j ] );
 
 			}

utils/build/includes/common.json

@@ -39,6 +39,7 @@
 	"src/core/DirectGeometry.js",
 	"src/core/BufferGeometry.js",
 	"src/core/InstancedBufferGeometry.js",
+	"src/core/Uniform.js",
 	"src/animation/AnimationClip.js",
 	"src/animation/AnimationMixer.js",
 	"src/animation/AnimationObjectGroup.js",