Added reflection to normal map shader.

build/custom/ThreeWebGL.js

@@ -161,7 +161,7 @@ shadowmap_pars_vertex:"#ifdef USE_SHADOWMAP\nvarying vec4 vShadowCoord[ MAX_SHAD
 THREE.UniformsUtils={merge:function(b){var c,d,e,i={};for(c=0;c<b.length;c++)for(d in e=this.clone(b[c]),e)i[d]=e[d];return i},clone:function(b){var c,d,e,i={};for(c in b)for(d in i[c]={},b[c])e=b[c][d],i[c][d]=e instanceof THREE.Color||e instanceof THREE.Vector2||e instanceof THREE.Vector3||e instanceof THREE.Vector4||e instanceof THREE.Matrix4||e instanceof THREE.Texture?e.clone():e instanceof Array?e.slice():e;return i}};
 THREE.UniformsLib={common:{diffuse:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},map:{type:"t",value:0,texture:null},offsetRepeat:{type:"v4",value:new THREE.Vector4(0,0,1,1)},lightMap:{type:"t",value:2,texture:null},envMap:{type:"t",value:1,texture:null},useRefract:{type:"i",value:0},reflectivity:{type:"f",value:1},refractionRatio:{type:"f",value:0.98},combine:{type:"i",value:0},morphTargetInfluences:{type:"f",value:0}},fog:{fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",
 value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}},lights:{enableLighting:{type:"i",value:1},ambientLightColor:{type:"fv",value:[]},directionalLightDirection:{type:"fv",value:[]},directionalLightColor:{type:"fv",value:[]},pointLightColor:{type:"fv",value:[]},pointLightPosition:{type:"fv",value:[]},pointLightDistance:{type:"fv1",value:[]}},particle:{psColor:{type:"c",value:new THREE.Color(15658734)},opacity:{type:"f",value:1},size:{type:"f",value:1},scale:{type:"f",
-value:1},map:{type:"t",value:0,texture:null},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}},shadowmap:{shadowMap:{type:"tv",value:3,texture:[]},shadowMatrix:{type:"m4v",value:[]},shadowBias:{type:"f",value:0.0039},shadowDarkness:{type:"f",value:0.2}}};
+value:1},map:{type:"t",value:0,texture:null},fogDensity:{type:"f",value:2.5E-4},fogNear:{type:"f",value:1},fogFar:{type:"f",value:2E3},fogColor:{type:"c",value:new THREE.Color(16777215)}},shadowmap:{shadowMap:{type:"tv",value:6,texture:[]},shadowMatrix:{type:"m4v",value:[]},shadowBias:{type:"f",value:0.0039},shadowDarkness:{type:"f",value:0.2}}};
 THREE.ShaderLib={sprite:{vertexShader:"uniform int useScreenCoordinates;\nuniform int affectedByDistance;\nuniform vec3 screenPosition;\nuniform mat4 modelViewMatrix;\nuniform mat4 projectionMatrix;\nuniform float rotation;\nuniform vec2 scale;\nuniform vec2 alignment;\nuniform vec2 uvOffset;\nuniform vec2 uvScale;\nattribute vec2 position;\nattribute vec2 uv;\nvarying vec2 vUV;\nvoid main() {\nvUV = uvOffset + uv * uvScale;\nvec2 alignedPosition = position + alignment;\nvec2 rotatedPosition;\nrotatedPosition.x = ( cos( rotation ) * alignedPosition.x - sin( rotation ) * alignedPosition.y ) * scale.x;\nrotatedPosition.y = ( sin( rotation ) * alignedPosition.x + cos( rotation ) * alignedPosition.y ) * scale.y;\nvec4 finalPosition;\nif( useScreenCoordinates != 0 ) {\nfinalPosition = vec4( screenPosition.xy + rotatedPosition, screenPosition.z, 1.0 );\n} else {\nfinalPosition = projectionMatrix * modelViewMatrix * vec4( 0.0, 0.0, 0.0, 1.0 );\nfinalPosition.xy += rotatedPosition * ( affectedByDistance == 1 ? 1.0 : finalPosition.z );\n}\ngl_Position = finalPosition;\n}",fragmentShader:"#ifdef GL_ES\nprecision highp float;\n#endif\nuniform vec3 color;\nuniform sampler2D map;\nuniform float opacity;\nvarying vec2 vUV;\nvoid main() {\nvec4 texture = texture2D( map, vUV );\ngl_FragColor = vec4( color * texture.xyz, texture.a * opacity );\n}"},
 depth:{uniforms:{mNear:{type:"f",value:1},mFar:{type:"f",value:2E3},opacity:{type:"f",value:1}},vertexShader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragmentShader:"uniform float mNear;\nuniform float mFar;\nuniform float opacity;\nvoid main() {\nfloat depth = gl_FragCoord.z / gl_FragCoord.w;\nfloat color = 1.0 - smoothstep( mNear, mFar, depth );\ngl_FragColor = vec4( vec3( color ), opacity );\n}"},normal:{uniforms:{opacity:{type:"f",value:1}},
 vertexShader:"varying vec3 vNormal;\nvoid main() {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\ngl_Position = projectionMatrix * mvPosition;\n}",fragmentShader:"uniform float opacity;\nvarying vec3 vNormal;\nvoid main() {\ngl_FragColor = vec4( 0.5 * normalize( vNormal ) + 0.5, opacity );\n}"},basic:{uniforms:THREE.UniformsUtils.merge([THREE.UniformsLib.common,THREE.UniformsLib.fog,THREE.UniformsLib.shadowmap]),vertexShader:[THREE.ShaderChunk.map_pars_vertex,

examples/webgl_materials_normalmap.html

@@ -40,14 +40,14 @@
 	<body>
 
 		<div id="info">
-			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement</span>) map demo.
+			<a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - webgl (<span id="description">normal + ao + displacement + environment + shadow</span>) map demo.
 			ninja head from <a href="http://developer.amd.com/archive/gpu/MeshMapper/pages/default.aspx" target="_blank">AMD GPU MeshMapper</a>
 
 			<div id="vt">displacement mapping needs vertex textures (GPU with Shader Model 3.0)</div>
 		</div>
 
-
 		<script src="../build/Three.js"></script>
+
 		<script src="js/Detector.js"></script>
 		<script src="js/RequestAnimationFrame.js"></script>
 		<script src="js/Stats.js"></script>
@@ -86,7 +86,7 @@
 				document.body.appendChild( container );
 
 				camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, -10000, 10000 );
-				camera.position.z = 6200;
+				camera.position.z = 1500;
 
 				scene = new THREE.Scene();
 
@@ -95,25 +95,57 @@
 				ambientLight = new THREE.AmbientLight( 0x111111 );
 				scene.add( ambientLight );
 
-				pointLight = new THREE.PointLight( 0xffff55 );
+				pointLight = new THREE.PointLight( 0xff0000 );
 				pointLight.position.z = 10000;
+				pointLight.distance = 4000;
 				scene.add( pointLight );
 
-				directionalLight = new THREE.DirectionalLight( 0xaaaa88 );
-				directionalLight.position.set( 1, 1, 0.5 ).normalize();
+				pointLight2 = new THREE.PointLight( 0xff5500 );
+				pointLight2.position.z = 1000;
+				pointLight2.distance = 2000;
+				scene.add( pointLight2 );
+
+				pointLight3 = new THREE.PointLight( 0x0000ff );
+				pointLight3.position.x = -1000;
+				pointLight3.position.z = 1000;
+				pointLight3.distance = 2000;
+				scene.add( pointLight3 );
+
+				directionalLight = new THREE.SpotLight( 0xaaaaaa );
+				directionalLight.position.set( 1000, 500, 1000 );
+				directionalLight.castShadow = true;
 				scene.add( directionalLight );
 
+				directionalLight2 = new THREE.DirectionalLight( 0xaaff33, 0 );
+				directionalLight2.position.set( -1, 1, 0.5 ).normalize();
+				//scene.add( directionalLight2 );
+
+				directionalLight3 = new THREE.DirectionalLight( 0xaaff33 );
+				directionalLight3.position.set( -1, 1, 0.5 ).normalize();
+				//scene.add( directionalLight3 );
+
+
 				// light representation
 
 				var sphere = new THREE.SphereGeometry( 100, 16, 8 );
 				lightMesh = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( { color: 0xffaa00 } ) );
 				lightMesh.position = pointLight.position;
 				lightMesh.scale.x = lightMesh.scale.y = lightMesh.scale.z = 0.05;
