Transparent Background

[andreponce]

Hello, do you know how I can make the background transparent? Or can I define some other solid color for the background?
Thanks!

[akella]

yes, any color is possible, you have to enable transparency in renderer, and do transparent parts in shader too

[andreponce]

I tried many things but nothing worked. Do you have any idea how I can make this bg transparent?
I will be grateful.
I'll leave my setup below.

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.outputEncoding = THREE.sRGBEncoding;
this.renderer.setClearColor(0xffffaa, 0);
this.renderer.autoClear = false;

this.composer = new EffectComposer(this.renderer);
this.renderPass = new RenderPass(this.scene, this.camera);
this.renderPass.clearAlpha = 0;
this.composer.addPass(this.renderPass);

this.customPass = new ShaderPass(myEffect);
this.customPass.material.transparent = true;
this.customPass.renderToScreen = true;

When I comment on this line the background be transparent, but obviously the shader disappears. I imagine the problem is ShaderPass.
this.composer.addPass(this.customPass);

this.renderer.clear();
if (this.composer) this.composer.render()

[akella]

may be this will help https://discourse.threejs.org/t/effect-composer-keep-transparency/4447/3

[andreponce]

Thank you for trying to help me.
I managed to solve it. The problem is in GLSL code as I suspected.
I solved it as follows:

void main() {
vec2 newUV = vUv;

float c = circle(newUV, uMouse, 0.0, 0.2);
float a = texture2D(tDiffuse, newUV.xy+c*(uVelo)).w; //added
float r = texture2D(tDiffuse, newUV.xy += c * (uVelo * .5)).x;
float g = texture2D(tDiffuse, newUV.xy += c * (uVelo * .525)).y;
float b = texture2D(tDiffuse, newUV.xy += c * (uVelo * .55)).z;
vec4 color = vec4(r, g, b, r+g+b+a); //changed

gl_FragColor = color;
}