diff --git a/examples/js/shaders/BokehShader2.js b/examples/js/shaders/BokehShader2.js index 8b8de9cce54aa679900ad31acdfbd0b5e8dd3007..d035c5641243b47ac96d1b01a78d7684918db524 100644 --- a/examples/js/shaders/BokehShader2.js +++ b/examples/js/shaders/BokehShader2.js @@ -26,9 +26,7 @@ THREE.BokehShader = { "maxblur": { value: 1.0 }, - "showFocus": { value: 0 }, "manualdof": { value: 0 }, - "vignetting": { value: 0 }, "depthblur": { value: 0 }, "threshold": { value: 0.5 }, @@ -77,7 +75,6 @@ THREE.BokehShader = { "uniform float focalDepth; //focal distance value in meters, but you may use autofocus option below", "uniform float focalLength; //focal length in mm", "uniform float fstop; //f-stop value", - "uniform bool showFocus; //show debug focus point and focal range (red = focal point, green = focal range)", "/*", "make sure that these two values are the same for your camera, otherwise distances will be wrong.", @@ -102,12 +99,6 @@ THREE.BokehShader = { "float CoC = 0.03; //circle of confusion size in mm (35mm film = 0.03mm)", - "uniform bool vignetting; // use optical lens vignetting", - - "float vignout = 1.3; // vignetting outer border", - "float vignin = 0.0; // vignetting inner border", - "float vignfade = 22.0; // f-stops till vignete fades", - "uniform bool shaderFocus;", "// disable if you use external focalDepth value", @@ -150,6 +141,14 @@ THREE.BokehShader = { " #endif", "}", + "float getViewZ( const in float depth ) {", + " #if PERSPECTIVE_CAMERA == 1", + " return perspectiveDepthToViewZ( depth, znear, zfar );", + " #else", + " return orthographicDepthToViewZ( depth, znear, zfar );", + " #endif", + "}", + "float penta(vec2 coords) {", "//pentagonal shape", "float scale = float(rings) - 1.3;", @@ -235,28 +234,6 @@ THREE.BokehShader = { "return col+mix(vec3(0.0),col,thresh*blur);", "}", - "vec3 debugFocus(vec3 col, float blur, float depth) {", - "float edge = 0.002*depth; //distance based edge smoothing", - "float m = clamp(smoothstep(0.0,edge,blur),0.0,1.0);", - "float e = clamp(smoothstep(1.0-edge,1.0,blur),0.0,1.0);", - - "col = mix(col,vec3(1.0,0.5,0.0),(1.0-m)*0.6);", - "col = mix(col,vec3(0.0,0.5,1.0),((1.0-e)-(1.0-m))*0.2);", - - "return col;", - "}", - - "float linearize(float depth) {", - "return -zfar * znear / (depth * (zfar - znear) - zfar);", - "}", - - - "float vignette() {", - "float dist = distance(vUv.xy, vec2(0.5,0.5));", - "dist = smoothstep(vignout+(fstop/vignfade), vignin+(fstop/vignfade), dist);", - "return clamp(dist,0.0,1.0);", - "}", - "float gather(float i, float j, int ringsamples, inout vec3 col, float w, float h, float blur) {", "float rings2 = float(rings);", "float step = PI*2.0 / float(ringsamples);", @@ -273,20 +250,20 @@ THREE.BokehShader = { "void main() {", "//scene depth calculation", - "float depth = linearize( getDepth( vUv.xy ) );", + "float depth = getViewZ( getDepth( vUv.xy ) );", "// Blur depth?", "if (depthblur) {", - "depth = linearize(bdepth(vUv.xy));", + "depth = getViewZ(bdepth(vUv.xy));", "}", "//focal plane calculation", - "float fDepth = focalDepth;", + "float fDepth = - focalDepth;", // viewZ is negative "if (shaderFocus) {", - "fDepth = linearize( getDepth( focusCoords ) );", + "//fDepth = getViewZ( getDepth( focusCoords ) );", "}", @@ -295,18 +272,18 @@ THREE.BokehShader = { "float blur = 0.0;", "if (manualdof) {", - "float a = depth-fDepth; // Focal plane", + "float a = fDepth + depth; // Focal plane", "float b = (a-fdofstart)/fdofdist; // Far DoF", "float c = (-a-ndofstart)/ndofdist; // Near Dof", "blur = (a>0.0) ? b : c;", "} else {", - "float f = focalLength; // focal length in mm", - "float d = fDepth*1000.0; // focal plane in mm", - "float o = depth*1000.0; // depth in mm", + "float f = focalLength;", + "float d = fDepth;", + "float o = depth;", - "float a = (o*f)/(o-f);", - "float b = (d*f)/(d-f);", - "float c = (d-f)/(d*fstop*CoC);", + "float a = (o*f)/(f+o);", + "float b = (d*f)/(f+d);", + "float c = (f+d)/(d*fstop*CoC);", "blur = abs(a-b)*c;", "}", @@ -348,14 +325,6 @@ THREE.BokehShader = { "col /= s; //divide by sample count", "}", - "if (showFocus) {", - "col = debugFocus(col, blur, depth);", - "}", - - "if (vignetting) {", - "col *= vignette();", - "}", - "gl_FragColor.rgb = col;", "gl_FragColor.a = 1.0;", "} " diff --git a/examples/webgl_postprocessing_dof2.html b/examples/webgl_postprocessing_dof2.html index cfba0e3b401e0e1d55e6714dac75cd12bad6e101..5f002f13a85ae8323917b7a13b1031e39d9300d0 100644 --- a/examples/webgl_postprocessing_dof2.html +++ b/examples/webgl_postprocessing_dof2.html @@ -226,13 +226,11 @@ Use WEBGL Depth buffer support? jsDepthCalculation: true, shaderFocus: false, - fstop: 2.2, + fstop: 10, maxblur: 1.0, - showFocus: false, focalDepth: 2.8, manualdof: false, - vignetting: false, depthblur: false, threshold: 0.5, @@ -274,13 +272,10 @@ Use WEBGL Depth buffer support? gui.add( effectController, 'shaderFocus' ).onChange( matChanger ); gui.add( effectController, 'focalDepth', 0.0, 200.0 ).listen().onChange( matChanger ); - gui.add( effectController, 'fstop', 0.1, 22, 0.001 ).onChange( matChanger ); + gui.add( effectController, 'fstop', 1, 50, 0.1 ).onChange( matChanger ); gui.add( effectController, 'maxblur', 0.0, 5.0, 0.025 ).onChange( matChanger ); - gui.add( effectController, 'showFocus' ).onChange( matChanger ); gui.add( effectController, 'manualdof' ).onChange( matChanger ); - gui.add( effectController, 'vignetting' ).onChange( matChanger ); - gui.add( effectController, 'depthblur' ).onChange( matChanger ); gui.add( effectController, 'threshold', 0, 1, 0.001 ).onChange( matChanger ); @@ -289,11 +284,8 @@ Use WEBGL Depth buffer support? gui.add( effectController, 'fringe', 0, 5, 0.001 ).onChange( matChanger ); gui.add( effectController, 'focalLength', 16, 80, 0.001 ).onChange( matChanger ); - gui.add( effectController, 'noise' ).onChange( matChanger ); - gui.add( effectController, 'dithering', 0, 0.001, 0.0001 ).onChange( matChanger ); - gui.add( effectController, 'pentagon' ).onChange( matChanger ); gui.add( shaderSettings, 'rings', 1, 8).step(1).onChange( shaderUpdate ); @@ -378,7 +370,8 @@ Use WEBGL Depth buffer support? defines: { RINGS: shaderSettings.rings, SAMPLES: shaderSettings.samples, - DEPTH_PACKING: 1 // RGBADepth + DEPTH_PACKING: 1, // RGBADepth + PERSPECTIVE_CAMERA: 1 } } ); @@ -406,28 +399,6 @@ Use WEBGL Depth buffer support? } - function linearize( depth ) { - - var zfar = camera.far; - var znear = camera.near; - return - zfar * znear / ( depth * ( zfar - znear ) - zfar ); - - } - - - function smoothstep( near, far, depth ) { - - var x = saturate( ( depth - near ) / ( far - near ) ); - return x * x * ( 3 - 2 * x ); - - } - - function saturate( x ) { - - return Math.max( 0, Math.min( 1, x ) ); - - } - function render() { var time = Date.now() * 0.00015; @@ -446,22 +417,13 @@ Use WEBGL Depth buffer support? var intersects = raycaster.intersectObjects( scene.children, true ); + var targetDistance = ( intersects.length > 0 ) ? intersects[ 0 ].distance : 1000; - if ( intersects.length > 0 ) { - - var targetDistance = intersects[ 0 ].distance; + distance += ( targetDistance - distance ) * 0.05; - distance += (targetDistance - distance) * 0.03; + postprocessing.bokeh_uniforms[ 'focalDepth' ].value = distance; - var sdistance = smoothstep(camera.near, camera.far, distance); - - var ldistance = linearize(1 - sdistance); - - postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance; - - effectController['focalDepth'] = ldistance; - - } + effectController[ 'focalDepth' ] = distance; }