Clean up

examples/js/shaders/NormalDisplacementShader.js

@@ -46,8 +46,6 @@ THREE.NormalDisplacementShader = {
 		"uOffset" : { type: "v2", value: new THREE.Vector2( 0, 0 ) },
 		"uRepeat" : { type: "v2", value: new THREE.Vector2( 1, 1 ) },
 
-		"wrapRGB" : { type: "v3", value: new THREE.Vector3( 1, 1, 1 ) }
-
 		}
 
 	] ),
@@ -117,12 +115,6 @@ THREE.NormalDisplacementShader = {
 
 		"#endif",
 
-		"#ifdef WRAP_AROUND",
-
-		"	uniform vec3 wrapRGB;",
-
-		"#endif",
-
 		"varying vec3 vWorldPosition;",
 		"varying vec3 vViewPosition;",
 
@@ -132,9 +124,11 @@ THREE.NormalDisplacementShader = {
 		THREE.ShaderChunk[ "logdepthbuf_pars_fragment" ],
 
 		"void main() {",
+
 			THREE.ShaderChunk[ "logdepthbuf_fragment" ],
 
-		"	vec3 outgoingLight = vec3( 0.0 );",	// outgoing light does not have an alpha, the surface does
+		"	vec3 outgoingLight = vec3( 0.0 );",
+
 		"	vec4 diffuseColor = vec4( diffuse, opacity );",
 
 		"	vec3 specularTex = vec3( 1.0 );",
@@ -162,22 +156,11 @@ THREE.NormalDisplacementShader = {
 
 		"	if( enableAO ) {",
 
-		"		#ifdef GAMMA_INPUT",
-
-		"			vec4 aoColor = texture2D( tAO, vUv );",
-		"			aoColor.xyz *= aoColor.xyz;",
-
-		"			diffuseColor.rgb *= aoColor.xyz;",
-
-		"		#else",
-
-		"			diffuseColor.rgb *= texture2D( tAO, vUv ).xyz;",
-
-		"		#endif",
-
+		"		diffuseColor.rgb *= texture2D( tAO, vUv ).xyz;", // actually, the AOmap should be modulating ambient light sources only,
+																 // and should use the second set of UVs, as is done elsewhere in the library
 		"	}",
 
-		THREE.ShaderChunk[ "alphatest_fragment" ],
+			THREE.ShaderChunk[ "alphatest_fragment" ],
 
 		"	if( enableSpecular )",
 		"		specularTex = texture2D( tSpecular, vUv ).xyz;",
@@ -187,7 +170,7 @@ THREE.NormalDisplacementShader = {
 
 		"	#ifdef FLIP_SIDED",
 
-		"		finalNormal = -finalNormal;",
+		"		finalNormal = - finalNormal;",
 
 		"	#endif",
 
@@ -214,18 +197,7 @@ THREE.NormalDisplacementShader = {
 
 					// diffuse
 
-		"			#ifdef WRAP_AROUND",
-
-		"				float pointDiffuseWeightFull = max( dot( normal, pointVector ), 0.0 );",
-		"				float pointDiffuseWeightHalf = max( 0.5 * dot( normal, pointVector ) + 0.5, 0.0 );",
-
-		"				vec3 pointDiffuseWeight = mix( vec3( pointDiffuseWeightFull ), vec3( pointDiffuseWeightHalf ), wrapRGB );",
-
-		"			#else",
-
-		"				float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
-
-		"			#endif",
+		"			float pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );",
 
 		"			totalDiffuseLight += pointDistance * pointLightColor[ i ] * pointDiffuseWeight;",
 
@@ -267,18 +239,8 @@ THREE.NormalDisplacementShader = {
 
 						// diffuse
 
-		"				#ifdef WRAP_AROUND",
-
-		"					float spotDiffuseWeightFull = max( dot( normal, spotVector ), 0.0 );",
-		"					float spotDiffuseWeightHalf = max( 0.5 * dot( normal, spotVector ) + 0.5, 0.0 );",
 
-		"					vec3 spotDiffuseWeight = mix( vec3( spotDiffuseWeightFull ), vec3( spotDiffuseWeightHalf ), wrapRGB );",
-
-		"				#else",
-
-		"					float spotDiffuseWeight = max( dot( normal, spotVector ), 0.0 );",
-
-		"				#endif",
+		"				float spotDiffuseWeight = max( dot( normal, spotVector ), 0.0 );",
 
 		"				totalDiffuseLight += spotDistance * spotLightColor[ i ] * spotDiffuseWeight * spotEffect;",
 
@@ -303,25 +265,14 @@ THREE.NormalDisplacementShader = {
 
 		"	#if MAX_DIR_LIGHTS > 0",
 
-		"		for( int i = 0; i < MAX_DIR_LIGHTS; i++ ) {",
+		"		for( int i = 0; i < MAX_DIR_LIGHTS; i ++ ) {",
 
 		"			vec4 lDirection = viewMatrix * vec4( directionalLightDirection[ i ], 0.0 );",
 		"			vec3 dirVector = normalize( lDirection.xyz );",
 
 					// diffuse
 
-		"			#ifdef WRAP_AROUND",
-
-		"				float directionalLightWeightingFull = max( dot( normal, dirVector ), 0.0 );",
-		"				float directionalLightWeightingHalf = max( 0.5 * dot( normal, dirVector ) + 0.5, 0.0 );",
-
-		"				vec3 dirDiffuseWeight = mix( vec3( directionalLightWeightingFull ), vec3( directionalLightWeightingHalf ), wrapRGB );",
-
-		"			#else",
-
-		"				float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
-
-		"			#endif",
+		"			float dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );",
 
 		"			totalDiffuseLight += directionalLightColor[ i ] * dirDiffuseWeight;",
 
@@ -360,26 +311,16 @@ THREE.NormalDisplacementShader = {
 
 					// specular (sky light)
 
-
 		"			vec3 hemiHalfVectorSky = normalize( lVector + viewPosition );",
 		"			float hemiDotNormalHalfSky = 0.5 * dot( normal, hemiHalfVectorSky ) + 0.5;",
 		"			float hemiSpecularWeightSky = specularTex.r * max( pow( max( hemiDotNormalHalfSky, 0.0 ), shininess ), 0.0 );",
 
-					// specular (ground light)
-
-		"			vec3 lVectorGround = -lVector;",
-
-		"			vec3 hemiHalfVectorGround = normalize( lVectorGround + viewPosition );",
-		"			float hemiDotNormalHalfGround = 0.5 * dot( normal, hemiHalfVectorGround ) + 0.5;",
-		"			float hemiSpecularWeightGround = specularTex.r * max( pow( max( hemiDotNormalHalfGround, 0.0 ), shininess ), 0.0 );",
-
-		"			float dotProductGround = dot( normal, lVectorGround );",
+					//
 
 		"			float specularNormalization = ( shininess + 2.0 ) / 8.0;",
 
 		"			vec3 schlickSky = specular + vec3( 1.0 - specular ) * pow( max( 1.0 - dot( lVector, hemiHalfVectorSky ), 0.0 ), 5.0 );",
-		"			vec3 schlickGround = specular + vec3( 1.0 - specular ) * pow( max( 1.0 - dot( lVectorGround, hemiHalfVectorGround ), 0.0 ), 5.0 );",
-		"			totalSpecularLight += hemiColor * specularNormalization * ( schlickSky * hemiSpecularWeightSky * max( dotProduct, 0.0 ) + schlickGround * hemiSpecularWeightGround * max( dotProductGround, 0.0 ) );",
+		"			totalSpecularLight += hemiColor * specularNormalization * ( schlickSky * hemiSpecularWeightSky * max( dotProduct, 0.0 ) );",
 
 		"		}",
 
@@ -427,7 +368,7 @@ THREE.NormalDisplacementShader = {
 			THREE.ShaderChunk[ "linear_to_gamma_fragment" ],
 			THREE.ShaderChunk[ "fog_fragment" ],
 
-		"	gl_FragColor = vec4( outgoingLight, diffuseColor.a );",	// TODO, this should be pre-multiplied to allow for bright highlights on very transparent objects
+		"	gl_FragColor = vec4( outgoingLight, diffuseColor.a );",
 
 		"}"
 
@@ -557,7 +498,7 @@ THREE.NormalDisplacementShader = {
 			//
 
 		"	vWorldPosition = worldPosition.xyz;",
-		"	vViewPosition = -mvPosition.xyz;",
+		"	vViewPosition = - mvPosition.xyz;",
 
 			// shadows
 

examples/webgl_materials_normaldisplacementmap.html

@@ -58,16 +58,13 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var statsEnabled = true;
-
-			var container, stats, loader;
+			var stats, loader;
 
 			var camera, scene, renderer;
 
-			var mesh, zmesh, geometry;
 			var mesh1, mesh2;
 
-			var spotLight, pointLight, ambientLight;
+			var pointLight;
 
 			var mouseX = 0;
 			var mouseY = 0;
@@ -84,17 +81,19 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
+				var container = document.createElement( 'div' );
 				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 = 1500;
-
 				scene = new THREE.Scene();
 
+				var width = 500;
+				var aspect = window.innerWidth / window.innerHeight;
+				camera = new THREE.OrthographicCamera( - width * aspect, width * aspect, width, - width, 1, 10000 );
+				camera.position.z = 1500;
+
 				// LIGHTS
 
-				ambientLight = new THREE.AmbientLight( 0x111111 );
+				var ambientLight = new THREE.AmbientLight( 0x111111 );
 				scene.add( ambientLight );
 
 				pointLight = new THREE.PointLight( 0xff0000 );
@@ -102,39 +101,27 @@
 				pointLight.distance = 4000;
 				scene.add( pointLight );
 
-				pointLight2 = new THREE.PointLight( 0xff5500 );
+				var pointLight2 = new THREE.PointLight( 0xff5500 );
 				pointLight2.position.z = 1000;
-				pointLight2.distance = 2000;
 				scene.add( pointLight2 );
 
-				pointLight3 = new THREE.PointLight( 0x0000ff );
+				var pointLight3 = new THREE.PointLight( 0x0000ff );
 				pointLight3.position.x = -1000;
 				pointLight3.position.z = 1000;
-				pointLight3.distance = 2000;
 				scene.add( pointLight3 );
 
-				spotLight = new THREE.SpotLight( 0xaaaaaa );
+				var spotLight = new THREE.SpotLight( 0xaaaaaa );
 				spotLight.position.set( 1000, 500, 1000 );
 				spotLight.castShadow = true;
 				spotLight.shadowCameraNear = 500;
 				spotLight.shadowCameraFov = 70;
-				spotLight.shadowBias = 0.001;
+				spotLight.shadowBias = - 0.001;
 				spotLight.shadowMapWidth = 1024;
 				spotLight.shadowMapHeight = 1024;
+				spotLight.shadowDarkness = 0.5;
 				scene.add( spotLight );
 
-				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 );
+				// env map
 
 				var path = "textures/cube/SwedishRoyalCastle/";
 				var format = '.jpg';
@@ -144,7 +131,7 @@
 						path + 'pz' + format, path + 'nz' + format
 					];
 
-				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls );
+				var reflectionCube = THREE.ImageUtils.loadTextureCube( urls, THREE.CubeReflectionMapping );
 
 				// common material parameters
 
@@ -168,7 +155,7 @@
 				uniforms[ "uDisplacementBias" ].value = - 0.428408;
 				uniforms[ "uDisplacementScale" ].value = 2.436143;
 
-				uniforms[ "uNormalScale" ].value.y = -1;
+				uniforms[ "uNormalScale" ].value.y = - 1;
 
 				uniforms[ "diffuse" ].value.setHex( diffuse );
 				uniforms[ "specular" ].value.setHex( specular );
@@ -176,13 +163,21 @@
 				uniforms[ "shininess" ].value = shininess;
 
 				uniforms[ "tCube" ].value = reflectionCube;
-				uniforms[ "reflectivity" ].value = 0.1;
+				uniforms[ "reflectivity" ].value = 0.2;
 
-				var parameters = { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, lights: true, fog: false };
-				var material1 = new THREE.ShaderMaterial( parameters );
+				var defines = {};
+				defines[ "ENVMAP_MODE_REFLECTION" ] = "";
+
+				var parameters = {
+					defines: defines,
+					uniforms: uniforms,
+					vertexShader: shader.vertexShader,
+					fragmentShader: shader.fragmentShader,
+					lights: true,
+					fog: false
+				};
 
-				// Ensure that ENVMAP_MODE_REFLECTION is defined in shader
-				material1.envMap = reflectionCube;
+				var material1 = new THREE.ShaderMaterial( parameters );
 
 				var material2 = new THREE.MeshPhongMaterial( {
 					color: diffuse,
@@ -190,9 +185,11 @@
 					shininess: shininess,
 					normalMap: uniforms[ "tNormal" ].value,
 					normalScale: uniforms[ "uNormalScale" ].value,
+					aoMap: uniforms[ "tAO" ].value,
+					aoMapIntensity: 1,
 					envMap: reflectionCube,
 					combine: THREE.MixOperation,
-					reflectivity: 0.1
+					reflectivity: 0.2
 				} );
 
 				//
@@ -219,22 +216,19 @@
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 
-
 				//
 
 				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";
 
-				if ( statsEnabled ) {
-
-					stats = new Stats();
-					stats.domElement.style.position = 'absolute';
-					stats.domElement.style.top = '0px';
-					stats.domElement.style.zIndex = 100;
-					container.appendChild( stats.domElement );
+				//
 
-				}
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
 
 				//
 
@@ -260,7 +254,9 @@
 
 			function createScene( geometry, scale, material1, material2 ) {
 
-				geometry.computeTangents();
+				geometry.computeTangents(); // attribute tangents are required for NormalDisplacementShader
+
+				geometry.faceVertexUvs[ 1 ] = geometry.faceVertexUvs[ 0 ]; // 2nd set of UVs required for aoMap with MeshPhongMaterial
 
 				mesh1 = new THREE.Mesh( geometry, material1 );
 				mesh1.position.x = - scale * 12;
@@ -294,7 +290,8 @@
 				requestAnimationFrame( animate );
 
 				render();
-				if ( statsEnabled ) stats.update();
+
+				stats.update();
 
 			}