Threejs Shader - gl_FragColor with alpha (opacity does not change)

Question

I'm trying to write a simple shader where half of my scene will be displayed and half of the scene will be transparent. I cannot understand why transparency does not work:

uniform sampler2D tDiffuse; varying vec2 vUv; void main(){ vec2 p = vUv; vec4 color; if(px < 0.5){ color = (1.0, 0.0, 0.0, 0.0); }else{ color = texture2D(tDiffuse, p); } gl_FragColor = color; } 

The shader definitely works without errors - the right half of the screen is my three-dimensional scene, and the left half of the screen is red (when it really needs to be transparent). I read that maybe I need to call glBlendFunc (GL_SRC_ALPHA); - but I get errors when I try to do this. For this, I did renderer.context.blendFuncSeparate (GL_SRC_ALPHA); in my main js file (and not in the shader). Should I post this somewhere else to make it work?

Any help would be greatly appreciated. For reference, I use my shader with standard effectsComposer, shaderPass, etc., which are used in the examples of threejs shaders.

Thanks in advance for your help!

Answer 1

It is hard to help you with partial information and code snippets, so I can only make reasonable assumptions.

By default, EffectComposer uses the render target in RGB format. Pointed RGBA ?

Did you specify material.transparent = true?

three.js r.56