home/three.js
2
0
Fork 0
mirror of https://github.com/wahyd4/three.js.git synced 2026-08-09 04:56:01 +10:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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;
This commit is contained in:
alteredq
2010-12-26 03:03:28 +01:00
parent 03c5f0f859
commit 6e91de5d8a
5 changed files with 69 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
build/ThreeExtras.js
+2 -2
View File
@@ -192,8 +192,8 @@ uniforms:d.uniforms});b=new THREE.Mesh(new Cube(b,b,b,1,1,null,true),e);a.addObj
mesh=new THREE.Mesh(new Cube(b,b,b,1,1,d,true),new THREE.MeshFaceMaterial);a.addObject(mesh);return mesh},addPanoramaCubePlanes:function(a,b,e){var d=b/2;b=new Plane(b,b);var g=Math.PI/2,f=Math.PI;SceneUtils.addMesh(a,b,1,0,0,-d,0,0,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(e[5])}));SceneUtils.addMesh(a,b,1,-d,0,0,0,g,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(e[0])}));SceneUtils.addMesh(a,b,1,d,0,0,0,-g,0,new THREE.MeshBasicMaterial({map:new THREE.Texture(e[1])}));SceneUtils.addMesh(a,
b,1,0,d,0,g,0,f,new THREE.MeshBasicMaterial({map:new THREE.Texture(e[2])}));SceneUtils.addMesh(a,b,1,0,-d,0,-g,0,f,new THREE.MeshBasicMaterial({map:new THREE.Texture(e[3])}))}},ShaderUtils={lib:{fresnel:{uniforms:{mRefractionRatio:{type:"f",value:1.02},mFresnelBias:{type:"f",value:0.1},mFresnelPower:{type:"f",value:2},mFresnelScale:{type:"f",value:1},tCube:{type:"t",value:1,texture:null}},fragment_shader:"uniform samplerCube tCube;\nvarying vec3 vReflect;\nvarying vec3 vRefract[3];\nvarying float vReflectionFactor;\nvoid main() {\nvec4 reflectedColor = textureCube( tCube, vec3( -vReflect.x, vReflect.yz ) );\nvec4 refractedColor = vec4( 1.0, 1.0, 1.0, 1.0 );\nrefractedColor.r = textureCube( tCube, vec3( -vRefract[0].x, vRefract[0].yz ) ).r;\nrefractedColor.g = textureCube( tCube, vec3( -vRefract[1].x, vRefract[1].yz ) ).g;\nrefractedColor.b = textureCube( tCube, vec3( -vRefract[2].x, vRefract[2].yz ) ).b;\nrefractedColor.a = 1.0;\ngl_FragColor = mix( refractedColor, reflectedColor, clamp( vReflectionFactor, 0.0, 1.0 ) );\n}",
vertex_shader:"uniform float mRefractionRatio;\nuniform float mFresnelBias;\nuniform float mFresnelScale;\nuniform float mFresnelPower;\nvarying vec3 vReflect;\nvarying vec3 vRefract[3];\nvarying float vReflectionFactor;\nvoid main(void) {\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvec3 nWorld = normalize ( mat3( objectMatrix[0].xyz, objectMatrix[1].xyz, objectMatrix[2].xyz ) * normal );\nvec3 I = mPosition.xyz - cameraPosition;\nvReflect = reflect( I, nWorld );\nvRefract[0] = refract( normalize( I ), nWorld, mRefractionRatio );\nvRefract[1] = refract( normalize( I ), nWorld, mRefractionRatio * 0.99 );\nvRefract[2] = refract( normalize( I ), nWorld, mRefractionRatio * 0.98 );\nvReflectionFactor = mFresnelBias + mFresnelScale * pow( 1.0 + dot( normalize( I ), nWorld ), mFresnelPower );\ngl_Position = projectionMatrix * mvPosition;\n}"},
normal:{uniforms:{tNormal:{type:"t",value:2,texture:null},tAO:{type:"t",value:3,texture:null},tDisplacement:{type:"t",value:4,texture:null},uDisplacementBias:{type:"f",value:-0.5},uDisplacementScale:{type:"f",value:2.5},uPointLightPos:{type:"v3",value:new THREE.Vector3},uPointLightColor:{type:"c",value:new THREE.Color(15658734)},uDirLightPos:{type:"v3",value:new THREE.Vector3},uDirLightColor:{type:"c",value:new THREE.Color(15658734)},uAmbientLightColor:{type:"c",value:new THREE.Color(328965)},uDiffuseColor:{type:"c",
value:new THREE.Color(15658734)},uSpecularColor:{type:"c",value:new THREE.Color(1118481)},uAmbientColor:{type:"c",value:new THREE.Color(328965)},uShininess:{type:"f",value:30}},fragment_shader:"uniform vec3 uDirLightPos;\nuniform vec3 uDirLightColor;\nuniform vec3 uPointLightPos;\nuniform vec3 uPointLightColor;\nuniform vec3 uAmbientColor;\nuniform vec3 uDiffuseColor;\nuniform vec3 uSpecularColor;\nuniform float uShininess;\nuniform sampler2D tNormal;\nuniform sampler2D tAO;\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;\nvarying vec3 vPointLightVector;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );\nvec3 aoTex = texture2D( tAO, vUv ).xyz;\nmat3 tsb = mat3( vTangent, vBinormal, vNormal );\nvec3 finalNormal = tsb * normalTex;\nvec3 normal = normalize( finalNormal );\nvec3 viewPosition = normalize( vViewPosition );\nvec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec3 pointVector = normalize( vPointLightVector );\nvec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = pow( pointDotNormalHalf, uShininess );\npointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;\npointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;\nvec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = pow( dirDotNormalHalf, uShininess );\ndirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;\ndirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;\nvec4 totalLight = vec4( uAmbientColor, 1.0 );\ntotalLight += dirDiffuse + dirSpecular;\ntotalLight += pointDiffuse + pointSpecular;\ngl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex, 1.0 );\n}",
normal:{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},tDisplacement:{type:"t",value:4,texture:null},uDisplacementBias:{type:"f",value:-0.5},uDisplacementScale:{type:"f",value:2.5},uPointLightPos:{type:"v3",value:new THREE.Vector3},uPointLightColor:{type:"c",value:new THREE.Color(15658734)},uDirLightPos:{type:"v3",value:new THREE.Vector3},uDirLightColor:{type:"c",
value:new THREE.Color(15658734)},uAmbientLightColor:{type:"c",value:new THREE.Color(328965)},uDiffuseColor:{type:"c",value:new THREE.Color(15658734)},uSpecularColor:{type:"c",value:new THREE.Color(1118481)},uAmbientColor:{type:"c",value:new THREE.Color(328965)},uShininess:{type:"f",value:30}},fragment_shader:"uniform vec3 uDirLightPos;\nuniform vec3 uDirLightColor;\nuniform vec3 uPointLightPos;\nuniform vec3 uPointLightColor;\nuniform vec3 uAmbientColor;\nuniform vec3 uDiffuseColor;\nuniform vec3 uSpecularColor;\nuniform float uShininess;\nuniform bool enableDiffuse;\nuniform bool enableAO;\nuniform sampler2D tDiffuse;\nuniform sampler2D tNormal;\nuniform sampler2D tAO;\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;\nvarying vec3 vPointLightVector;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 diffuseTex = vec3( 1.0, 1.0, 1.0 );\nvec3 aoTex = vec3( 1.0, 1.0, 1.0 );\nvec3 normalTex = normalize( texture2D( tNormal, vUv ).xyz * 2.0 - 1.0 );\nif( enableDiffuse )\ndiffuseTex = texture2D( tDiffuse, vUv ).xyz;\nif( enableAO )\naoTex = texture2D( tAO, vUv ).xyz;\nmat3 tsb = mat3( vTangent, vBinormal, vNormal );\nvec3 finalNormal = tsb * normalTex;\nvec3 normal = normalize( finalNormal );\nvec3 viewPosition = normalize( vViewPosition );\nvec4 pointDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 pointSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec3 pointVector = normalize( vPointLightVector );\nvec3 pointHalfVector = normalize( vPointLightVector + vViewPosition );\nfloat pointDotNormalHalf = dot( normal, pointHalfVector );\nfloat pointDiffuseWeight = max( dot( normal, pointVector ), 0.0 );\nfloat pointSpecularWeight = 0.0;\nif ( pointDotNormalHalf >= 0.0 )\npointSpecularWeight = pow( pointDotNormalHalf, uShininess );\npointDiffuse += vec4( uDiffuseColor, 1.0 ) * pointDiffuseWeight;\npointSpecular += vec4( uSpecularColor, 1.0 ) * pointSpecularWeight;\nvec4 dirDiffuse = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 dirSpecular = vec4( 0.0, 0.0, 0.0, 0.0 );\nvec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );\nvec3 dirVector = normalize( lDirection.xyz );\nvec3 dirHalfVector = normalize( lDirection.xyz + vViewPosition );\nfloat dirDotNormalHalf = dot( normal, dirHalfVector );\nfloat dirDiffuseWeight = max( dot( normal, dirVector ), 0.0 );\nfloat dirSpecularWeight = 0.0;\nif ( dirDotNormalHalf >= 0.0 )\ndirSpecularWeight = pow( dirDotNormalHalf, uShininess );\ndirDiffuse += vec4( uDiffuseColor, 1.0 ) * dirDiffuseWeight;\ndirSpecular += vec4( uSpecularColor, 1.0 ) * dirSpecularWeight;\nvec4 totalLight = vec4( uAmbientColor, 1.0 );\ntotalLight += dirDiffuse + dirSpecular;\ntotalLight += pointDiffuse + pointSpecular;\ngl_FragColor = vec4( totalLight.xyz * vLightWeighting * aoTex * diffuseTex, 1.0 );\n}",
vertex_shader:"attribute vec4 tangent;\nuniform vec3 uDirLightPos;\nuniform vec3 uDirLightColor;\nuniform vec3 uPointLightPos;\nuniform vec3 uPointLightColor;\nuniform vec3 uAmbientLightColor;\n#ifdef VERTEX_TEXTURES\nuniform sampler2D tDisplacement;\nuniform float uDisplacementScale;\nuniform float uDisplacementBias;\n#endif\nvarying vec3 vTangent;\nvarying vec3 vBinormal;\nvarying vec3 vNormal;\nvarying vec2 vUv;\nvarying vec3 vLightWeighting;\nvarying vec3 vPointLightVector;\nvarying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\nvec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );\nvNormal = normalize( normalMatrix * normal );\nvTangent = normalize( normalMatrix * tangent.xyz );\nvBinormal = cross( vNormal, vTangent ) * tangent.w;\nvBinormal = normalize( vBinormal );\nvUv = uv;\nvLightWeighting = uAmbientLightColor;\nvec4 lPosition = viewMatrix * vec4( uPointLightPos, 1.0 );\nvPointLightVector = normalize( lPosition.xyz - mvPosition.xyz );\nfloat pointLightWeighting = max( dot( vNormal, vPointLightVector ), 0.0 );\nvLightWeighting += uPointLightColor * pointLightWeighting;\nvec4 lDirection = viewMatrix * vec4( uDirLightPos, 0.0 );\nfloat directionalLightWeighting = max( dot( vNormal, normalize( lDirection.xyz ) ), 0.0 );\nvLightWeighting += uDirLightColor * directionalLightWeighting;\n#ifdef VERTEX_TEXTURES\nvec3 dv = texture2D( tDisplacement, uv ).xyz;\nfloat df = uDisplacementScale * dv.x + uDisplacementBias;\nvec4 displacedPosition = vec4( vNormal.xyz * df, 0.0 ) + mvPosition;\ngl_Position = projectionMatrix * displacedPosition;\n#else\ngl_Position = projectionMatrix * mvPosition;\n#endif\n}"},
basic:{uniforms:{},vertex_shader:"void main() {\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",fragment_shader:"void main() {\ngl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);\n}"},cube:{uniforms:{tCube:{type:"t",value:1,texture:null}},vertex_shader:"varying vec3 vViewPosition;\nvoid main() {\nvec4 mPosition = objectMatrix * vec4( position, 1.0 );\nvViewPosition = cameraPosition - mPosition.xyz;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragment_shader:"uniform samplerCube tCube;\nvarying vec3 vViewPosition;\nvoid main() {\nvec3 wPos = cameraPosition - vViewPosition;\ngl_FragColor = textureCube( tCube, vec3( - wPos.x, wPos.yz ) );\n}"}}},Cube=function(a,b,e,d,g,f,k,h){function j(z,K,v,E,m,O,i,r){var n,l=d||1,s=g||1,o=l+1,A=s+1,G=m/2,C=O/2;m=m/l;O=O/s;var H=c.vertices.length;if(z=="x"&&K=="y"||z=="y"&&K=="x")n="z";else if(z=="x"&&K=="z"||z=="z"&&K=="x")n="y";else if(z=="z"&&K=="y"||z=="y"&&K=="z")n="x";for(iy=0;iy<A;iy++)for(ix=0;ix<
examples/materials_normalmap.html
+3
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" );
examples/materials_normalmap2.html
+39 -6
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 );
examples/obj/leeperrysmith/.htaccess
+7
View File
@@ -0,0 +1,7 @@
<Files *.js>
SetOutputFilter DEFLATE
</Files>
<Files *.bin>
SetOutputFilter DEFLATE
</Files>
src/extras/ShaderUtils.js
+18 -2
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"),