Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Added diffuse map to normal map shader. Changed Lee Perry-Smith demo to use normal map shader.

Diffuse map and ambient occlusion maps are now optional in normal map shader.

By default, both are disabled, so they need to be enabled explicitly like this:

    uniforms[ "enableAO" ].value = true;
    uniforms[ "enableDiffuse" ].value = true;
alteredq 14 years ago
parent
03c5f0f859
commit
6e91de5d8a
5 changed files with 67 additions and 9 deletions
Split View Show Diff Stats
  1. 0 1
      build/ThreeExtras.js
  2. 3 0
      examples/materials_normalmap.html
  3. 39 6
      examples/materials_normalmap2.html
  4. 7 0
      examples/obj/leeperrysmith/.htaccess
  5. 18 2
      src/extras/ShaderUtils.js

File diff suppressed because it is too large
+ 0 - 1
build/ThreeExtras.js


+ 3 - 0
examples/materials_normalmap.html
View File 

@@ -157,6 +157,9 @@
 
 				var vertex_shader = ShaderUtils.lib[ "normal" ].vertex_shader;
 
 				var uniforms = ShaderUtils.lib[ "normal" ].uniforms;
 
 
+				uniforms[ "enableAO" ].value = true;
 
+				uniforms[ "enableDiffuse" ].value = false;
 
+				
 				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/normal.jpg" );
 
 				uniforms[ "tAO" ].texture = ImageUtils.loadTexture( "textures/normal/ninja/ao.jpg" );

+ 39 - 6
examples/materials_normalmap2.html
View File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE HTML>
 
 <html lang="en">
 
 	<head>
 
-		<title>three.js - webgl normal map</title>
 
+		<title>three.js - webgl normal map - lee perry-smith</title>
 
 		<meta charset="utf-8">
 
 		<style type="text/css">
 
 			body {
 
@@ -127,11 +127,11 @@
 
 				ambientLight = new THREE.AmbientLight( 0x222233 );
 
 				scene.addLight( ambientLight );
 
 
-				pointLight = new THREE.PointLight( 0xffffAA, 0.5 );
 
+				pointLight = new THREE.PointLight( 0x888877 );
 
 				pointLight.position.z = 10000;
 
 				scene.addLight( pointLight );
 
 
-				directionalLight = new THREE.DirectionalLight( 0xffff88 );
 
+				directionalLight = new THREE.DirectionalLight( 0x999955 );
 
 				directionalLight.position.x = 1;
 
 				directionalLight.position.y = 1;
 
 				directionalLight.position.z = 0.5;
 
@@ -140,20 +140,53 @@
 
 
 				// light representation
 
 
-				var sphere = new Sphere( 100, 16, 8, 1 );
 
+				var sphere = new Sphere( 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.addObject(lightMesh);
 
 
-				var material = new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ) } );
 
+				// material parameters
 
+				
+				var ambient = 0x020202, diffuse = 0x666666, specular = 0x666666, shininess = 4;
 
+
 
+				var fragment_shader = ShaderUtils.lib[ "normal" ].fragment_shader;
 
+				var vertex_shader = ShaderUtils.lib[ "normal" ].vertex_shader;
 
+				var uniforms = ShaderUtils.lib[ "normal" ].uniforms;
 
+
 
