diff --git a/examples/files.js b/examples/files.js
index a84dc6bae96e69..e35f16db166bce 100644
--- a/examples/files.js
+++ b/examples/files.js
@@ -298,6 +298,7 @@ var files = {
 		"webgl_custom_attributes_points2",
 		"webgl_custom_attributes_points3",
 		"webgl_materials_modified",
+		"webgl_materials_modified2",
 		"webgl_raymarching_reflect",
 		"webgl_shadowmap_pcss",
 		"webgl_simple_gi",
diff --git a/examples/js/SpecGlossMultiUVInstanceExample.js b/examples/js/SpecGlossMultiUVInstanceExample.js
new file mode 100644
index 00000000000000..e74061ed3b3e00
--- /dev/null
+++ b/examples/js/SpecGlossMultiUVInstanceExample.js
@@ -0,0 +1,383 @@
+// some utils
+
+function addOrMergeProp( material, propName, data ) {
+
+	if ( material[ propName ] ) {
+
+		Object.assign( material[ propName ], data );
+
+	} else {
+
+		material[ propName ] = data;
+
+	}
+
+}
+
+//serialize
+function toJSON(){
+	var res = THREE.Material.prototype.toJSON.call(
+		this, 
+		undefined, 
+		this._serializationManager.serialize.bind(this._serializationManager)
+	)
+	this._serializationManager.afterSerialize.call(this._serializationManager,res)
+	return res
+}
+
+// from three's texture transform api, to be applied to a uniform matrix
+function setUvTransform( tx, ty, sx, sy, rotation, cx, cy ) {
+
+	var c = Math.cos( rotation );
+	var s = Math.sin( rotation );
+
+	this.set(
+		sx * c, sx * s, - sx * ( c * cx + s * cy ) + cx + tx,
+		- sy * s, sy * c, - sy * ( - s * cx + c * cy ) + cy + ty,
+		0, 0, 0
+	);
+
+}
+
+//spec gloss stuff ---------------------------------------------------------
+
+//this extends the shader to use specular gloss PBR model instead of rough/metal
+
+var specularMapFragmentChunk = [
+	'vec3 specularFactor = specular;',
+	'#ifdef USE_SPECULARMAP',
+	'	vec4 texelSpecular = texture2D( specularMap, vUv );',
+	'	texelSpecular = sRGBToLinear( texelSpecular );',
+	'	// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
+	'	specularFactor *= texelSpecular.rgb;',
+	'#endif',
+	// 'gl_FragColor = vec4(vec3(specularFactor),1.);',
+	// 'return;',
+].join( '\n' );
+
+var glossinessMapFragmentChunk = [
+	'float glossinessFactor = glossiness;',
+	'#ifdef USE_GLOSSINESSMAP',
+	'	vec4 texelGlossiness = texture2D( glossinessMap, vUv );',
+	'	// reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',
+	'	glossinessFactor *= texelGlossiness.a;',
+	// 'gl_FragColor = vec4(vec3(glossinessFactor),1.);',
+	// 'return;',
+	'#endif',
+].join( '\n' );
+
+var lightPhysicalFragmentChunk = [
+	'PhysicalMaterial material;',
+	'material.diffuseColor = diffuseColor.rgb;',
+	'material.specularRoughness = clamp( 1.0 - glossinessFactor, 0.04, 1.0 );',
+	'material.specularColor = specularFactor.rgb;',
+].join( '\n' );
+
+var SHADER_INCLUDES_SPEC_GLOSS = {
+	roughnessmap_fragment: specularMapFragmentChunk,
+	metalnessmap_fragment: glossinessMapFragmentChunk,
+	lights_physical_fragment: lightPhysicalFragmentChunk,
+};
+
+function decorateMaterialWithSpecGloss( material ) {
+
+	if ( material.isSpecGlossExtended ) return material;
+
+	material.isSpecGlossExtended = true;
+
+	// these are the extra uniforms, but instead of being stored in .userData, or some such place
+	// a designated prop could be used
+	var shaderUniforms = {
+		specular: { value: new THREE.Color().setHex( 0xffffff ), type: 'vec3', stage: 'fragment' }, //fragment can be ommitted (defaults to it) but for sake of clarity
+		glossiness: { value: 1, type: 'float', stage: 'fragment' },
+		glossinessMap: { value: null, type: 'sampler2D', stage: 'fragment' },
+		specularMap: { value: null, type: 'sampler2D', stage: 'fragment' },
+	};
+
+	var shaderIncludes = Object.assign({},SHADER_INCLUDES_SPEC_GLOSS)
+
+	var defines = {USE_GLOSSINESSMAP: ''}
+
+	//conflicts could be resolved here
+	addOrMergeProp( material, 'shaderUniforms', shaderUniforms );
+	addOrMergeProp( material, 'shaderIncludes', shaderIncludes );
+	addOrMergeProp( material, 'defines', defines );
+
+	delete material.metalnessMap
+	delete material.roughnessMap
+
+	//expose uniforms as props for a cleaner interface (but shaderUniforms is also available so this can be omitted)
+	//it just leads to a cleaner more familiar interface (PhongMaterial has specularMap, so this now has it too)
+	for ( let propName in shaderUniforms ) {
+
+		Object.defineProperty( material, propName, {
+			get: ()=> shaderUniforms[ propName ].value,
+			set: ( v )=> (shaderUniforms[ propName ].value = v),
+		} );
+
+	}
+
+	if(!material._serializationManager) material._serializationManager = new SerializationManager()
+	var f = function(data,meta){
+		if( !data.metadata.extensions ) data.metadata.extensions = {}
+		data.metadata.extensions.isSpecGlossExtended = true
+		data.glossiness = this.glossiness
+		data.specular = this.specular.getHex()
+		if(this.glossinessMap && this.glossinessMap.isTexture) data.glossinessMap = this.glossinessMap.toJSON( meta ).uuid 
+	}.bind(material)
+
+	material._serializationManager.addFunction(f)
+		
+	material.toJSON = toJSON.bind(material)
+
+	return material
+
+}
+
+// multi uv stuff ---------------------------------------------------------
+
+// this moves the transform from textures to the material, textures become just data
+
+//list of maps to be extended, these are easy
+var DEFAULT_MAP_LIST = [
+	'alphaMap',
+	'specularMap',
+	'map',
+	'emissiveMap',
+	'metalnessMap',
+	'roughnessMap',
+	'glossinessMap' //this one is from the other example, but if its there it should work, this can be solved to work together somehow
+];
+
+//this can be programatic
+//it tells the extension where to look for certain maps
+//these follow the /texture2D( $mapname, vUv )/ pattern
+//normal map is a bit more complex and would require a non programatic chunk 
+var PROP_TO_CHUNK_MAP = {
+	'alphaMap': 'alphamap_fragment',
+	'specularMap': 'specularmap_fragment',
+	'map': 'map_fragment',
+	'emissiveMap': 'emissivemap_fragment',
+	'metalnessMap': 'metalnessmap_fragment',
+	'roughnessMap': 'roughnessmap_fragment',
+	'glossinessMap': 'metalnessmap_fragment', //this one cant be programatic because it belongs to another override, could be a specific check somewhere else
+	'specularMapGloss': 'roughnessmap_fragment',
+};
+
+//some utils
+
+var mapRegex = /texture2D\( (.*Map|map), vUv \)/gm //look for the pattern /texture2D( $someMap, vUv )/
+
+//because the other extension changes roughnessMap to specularMap we need the $1 to replace the name, otherwise it could be `mapName`
+function getReplaceString(mapName){
+	return `texture2D( $1, ( ${getUniformNameFromProp(mapName)} * vec3( vUv, 1. ) ).xy )`
+}
+
+//in order to keep the uniform name obvious that it belongs to the GLSL context, and to make it as private sounding as possible
+function getUniformNameFromProp(prop){
+	return `u_${prop}Transform`
+}
+
+//a utility to add the necessary transform properties to a material based on an arbitrary map name
+//so if specularMap is provided it will create these Vector2, a float, and an updateMatrix method
+//this is very similar to the Texture transform interface the only difference being that the props are prefixed
+//myTexture.repeat vs myMaterial.specularMapRepeat 
+function addMapTransformPropsToMaterial( material, mapName ){
+
+	let _mapName = mapName
+	material[`${mapName}Repeat`] = new THREE.Vector2(1,1)
+	material[`${mapName}Offset`] = new THREE.Vector2()
+	material[`${mapName}Center`] = new THREE.Vector2()
+	material[`${mapName}Rotation`] = 0
+	material[`${mapName}UpdateMatrix`] = function(){
+		this.shaderUniforms[getUniformNameFromProp(_mapName)].value
+		.setUvTransform(
+			this[`${_mapName}Offset`].x,
+			this[`${_mapName}Offset`].y, 
+			this[`${_mapName}Repeat`].x,
+			this[`${_mapName}Repeat`].y, 
+			this[`${_mapName}Rotation`], 
+			this[`${_mapName}Center`].x,
+			this[`${_mapName}Center`].y, 
+		)
+	}.bind(material)
+}
+
+
+function decorateMaterialWithPerMapTransforms( material, mapList ) {
+	
+	if ( material.isPerMapTransformExtended ) return material;
+
+	material.isPerMapTransformExtended = true;
+
+	//one can provide a subset from outside
+	mapList = mapList || DEFAULT_MAP_LIST;
+
+	var shaderUniforms = {}
+	var shaderIncludes = {}
+	var serialize = []
+
+	for ( var i = 0; i < mapList.length; i ++ ) {
+
+		var mapName = mapList[ i ];
+
+
+		if ( material[ mapName ] !== undefined ) {
+
+			addMapTransformPropsToMaterial(material, mapName)
+
+			var uniform = { value: new THREE.Matrix3(), type:'mat3', stage: 'fragment' };
+			uniform.value.setUvTransform = setUvTransform.bind( uniform.value );
+
+			shaderUniforms[getUniformNameFromProp(mapName)] = uniform
+
+			//this is for resolving the conflict, its not the most elegant solution but it works
+			//i believe that this would be solved by refactoring the shader templates
+			var lookup = mapName
+			if( material.isSpecGlossExtended && mapName === 'specularMap'){
+				lookup = 'specularMapGloss' 
+			}
+			serialize.push(mapName)
+
+			//based on the map name ie. specularMap or even an extended glossinessMap pick a chunk
+			var chunkName = PROP_TO_CHUNK_MAP[lookup]
+
+			//if there already is a chunk from some extension, pick that, otherwise copy the default chunk
+			var shaderChunk = (material.shaderIncludes && material.shaderIncludes[chunkName]) || THREE.ShaderChunk[chunkName]
+
+			//apply the string transformation, this contains the copy of whatever chunk was provided (default or custom)
+			shaderChunk = shaderChunk.replace( mapRegex , getReplaceString(mapName) )
+
+			//provide this copy as the include chunk, this shader wont look up THREE.ShaderChunk 
+			//and doesnt have to wait for onBeforeCompile to do the transformation
+			//final transformed chunk is already stored here in this context sync
+			shaderIncludes[ chunkName ] = shaderChunk
+
+		}
+
+	}
+
+	//combine with other chunks
+	addOrMergeProp( material, 'shaderUniforms', shaderUniforms );
+	addOrMergeProp( material, 'shaderIncludes', shaderIncludes );
+
+	if(!material._serializationManager) material._serializationManager = new SerializationManager()
+
+	material._serializationManager.addFunction(((data,meta)=>{
+		if( !data.metadata.extensions ) data.metadata.extensions = {}
+		data.metadata.extensions.isPerMapTransformExtended = true
+
+		serialize.forEach(mapName=>{
+			data[`${mapName}Repeat`] = material[`${mapName}Repeat`].toArray()
+			data[`${mapName}Offset`] = material[`${mapName}Offset`].toArray()
+			data[`${mapName}Center`] = material[`${mapName}Center`].toArray()
+			data[`${mapName}Rotation`] = material[`${mapName}Rotation`]
+		})
+
+		return data
+
+	}).bind(material))
+
+
+	material._serializationManager.addAfterFunction(
+		function( data ){
+			delete data.roughnessMap
+			delete data.roughness
+			delete data.metalnessMap
+			delete data.metalness	
+		}
+	)
+	
+	material.toJSON = toJSON.bind(material)
+
+	return material
+}
+
+// simple instance stuff from lambert example  ---------------------------------------------------------
+
+//this is a stage after begin_vertex, this would be more elegant with hooks and template refactor
+var after_vertex_transform_chunk = `
+	transformed *= instanceScale; //the value present in transformed is in model space, 
+	transformed = transformed + instanceOffset;
+`
+
+function decorateMaterialWithSimpleInstancing( material ) {
+
+	if( material.isSimpleInstanceExtended ) return material
+
+	material.isSimpleInstanceExtended = true 
+	
+	//make a custom chunk that includes a copy of the default chunk from THREE.ShaderChunk
+	//followed by a custom chunk, that is simply appended to the copy
+	var shaderIncludes = { 
+		begin_vertex:`
+			${THREE.ShaderChunk.begin_vertex}
+			${after_vertex_transform_chunk}
+		` 
+	}
+
+	//no good global chunk, but could be uv_pars, heres how to make it work with onbeforecompile
+	//because this is somewhat of a set and forget thing, onBeforeCompile (or onBeforeParse) is 
+	//perfectly valid to use here
+	//"here are some attribute names, whenver you get around to assemblying the shader on WebGL level use them"
+	//A uniform (over an attribute) would be better if it were available in this scope
+	
+	var attributeInjection = `
+		attribute vec3 instanceOffset; 
+		attribute float instanceScale;
+	`
+
+	material.onBeforeCompile = shader => {
+		shader.vertexShader = `
+		${attributeInjection}
+		${shader.vertexShader}
+		`
+	}
+
+	//alternatively one can use `uv_pars_vertex`
+	//since displacement map is used in almost all of the shaders, this chunk is present 
+	//depth for example, has this chunk, so whatever attribute is added to StandardMaterial
+	//is also going to be added to DepthMaterial
+	/*shaderIncludes = {
+		uv_pars_vertex: `
+		${attributeInjection}
+		${THREE.ShaderChunk.uv_pars_vertex}
+		`
+	}*/
+
+	addOrMergeProp( material, 'shaderIncludes', shaderIncludes );
+
+	if(!material._serializationManager) material._serializationManager = new SerializationManager()
+
+	material._serializationManager.addFunction((data)=>{
+		if( !data.metadata.extensions ) data.metadata.extensions = {}
+		data.metadata.extensions.isSimpleInstanceExtended = true
+	})
+	
+	material.toJSON = toJSON.bind(material)
+
+	return material
+
+}
+
+
+function SerializationManager(){
+	this.processFunctions = []
+	this.afterFunctions = []
+}
+
+SerializationManager.prototype = {
+	addFunction: function( func ){
+		this.processFunctions.push(func)
+	},
+	serialize(data, meta){
+		this.processFunctions.forEach(f=>f(data,meta))
+		return data
+	},
+	afterSerialize(data){
+		this.afterFunctions.forEach(f=>f(data))
+	},
+	addAfterFunction: function( func ){
+		this.afterFunctions.push(func)
+	}
+}
\ No newline at end of file
diff --git a/examples/js/loaders/GLTFLoader.js b/examples/js/loaders/GLTFLoader.js
index b0353d1954ab62..f24927773a21f3 100644
--- a/examples/js/loaders/GLTFLoader.js
+++ b/examples/js/loaders/GLTFLoader.js
@@ -565,7 +565,7 @@ THREE.GLTFLoader = ( function () {
 
 			getMaterialType: function () {
 
-				return THREE.ShaderMaterial;
+				return 'SPEC_GLOSS';
 
 			},
 
@@ -573,72 +573,6 @@ THREE.GLTFLoader = ( function () {
 
 				var pbrSpecularGlossiness = material.extensions[ this.name ];
 
-				var shader = THREE.ShaderLib[ 'standard' ];
-
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-
-				var specularMapParsFragmentChunk = [
-					'#ifdef USE_SPECULARMAP',
-					'	uniform sampler2D specularMap;',
-					'#endif'
-				].join( '\n' );
-
-				var glossinessMapParsFragmentChunk = [
-					'#ifdef USE_GLOSSINESSMAP',
-					'	uniform sampler2D glossinessMap;',
-					'#endif'
-				].join( '\n' );
-
-				var specularMapFragmentChunk = [
-					'vec3 specularFactor = specular;',
-					'#ifdef USE_SPECULARMAP',
-					'	vec4 texelSpecular = texture2D( specularMap, vUv );',
-					'	texelSpecular = sRGBToLinear( texelSpecular );',
-					'	// reads channel RGB, compatible with a glTF Specular-Glossiness (RGBA) texture',
-					'	specularFactor *= texelSpecular.rgb;',
-					'#endif'
-				].join( '\n' );
-
-				var glossinessMapFragmentChunk = [
-					'float glossinessFactor = glossiness;',
-					'#ifdef USE_GLOSSINESSMAP',
-					'	vec4 texelGlossiness = texture2D( glossinessMap, vUv );',
-					'	// reads channel A, compatible with a glTF Specular-Glossiness (RGBA) texture',
-					'	glossinessFactor *= texelGlossiness.a;',
-					'#endif'
-				].join( '\n' );
-
-				var lightPhysicalFragmentChunk = [
-					'PhysicalMaterial material;',
-					'material.diffuseColor = diffuseColor.rgb;',
-					'material.specularRoughness = clamp( 1.0 - glossinessFactor, 0.04, 1.0 );',
-					'material.specularColor = specularFactor.rgb;',
-				].join( '\n' );
-
-				var fragmentShader = shader.fragmentShader
-					.replace( 'uniform float roughness;', 'uniform vec3 specular;' )
-					.replace( 'uniform float metalness;', 'uniform float glossiness;' )
-					.replace( '#include <roughnessmap_pars_fragment>', specularMapParsFragmentChunk )
-					.replace( '#include <metalnessmap_pars_fragment>', glossinessMapParsFragmentChunk )
-					.replace( '#include <roughnessmap_fragment>', specularMapFragmentChunk )
-					.replace( '#include <metalnessmap_fragment>', glossinessMapFragmentChunk )
-					.replace( '#include <lights_physical_fragment>', lightPhysicalFragmentChunk );
-
-				delete uniforms.roughness;
-				delete uniforms.metalness;
-				delete uniforms.roughnessMap;
-				delete uniforms.metalnessMap;
-
-				uniforms.specular = { value: new THREE.Color().setHex( 0x111111 ) };
-				uniforms.glossiness = { value: 0.5 };
-				uniforms.specularMap = { value: null };
-				uniforms.glossinessMap = { value: null };
-
-				params.vertexShader = shader.vertexShader;
-				params.fragmentShader = fragmentShader;
-				params.uniforms = uniforms;
-				params.defines = { 'STANDARD': '' };
-
 				params.color = new THREE.Color( 1.0, 1.0, 1.0 );
 				params.opacity = 1.0;
 
@@ -683,19 +617,14 @@ THREE.GLTFLoader = ( function () {
 
 			createMaterial: function ( params ) {
 
-				// setup material properties based on MeshStandardMaterial for Specular-Glossiness
-
-				var material = new THREE.ShaderMaterial( {
-					defines: params.defines,
-					vertexShader: params.vertexShader,
-					fragmentShader: params.fragmentShader,
-					uniforms: params.uniforms,
+				var material = new THREE.MeshStandardMaterial( {
 					fog: true,
-					lights: true,
 					opacity: params.opacity,
 					transparent: params.transparent
 				} );
 
+				decorateMaterialWithSpecGloss( material );
+
 				material.isGLTFSpecularGlossinessMaterial = true;
 
 				material.color = params.color;
@@ -722,10 +651,22 @@ THREE.GLTFLoader = ( function () {
 				material.displacementScale = 1;
 				material.displacementBias = 0;
 
-				material.specularMap = params.specularMap === undefined ? null : params.specularMap;
+				if ( params.specularMap ) {
+
+					material.specularMap = params.specularMap;
+					material.defines.USE_SPECULARMAP = '';
+
+				}
+
 				material.specular = params.specular;
 
-				material.glossinessMap = params.glossinessMap === undefined ? null : params.glossinessMap;
+				if ( params.glossinessMap ) {
+
+					material.glossinessMap = params.glossinessMap;
+					material.defines.USE_GLOSSINESSMAP = '';
+
+				}
+
 				material.glossiness = params.glossiness;
 
 				material.alphaMap = null;
@@ -735,8 +676,6 @@ THREE.GLTFLoader = ( function () {
 
 				material.refractionRatio = 0.98;
 
-				material.extensions.derivatives = true;
-
 				return material;
 
 			},
@@ -771,157 +710,13 @@ THREE.GLTFLoader = ( function () {
 
 			},
 
-			// Here's based on refreshUniformsCommon() and refreshUniformsStandard() in WebGLRenderer.
-			refreshUniforms: function ( renderer, scene, camera, geometry, material, group ) {
-
-				if ( material.isGLTFSpecularGlossinessMaterial !== true ) {
-
-					return;
-
-				}
-
-				var uniforms = material.uniforms;
-				var defines = material.defines;
-
-				uniforms.opacity.value = material.opacity;
-
-				uniforms.diffuse.value.copy( material.color );
-				uniforms.emissive.value.copy( material.emissive ).multiplyScalar( material.emissiveIntensity );
-
-				uniforms.map.value = material.map;
-				uniforms.specularMap.value = material.specularMap;
-				uniforms.alphaMap.value = material.alphaMap;
-
-				uniforms.lightMap.value = material.lightMap;
-				uniforms.lightMapIntensity.value = material.lightMapIntensity;
-
-				uniforms.aoMap.value = material.aoMap;
-				uniforms.aoMapIntensity.value = material.aoMapIntensity;
-
-				// uv repeat and offset setting priorities
-				// 1. color map
-				// 2. specular map
-				// 3. normal map
-				// 4. bump map
-				// 5. alpha map
-				// 6. emissive map
-
-				var uvScaleMap;
-
-				if ( material.map ) {
-
-					uvScaleMap = material.map;
-
-				} else if ( material.specularMap ) {
-
-					uvScaleMap = material.specularMap;
-
-				} else if ( material.displacementMap ) {
-
-					uvScaleMap = material.displacementMap;
-
-				} else if ( material.normalMap ) {
-
-					uvScaleMap = material.normalMap;
-
-				} else if ( material.bumpMap ) {
-
-					uvScaleMap = material.bumpMap;
-
-				} else if ( material.glossinessMap ) {
-
-					uvScaleMap = material.glossinessMap;
-
-				} else if ( material.alphaMap ) {
-
-					uvScaleMap = material.alphaMap;
-
-				} else if ( material.emissiveMap ) {
-
-					uvScaleMap = material.emissiveMap;
-
-				}
-
-				if ( uvScaleMap !== undefined ) {
-
-					// backwards compatibility
-					if ( uvScaleMap.isWebGLRenderTarget ) {
-
-						uvScaleMap = uvScaleMap.texture;
-
-					}
-
-					var offset;
-					var repeat;
-
-					if ( uvScaleMap.matrix !== undefined ) {
-
-						// > r88.
-
-						if ( uvScaleMap.matrixAutoUpdate === true ) {
-
-							offset = uvScaleMap.offset;
-							repeat = uvScaleMap.repeat;
-							var rotation = uvScaleMap.rotation;
-							var center = uvScaleMap.center;
-
-							uvScaleMap.matrix.setUvTransform( offset.x, offset.y, repeat.x, repeat.y, rotation, center.x, center.y );
-
-						}
-
-						uniforms.uvTransform.value.copy( uvScaleMap.matrix );
-
-					} else {
-
-						// <= r87. Remove when reasonable.
-
-						offset = uvScaleMap.offset;
-						repeat = uvScaleMap.repeat;
-
-						uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
-
-					}
-
-				}
-
-				uniforms.envMap.value = material.envMap;
-				uniforms.envMapIntensity.value = material.envMapIntensity;
-				uniforms.flipEnvMap.value = ( material.envMap && material.envMap.isCubeTexture ) ? - 1 : 1;
-
-				uniforms.refractionRatio.value = material.refractionRatio;
-
-				uniforms.specular.value.copy( material.specular );
-				uniforms.glossiness.value = material.glossiness;
-
-				uniforms.glossinessMap.value = material.glossinessMap;
-
-				uniforms.emissiveMap.value = material.emissiveMap;
-				uniforms.bumpMap.value = material.bumpMap;
-				uniforms.normalMap.value = material.normalMap;
-
-				uniforms.displacementMap.value = material.displacementMap;
-				uniforms.displacementScale.value = material.displacementScale;
-				uniforms.displacementBias.value = material.displacementBias;
-
-				if ( uniforms.glossinessMap.value !== null && defines.USE_GLOSSINESSMAP === undefined ) {
-
-					defines.USE_GLOSSINESSMAP = '';
-					// set USE_ROUGHNESSMAP to enable vUv
-					defines.USE_ROUGHNESSMAP = '';
-
-				}
-
-				if ( uniforms.glossinessMap.value === null && defines.USE_GLOSSINESSMAP !== undefined ) {
-
-					delete defines.USE_GLOSSINESSMAP;
-					delete defines.USE_ROUGHNESSMAP;
-
-				}
-
+			refreshUniforms: function () {
+				/*NOOP*/
 			}
 
 		};
 
+
 	}
 
 	/*********************************/
@@ -2219,8 +2014,8 @@ THREE.GLTFLoader = ( function () {
 		return Promise.all( pending ).then( function () {
 
 			var material;
-
-			if ( materialType === THREE.ShaderMaterial ) {
+			// if ( materialType === THREE.ShaderMaterial ) {
+			if ( materialType === 'SPEC_GLOSS' ) {
 
 				material = extensions[ EXTENSIONS.KHR_MATERIALS_PBR_SPECULAR_GLOSSINESS ].createMaterial( materialParams );
 
diff --git a/examples/serializedResult.json b/examples/serializedResult.json
new file mode 100644
index 00000000000000..e88b4dd6b9e15c
--- /dev/null
+++ b/examples/serializedResult.json
@@ -0,0 +1,156 @@
+{
+  "metadata": {
+    "version": 4.5,
+    "type": "Material",
+    "generator": "Material.toJSON",
+    "extensions": {
+      "isSpecGlossExtended": true,
+      "isPerMapTransformExtended": true,
+      "isSimpleInstanceExtended": true
+    }
+  },
+  "glossiness": 1,
+  "specular": 16777215,
+  "glossinessMap": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
+  "alphaMapRepeat": [
+    1,
+    1
+  ],
+  "alphaMapOffset": [
+    0,
+    0
+  ],
+  "alphaMapCenter": [
+    0,
+    0
+  ],
+  "alphaMapRotation": 0,
+  "specularMapRepeat": [
+    1,
+    1
+  ],
+  "specularMapOffset": [
+    0,
+    0
+  ],
+  "specularMapCenter": [
+    0,
+    0
+  ],
+  "specularMapRotation": 0,
+  "mapRepeat": [
+    1,
+    1
+  ],
+  "mapOffset": [
+    0,
+    0
+  ],
+  "mapCenter": [
+    0,
+    0
+  ],
+  "mapRotation": 0,
+  "emissiveMapRepeat": [
+    1,
+    1
+  ],
+  "emissiveMapOffset": [
+    0,
+    0
+  ],
+  "emissiveMapCenter": [
+    0,
+    0
+  ],
+  "emissiveMapRotation": 0,
+  "glossinessMapRepeat": [
+    1,
+    1
+  ],
+  "glossinessMapOffset": [
+    0,
+    0
+  ],
+  "glossinessMapCenter": [
+    0,
+    0
+  ],
+  "glossinessMapRotation": 0,
+  "uuid": "B1168031-2FEB-4362-BFF5-04D2B366BA17",
+  "type": "MeshStandardMaterial",
+  "color": 16758090,
+  "emissive": 0,
+  "map": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
+  "specularMap": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
+  "envMap": "58FDD3E2-882B-4F66-B4E2-BAE2C367595C",
+  "depthFunc": 3,
+  "depthTest": true,
+  "depthWrite": true,
+  "textures": [
+    {
+      "uuid": "2B8CE6E5-7846-4D84-B4BE-3D4211AE2BBA",
+      "name": "texture",
+      "mapping": 300,
+      "repeat": [
+        1,
+        1
+      ],
+      "offset": [
+        0,
+        0
+      ],
+      "center": [
+        0,
+        0
+      ],
+      "rotation": 0,
+      "wrap": [
+        1000,
+        1000
+      ],
+      "format": 1022,
+      "minFilter": 1008,
+      "magFilter": 1006,
+      "anisotropy": 1,
+      "flipY": true,
+      "image": "B440D9F5-D47E-40D1-B912-DBFF0AE719AE"
+    },
+    {
+      "uuid": "58FDD3E2-882B-4F66-B4E2-BAE2C367595C",
+      "name": "envMap",
+      "mapping": 305,
+      "repeat": [
+        1,
+        1
+      ],
+      "offset": [
+        0,
+        0
+      ],
+      "center": [
+        0,
+        0
+      ],
+      "rotation": 0,
+      "wrap": [
+        1001,
+        1001
+      ],
+      "format": 1022,
+      "minFilter": 1008,
+      "magFilter": 1006,
+      "anisotropy": 1,
+      "flipY": true,
+      "image": "14DDC238-F4C1-4D89-AED5-597BD2927B84"
+    }
+  ],
+  "images": [
+    {
+      "uuid": "B440D9F5-D47E-40D1-B912-DBFF0AE719AE",
+    },
+    {
+      "uuid": "14DDC238-F4C1-4D89-AED5-597BD2927B84",
+    }
+  ]
+}
\ No newline at end of file
diff --git a/examples/webgl_loader_gltf_extensions.html b/examples/webgl_loader_gltf_extensions.html
index 7eb1fcef031808..da3de65ffd1a89 100644
--- a/examples/webgl_loader_gltf_extensions.html
+++ b/examples/webgl_loader_gltf_extensions.html
@@ -49,12 +49,13 @@
 
 		<div id="container"></div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/loaders/DRACOLoader.js"></script>
-		<script src="js/loaders/DDSLoader.js"></script>
-		<script src="js/loaders/GLTFLoader.js"></script>
+		<script src="js/three.min.js"></script>
+		<script src="js/dat.gui.min.js"></script>
+		<script src="js/OrbitControls.js"></script>
+		<script src="js/SpecGlossMultiUVInstanceExample.js"></script>
+		<script src="js/DRACOLoader.js"></script>
+		<script src="js/DDSLoader.js"></script>
+		<script src="js/GLTFLoader.js"></script>
 
 		<script>
 			var orbitControls;
@@ -380,6 +381,40 @@
 					}
 
 					scene.add( object );
+
+					//---
+					//inline extension example, the material is already extended by GLTFLoader (or not if its not spec/gloss)
+					//but this extension will instance both regular and spec gloss
+					if(sceneInfo.name === 'BoomBox (PBR)'){
+
+						decorateMaterialWithSimpleInstancing(object.children[0].material) //only one line is needed to enable this on the material
+
+						//this is all geometry setup, since it is overlapping with SceneGraphs responsibilities
+						//this could be a higher level interface on a Mesh
+						const size = 64
+						const size_inv = 1/size
+						const instances = size * size
+						const scale = 1
+
+						const instancePositionArray = new Float32Array( instances * 3 )
+						const instanceScaleArray = new Float32Array( instances * 3 )
+						for ( var i = 0, ii = 0 ; i < instances ; i++ ){
+							instanceScaleArray[ii] = 1
+							instancePositionArray[ii++] = ((i % size) * size_inv-0.5) * scale
+							instanceScaleArray[ii] = 1
+							instancePositionArray[ii++] = 0
+							instanceScaleArray[ii] = 1
+							instancePositionArray[ii++] = (Math.floor(i*size_inv) * size_inv-0.5) * scale
+						}
+
+						object.children[0].geometry = new THREE.InstancedBufferGeometry().copy(object.children[0].geometry)
+						object.children[0].geometry.addAttribute( 'instanceOffset', new THREE.InstancedBufferAttribute(instancePositionArray, 3))
+						object.children[0].geometry.addAttribute( 'instanceScale', new THREE.InstancedBufferAttribute(instanceScaleArray, 1))
+						object.children[0].geometry.maxInstancedCount = instances
+						object.children[0].frustumCulled = false
+
+					}
+
 					onWindowResize();
 
 				}, undefined, function ( error ) {
diff --git a/examples/webgl_materials_modified.html b/examples/webgl_materials_modified.html
index 57ab38e1e86966..99194ff9e3e82c 100644
--- a/examples/webgl_materials_modified.html
+++ b/examples/webgl_materials_modified.html
@@ -54,7 +54,7 @@
 
 			var camera, scene, renderer, stats;
 
-			var mesh, materialShader;
+			var mesh, material;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -75,29 +75,20 @@
 
 				scene = new THREE.Scene();
 
-				var material = new THREE.MeshNormalMaterial();
-				material.onBeforeCompile = function ( shader ) {
+				material = new THREE.MeshNormalMaterial(); //no need to create a uniform at some obscure compile time, it's available now (obsucure because its both onBeforeParse and onBeforeCompile`)
 
-					// console.log( shader )
+				var my_begin_vertex = [ 
+					'float theta = sin( time + position.y ) / 2.0;',
+					'float c = cos( theta );',
+					'float s = sin( theta );',
+					'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
+					'vec3 transformed = vec3( position ) * m;',
+					'vNormal = vNormal * m;'
+				].join( '\n' );
 
-					shader.uniforms.time = { value: 0 };
+				material.shaderIncludes = { begin_vertex: my_begin_vertex };
 
-					shader.vertexShader = 'uniform float time;\n' + shader.vertexShader;
-					shader.vertexShader = shader.vertexShader.replace(
-						'#include <begin_vertex>',
-						[
-							'float theta = sin( time + position.y ) / 2.0;',
-							'float c = cos( theta );',
-							'float s = sin( theta );',
-							'mat3 m = mat3( c, 0, s, 0, 1, 0, -s, 0, c );',
-							'vec3 transformed = vec3( position ) * m;',
-							'vNormal = vNormal * m;'
-						].join( '\n' )
-					);
-
-					materialShader = shader;
-
-				};
+				material.shaderUniforms = { time: { value: 0, type: 'float', stage: 'vertex' } };
 
 				var loader = new THREE.JSONLoader();
 				loader.load( 'models/json/leeperrysmith/LeePerrySmith.json', function( geometry ) {
@@ -174,11 +165,8 @@
 
 				}
 
-				if ( materialShader ) {
+				material.shaderUniforms.time.value = performance.now() / 1000; //doesnt defer creating the uniform, no need to check
 
-					materialShader.uniforms.time.value = performance.now() / 1000;
-
-				}
 
 				renderer.render( scene, camera );
 
diff --git a/examples/webgl_materials_modified2.html b/examples/webgl_materials_modified2.html
new file mode 100644
index 00000000000000..53446010b33e96
--- /dev/null
+++ b/examples/webgl_materials_modified2.html
@@ -0,0 +1,471 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - materials - modified</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background:#000;
+				color:#fff;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+
+			a {
+				color: #ffffff;
+			}
+
+			#info {
+				position: absolute;
+				top: 0px; width: 100%;
+				color: #ffffff;
+				padding: 5px;
+				font-family:Monospace;
+				font-size:13px;
+				text-align:center;
+				z-index:1000;
+			}
+
+			#oldie {
+				background:rgb(200,100,0) !important;
+				color:#fff;
+			}
+
+		</style>
+	</head>
+
+	<body>
+		<div id="info">
+			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> wegbl - modified MeshStandardMaterial with specular/glossines lighting model, per map transforms and simple instancing. 
+			Author <a href="http://dusanbosnjak.com" target="_blank" rel="noopener">@pailhead.</a>
+		</div>
+
+		<script src="../build/three.js"></script>
+
+		<script src="js/Detector.js"></script>
+		<script src="js/SpecGlossMultiUVInstanceExample.js"></script>
+
+		<script src="js/loaders/DRACOLoader.js"></script>
+		<script src="js/loaders/DDSLoader.js"></script>
+		<script src="js/loaders/GLTFLoader.js"></script>
+		<script src="js/CurveExtras.js"></script>
+		<script src="js/libs/stats.min.js"></script>
+		<script src="js/libs/dat.gui.min.js"></script>
+
+		<script>
+/*eslint-disable*/
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
+
+			var camera, scene, renderer, stats, clock;
+
+			var mesh, material, meshGLTF, materialGLTF;
+			var texture, envMap;
+
+			var mouseX = 0;
+			var mouseY = 0;
+
+			var targetX = 0;
+			var targetY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			var currentMesh
+			var meshOptions = ['sphere','gltf']
+			var guiData = { 
+				speed: 1, 
+				map: true,
+				currentMesh: meshOptions[0],
+				serialize: function(){
+					console.log(
+						JSON.stringify( currentMesh.material.toJSON())
+					)
+				}
+			}
+			var _gui = new dat.GUI({width: 300}) //fix css later
+			var guiArray = []
+
+			var gui = _gui.addFolder('global')
+			gui.open()
+			gui.add( guiData, 'speed', 0, 5 )
+			gui.add( guiData, 'currentMesh', meshOptions ).onChange(function(value){
+				currentMesh = value === 'sphere' ? mesh : meshGLTF
+				mesh.visible = value === 'sphere'
+				if(meshGLTF) meshGLTF.visible = value === 'gltf'
+				onChangeGuiMaterial(value==='gltf'?materialGLTF:material)
+			})
+
+			// var guiMaterial = _gui.addFolder('material')
+			// guiMaterial.open()
+
+			// var guiTexture = _gui.addFolder('specular map')
+			// guiTexture.open()
+
+			const INSTANCES = 256;
+			var frequency = 32
+			var instanceOffsetAttribute, instanceScaleAttribute
+
+			initScene();
+			initInstanceAttributes();
+			initTexture();
+			initBall();
+			onChangeGuiMaterial(material);
+			loadGLTF();
+			animate();
+
+			var _gltfTextureMap
+
+			function onChangeGuiMaterial(material){
+				while(guiArray.length){
+					gui.remove(guiArray.pop())
+				}
+				guiArray.push(
+					gui.add( material.specularMapRepeat,'x',0,10)
+					.onChange(material.specularMapUpdateMatrix)
+					.name('spec map repeat.x')
+				)
+				guiArray.push(
+					gui.add( material.specularMapRepeat,'y',0,10)
+					.onChange(material.specularMapUpdateMatrix)
+					.name('spec map repeat.y')
+				)
+				guiArray.push(
+					gui.add( material.specularMapOffset,'x',0,1)
+					.onChange(material.specularMapUpdateMatrix)
+					.name('spec map offset.x')
+				)
+				guiArray.push(
+					gui.add( material.specularMapOffset,'x',0,1)
+					.onChange(material.specularMapUpdateMatrix)
+					.name('spec map offset.y')
+				)
+				guiArray.push(
+					gui.add( material, 'specularMapRotation',0,1)
+					.onChange(material.specularMapUpdateMatrix)
+					.name('spec map rotation')
+				)
+				guiArray.push(gui.add( material, 'glossiness',0,1))
+				guiArray.push(
+					gui.add(guiData, 'map').onChange(function(val){
+						if(!_gltfTextureMap && meshGLTF ) _gltfTextureMap = meshGLTF.material.map
+
+						mesh.material.map = val ? texture : null
+						mesh.material.needsUpdate = true
+
+						if(meshGLTF){
+							meshGLTF.material.map = val ? _gltfTextureMap : null
+							meshGLTF.material.needsUpdate = true
+						}
+					})
+					.name('albedo map on/off')
+				)
+				guiArray.push(
+					gui.add(guiData, 'serialize')
+				)
+			}
+
+			function initScene() {
+
+				clock = new THREE.Clock();
+
+				camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.z = 1200;
+
+				scene = new THREE.Scene();
+
+				var light = new THREE.DirectionalLight( 0xffffff, 0.4 );
+				light.position.set( 100, 260, 160 );
+				
+				light.castShadow = true;
+				light.shadow.camera.left = - 240;
+				light.shadow.camera.right = 240;
+				light.shadow.camera.top = 240;
+				light.shadow.camera.bottom = - 240;
+				light.shadow.camera.near = 10;
+				light.shadow.camera.far = 1500;
+
+				light.shadow.bias = - 0.001;
+				light.shadow.mapSize.width = 512;
+				light.shadow.mapSize.height = 512;
+				scene.add(light)
+
+				var ambient = new THREE.AmbientLight( 0x222222 );
+				scene.add( ambient );
+
+				var ground = new THREE.Mesh(
+					new THREE.PlaneBufferGeometry( 800, 800 ).rotateX( - Math.PI / 2 ),
+					new THREE.MeshPhongMaterial( { color: 0x888888 } )
+				);
+				ground.position.set( 0, - 200, 0 );
+				ground.receiveShadow = true;
+	
+				scene.add( ground );
+
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+				renderer.gammaOutput = true;
+				renderer.physicallyCorrectLights = true;
+
+				renderer.shadowMap.enabled = true;
+				//
+
+				stats = new Stats();
+				document.body.appendChild( stats.dom );
+
+				// EVENTS
+
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+				window.addEventListener( 'resize', onWindowResize, false );
+			}
+
+			function loadGLTF(){
+
+				loader = new THREE.GLTFLoader();
+
+				THREE.DRACOLoader.setDecoderPath( 'js/libs/draco/gltf/' );
+				loader.setDRACOLoader( new THREE.DRACOLoader() );
+
+				var loadStartTime = performance.now();
+				loader.load( './models/gltf/BoomBox/glTF-pbrSpecularGlossiness/BoomBox.gltf', function( data ) {
+
+					gltf = data;
+
+					var object = gltf.scene;
+
+					console.info( 'Load time: ' + ( performance.now() - loadStartTime ).toFixed( 2 ) + ' ms.' );
+
+					object.traverse( function( node ) {
+
+						if ( node.material && ( node.material.isMeshStandardMaterial ||
+							 ( node.material.isShaderMaterial && node.material.envMap !== undefined ) ) ) {
+
+							node.material.envMap = envMap;
+							node.material.needsUpdate = true;
+						}
+
+					} );
+
+					object.traverse( function ( node ) {
+
+						if ( node.isMesh || node.isLight ) node.castShadow = true;
+
+					} );
+
+					scene.add( object );
+					object.rotation.y -= Math.PI;
+
+					var scale = 2000
+					meshGLTF = object.children[0]
+					meshGLTF.frustumCulled = false
+					meshGLTF.visible = guiData.currentMesh === 'gltf'
+					meshGLTF.geometry.scale(scale,scale,scale)
+
+					materialGLTF = meshGLTF.material
+					decorateMaterialWithPerMapTransforms(materialGLTF)
+					applyInstancingToMesh(meshGLTF)
+					applyIndecisToInstancedMesh(meshGLTF)
+
+				}, undefined, function ( error ) {
+
+					console.error( error );
+
+				} );
+
+			}
+
+			function initTexture(){
+
+				texture = new THREE.TextureLoader().load( `textures/roughness_map.jpg` )
+				texture.wrapS = texture.wrapT = THREE.RepeatWrapping
+				texture.name = "texture"
+
+				envMap = new THREE.TextureLoader().load( `textures/metal.jpg`, function ( texture ) {
+	
+					texture.mapping = THREE.SphericalReflectionMapping;
+					texture.encoding = THREE.sRGBEncoding;
+					if ( mesh ) material.needsUpdate = true;
+					if ( meshGLTF ) materialGLTF.needsUpdate = true;
+	
+				} );
+
+				envMap.name = "envMap"
+			}
+
+			function initBall(){
+
+				material = decorateMaterialWithSpecGloss(
+					new THREE.MeshStandardMaterial({
+						color: 0xffb54a,
+						envMap: envMap,
+						map: texture,
+					})
+				)
+				decorateMaterialWithPerMapTransforms(material)
+
+				mesh = new THREE.Mesh(new THREE.SphereBufferGeometry(10), material)
+
+				scene.add(mesh)
+
+				mesh.castShadow = true
+				mesh.receiveShadow = true
+
+				material.glossinessMap = texture //needs .a so doesnt work with this texture
+				material.specularMap = texture
+
+				applyInstancingToMesh(mesh)
+				applyIndecisToInstancedMesh(mesh)
+
+				currentMesh = mesh
+
+			}
+
+			//instancing
+			function initInstanceAttributes(){
+				//create geometry attributes
+				var knot = new THREE.Curves.TorusKnot( 60 );
+				var positions = knot.getSpacedPoints( INSTANCES );
+
+				var offsets = new Float32Array( INSTANCES * 3 ); // xyz
+				var scales = new Float32Array( INSTANCES * 1 ); // s
+				for ( var i = 0, l = INSTANCES; i < l; i ++ ) {
+
+					var index = 3 * i;
+
+					// per-instance position offset
+					offsets[ index ] = positions[ i ].x;
+					offsets[ index + 1 ] = positions[ i ].y;
+					offsets[ index + 2 ] = positions[ i ].z;
+
+					// per-instance scale variation
+					scales[ i ] = 1 + 0.5 * Math.sin( frequency * Math.PI * i / INSTANCES );
+
+				}
+
+				instanceOffsetAttribute = new THREE.InstancedBufferAttribute( offsets, 3 )
+				instanceScaleAttribute = new THREE.InstancedBufferAttribute( scales, 1 )
+			}
+
+			function applyInstancingToMesh(mesh){
+
+				decorateMaterialWithSimpleInstancing(mesh.material)
+
+				mesh.customDepthMaterial = decorateMaterialWithSimpleInstancing(
+					new THREE.MeshDepthMaterial({ depthPacking: THREE.RGBADepthPacking })
+				)
+
+				mesh.geometry = new THREE.InstancedBufferGeometry().copy(mesh.geometry)
+				mesh.geometry.maxInstancedCount = INSTANCES
+
+				mesh.geometry.addAttribute( 'instanceOffset', instanceOffsetAttribute );
+				mesh.geometry.addAttribute( 'instanceScale', instanceScaleAttribute );
+
+			}
+
+			function applyIndecisToInstancedMesh(mesh){
+
+				var indecis = new Float32Array( INSTANCES ); 
+
+				for ( var i = 0, l = INSTANCES; i < l; i ++ ) {
+					indecis[i] = i / INSTANCES
+				}
+
+				mesh.geometry.addAttribute('aIndex', new THREE.InstancedBufferAttribute( indecis, 1 ) )
+
+				//remove the old attibute (we could have overloaded it though)
+				delete mesh.geometry.attributes.instanceScale
+
+				//knowing we decorated with simpleInstancing we have a parsed/included "compiled" chunk to work with
+				mesh.material.shaderIncludes.begin_vertex = mesh.material.shaderIncludes.begin_vertex.replace(
+					'transformed *= instanceScale;', //we know how simpleInstancing works
+					`float _ind = aIndex + uTime;
+					transformed *= 1. + 0.5 * sin(${frequency}.0 * ${Math.PI} * _ind );` //we override a part of that extension with our custom logic
+				)
+
+				//we need a custom time uniform for the effect
+				var uTime = { value: 0, type: 'float', stage: 'vertex' }
+				mesh.material.shaderUniforms.uTime = uTime
+
+				//we expose it as a primitive
+				Object.defineProperty(mesh.material, 'time', {
+					get:()=>uTime.value,
+					set:v=>uTime.value = v
+				})
+		
+				mesh.material.shaderIncludes.uv_pars_vertex = `
+				${THREE.ShaderChunk.uv_pars_vertex}
+				attribute float aIndex;
+				`
+
+				//to make it work with shadows,
+				mesh.customDepthMaterial.shaderIncludes.uv_pars_vertex = mesh.material.shaderIncludes.uv_pars_vertex //copy these
+				mesh.customDepthMaterial.shaderIncludes.begin_vertex = mesh.material.shaderIncludes.begin_vertex //copy these
+				mesh.customDepthMaterial.shaderUniforms = { uTime: mesh.material.shaderUniforms.uTime }//wire this by reference, whenever prop updates material uniform this material updates too by referencing the same uniform
+
+			}
+
+
+			function onWindowResize( event ) {
+
+				var width = window.innerWidth;
+				var height = window.innerHeight;
+
+				windowHalfX = width / 2;
+				windowHalfY = height / 2;
+
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( width, height );
+
+			}
+
+			function onDocumentMouseMove( event ) {
+				mouseX = ( event.clientX - windowHalfX );
+				mouseY = ( event.clientY - windowHalfY );
+			}
+
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+
+				stats.update();
+
+			}
+
+			function render() {
+
+				targetX = mouseX * .001;
+				targetY = mouseY * .001;
+
+				var delta = clock.getDelta() * 0.01 * guiData.speed
+				if ( mesh ) {
+
+					mesh.rotation.y += 0.05 * ( targetX - mesh.rotation.y );
+					mesh.rotation.x += 0.05 * ( targetY - mesh.rotation.x );
+
+					mesh.material.time += delta
+				}
+
+				if ( meshGLTF ) {
+
+					meshGLTF.rotation.y += 0.05 * ( targetX - meshGLTF.rotation.y );
+					meshGLTF.rotation.x += 0.05 * ( targetY - meshGLTF.rotation.x );
+
+					meshGLTF.material.time += delta
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+	</body>
+</html>
diff --git a/src/materials/Material.js b/src/materials/Material.js
index 3d8f37c3e344c9..4cdb0ab7b88d8b 100644
--- a/src/materials/Material.js
+++ b/src/materials/Material.js
@@ -133,7 +133,7 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 
 	},
 
-	toJSON: function ( meta ) {
+	toJSON: function ( meta, onWillSerialize ) {
 
 		var isRoot = ( meta === undefined || typeof meta === 'string' );
 
@@ -154,6 +154,8 @@ Material.prototype = Object.assign( Object.create( EventDispatcher.prototype ),
 			}
 		};
 
+		onWillSerialize( data, meta );
+
 		// standard Material serialization
 		data.uuid = this.uuid;
 		data.type = this.type;
diff --git a/src/renderers/WebGLRenderer.js b/src/renderers/WebGLRenderer.js
index 891c8e43b56bcd..ec525d66ed2b96 100644
--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -1474,11 +1474,41 @@ function WebGLRenderer( parameters ) {
 
 				var shader = ShaderLib[ parameters.shaderID ];
 
+				var combinedUniforms = undefined !== material.shaderUniforms ?
+					UniformsUtils.merge( [ UniformsUtils.clone( shader.uniforms ), material.shaderUniforms ] ) :
+					UniformsUtils.clone( shader.uniforms );
+
+				var shaderUniformsGLSLFrag = ''; //collect the GLSL in here
+				var shaderUniformsGLSLVert = ''; //collect the GLSL in here
+
+				for ( var uniformName in material.shaderUniforms ) {
+
+					var uniform = material.shaderUniforms[ uniformName ];
+					var type = uniform.type;
+					var stage = uniform.stage;
+
+					if ( type ) {
+
+						if ( stage === 'vertex' ) { //dunno what to do here, maybe if not provided should inject into both
+
+							shaderUniformsGLSLVert += 'uniform ' + type + ' ' + uniformName + ';\n';
+
+						} else {
+
+							shaderUniformsGLSLFrag += 'uniform ' + type + ' ' + uniformName + ';\n';
+
+						}
+
+					}
+
+				}
+
 				materialProperties.shader = {
 					name: material.type,
-					uniforms: UniformsUtils.clone( shader.uniforms ),
-					vertexShader: shader.vertexShader,
-					fragmentShader: shader.fragmentShader
+					uniforms: combinedUniforms,
+					vertexShader: shaderUniformsGLSLVert + shader.vertexShader,
+					fragmentShader: shaderUniformsGLSLFrag + shader.fragmentShader //maybe not use the same
+
 				};
 
 			} else {
@@ -1797,8 +1827,14 @@ function WebGLRenderer( parameters ) {
 
 			}
 
-			// refresh uniforms common to several materials
+			//refresh custom provided uniforms
+			if ( undefined !== material.shaderUniforms ) {
+
+				refreshUniformsCustom( m_uniforms, material );
 
+			}
+
+			// refresh uniforms common to several materials
 			if ( fog && material.fog ) {
 
 				refreshUniformsFog( m_uniforms, fog );
@@ -2041,6 +2077,17 @@ function WebGLRenderer( parameters ) {
 
 	}
 
+	//refresh custom provided uniforms
+	function refreshUniformsCustom( uniforms, material ) {
+
+		for ( var uniform in material.shaderUniforms ) {
+
+			uniforms[ uniform ].value = material.shaderUniforms[ uniform ].value;
+
+		}
+
+	}
+
 	function refreshUniformsLine( uniforms, material ) {
 
 		uniforms.diffuse.value = material.color;
diff --git a/src/renderers/webgl/WebGLProgram.js b/src/renderers/webgl/WebGLProgram.js
index b2ffa49f26971b..f4e4c778725d3f 100644
--- a/src/renderers/webgl/WebGLProgram.js
+++ b/src/renderers/webgl/WebGLProgram.js
@@ -158,13 +158,15 @@ function replaceClippingPlaneNums( string, parameters ) {
 
 }
 
-function parseIncludes( string ) {
+//consider provided dictionary when parsing the includes (not just THREE.ShaderChunk)
+function parseIncludes( string, materialIncludes ) {
 
 	var pattern = /^[ \t]*#include +<([\w\d.]+)>/gm;
 
 	function replace( match, include ) {
 
-		var replace = ShaderChunk[ include ];
+		//if there are material includes provided use those instead of the default chunks:
+		var replace = undefined !== materialIncludes[ include ] ? materialIncludes[ include ] : ShaderChunk[ include ];
 
 		if ( replace === undefined ) {
 
@@ -208,6 +210,8 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 
 	var defines = material.defines;
 
+	var materialIncludes = material.shaderIncludes; //custom chunks
+
 	var vertexShader = shader.vertexShader;
 	var fragmentShader = shader.fragmentShader;
 
@@ -289,6 +293,8 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 
 	var customDefines = generateDefines( defines );
 
+	var customIncludes = undefined !== materialIncludes ? materialIncludes : {}; //user is not aware of this feature, fine
+
 	//
 
 	var program = gl.createProgram();
@@ -503,11 +509,12 @@ function WebGLProgram( renderer, extensions, code, material, shader, parameters
 
 	}
 
-	vertexShader = parseIncludes( vertexShader );
+	// provide optional chunk dictionary customIncludes
+	vertexShader = parseIncludes( vertexShader, customIncludes );
 	vertexShader = replaceLightNums( vertexShader, parameters );
 	vertexShader = replaceClippingPlaneNums( vertexShader, parameters );
 
-	fragmentShader = parseIncludes( fragmentShader );
+	fragmentShader = parseIncludes( fragmentShader, customIncludes );
 	fragmentShader = replaceLightNums( fragmentShader, parameters );
 	fragmentShader = replaceClippingPlaneNums( fragmentShader, parameters );
 
diff --git a/src/renderers/webgl/WebGLPrograms.js b/src/renderers/webgl/WebGLPrograms.js
index 633a3397e7c7a1..3d3825f788ab8a 100644
--- a/src/renderers/webgl/WebGLPrograms.js
+++ b/src/renderers/webgl/WebGLPrograms.js
@@ -241,10 +241,20 @@ function WebGLPrograms( renderer, extensions, capabilities ) {
 
 		}
 
-		array.push( material.onBeforeCompile.toString() );
-
 		array.push( renderer.gammaOutput );
 
+		// if there is this dictionary present
+		if ( material.shaderIncludes !== undefined ) {
+
+			for ( var include in material.shaderIncludes ) {
+
+				// hash with chunks?
+				array.push( material.shaderIncludes[ include ] );
+
+			}
+
+		}
+
 		return array.join();
 
 	};