Depth of Field with BokehShader2, preserve alpha

Richard_Halcin · November 12, 2020, 12:07pm

Hello everyone,

I am trying to implement depth of field with transparent background.
It is possible to achieve using BokehShader.js and commenting out one line described in this topic:https://discourse.threejs.org/t/is-there-a-way-to-set-clearpass-on-bokehpass/14615/3.

I would like to use BokehShader2,but i always get black background.
It there a way to use BokehShader2 and have transparent background?

Thanks for any help

Mugen87 · November 12, 2020, 2:08pm

Notice that this is conceptually problematic. I’ve explained the reasons for this here:

Richard_Halcin · November 12, 2020, 2:32pm

Background color bleeding through is desired outcome so that’s not a problem for me

Mugen87 · November 12, 2020, 3:19pm

I have not tested this but I assume you have to change this line in BokehShader2.

github.com

mrdoob/three.js/blob/ebd43ff6c3fb79d52de55720cc691c80719933b0/examples/jsm/shaders/BokehShader2.js#L353


		"	if (showFocus) {",
		"		col = debugFocus(col, blur, depth);",
		"	}",
		"	if (vignetting) {",
		"		col *= vignette();",
		"	}",
		"	gl_FragColor.rgb = col;",
		"	gl_FragColor.a = 1.0;",
		"} "
	].join( "\n" )
};
var BokehDepthShader = {
	uniforms: {

to

gl_FragColor.a = texture2D(tColor, vUv.xy).a;

Besides, the color render target must be in RGBA format.

Richard_Halcin · November 24, 2020, 3:36pm

Thanks for the reply!
Sorry for following up so late, i was swamped with other stuff.
With the change you proposed the background is transparent but i get this kind of result.
The blurring is exaggerated to make it super obvious.

Areas where spheres overlap are blurred as expected. However, edges of the spheres that are in front of background are not blurred at all. Do you have any tip how to fix this?

Topic		Replies	Views
Is there a way to set clearPass on BokehPass? Questions post-processing	6	2273	May 19, 2020
Bloom and bokeh shader v2 Questions post-processing	5	2412	October 14, 2019
Dof / bokeh pass with animated gltf Questions post-processing , depth-of-field	5	1011	February 24, 2021
Understanding the focus parameter for BokehPass Questions post-processing	1	3101	June 17, 2020
Bokeh computation with BokehShader2 Questions shaders , depth-of-field , bokeh	4	1820	November 27, 2020

Depth of Field with BokehShader2, preserve alpha

Related topics