Added specular color and shininess to color G-buffer in deferred shading examples.

This allows to have different per-object Phong materials in deferred shading.

examples/js/ShaderDeferred.js

@@ -14,14 +14,20 @@ THREE.ShaderDeferred = {
 
 			THREE.UniformsLib[ "common" ],
 			THREE.UniformsLib[ "fog" ],
-			THREE.UniformsLib[ "shadowmap" ]
+			THREE.UniformsLib[ "shadowmap" ],
+
+			{
+				"specular" : { type: "c", value: new THREE.Color( 0x111111 ) },
+				"shininess": { type: "f", value: 30 }
+			}
 
 		] ),
 
 		fragmentShader : [
 
 			"uniform vec3 diffuse;",
-			"uniform float opacity;",
+			"uniform vec3 specular;",
+			"uniform float shininess;",
 
 			THREE.ShaderChunk[ "color_pars_fragment" ],
 			THREE.ShaderChunk[ "map_pars_fragment" ],
@@ -42,6 +48,8 @@ THREE.ShaderDeferred = {
 
 			"void main() {",
 
+				"const float opacity = 1.0;",
+
 				"gl_FragColor = vec4( diffuse, opacity );",
 
 				THREE.ShaderChunk[ "map_fragment" ],
@@ -56,8 +64,21 @@ THREE.ShaderDeferred = {
 
 				THREE.ShaderChunk[ "fog_fragment" ],
 
+				// diffuse color
+
 				"gl_FragColor.x = vec3_to_float( 0.999 * gl_FragColor.xyz );",
-				"gl_FragColor.yzw = vec3( 0.0 );",
+
+				// specular color
+
+				"gl_FragColor.y = vec3_to_float( 0.999 * specular );",
+
+				// shininess
+
+				"gl_FragColor.z = shininess;",
+
+				// free
+
+				"gl_FragColor.w = 0.0;",
 
 			"}"
 
@@ -429,8 +450,18 @@ THREE.ShaderDeferred = {
 				"attenuation = max( attenuation, 0.0 );",
 				"attenuation *= attenuation;",
 
+				// normal
+
 				"vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;",
 
+				// color
+
+				"vec4 colorMap = texture2D( samplerColor, texCoord );",
+
+				"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
+				"vec3 specularColor = float_to_vec3( abs( colorMap.y ) );",
+				"float shininess = colorMap.z;",
+
 				// wrap around lighting
 
 				"float diffuseFull = max( dot( normal, lightDir ), 0.0 );",
@@ -446,8 +477,8 @@ THREE.ShaderDeferred = {
 
 				// specular
 
-				"const float shininess = SHININESS;",
-				"const float specularIntensity = SPECULAR_INTENSITY;",
+				//"const float shininess = SHININESS;",
+				//"const float specularIntensity = SPECULAR_INTENSITY;",
 
 				"vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );",
 				"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );",
@@ -458,18 +489,13 @@ THREE.ShaderDeferred = {
 
 				// physically based specular
 
-				"vec3 specularColor = specularIntensity * vec3( 1.0 );",
+				//"vec3 specularColor = specularIntensity * vec3( 1.0 );",
 
 				"float specularNormalization = ( shininess + 2.0001 ) / 8.0;",
 
 				"vec3 schlick = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lightDir, halfVector ), 5.0 );",
 				"vec3 specular = schlick * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse * specularNormalization;",
 
-				// color
-
-				"vec4 colorMap = texture2D( samplerColor, texCoord );",
-				"vec3 albedo = float_to_vec3( abs( colorMap.x ) );",
-
 				// combine
 
 				"vec4 color = vec4( 0.0 );",

examples/webgl_lights_deferred_morphs.html

@@ -332,6 +332,8 @@
 
 			function initScene( object, y, scale ) {
 
+				var black = new THREE.Color( 0x000000 );
+
 				object.traverse( function( node ) {
 
 					if ( node.material ) {
@@ -351,7 +353,14 @@
 
 						} );
 
-						uniforms.diffuse.value.copy( node.material.color );
+						var diffuse = node.material.color;
+						var specular = node.material.specular !== undefined ? node.material.specular : black;
+						var shininess = node.material.shininess !== undefined ? node.material.shininess : 1;
+
+						uniforms.diffuse.value.copy( diffuse );
+						uniforms.specular.value.copy( specular );
+						uniforms.shininess.value = shininess;
+
 						uniforms.map.value = node.material.map;
 
 						material.vertexColors = node.material.vertexColors;
@@ -431,13 +440,13 @@
 
 						if ( node.material.morphTargets ) {
 
-							var depthMaterial = new THREE.ShaderMaterial({
+							var depthMaterial = new THREE.ShaderMaterial( {
 
 								uniforms:       THREE.UniformsUtils.clone( clipDepthShader.uniforms ),
 								vertexShader:   clipDepthShader.vertexShader,
 								fragmentShader: clipDepthShader.fragmentShader
 
-							});
+							} );
 
 							depthMaterial.morphTargets = node.material.morphTargets;
 
@@ -734,14 +743,14 @@
 				mapHeight3.format = THREE.RGBFormat;
 
 				var geoPlane = new THREE.PlaneGeometry( 40, 20 );
-				var matPlane = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight2, bumpScale: 0.5 } );
-				var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 0.5 } );
-				var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 1 } );
+				var matPlaneSide   = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight2, bumpScale: 0.5 } );
+				var matPlaneBottom = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 0.5 } );
+				var matPlaneTop    = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 1 } );
 
 
 				// bottom
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane2 );
+				var mesh = new THREE.Mesh( geoPlane, matPlaneBottom );
 				mesh.position.z = -2;
 				mesh.position.y = -6;
 				mesh.rotation.x = -Math.PI/2;
