make DOF work again.

examples/js/postprocessing/BokehPass.js

@@ -33,6 +33,8 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	// depth material
 
 	this.materialDepth = new THREE.MeshDepthMaterial();
+	this.materialDepth.depthPacking = THREE.RGBADepthPacking;
+	this.materialDepth.blending = THREE.NoBlending;
 
 	// bokeh material
 
@@ -51,8 +53,11 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	bokehUniforms[ "aspect" ].value = aspect;
 	bokehUniforms[ "aperture" ].value = aperture;
 	bokehUniforms[ "maxblur" ].value = maxblur;
+	bokehUniforms[ "nearClip" ].value = camera.near;
+	bokehUniforms[ "farClip" ].value = camera.far;
 
 	this.materialBokeh = new THREE.ShaderMaterial( {
+		defines: bokehShader.defines,
 		uniforms: bokehUniforms,
 		vertexShader: bokehShader.vertexShader,
 		fragmentShader: bokehShader.fragmentShader
@@ -68,6 +73,9 @@ THREE.BokehPass = function ( scene, camera, params ) {
 	this.quad2.frustumCulled = false; // Avoid getting clipped
 	this.scene2.add( this.quad2 );
 
+	this.oldClearColor = new THREE.Color();
+	this.oldClearAlpha = 1;
+
 };
 
 THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {
@@ -82,11 +90,20 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 
 		this.scene.overrideMaterial = this.materialDepth;
 
+		this.oldClearColor.copy( renderer.getClearColor() );
+		this.oldClearAlpha = renderer.getClearAlpha();
+		var oldAutoClear = renderer.autoClear;
+		renderer.autoClear = false;
+
+		renderer.setClearColor( 0xffffff );
+		renderer.setClearAlpha( 1.0 );
 		renderer.render( this.scene, this.camera, this.renderTargetDepth, true );
 
 		// Render bokeh composite
 
 		this.uniforms[ "tColor" ].value = readBuffer.texture;
+		this.uniforms[ "nearClip" ].value = this.camera.near;
+		this.uniforms[ "farClip" ].value = this.camera.far;
 
 		if ( this.renderToScreen ) {
 
@@ -99,7 +116,10 @@ THREE.BokehPass.prototype = Object.assign( Object.create( THREE.Pass.prototype )
 		}
 
 		this.scene.overrideMaterial = null;
-
+		renderer.setClearColor( this.oldClearColor );
+		renderer.setClearAlpha( this.oldClearAlpha );
+		renderer.autoClear = this.oldAutoClear;
+	
 	}
 
 } );

examples/js/shaders/BokehShader.js

@@ -8,6 +8,11 @@
 
 THREE.BokehShader = {
 
+	defines: {
+		"DEPTH_PACKING": 1,
+		"PERSPECTIVE_CAMERA": 1,
+	},
+
 	uniforms: {
 
 		"tColor":   { value: null },
@@ -15,7 +20,9 @@ THREE.BokehShader = {
 		"focus":    { value: 1.0 },
 		"aspect":   { value: 1.0 },
 		"aperture": { value: 0.025 },
-		"maxblur":  { value: 1.0 }
+		"maxblur":  { value: 1.0 },
+		"nearClip":  { value: 1.0 },
+		"farClip":  { value: 1000.0 },
 
 	},
 
@@ -33,6 +40,7 @@ THREE.BokehShader = {
 	].join( "\n" ),
 
 	fragmentShader: [
+		"#include <common>",
 
 		"varying vec2 vUv;",
 
@@ -42,16 +50,38 @@ THREE.BokehShader = {
 		"uniform float maxblur;",  // max blur amount
 		"uniform float aperture;", // aperture - bigger values for shallower depth of field
 
+		"uniform float nearClip;",
+		"uniform float farClip;",
+
 		"uniform float focus;",
 		"uniform float aspect;",
 
+		"#include <packing>",
+
+		"float getDepth( const in vec2 screenPosition ) {",
+		"	#if DEPTH_PACKING == 1",
+		"	return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );",
+		"	#else",
+		"	return texture2D( tDepth, screenPosition ).x;",
+		"	#endif",
+		"}",
+
+		"float getViewZ( const in float depth ) {",
+		"	#if PERSPECTIVE_CAMERA == 1",
+		"	return perspectiveDepthToViewZ( depth, nearClip, farClip );",
+		"	#else",
+		"	return orthoDepthToViewZ( depth, nearClip, farClip );",
+		"	#endif",
+		"}",
+		
+
 		"void main() {",
 
 			"vec2 aspectcorrect = vec2( 1.0, aspect );",
+	
+			"float viewZ = getViewZ( getDepth( vUv ) );",
 
-			"vec4 depth1 = texture2D( tDepth, vUv );",
-
-			"float factor = depth1.x - focus;",
+			"float factor = ( focus + viewZ );",  // viewZ is <= 0, so this is a difference equation
 
 			"vec2 dofblur = vec2 ( clamp( factor * aperture, -maxblur, maxblur ) );",
 

examples/webgl_postprocessing_dof.html

@@ -176,8 +176,8 @@
 
 				var effectController  = {
 
-					focus: 		1.0,
-					aperture:	0.025,
+					focus: 		500.0,
+					aperture:	5,
 					maxblur:	1.0
 
 				};
@@ -185,17 +185,18 @@
 				var matChanger = function( ) {
 
 					postprocessing.bokeh.uniforms[ "focus" ].value = effectController.focus;
-					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture;
+					postprocessing.bokeh.uniforms[ "aperture" ].value = effectController.aperture * 0.00001;
 					postprocessing.bokeh.uniforms[ "maxblur" ].value = effectController.maxblur;
 
 				};
 
 				var gui = new dat.GUI();
-				gui.add( effectController, "focus", 0.0, 3.0, 0.025 ).onChange( matChanger );
-				gui.add( effectController, "aperture", 0.001, 0.2, 0.001 ).onChange( matChanger );
+				gui.add( effectController, "focus", 10.0, 3000.0, 10 ).onChange( matChanger );
+				gui.add( effectController, "aperture", 0, 10, 0.1 ).onChange( matChanger );
 				gui.add( effectController, "maxblur", 0.0, 3.0, 0.025 ).onChange( matChanger );
 				gui.close();
 
+				matChanger();
 			}
 
 			function onDocumentMouseMove( event ) {