CODEWITHSUNDEEP
three.js
Eskel
Eskel

Reputation: 814

Transparent shader pass with effect composer

I'm trying to render a scene and then have a half-transparent post-processing effect rendered on top of it. I'd like to make it work with effect composer so I can later use more passes easily.

My basic structure is this:

composer = new Three.EffectComposer renderer
composer.addPass renderPass
composer.addPass transparentPass
composer.addPass copyPass

copyPass has renderToScreen = true, transparentPass is my custom fragment shader with each pixel's alpha is set to 0.5 and loaded with ShaderPass.

I've tried blending, depthTest and transparent for the shaderMaterial. Also tried alpha and premultipliedAlpha options for renderer, autoClear off.

I'm getting either the scene from renderPass with nothing else or the transparentPass on any renderer.clearColor I choose. Not the composite of both. What do I need to set to make this work? Thank you.

EDIT:

Here is a codepen example: http://codepen.io/Eskel/pen/PzaOWb?editors=0010

And the code of my shader: http://eskel.cz/js/three79/RGBAShader.js

It shows all white (and not a rotating cube underneath) even though all pixels are rendered with alpha channel set to 0.5. Should I mix it with the tDiffuse render target in the shader or is there a way to make the shaderPass transparent?

Upvotes: 0

Views: 1326

Answers (1)

fomasha
fomasha

Reputation: 139

It's a really late response, but maybe it would help someone.

In constructor ShaderPass creates internal ShaderMaterial and we should set this material's transparency to true:

copyPass.material.transparent = true

Upvotes: 2

Related Questions