-				scene.add( lightMesh );
+				//scene.add( lightMesh );
+
+				var path = "textures/cube/SwedishRoyalCastle/";
+				var format = '.jpg';
+				var urls = [
+						path + 'px' + format, path + 'nx' + format,
+						path + 'py' + format, path + 'ny' + format,
+						path + 'pz' + format, path + 'nz' + format
+					];
+
+				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
 
 				// common material parameters
 
-				var ambient = 0x050505, diffuse = 0x555555, specular = 0xaa6600, shininess = 10, scale = 23;
+				var ambient = 0x050505, diffuse = 0x331100, specular = 0xffffff, shininess = 10, scale = 23;
 
 				// normal map shader
 
@@ -123,6 +155,7 @@
 				uniforms[ "enableAO" ].value = true;
 				uniforms[ "enableDiffuse" ].value = false;
 				uniforms[ "enableSpecular" ].value = false;
+				uniforms[ "enableReflection" ].value = true;
 
 				uniforms[ "tNormal" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
 				uniforms[ "tAO" ].texture = THREE.ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );
@@ -137,10 +170,13 @@
 
 				uniforms[ "uShininess" ].value = shininess;
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true };
+				uniforms[ "tCube" ].texture = reflectionCube;
+				uniforms[ "uReflectivity" ].value = 0.1;
+
+				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
 				var material1 = new THREE.ShaderMaterial( parameters );
 
