diff --git a/examples/js/ShaderDeferred.js b/examples/js/ShaderDeferred.js index 8011e50157ff236612eea64272975eea25b0e4cd..734e026f20c2fe79e1f8eb5193b48fb5bf24d6db 100644 --- a/examples/js/ShaderDeferred.js +++ b/examples/js/ShaderDeferred.js @@ -14,14 +14,20 @@ THREE.ShaderDeferred = { THREE.UniformsLib[ "common" ], THREE.UniformsLib[ "fog" ], - THREE.UniformsLib[ "shadowmap" ] + THREE.UniformsLib[ "shadowmap" ], + + { + "specular" : { type: "c", value: new THREE.Color( 0x111111 ) }, + "shininess": { type: "f", value: 30 } + } ] ), fragmentShader : [ "uniform vec3 diffuse;", - "uniform float opacity;", + "uniform vec3 specular;", + "uniform float shininess;", THREE.ShaderChunk[ "color_pars_fragment" ], THREE.ShaderChunk[ "map_pars_fragment" ], @@ -42,6 +48,8 @@ THREE.ShaderDeferred = { "void main() {", + "const float opacity = 1.0;", + "gl_FragColor = vec4( diffuse, opacity );", THREE.ShaderChunk[ "map_fragment" ], @@ -56,8 +64,21 @@ THREE.ShaderDeferred = { THREE.ShaderChunk[ "fog_fragment" ], + // diffuse color + "gl_FragColor.x = vec3_to_float( 0.999 * gl_FragColor.xyz );", - "gl_FragColor.yzw = vec3( 0.0 );", + + // specular color + + "gl_FragColor.y = vec3_to_float( 0.999 * specular );", + + // shininess + + "gl_FragColor.z = shininess;", + + // free + + "gl_FragColor.w = 0.0;", "}" @@ -429,8 +450,18 @@ THREE.ShaderDeferred = { "attenuation = max( attenuation, 0.0 );", "attenuation *= attenuation;", + // normal + "vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.0;", + // color + + "vec4 colorMap = texture2D( samplerColor, texCoord );", + + "vec3 albedo = float_to_vec3( abs( colorMap.x ) );", + "vec3 specularColor = float_to_vec3( abs( colorMap.y ) );", + "float shininess = colorMap.z;", + // wrap around lighting "float diffuseFull = max( dot( normal, lightDir ), 0.0 );", @@ -446,8 +477,8 @@ THREE.ShaderDeferred = { // specular - "const float shininess = SHININESS;", - "const float specularIntensity = SPECULAR_INTENSITY;", + //"const float shininess = SHININESS;", + //"const float specularIntensity = SPECULAR_INTENSITY;", "vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );", "float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );", @@ -458,18 +489,13 @@ THREE.ShaderDeferred = { // physically based specular - "vec3 specularColor = specularIntensity * vec3( 1.0 );", + //"vec3 specularColor = specularIntensity * vec3( 1.0 );", "float specularNormalization = ( shininess + 2.0001 ) / 8.0;", "vec3 schlick = specularColor + vec3( 1.0 - specularColor ) * pow( 1.0 - dot( lightDir, halfVector ), 5.0 );", "vec3 specular = schlick * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse * specularNormalization;", - // color - - "vec4 colorMap = texture2D( samplerColor, texCoord );", - "vec3 albedo = float_to_vec3( abs( colorMap.x ) );", - // combine "vec4 color = vec4( 0.0 );", diff --git a/examples/webgl_lights_deferred_morphs.html b/examples/webgl_lights_deferred_morphs.html index 78abdfce0335140fbe6b50a728736cd1497b4e30..d97b33340313c473845be6b4fb422721793684f5 100644 --- a/examples/webgl_lights_deferred_morphs.html +++ b/examples/webgl_lights_deferred_morphs.html @@ -332,6 +332,8 @@ function initScene( object, y, scale ) { + var black = new THREE.Color( 0x000000 ); + object.traverse( function( node ) { if ( node.material ) { @@ -351,7 +353,14 @@ } ); - uniforms.diffuse.value.copy( node.material.color ); + var diffuse = node.material.color; + var specular = node.material.specular !== undefined ? node.material.specular : black; + var shininess = node.material.shininess !== undefined ? node.material.shininess : 1; + + uniforms.diffuse.value.copy( diffuse ); + uniforms.specular.value.copy( specular ); + uniforms.shininess.value = shininess; + uniforms.map.value = node.material.map; material.vertexColors = node.material.vertexColors; @@ -431,13 +440,13 @@ if ( node.material.morphTargets ) { - var depthMaterial = new THREE.ShaderMaterial({ + var depthMaterial = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ), vertexShader: clipDepthShader.vertexShader, fragmentShader: clipDepthShader.fragmentShader - }); + } ); depthMaterial.morphTargets = node.material.morphTargets; @@ -734,14 +743,14 @@ mapHeight3.format = THREE.RGBFormat; var geoPlane = new THREE.PlaneGeometry( 40, 20 ); - var matPlane = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight2, bumpScale: 0.5 } ); - var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 0.5 } ); - var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x000000, bumpMap: mapHeight3, bumpScale: 1 } ); + var matPlaneSide = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight2, bumpScale: 0.5 } ); + var matPlaneBottom = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 0.5 } ); + var matPlaneTop = new THREE.MeshPhongMaterial( { color: 0x000000, specular: 0x222222, shininess: 75, bumpMap: mapHeight3, bumpScale: 1 } ); // bottom - var mesh = new THREE.Mesh( geoPlane, matPlane2 ); + var mesh = new THREE.Mesh( geoPlane, matPlaneBottom ); mesh.position.z = -2; mesh.position.y = -6; mesh.rotation.x = -Math.PI/2; @@ -749,7 +758,7 @@ // top - var mesh = new THREE.Mesh( geoPlane, matPlane3 ); + var mesh = new THREE.Mesh( geoPlane, matPlaneTop ); mesh.position.z = -2; mesh.position.y = 7; mesh.rotation.x = Math.PI/2; @@ -757,14 +766,14 @@ // back - var mesh = new THREE.Mesh( geoPlane, matPlane ); + var mesh = new THREE.Mesh( geoPlane, matPlaneSide ); mesh.position.z = -4; mesh.position.y = 0; object.add( mesh ); // right - var mesh = new THREE.Mesh( geoPlane, matPlane ); + var mesh = new THREE.Mesh( geoPlane, matPlaneSide ); mesh.position.z = 0; mesh.position.y = 0; mesh.position.x = 13; @@ -773,7 +782,7 @@ // left - var mesh = new THREE.Mesh( geoPlane, matPlane ); + var mesh = new THREE.Mesh( geoPlane, matPlaneSide ); mesh.position.z = 0; mesh.position.y = 0; mesh.position.x = -13; @@ -800,7 +809,7 @@ geometry.computeMorphNormals(); - var material = new THREE.MeshPhongMaterial( { color: 0xffffff, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } ); + var material = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x333333, shininess: 20, morphTargets: true, morphNormals: true, vertexColors: THREE.NoColors, shading: THREE.FlatShading } ); var meshAnim = new THREE.MorphAnimMesh( geometry, material ); meshAnim.duration = 3000; diff --git a/examples/webgl_lights_deferred_pointlights.html b/examples/webgl_lights_deferred_pointlights.html index 391dff48cd34bfa54794b21831ee86c575f01f59..a2b4bc0861245fcf5bc2880b0203bc31c000b8f2 100644 --- a/examples/webgl_lights_deferred_pointlights.html +++ b/examples/webgl_lights_deferred_pointlights.html @@ -336,6 +336,8 @@ function initScene( object, y, scale ) { + var black = new THREE.Color( 0x000000 ); + object.traverse( function( node ) { if ( node.material ) { @@ -354,7 +356,14 @@ } ); - uniforms.diffuse.value.copy( node.material.color ); + var diffuse = node.material.color; + var specular = node.material.specular !== undefined ? node.material.specular : black; + var shininess = node.material.shininess !== undefined ? node.material.shininess : 1; + + uniforms.diffuse.value.copy( diffuse ); + uniforms.specular.value.copy( specular ); + uniforms.shininess.value = shininess; + uniforms.map.value = node.material.map; if ( node.material.bumpMap ) { @@ -669,51 +678,9 @@ } - // ----------------------------- - // entry point - // ----------------------------- + function generateBox() { - bootstrap(); - initMaterials(); - initLights(); - createRenderTargets(); - - /* - 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 ) { - - initScene( object, -35, 1 ); - animate(); - - }, { 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" ); - 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 ); - - // box + var object = new THREE.Object3D(); var mapHeight2 = THREE.ImageUtils.loadTexture( "obj/lightmap/rocks.jpg" ); mapHeight2.repeat.set( 3, 1.5 ); @@ -728,13 +695,15 @@ mapHeight3.format = THREE.RGBFormat; var geoPlane = new THREE.PlaneGeometry( 40, 20 ); - var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight2, bumpScale: 0.5 } ); - var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, bumpMap: mapHeight2, bumpScale: 1 } ); - var matPlane3 = new THREE.MeshPhongMaterial( { color: 0xffffff, bumpMap: mapHeight3, bumpScale: 1 } ); + + var matPlane = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, bumpMap: mapHeight2, bumpScale: 0.5 } ); + var matPlane2 = new THREE.MeshPhongMaterial( { color: 0x331919, specular: 0x111111, shininess: 50, bumpMap: mapHeight2, bumpScale: 1 } ); + var matPlane3 = new THREE.MeshPhongMaterial( { color: 0x00aaff, specular: 0xffffff, shininess: 200, bumpMap: mapHeight3, bumpScale: 1.2 } ); + var matPlane4 = new THREE.MeshPhongMaterial( { color: 0xffffff, specular: 0x111111, shininess: 50, bumpMap: mapHeight3, bumpScale: 1 } ); // bottom - var mesh = new THREE.Mesh( geoPlane, matPlane2 ); + var mesh = new THREE.Mesh( geoPlane, matPlane3 ); mesh.position.z = -2; mesh.position.y = -6; mesh.rotation.x = -Math.PI/2; @@ -742,7 +711,7 @@ // top - var mesh = new THREE.Mesh( geoPlane, matPlane3 ); + var mesh = new THREE.Mesh( geoPlane, matPlane4 ); mesh.position.z = -2; mesh.position.y = 6; mesh.rotation.x = Math.PI/2; @@ -773,11 +742,64 @@ mesh.rotation.y = Math.PI/2; //object.add( mesh ); - initScene( object, 0, 8 ); + return object; + + } + + // ----------------------------- + // entry point + // ----------------------------- + + bootstrap(); + initMaterials(); + initLights(); + createRenderTargets(); + + /* + 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 ) { + + initScene( object, -35, 1 ); animate(); + }, { 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" ); + 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, shininess: 75, specular: 0x090909 } ); + + var object = new THREE.Mesh( geometry, material ); + initScene( object, 0, 8 ); + } ); + // create box + + var object = generateBox(); + initScene( object, 0, 8 ); + + animate(); + document.addEventListener( 'mousemove', onDocumentMouseMove, false );