+				uniforms[ "tNormal" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Infinite-Level_02_Tangent_SmoothUV.jpg" );
 
+				uniforms[ "tDiffuse" ].texture = ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" );
 
+				
+				uniforms[ "enableAO" ].value = false;
 
+				uniforms[ "enableDiffuse" ].value = true;
 
+				
+				uniforms[ "uPointLightPos" ].value = pointLight.position;
 
+				uniforms[ "uPointLightColor" ].value = pointLight.color;
 
+
 
+				uniforms[ "uDirLightPos" ].value = directionalLight.position;
 
+				uniforms[ "uDirLightColor" ].value = directionalLight.color;
 
+				
+				uniforms[ "uAmbientLightColor" ].value = ambientLight.color;
 
+				
+				uniforms[ "uDiffuseColor" ].value.setHex( diffuse );
 
+				uniforms[ "uSpecularColor" ].value.setHex( specular );
 
+				uniforms[ "uAmbientColor" ].value.setHex( ambient );
 
+				
+				uniforms[ "uShininess" ].value = shininess;
 
+
 
+				var material = new THREE.MeshShaderMaterial( { fragment_shader: fragment_shader, 
+															    vertex_shader: vertex_shader, 
+															    uniforms: uniforms
 
+															  } );
 
+
 
+				//var material = new THREE.MeshLambertMaterial( { map: ImageUtils.loadTexture( "obj/leeperrysmith/Map-COL.jpg" ) } );
 
 
 				loader = new THREE.Loader( true );
 
 				document.body.appendChild( loader.statusDomElement );
 
 
 				loader.loadAscii( "obj/leeperrysmith/LeePerrySmith.js", function( geometry ) { createScene( geometry, 100, material ) }, "obj/leeperrysmith" );
 
 
-				webglRenderer = new THREE.WebGLRenderer( scene );
 
+				webglRenderer = new THREE.WebGLRenderer( { scene: scene } );
 
 				webglRenderer.setSize( window.innerWidth, window.innerHeight );
 
 				container.appendChild( webglRenderer.domElement );

+ 7 - 0
examples/obj/leeperrysmith/.htaccess
View File 

@@ -0,0 +1,7 @@
 
+<Files *.js>

+SetOutputFilter DEFLATE

+</Files>

+

+<Files *.bin>

+SetOutputFilter DEFLATE

+</Files>

+ 18 - 2
src/extras/ShaderUtils.js
View File 

@@ -70,6 +70,10 @@ var ShaderUtils = {
 
 
 			uniforms: {
 
 
+			"enableAO": { type: "i", value: 0 },
 
+			"enableDiffuse": { type: "i", value: 0 },
 
+			
+			"tDiffuse": { type: "t", value: 0, texture: null },
 
 			"tNormal": { type: "t", value: 2, texture: null },
 
 			"tAO": { type: "t", value: 3, texture: null },
 
 
@@ -105,6 +109,10 @@ var ShaderUtils = {
 
 			"uniform vec3 uSpecularColor;",
 
 			"uniform float uShininess;",
 
 
+			"uniform bool enableDiffuse;",
 
+			"uniform bool enableAO;",
 
+			
+			"uniform sampler2D tDiffuse;",
 
 			"uniform sampler2D tNormal;",
 
 			"uniform sampler2D tAO;",
 
 
@@ -119,8 +127,16 @@ var ShaderUtils = {
 
 
 			"void main() {",
 
 
+				"vec3 diffuseTex = vec3( 1.0, 1.0, 1.0 );",
 
+				"vec3 aoTex = vec3( 1.0, 1.0, 1.0 );",
 
+				
 				"vec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );",
 
-				"vec3 aoTex = texture2D( tAO, vUv ).xyz;",
 
+				
+				"if( enableDiffuse )",
 
+					"diffuseTex = texture2D( tDiffuse, vUv ).xyz;",
 
+					
+				"if( enableAO )",
 
+					"aoTex = texture2D( tAO, vUv ).xyz;",
 
 
 				"mat3 tsb = mat3( vTangent, vBinormal, vNormal );",
 
 				"vec3 finalNormal = tsb * normalTex;",
 
@@ -172,7 +188,7 @@ var ShaderUtils = {
 
 				"totalLight += dirDiffuse + dirSpecular;",
 
 				"totalLight += pointDiffuse + pointSpecular;",
 
 
-				"gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );",
 
+				"gl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex * diffuseTex, 1.0 );",
 
 
 			"}"
 
 			].join("\n"),

Some files were not shown because too many files changed in this diff