Is there a way to set clearPass on BokehPass?

Questions
1

Basically I am trying to add BokehPass with Clearpass to get a transparent background.

I have

renderer = new THREE.WebGLRenderer({ alpha: true });
scene.background = null;

and

composer = new EffectComposer( renderer );

	clearPass = new ClearPass( params.clearColor, 0 );
	composer.addPass( clearPass );
renderPass = new RenderPass( scene, cameraP );
    renderPass.clear = false;
	composer.addPass( renderPass );
var bokehPass = new BokehPass( scene, cameraP, {
					focus: 1170.0,
						aperture:	0.2,
						maxblur:	3.0,

						width: width,
						height: height
					} );

										
	composer.addPass( bokehPass );

and

function animate() {

				requestAnimationFrame( animate );

				stats.begin();

				cameraP.updateMatrixWorld( true );

				clearPass.enabled = params.clearPass;
				clearPass.clearColor = 0x00ff00;
				clearPass.clearAlpha = 0;

				composer.render();

				stats.end();

			}
2

I even tried setting the

renderer.setClearAlpha( 1.0 ); // SET to 0

in BokehPass.js

I really have no clue how and in which order does the passes are rendered.

Please help.

3

to get a transparent background.

BokehShader set the alpha value of each fragment to 1.

You can try to remove this line and see how it works.

1 Like
4

Ya… it works! but the CCS background color is casted over the object

Screenshot 2020-04-25 at 7.25.21 PM
Screenshot 2020-04-25 at 7.25.21 PM1066×530 354 KB

5

I guess this is the reason why gl_FragColor.a is set to 1.

6

Thanks @Mugen87 I have created a feature request for the same.

7

I’ve updated the issue at GitHub. I’ve explained there why it’s not possible to implement this feature request.

1 Like