DOF2: Fix broken example

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;",
 		"} "

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;
 
 				}