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
2
Notice that this is conceptually problematic. Iโve explained the reasons for this here:
opened 07:26AM - 26 Apr 20 UTC
closed 09:16AM - 19 May 20 UTC
Hi Dev's
Many thanks for this awesome Library and all the support system.
โฆ I have a feature request to make:
I am looking to get transparent background when rendering BokenPass.
@Mugen87 guided me but I guess this feature is not been implemented or in works.
https://discourse.threejs.org/t/is-there-a-way-to-set-clearpass-on-bokehpass/14615/2
I am on r115
Thanks again!
1 Like
Background color bleeding through is desired outcome so thatโs not a problem for me
Mugen87
November 12, 2020, 3:19pm
4
I have not tested this but I assume you have to change this line in BokehShader2
.
" 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.
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?