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 textures in the scene. So I guess I should read the frame buffer and then blur, rather than doing this in shaders.

Here's what I have tried:

Call when init:

var renderTarget = new THREE.WebGLRenderTarget(512, 512, {
    wrapS: THREE.RepeatWrapping,
    wrapT: THREE.RepeatWrapping,
    minFilter: THREE.NearestFilter,
    magFilter: THREE.NearestFilter,
    format: THREE.RGBAFormat,
    type: THREE.FloatType,
    stencilBuffer: false,
    depthBuffer: true
});
renderTarget.generateMipmaps = false;

Call in each frame:

var gl = renderer.getContext();

// render to target
renderer.render(scene, camera, renderTarget, false);
framebuffer = renderTarget.__webglFramebuffer;
console.log(framebuffer);

gl.flush();
if (framebuffer != null)
    gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
var width = height = 512;
var rdData = new Uint8Array(width * height * 4);
gl.readPixels(0, 0, width, height, gl.RGBA, gl.UNSIGNED_BYTE, rdData);
console.log(rdData);

// render to screen
renderer.render(scene, camera);

But framebuffer is WebFramebuffer {} and rdData is full of 0. Am I doing this in the right way?

@NicolBolas Then, how should I blur the whole scene in detail? — Ovilia, Mar 12 '13 at 05:53
I think you will find this post insightful to your problem: http://stackoverflow.com/questions/15077762/three-js-shader-texture-blinking — gaitat, Mar 12 '13 at 09:49

score 20 · Accepted Answer · edited Oct 26 '22 at 18:51

20

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

edited Oct 26 '22 at 18:51

General Grievance

4,555
31
31
45

answered Mar 14 '13 at 16:04

Andrew Berg

741
5
9

I will blur the whole scene depending on the depth information of each pixel, so I still need to get the framebuffer rather than add `HorizontalBlurShader` for the whole scene. – Ovilia Mar 15 '13 at 01:22
4

it sounds like you're trying to do a depth of field blur. The process is similar and the blurring will still be handled by a shader and be written back out to a full screen quad. I have a working example of depth of field here http://www.andrewberg.com/prototypes/threejs/bokeh/ – Andrew Berg Mar 15 '13 at 01:51
great answer, thanks for the link! do i understand correctly that "effectscomposer" library works independently from the rest of the three renderer? that it takes anything that is inside the renderer as a 2d image and applies filter on it? (i am asking because i would like to blur the image and the threshold it in order to achieve "wobbly" effect) – user151496 Oct 05 '14 at 13:43
That's correct all the effects are applied to a 2d image in a post processing step. – Andrew Berg Oct 06 '14 at 16:29
Thanks Andrew, the code snippet worked very well for me, easy to follow. – mlepage Jun 29 '15 at 20:23

score 0 · Answer 2 · answered Oct 22 '15 at 11:52

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

THREE.js blur the frame buffer

2 Answers2

Linked