Question

I tried adding DOF to my three.js scene, using the code in this example http://mrdoob.github.com/three.js/examples/webgl_postprocessing_dof.html

And I got it working, except for the fact that I lose transparency in my scene.

Is there any way I can see my html background behind my scene, while using this DOF (bokeh shader from THREE.ShaderExtras)?

Does it have something to do with RGB – RGBA formats or do I have to change something in the bokeh fragment shader or…?

Answer 1

The problem is the last line in the shader:

gl_FragColor.a = 1.0;

That sets the alpha of each rendered pixel to opaque. If you remove that line you will get the bokeh’d alpha, although i presume it isn’t very usable anyways (because, why the dev would change the alpha to opaque?).

Test that and see how it fares.