depth of field with webgl

Question

I would like to simulate the "depth of field"-effect in webgl, moving the camera on a circle: https://en.wikibooks.org/wiki/OpenGL_Programming/Depth_of_Field

In OpenGl I would use the accumulation-buffer. But unfortunately webgl doesn´t know such buffer.

Is it possible to use blending to simulate such an effect?

Answer 1

A simple way of simulating depth of field is

• Render scene to texture
• Blur texture with renderer scene to another texture
• Mix the 2 textures (in focus scene texture + blurred scene texture) using the depth information.

There's an example here. Click the tiny * to and adjust the "dof" slider. Press d a few times to see the different textures.

Answer 2

You can also render the scene to several different framebuffers, then bind those framebuffers as textures and accumulate the color from all of them in one final post-processing gathering pass. So that is more or less the manual way of doing accumulation.