Browse Source

Added support for bump mapping to deferred rendering example.

- changed model to Lee Perry
- changed light pass material to use RGB-weighted wrap-around lighting (with deferred can't have easily together multiple material types :S)
- changed deferred rendering to use linear space lighting
alteredq 12 years ago
parent
commit
797a786bde
1 changed files with 142 additions and 12 deletions
  1. 142 12
      examples/webgl_lights_deferred_pointlights.html

+ 142 - 12
examples/webgl_lights_deferred_pointlights.html

@@ -147,6 +147,78 @@
 
 			// -----------------------
 
+			var bump_vert = "" +
+
+			"varying vec3 normalView;"+
+			"varying vec2 vUv;"+
+			"varying vec3 vViewPosition;"+
+
+			"uniform vec4 offsetRepeat;"+
+
+			"void main() {"+
+
+				"vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+
+				"gl_Position = projectionMatrix * mvPosition;"+
+				"normalView = normalize( normalMatrix * normal );"+
+				"vUv = uv * offsetRepeat.zw + offsetRepeat.xy;"+
+				"vViewPosition = -mvPosition.xyz;"+
+
+			"}";
+
+			var bump_frag = "" +
+
+			"#extension GL_OES_standard_derivatives : enable\n"+
+			"varying vec3 normalView;"+
+			"varying vec2 vUv;"+
+			"varying vec3 vViewPosition;"+
+
+			"uniform sampler2D bumpMap;"+
+			"uniform float bumpScale;"+
+
+			// Derivative maps - bump mapping unparametrized surfaces by Morten Mikkelsen
+			//	http://mmikkelsen3d.blogspot.sk/2011/07/derivative-maps.html
+
+			// Evaluate the derivative of the height w.r.t. screen-space using forward differencing (listing 2)
+
+			"vec2 dHdxy_fwd() {"+
+
+				"vec2 dSTdx = dFdx( vUv );"+
+				"vec2 dSTdy = dFdy( vUv );"+
+
+				"float Hll = bumpScale * texture2D( bumpMap, vUv ).x;"+
+				"float dBx = bumpScale * texture2D( bumpMap, vUv + dSTdx ).x - Hll;"+
+				"float dBy = bumpScale * texture2D( bumpMap, vUv + dSTdy ).x - Hll;"+
+
+				"return vec2( dBx, dBy );"+
+
+			"}"+
+
+			"vec3 perturbNormalArb( vec3 surf_pos, vec3 surf_norm, vec2 dHdxy ) {"+
+
+				"vec3 vSigmaX = dFdx( surf_pos );"+
+				"vec3 vSigmaY = dFdy( surf_pos );"+
+				"vec3 vN = surf_norm;"+		// normalized
+
+				"vec3 R1 = cross( vSigmaY, vN );"+
+				"vec3 R2 = cross( vN, vSigmaX );"+
+
+				"float fDet = dot( vSigmaX, R1 );"+
+
+				"vec3 vGrad = sign( fDet ) * ( dHdxy.x * R1 + dHdxy.y * R2 );"+
+				"return normalize( abs( fDet ) * surf_norm - vGrad );"+
+
+			"}"+
+
+			"void main() {"+
+
+				"vec3 normal = normalize( normalView );"+
+				"normal = perturbNormalArb( -vViewPosition, normal, dHdxy_fwd() );"+
+				"gl_FragColor = vec4( vec3( normal * 0.5 + 0.5 ), 1.0 );"+
+
+			"}";
+
+			// -----------------------
+
 			var unlit_vert = "" +
 
 			"varying vec4 clipPos;"+
@@ -245,20 +317,39 @@
 				"attenuation = max( attenuation, 0.0 );"+
 
 				"vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;" +
-				"float diffuse = max( dot( normal, lightDir ), 0.0 );" +
 
-				"const float shininess = 150.0;" +
+				// wrap around lighting
+
+				"float diffuseFull = max( dot( normal, lightDir ), 0.0 );" +
+				"float diffuseHalf = max( 0.5 + 0.5 * dot( normal, lightDir ), 0.0 );" +
+
+				"const vec3 wrapRGB = vec3( 0.8, 0.5, 0.5 );"+
+				"vec3 diffuse = mix( vec3 ( diffuseFull ), vec3( diffuseHalf ), wrapRGB );"+
+
+				// simple lighting
+
+				//"float diffuseFull = max( dot( normal, lightDir ), 0.0 );" +
+				//"vec3 diffuse = vec3 ( diffuseFull );"+
+
+				// specular
+
+				"const float shininess = 75.0;" +
+				"const float specularIntensity = 0.4;"+
 
 				"vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );" +
 				"float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );" +
-				"float specular = max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse;" +
+				"vec3 specular = specularIntensity * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse;" +
+
+				// color
 
 				"vec4 albedo = texture2D( samplerColor, texCoord );"+
 
+				// combine
+
 				"vec4 color = vec4( 0.0 );"+
 				"color.xyz = albedo.xyz * lightColor * lightIntensity;"+
 				"color.w = attenuation;"+
-				"gl_FragColor = color * ( diffuse + specular );" +
+				"gl_FragColor = color * vec4( diffuse + specular, 1.0 );" +
 
 			"}";
 
@@ -292,7 +383,7 @@
 
 				"} else {"+
 
-					"gl_FragColor = vec4( color, 1.0 );" +
+					"gl_FragColor = vec4( sqrt( color ), 1.0 );" +
 
 				"}"+
 
@@ -311,6 +402,23 @@
 
 			// -----------------------
 
+			var bumpShader = {
+
+				uniforms: {
+
+					bumpMap: 	{ type: "t", value: null },
+					bumpScale:	{ type: "f", value: 1 },
+					offsetRepeat : { type: "v4", value: new THREE.Vector4( 0, 0, 1, 1 ) }
+
+				},
+
+				vertexShader: bump_vert,
+				fragmentShader: bump_frag
+
+			};
+
+			// -----------------------
+
 			var clipDepthShader = {
 
 				uniforms: {},
@@ -570,7 +678,7 @@
 						// color material
 
 						var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-						var defines = { "USE_MAP": !!node.material.map };
+						var defines = { "USE_MAP": !!node.material.map, "GAMMA_INPUT": true };
 
 						var material = new THREE.ShaderMaterial( { fragmentShader: shader.fragmentShader, vertexShader: shader.vertexShader, uniforms: uniforms, defines: defines } );
 						uniforms.diffuse.value.copy( node.material.color );
@@ -592,7 +700,25 @@
 
 						// normal material
 
-						node.properties.normalMaterial = matNormal;
+						if ( node.material.bumpMap ) {
+
+							var uniforms = THREE.UniformsUtils.clone( bumpShader.uniforms );
+							var normalMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: bumpShader.vertexShader, fragmentShader: bumpShader.fragmentShader } );
+							uniforms.bumpMap.value = node.material.bumpMap;
+							uniforms.bumpScale.value = node.material.bumpScale;
+
+							var offset = node.material.bumpMap.offset;
+							var repeat = node.material.bumpMap.repeat;
+
+							uniforms.offsetRepeat.value.set( offset.x, offset.y, repeat.x, repeat.y );
+
+							node.properties.normalMaterial = normalMaterial;
+
+						} else {
+
+							node.properties.normalMaterial = matNormal;
+
+						}
 
 						// depth material
 
@@ -814,14 +940,14 @@
 
 			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 ) {
@@ -832,13 +958,18 @@
 			}, { 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" );
-				var material = new THREE.MeshPhongMaterial( { map: mapColor, bumpMap: mapHeight  } );
+				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 );
 
@@ -846,7 +977,6 @@
 				animate();
 
 			} );
-			*/
 
 		</script>
 	</body>