@@ -749,7 +758,7 @@
 
 				// top
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane3 );
+				var mesh = new THREE.Mesh( geoPlane, matPlaneTop );
 				mesh.position.z = -2;
 				mesh.position.y = 7;
 				mesh.rotation.x = Math.PI/2;
@@ -757,14 +766,14 @@
 
 				// back
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane );
+				var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
 				mesh.position.z = -4;
 				mesh.position.y = 0;
 				object.add( mesh );
 
 				// right
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane );
+				var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
 				mesh.position.z = 0;
 				mesh.position.y = 0;
 				mesh.position.x = 13;
@@ -773,7 +782,7 @@
 
 				// left
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane );
+				var mesh = new THREE.Mesh( geoPlane, matPlaneSide );
 				mesh.position.z = 0;
 				mesh.position.y = 0;
 				mesh.position.x = -13;
@@ -800,7 +809,7 @@
 
 				geometry.computeMorphNormals();
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
+				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x333333, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } );
 				var meshAnim = new THREE.MorphAnimMesh( geometry, material );
 
 				meshAnim.duration = 3000;

examples/webgl_lights_deferred_pointlights.html

@@ -336,6 +336,8 @@
 
 			function initScene( object, y, scale ) {
 
+				var black = new THREE.Color( 0x000000 );
+
 				object.traverse( function( node ) {
 
 					if ( node.material ) {
@@ -354,7 +356,14 @@
 
 						} );
 
-						uniforms.diffuse.value.copy( node.material.color );
+						var diffuse = node.material.color;
+						var specular = node.material.specular !== undefined ? node.material.specular : black;
+						var shininess = node.material.shininess !== undefined ? node.material.shininess : 1;
+
+						uniforms.diffuse.value.copy( diffuse );
+						uniforms.specular.value.copy( specular );
+						uniforms.shininess.value = shininess;
+
 						uniforms.map.value = node.material.map;
 
 						if ( node.material.bumpMap ) {
@@ -669,51 +678,9 @@
 
 			}
 
-			// -----------------------------
-			// entry point
-			// -----------------------------
+			function generateBox() {
 
-			bootstrap();
-			initMaterials();
-			initLights();
-			createRenderTargets();
-
-			/*
-			var loader = new THREE.UTF8Loader();
-
-			loader.load( "models/utf8/ben_dds.js", function ( object ) {
-
-				initScene( object, -75, 150 );
-				animate();
-
-			}, { normalizeRGB: true } );
-			*/
-
-			/*
-			loader.load( "models/utf8/WaltHi.js", function ( object ) {
-
-				initScene( object, -35, 1 );
-				animate();
-
-			}, { normalizeRGB: true } );
-			*/
-
-			var loader = new THREE.JSONLoader();
-			loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry, materials ) {
-
-				var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
-				var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
-				mapHeight.repeat.set( 0.998, 0.998 );
-				mapHeight.offset.set( 0.001, 0.001 )
-				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
-				mapHeight.anisotropy = 4;
-				mapHeight.format = THREE.RGBFormat;
-
-				var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 2.5 } );
-
-				var object = new THREE.Mesh( geometry, material );
-
-				// box
+				var object = new THREE.Object3D();
 
 				var mapHeight2 = THREE.ImageUtils.loadTexture( "obj/lightmap/rocks.jpg" );
 				mapHeight2.repeat.set( 3, 1.5 );
@@ -728,13 +695,15 @@
 				mapHeight3.format = THREE.RGBFormat;
 
 				var geoPlane = new THREE.PlaneGeometry( 40, 20 );
-				var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight2, bumpScale: 0.5 } );
-				var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, bumpMap: mapHeight2, bumpScale: 1 } );
-				var matPlane3 = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight3, bumpScale: 1 } );
+
+				var matPlane  = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess:  50, bumpMap: mapHeight2, bumpScale: 0.5 } );
+				var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, specular: 0x111111, shininess:  50, bumpMap: mapHeight2, bumpScale: 1 } );
+				var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x00aaff, specular: 0xffffff, shininess: 200, bumpMap: mapHeight3, bumpScale: 1.2 } );
+				var matPlane4 = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess:  50, bumpMap: mapHeight3, bumpScale: 1 } );
 
 				// bottom
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane2 );
+				var mesh = new THREE.Mesh( geoPlane, matPlane3 );
 				mesh.position.z = -2;
 				mesh.position.y = -6;
 				mesh.rotation.x = -Math.PI/2;