-				var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess } );
+				var material2 = new THREE.MeshPhongMaterial( { color: diffuse, specular: specular, ambient: ambient, shininess: shininess, envMap: reflectionCube, combine: THREE.MixOperation, reflectivity: 0.1 } );
 
 				//
 
@@ -151,13 +187,22 @@
 
 				//
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { maxLights: 8 } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );
 
 				//
 
-				var description = "normal + ao" + ( renderer.supportsVertexTextures() ? " + displacement" : " + <strike>displacement</strike>" );
+				renderer.shadowCameraFov = 70;
+				renderer.shadowMapBias = 0.0039;
+
+				renderer.shadowMapEnabled = true;
+				renderer.shadowMapSoft = true;
+
+
+				//
+
+				var description = "normal + ao" + ( renderer.supportsVertexTextures() ? " + displacement + environment + shadow" : " + <strike>displacement</strike>" );
 				document.getElementById( "description" ).innerHTML = description;
 				document.getElementById( "vt" ).style.display = renderer.supportsVertexTextures() ? "none" : "block";
 
@@ -180,11 +225,15 @@
 				mesh1 = new THREE.Mesh( geometry, material1 );
 				mesh1.position.x = - scale * 12;
 				mesh1.scale.set( scale, scale, scale );
+				mesh1.castShadow = true;
+				mesh1.receiveShadow = true;
 				scene.add( mesh1 );
 
 				mesh2 = new THREE.Mesh( geometry, material2 );
 				mesh2.position.x = scale * 12;
 				mesh2.scale.set( scale, scale, scale );
+				mesh2.castShadow = true;
+				mesh2.receiveShadow = true;
 				scene.add( mesh2 );
 
 				loader.statusDomElement.style.display = "none";

src/extras/ShaderUtils.js

