BokehShader2: Fix depth sampling

examples/js/shaders/BokehShader2.js

@@ -65,6 +65,7 @@ THREE.BokehShader = {
 	fragmentShader: [
 
 		"#include <common>",
+		"#include <packing>",
 
 		"varying vec2 vUv;",
 
@@ -141,6 +142,14 @@ THREE.BokehShader = {
 
 		"//------------------------------------------",
 
+		"float getDepth( const in vec2 screenPosition ) {",
+		"	#if DEPTH_PACKING == 1",
+		"	return unpackRGBAToDepth( texture2D( tDepth, screenPosition ) );",
+		"	#else",
+		"	return texture2D( tDepth, screenPosition ).x;",
+		"	#endif",
+		"}",
+
 		"float penta(vec2 coords) {",
 			"//pentagonal shape",
 			"float scale = float(rings) - 1.3;",
@@ -202,7 +211,7 @@ THREE.BokehShader = {
 
 
 			"for( int i=0; i<9; i++ ) {",
-				"float tmp = texture2D(tDepth, coords + offset[i]).r;",
+				"float tmp = getDepth( coords + offset[ i ] );",
 				"d += tmp * kernel[i];",
 			"}",
 
@@ -264,7 +273,7 @@ THREE.BokehShader = {
 		"void main() {",
 			"//scene depth calculation",
 
-			"float depth = linearize(texture2D(tDepth,vUv.xy).x);",
+			"float depth = linearize( getDepth( vUv.xy ) );",
 
 			"// Blur depth?",
 			"if (depthblur) {",
@@ -277,7 +286,7 @@ THREE.BokehShader = {
 
 			"if (shaderFocus) {",
 
-				"fDepth = linearize(texture2D(tDepth,focusCoords).x);",
+				"fDepth = linearize( getDepth( focusCoords ) );",
 
 			"}",
 

examples/webgl_postprocessing_dof2.html

@@ -96,10 +96,13 @@ Use WEBGL Depth buffer support?
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, height );
-				//renderer.sortObjects = false;
+				renderer.setClearColor( 0xffffff );
+				renderer.setClearAlpha( 1.0 );
 				container.appendChild( renderer.domElement );
 
 				material_depth = new THREE.MeshDepthMaterial();
+				material_depth.depthPacking = THREE.RGBADepthPacking;
+				material_depth.blending = THREE.NoBlending;
 
 				//
 
@@ -413,7 +416,8 @@ Use WEBGL Depth buffer support?
 					fragmentShader: bokeh_shader.fragmentShader,
 					defines: {
 						RINGS: shaderSettings.rings,
-						SAMPLES: shaderSettings.samples
+						SAMPLES: shaderSettings.samples,
+						DEPTH_PACKING: 1 // RGBADepth
 					}
 
 				} );
@@ -514,16 +518,16 @@ Use WEBGL Depth buffer support?
 
 					// Render scene into texture
 
-					scene.overrideMaterial = null;
 					renderer.render( scene, camera, postprocessing.rtTextureColor, true );
 
 					// Render depth into texture
 
 					scene.overrideMaterial = material_depth;
 					renderer.render( scene, camera, postprocessing.rtTextureDepth, true );
+					scene.overrideMaterial = null;
 
 					// Render bokeh composite
-
+					
 					renderer.render( postprocessing.scene, postprocessing.camera );