THREE.js blur the frame buffer

Question

I need to blur the frame buffer and I don\'t know how to get the frame buffer using THREE.js.

I want to blur the whole frame buffer rather than blur each texture

Answer 1

Any blur should use shaders to be efficient, but in this case not as materials.

If you want to blur the entire frame buffer and render that to the screen use the effect composer. It's located in three.js/examples/js./postprocessing/EffectComposer.js

Set up the scene camera and renderer as normal but in addition add an instance of the effect composer. With the scene as a render pass.

composer = new THREE.EffectComposer( renderer );
composer.addPass( new THREE.RenderPass( scene, camera ) );

Then blur the whole buffer with two passes using the included blur shaders located in three.js/examples/shaders/

hblur = new THREE.ShaderPass( THREE.HorizontalBlurShader );
composer.addPass( hblur );

vblur = new THREE.ShaderPass( THREE.VerticalBlurShader );
// set this shader pass to render to screen so we can see the effects
vblur.renderToScreen = true;
composer.addPass( vblur );

finally in your method called in each frame render using the composer instead of the renderer

composer.render();

Here is a link to a working example of full screen blur http://bit.ly/WfFKe7

Answer 2

Try using the MeshDepthMaterial and render this into your shader.

I suggest rendering the blur pass with a dedicated camera using the same settings as the scene's diffuse camera. Then by adjusting the camera's frustrum you can do both screen and depth of blur effects. For a screen setup move the near frustrum towards the camera and move the far frustrum in increments away from the camera.

http://threejs.org/docs/#Reference/Materials/MeshDepthMaterial