diff --git a/examples/js/ShaderDeferred.js b/examples/js/ShaderDeferred.js index 0a7a326ba0c7eefbb3c947026728640ddfa14d95..6683701d4785470229dbe8389d57e06ccb5016a4 100644 --- a/examples/js/ShaderDeferred.js +++ b/examples/js/ShaderDeferred.js @@ -375,8 +375,8 @@ THREE.ShaderDeferred = { // specular - "const float shininess = 75.0;", - "const float specularIntensity = 0.4;", + "const float shininess = SHININESS;", + "const float specularIntensity = SPECULAR_INTENSITY;", "vec3 halfVector = normalize( lightDir - normalize( viewPos.xyz ) );", "float dotNormalHalf = max( dot( normal, halfVector ), 0.0 );", @@ -387,7 +387,7 @@ THREE.ShaderDeferred = { // physically based specular - "vec3 specularColor = specularIntensity * vec3( 0.312 );", + "vec3 specularColor = specularIntensity * vec3( 1.0 );", "float specularNormalization = ( shininess + 2.0001 ) / 8.0;", @@ -403,8 +403,16 @@ THREE.ShaderDeferred = { "vec4 color = vec4( 0.0 );", "color.xyz = albedo.xyz * lightColor * lightIntensity;", "color.w = attenuation;", - //"gl_FragColor = color * vec4( diffuse + specular, 1.0 );", - "gl_FragColor = color * vec4( diffuse, 1.0 ) + vec4( lightColor * lightIntensity * specular, attenuation );", + + "#ifdef ADDITIVE_SPECULAR", + + "gl_FragColor = color * vec4( diffuse, 1.0 ) + vec4( lightColor * lightIntensity * specular, attenuation );", + + "#else", + + "gl_FragColor = color * vec4( diffuse + specular, 1.0 );", + + "#endif", "}" diff --git a/examples/webgl_lights_deferred_morphs.html b/examples/webgl_lights_deferred_morphs.html index 79db3b61a047649f962aef4cb78d754071b62e5b..52e1b5ca38c631fa113e2702531170c2e31e5737 100644 --- a/examples/webgl_lights_deferred_morphs.html +++ b/examples/webgl_lights_deferred_morphs.html @@ -254,17 +254,19 @@ // setup material - var matLight = new THREE.ShaderMaterial({ + var matLight = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ), vertexShader: lightShader.vertexShader, - fragmentShader: lightShader.fragmentShader + fragmentShader: lightShader.fragmentShader, + defines: { "ADDITIVE_SPECULAR": true, "SPECULAR_INTENSITY" : 0.125, "SHININESS": 75.01 }, - }); + blending: THREE.AdditiveBlending, + depthWrite: false, + transparent: true + + } ); - matLight.blending = THREE.AdditiveBlending; - matLight.transparent = true; - matLight.depthWrite = false; matLight.uniforms[ "lightPos" ].value = light.position; matLight.uniforms[ "lightRadius" ].value = light.distance; matLight.uniforms[ "lightIntensity" ].value = light.intensity; @@ -278,13 +280,13 @@ // create emitter sphere - var matEmitter = new THREE.ShaderMaterial({ + var matEmitter = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ), vertexShader: unlitShader.vertexShader, fragmentShader: unlitShader.fragmentShader - }); + } ); var meshEmitter = new THREE.Mesh( geomEmitter, matEmitter ); meshEmitter.position = light.position; diff --git a/examples/webgl_lights_deferred_pointlights.html b/examples/webgl_lights_deferred_pointlights.html index 04620f30a307a3a30f3c3818297d7330006aea75..824bc7fbdf97e4a24b85e9dec8911a1b1419b9ca 100644 --- a/examples/webgl_lights_deferred_pointlights.html +++ b/examples/webgl_lights_deferred_pointlights.html @@ -50,6 +50,8 @@ + + @@ -110,430 +112,12 @@ // materials + var compColor, compNormals, compDepth, compLightBuffer, compFinal, compEmitter, compositePass; var matNormal, matClipDepth, matBasic, matUnlit; var numLights = 50; var lights = new Array(); - // ----------------------- - // shader definitions - // ----------------------- - - var clipdepth_frag = ""+ - - "varying vec4 clipPos;"+ - - "void main() {"+ - - "gl_FragColor = vec4( clipPos.z / clipPos.w, 1.0, 1.0, 1.0 );"+ - - "}"; - - - var clipdepth_vert = "" + - - "varying vec4 clipPos;"+ - - "void main() {"+ - - "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+ - "gl_Position = projectionMatrix * mvPosition;"+ - "clipPos = gl_Position;"+ - - "}"; - - - // ----------------------- - - var normals_vert = "" + - - "varying vec3 normalView;"+ - - "void main() {"+ - - "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+ - "gl_Position = projectionMatrix * mvPosition;"+ - "normalView = normalize( normalMatrix * normal );"+ - - "}"; - - var normals_frag = "" + - - "varying vec3 normalView;"+ - - "void main() {"+ - - "gl_FragColor = vec4( vec3( normalView * 0.5 + 0.5 ), 1.0 );"+ - - "}"; - - // ----------------------- - - 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;"+ - - "void main() {"+ - - "gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );"+ - "clipPos = gl_Position;"+ - - "}"; - - var unlit_frag = "" + - - "varying vec4 clipPos;"+ - "uniform sampler2D samplerDepth;"+ - - "uniform float viewHeight;"+ - "uniform float viewWidth;"+ - - "uniform vec3 lightColor;" + - - "void main() {"+ - - "vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );"+ - "float z = texture2D( samplerDepth, texCoord ).x;"+ - "vec4 color = vec4( lightColor, 1.0 );"+ - "float depth = clipPos.z / clipPos.w;"+ - "if( depth > z && z > 0.0 ) color.w = 0.0;"+ - "gl_FragColor = color;"+ - - "}"; - - // ----------------------- - - var deferredlight_vert = "" + - - "varying vec3 lightView;" + - "varying vec4 clipPos;" + - "uniform vec3 lightPos;" + - "uniform mat4 matView;" + - - "void main() { " + - - "vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );"+ - "gl_Position = projectionMatrix * mvPosition;"+ - "lightView = vec3( matView * vec4( lightPos, 1.0 ) );" + - "clipPos = gl_Position;"+ - - "}" - - var deferredlight_frag = "" + - - "varying vec3 lightView;"+ - "varying vec4 clipPos;" + - - "uniform sampler2D samplerColor;"+ - "uniform sampler2D samplerDepth;"+ - "uniform sampler2D samplerNormals;"+ - "uniform sampler2D samplerLightBuffer;"+ - - "uniform float lightRadius;"+ - "uniform float lightIntensity;"+ - "uniform float viewHeight;"+ - "uniform float viewWidth;"+ - - "uniform vec3 lightColor;"+ - - "uniform mat4 matProjInverse;"+ - - "void main() {"+ - - "vec2 texCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );"+ - - "float z = texture2D( samplerDepth, texCoord ).x;"+ - "float lightZ = clipPos.z / clipPos.w;"+ - - /* - "if ( z == 0.0 ) {"+ - - "gl_FragColor = vec4( vec3( 0.0 ), 1.0 );"+ - "return;"+ - - "}"+ - */ - - "if ( z == 0.0 || lightZ > z ) discard;"+ - - "float x = texCoord.x * 2.0 - 1.0;"+ - "float y = texCoord.y * 2.0 - 1.0;"+ - - "vec4 projectedPos = vec4( x, y, z, 1.0 );"+ - - "vec4 viewPos = matProjInverse * projectedPos;"+ - "viewPos.xyz /= viewPos.w;"+ - "viewPos.w = 1.0;"+ - - "vec3 lightDir = lightView - viewPos.xyz;"+ - "float dist = length( lightDir );"+ - - "if ( dist > lightRadius ) discard;" + - - "lightDir = normalize( lightDir );"+ - - "float cutoff = 0.3;"+ - "float denom = dist/lightRadius + 1.0;"+ - "float attenuation = 1.0 / ( denom * denom );"+ - "attenuation = ( attenuation - cutoff ) / ( 1.0 - cutoff );"+ - "attenuation = max( attenuation, 0.0 );"+ - "attenuation *= attenuation;"+ - - "vec3 normal = texture2D( samplerNormals, texCoord ).xyz * 2.0 - 1.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.6, 0.2, 0.2 );"+ - "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 );" + - - // simple specular - - //"vec3 specular = specularIntensity * max( pow( dotNormalHalf, shininess ), 0.0 ) * diffuse;" + - - // physically based specular - - "vec3 specularColor = specularIntensity * vec3( 0.12 );"+ - - "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 albedo = texture2D( samplerColor, texCoord );"+ - - // combine - - "vec4 color = vec4( 0.0 );"+ - "color.xyz = albedo.xyz * lightColor * lightIntensity;"+ - "color.w = attenuation;"+ - "gl_FragColor = color * vec4( diffuse + specular, 1.0 );" + - - "}"; - - var composite_vert = "" + - - "varying vec2 texCoord;"+ - - "void main() {"+ - - "vec4 pos = vec4( sign( position.xy ), 0.0, 1.0 );"+ - "texCoord = pos.xy * vec2( 0.5 ) + 0.5;"+ - "gl_Position = pos;"+ - - "}"; - - var composite_frag = "" + - - "varying vec2 texCoord;"+ - "uniform sampler2D samplerLightBuffer;" + - "uniform sampler2D samplerEmitter;" + - "uniform vec3 lightPos;" + - - "void main() {" + - - "vec3 color = texture2D( samplerLightBuffer, texCoord ).xyz;" + - "vec3 emitter = texture2D( samplerEmitter, texCoord ).xyz;"+ - - "if ( emitter != vec3( 0.0 ) ) {"+ - - "gl_FragColor = vec4( emitter, 1.0 );" + - - "} else {"+ - - "gl_FragColor = vec4( sqrt( color ), 1.0 );" + - - "}"+ - - "}" - - // ----------------------- - - var normalShader = { - - uniforms: {}, - - vertexShader: normals_vert, - fragmentShader: normals_frag - - }; - - // ----------------------- - - 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: {}, - - vertexShader: clipdepth_vert, - fragmentShader: clipdepth_frag - - }; - - // ----------------------- - - var unlitShader = { - - uniforms: { - - samplerDepth: { type: "t", value: null }, - viewWidth: { type: "f", value: SCALE * WIDTH }, - viewHeight: { type: "f", value: SCALE * HEIGHT }, - lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) } - - }, - - vertexShader: unlit_vert, - fragmentShader: unlit_frag - - }; - - // ----------------------- - - var lightShader = { - - uniforms: { - - samplerLightBuffer: { type: "t", value: null }, - samplerNormals: { type: "t", value: null }, - samplerDepth: { type: "t", value: null }, - samplerColor: { type: "t", value: null }, - matView : { type: "m4", value: new THREE.Matrix4() }, - matProjInverse : { type: "m4", value: new THREE.Matrix4() }, - viewWidth: { type: "f", value: SCALE * WIDTH }, - viewHeight: { type: "f", value: SCALE * HEIGHT }, - lightPos: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) }, - lightColor: { type: "v3", value: new THREE.Vector3( 0, 0, 0 ) }, - lightIntensity: { type: "f", value: 1.0 }, - lightRadius: { type: "f", value: 1.0 } - - }, - - vertexShader: deferredlight_vert, - fragmentShader: deferredlight_frag - - }; - - // ----------------------- - - var compositeShader = { - - uniforms: { - - samplerLightBuffer: { type: "t", value: null }, - samplerEmitter: { type: "t", value: null } - }, - - vertexShader: composite_vert, - fragmentShader: composite_frag - - }; - // ----------------------------- function bootstrap() { @@ -669,17 +253,19 @@ // setup material - var matLight = new THREE.ShaderMaterial({ + var matLight = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( lightShader.uniforms ), vertexShader: lightShader.vertexShader, - fragmentShader: lightShader.fragmentShader + fragmentShader: lightShader.fragmentShader, + defines: { "ADDITIVE_SPECULAR": false, "SPECULAR_INTENSITY" : 0.048, "SHININESS": 75.01 }, + + blending: THREE.AdditiveBlending, + depthWrite: false, + transparent: true - }); + } ); - matLight.blending = THREE.AdditiveBlending; - matLight.transparent = true; - matLight.depthWrite = false; matLight.uniforms[ "lightPos" ].value = light.position; matLight.uniforms[ "lightRadius" ].value = light.distance; matLight.uniforms[ "lightIntensity" ].value = light.intensity; @@ -693,13 +279,13 @@ // create emitter sphere - var matEmitter = new THREE.ShaderMaterial({ + var matEmitter = new THREE.ShaderMaterial( { uniforms: THREE.UniformsUtils.clone( unlitShader.uniforms ), vertexShader: unlitShader.vertexShader, fragmentShader: unlitShader.fragmentShader - }); + } ); var meshEmitter = new THREE.Mesh( geomEmitter, matEmitter ); meshEmitter.position = light.position; @@ -788,7 +374,13 @@ if ( node.material.bumpMap ) { var uniforms = THREE.UniformsUtils.clone( bumpShader.uniforms ); - var normalMaterial = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: bumpShader.vertexShader, fragmentShader: bumpShader.fragmentShader } ); + 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; @@ -823,22 +415,42 @@ function initMaterials() { + // ----------------------- + // shader definitions + // ----------------------- + + normalShader = THREE.ShaderDeferred[ "normals" ]; + bumpShader = THREE.ShaderDeferred[ "bump" ]; + clipDepthShader = THREE.ShaderDeferred[ "clipDepth" ]; + unlitShader = THREE.ShaderDeferred[ "unlit" ]; + lightShader = THREE.ShaderDeferred[ "light" ]; + compositeShader = THREE.ShaderDeferred[ "composite" ]; - matNormal = new THREE.ShaderMaterial({ + unlitShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH; + unlitShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT; - uniforms: normalShader.uniforms, + lightShader.uniforms[ "viewWidth" ].value = SCALE * WIDTH; + lightShader.uniforms[ "viewHeight" ].value = SCALE * HEIGHT; + + // ----------------------- + // default materials + // ----------------------- + + matNormal = new THREE.ShaderMaterial( { + + uniforms: THREE.UniformsUtils.clone( normalShader.uniforms ), vertexShader: normalShader.vertexShader, fragmentShader: normalShader.fragmentShader - }); + } ); - matClipDepth = new THREE.ShaderMaterial({ + matClipDepth = new THREE.ShaderMaterial( { - uniforms: clipDepthShader.uniforms, + uniforms: THREE.UniformsUtils.clone( clipDepthShader.uniforms ), vertexShader: clipDepthShader.vertexShader, fragmentShader: clipDepthShader.fragmentShader - }); + } ); }