@@ -742,7 +711,7 @@
 
 				// top
 
-				var mesh = new THREE.Mesh( geoPlane, matPlane3 );
+				var mesh = new THREE.Mesh( geoPlane, matPlane4 );
 				mesh.position.z = -2;
 				mesh.position.y = 6;
 				mesh.rotation.x = Math.PI/2;
@@ -773,11 +742,64 @@
 				mesh.rotation.y = Math.PI/2;
 				//object.add( mesh );
 
-				initScene( object, 0, 8 );
+				return object;
+
+			}
+
+			// -----------------------------
+			// entry point
+			// -----------------------------
+
+			bootstrap();
+			initMaterials();
+			initLights();
+			createRenderTargets();
+
+			/*
+			var loader = new THREE.UTF8Loader();
+
+			loader.load( "models/utf8/ben_dds.js", function ( object ) {
+
+				initScene( object, -75, 150 );
+				animate();
+
+			}, { normalizeRGB: true } );
+			*/
+
+			/*
+			loader.load( "models/utf8/WaltHi.js", function ( object ) {
+
+				initScene( object, -35, 1 );
 				animate();
 
+			}, { normalizeRGB: true } );
+			*/
+
+			var loader = new THREE.JSONLoader();
+			loader.load( "obj/leeperrysmith/LeePerrySmith.js", function( geometry, materials ) {
+
+				var mapColor = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
+				var mapHeight = THREE.ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Disp_NoSmoothUV-4096.jpg" );
+				mapHeight.repeat.set( 0.998, 0.998 );
+				mapHeight.offset.set( 0.001, 0.001 )
+				mapHeight.wrapS = mapHeight.wrapT = THREE.RepeatWrapping;
+				mapHeight.anisotropy = 4;
+				mapHeight.format = THREE.RGBFormat;
+
+				var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight, bumpScale: 2.5, shininess: 75, specular: 0x090909 } );
+
+				var object = new THREE.Mesh( geometry, material );
+				initScene( object, 0, 8 );
+
 			} );
 
+			// create box
+
+			var object = generateBox();
+			initScene( object, 0, 8 );
+
+			animate();
+
 			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
 		</script>