Revert "DOF2: Fix broken example"

Author: Mugen87

examples/js/shaders/BokehShader2.js

@@ -26,7 +26,9 @@ THREE.BokehShader = {
 
 		"maxblur":  { value: 1.0 },
 
+		"showFocus":   { value: 0 },
 		"manualdof":   { value: 0 },
+		"vignetting":   { value: 0 },
 		"depthblur":   { value: 0 },
 
 		"threshold":  { value: 0.5 },
@@ -75,6 +77,7 @@ 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.",
@@ -99,6 +102,12 @@ 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",
 
@@ -141,14 +150,6 @@ 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;",
@@ -234,6 +235,28 @@ 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);",
@@ -250,20 +273,20 @@ THREE.BokehShader = {
 		"void main() {",
 			"//scene depth calculation",
 
-			"float depth = getViewZ( getDepth( vUv.xy ) );",
+			"float depth = linearize( getDepth( vUv.xy ) );",
 
 			"// Blur depth?",
 			"if (depthblur) {",
-				"depth = getViewZ(bdepth(vUv.xy));",
+				"depth = linearize(bdepth(vUv.xy));",
 			"}",
 
 			"//focal plane calculation",
 
-			"float fDepth = - focalDepth;", // viewZ is negative
+			"float fDepth = focalDepth;",
 
 			"if (shaderFocus) {",
 
-				"fDepth = getViewZ( getDepth( focusCoords ) );",
+				"fDepth = linearize( getDepth( focusCoords ) );",
 
 			"}",
 
@@ -272,14 +295,14 @@ THREE.BokehShader = {
 			"float blur = 0.0;",
 
 			"if (manualdof) {",
-				"float a = depth - fDepth; // Focal plane",
+				"float a = depth-fDepth; // 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;",
-				"float d = fDepth;",
-				"float o = depth;",
+				"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 a = (o*f)/(o-f);",
 				"float b = (d*f)/(d-f);",
@@ -325,6 +348,14 @@ 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,11 +226,13 @@
 					jsDepthCalculation: true,
 					shaderFocus: false,
 
-					fstop: 10,
+					fstop: 2.2,
 					maxblur: 1.0,
 
+					showFocus: false,
 					focalDepth: 2.8,
 					manualdof: false,
+					vignetting: false,
 					depthblur: false,
 
 					threshold: 0.5,
@@ -272,10 +274,13 @@
 				gui.add( effectController, 'shaderFocus' ).onChange( matChanger );
 				gui.add( effectController, 'focalDepth', 0.0, 200.0 ).listen().onChange( matChanger );
 
-				gui.add( effectController, 'fstop', 1, 50, 0.1 ).onChange( matChanger );
+				gui.add( effectController, 'fstop', 0.1, 22, 0.001 ).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 );
@@ -284,8 +289,11 @@
 				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 );
@@ -370,8 +378,7 @@
 					defines: {
 						RINGS: shaderSettings.rings,
 						SAMPLES: shaderSettings.samples,
-						DEPTH_PACKING: 1, // RGBADepth
-						PERSPECTIVE_CAMERA: 1
+						DEPTH_PACKING: 1 // RGBADepth
 					}
 
 				} );
@@ -399,6 +406,28 @@
 
 			}
 
+			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;
@@ -417,13 +446,22 @@
 
 					var intersects = raycaster.intersectObjects( scene.children, true );
 
-					var targetDistance = ( intersects.length > 0 ) ? intersects[ 0 ].distance : 1000;
 
-					distance += ( targetDistance - distance ) * 0.05;
+					if ( intersects.length > 0 ) {
+
+						var targetDistance = intersects[ 0 ].distance;
 
-					postprocessing.bokeh_uniforms[ 'focalDepth' ].value = distance;
+						distance += (targetDistance - distance) * 0.03;
 
-					effectController[ 'focalDepth' ] = distance;
+						var sdistance = smoothstep(camera.near, camera.far, distance);
+
+						var ldistance = linearize(1 -  sdistance);
+
+						postprocessing.bokeh_uniforms[ 'focalDepth' ].value = ldistance;
+
+						effectController['focalDepth'] = ldistance;
+
+					}
 
 				}