@@ -94,7 +94,7 @@ THREE.ShaderUtils = {
 		/* -------------------------------------------------------------------------
 		//	Normal map shader
 		//		- Blinn-Phong
-		//		- normal + diffuse + specular + AO + displacement maps
+		//		- normal + diffuse + specular + AO + displacement + reflection + shadow maps
 		//		- point and directional lights (use with "lights: true" material option)
 		 ------------------------------------------------------------------------- */
 
@@ -108,18 +108,20 @@ THREE.ShaderUtils = {
 
 				{
 
-				"enableAO"		: { type: "i", value: 0 },
-				"enableDiffuse"	: { type: "i", value: 0 },
-				"enableSpecular": { type: "i", value: 0 },
+				"enableAO"		  : { type: "i", value: 0 },
+				"enableDiffuse"	  : { type: "i", value: 0 },
+				"enableSpecular"  : { type: "i", value: 0 },
+				"enableReflection": { type: "i", value: 0 },
 
-				"tDiffuse"	: { type: "t", value: 0, texture: null },
-				"tNormal"	: { type: "t", value: 2, texture: null },
-				"tSpecular"	: { type: "t", value: 3, texture: null },
-				"tAO"		: { type: "t", value: 4, texture: null },
+				"tDiffuse"	   : { type: "t", value: 0, texture: null },
+				"tCube"		   : { type: "t", value: 1, texture: null },
+				"tNormal"	   : { type: "t", value: 2, texture: null },
+				"tSpecular"	   : { type: "t", value: 3, texture: null },
+				"tAO"		   : { type: "t", value: 4, texture: null },
+				"tDisplacement": { type: "t", value: 5, texture: null },
 
 				"uNormalScale": { type: "f", value: 1.0 },
 
-				"tDisplacement": { type: "t", value: 5, texture: null },
 				"uDisplacementBias": { type: "f", value: 0.0 },
 				"uDisplacementScale": { type: "f", value: 1.0 },
 
@@ -129,6 +131,8 @@ THREE.ShaderUtils = {
 				"uShininess": { type: "f", value: 30 },
 				"uOpacity": { type: "f", value: 1 },
 
+				"uReflectivity": { type: "f", value: 0.5 },
+
 				"uOffset" : { type: "v2", value: new THREE.Vector2( 0, 0 ) },
 				"uRepeat" : { type: "v2", value: new THREE.Vector2( 1, 1 ) }
 
@@ -147,13 +151,17 @@ THREE.ShaderUtils = {
 				"uniform bool enableDiffuse;",
 				"uniform bool enableSpecular;",
 				"uniform bool enableAO;",
+				"uniform bool enableReflection;",
 
 				"uniform sampler2D tDiffuse;",
 				"uniform sampler2D tNormal;",
 				"uniform sampler2D tSpecular;",
 				"uniform sampler2D tAO;",
 
+				"uniform samplerCube tCube;",
+
 				"uniform float uNormalScale;",
+				"uniform float uReflectivity;",
 
 				"varying vec3 vTangent;",
 				"varying vec3 vBinormal;",
@@ -278,6 +286,15 @@ THREE.ShaderUtils = {
 
 					"gl_FragColor.xyz = gl_FragColor.xyz * totalDiffuse + totalSpecular + ambientLightColor * uAmbientColor;",
 
+					"if ( enableReflection ) {",
+
+						"vec3 wPos = cameraPosition - vViewPosition;",
+						"vec3 vReflect = reflect( normalize( wPos ), normal );",
+						"vec4 cubeColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );",
+						"gl_FragColor.xyz = mix( gl_FragColor.xyz, cubeColor.xyz, uReflectivity );",
+
+					"}",
+
 					THREE.ShaderChunk[ "shadowmap_fragment" ],
 					THREE.ShaderChunk[ "fog_fragment" ],
 

src/renderers/WebGLShaders.js

@@ -835,7 +835,7 @@ THREE.UniformsLib = {
 
 	shadowmap: {
 
-		"shadowMap": { type: "tv", value: 3, texture: [] },
+		"shadowMap": { type: "tv", value: 6, texture: [] },
 		"shadowMatrix" : { type: "m4v", value: [] },
 
 		"shadowBias" : { type: "f", value: 0.0039 },