diff --git a/examples/js/shaders/BokehShader2.js b/examples/js/shaders/BokehShader2.js index 5e3a1f0990590b13d106c7df8ea16d4103fffb27..8b8de9cce54aa679900ad31acdfbd0b5e8dd3007 100644 --- a/examples/js/shaders/BokehShader2.js +++ b/examples/js/shaders/BokehShader2.js @@ -65,6 +65,7 @@ THREE.BokehShader = { fragmentShader: [ "#include ", + "#include ", "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 ) );", "}", diff --git a/examples/webgl_postprocessing_dof2.html b/examples/webgl_postprocessing_dof2.html index 09ef24b2249d99f19b06b8ea6f96210f5fbbe1db..1ff24d1f873511c0585d94fbd6c4b51458a973fb 100644 --- a/examples/webgl_postprocessing_dof2.html +++ b/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 );