Problem making renderer transparent

Questions
,
1

I have a renderer that displays some blobs, this works fine, but somehow I fail to make its background transparent. What’s odd is, that so far, the background is still white, covering everything underneath, but the blobs have some lowered opacity kind of showing what beneath them. But I want the background to be transparent.

// Create Renderer
const renderer = new WebGLRenderer({antialias: false, alpha: true})
renderer.setClearColor( 0x000000, 0 )

// Create Scene
const scene = new Scene()

// Create Camera
const camera = new Camera()
camera.position.z = 1

// Append Element to window
container.appendChild(renderer.domElement)

calculateShaderColors(rgbColors, colors)
createShader()
createBlob()
resize()

function calculateShaderColors(originalColors, convertedColors) {
    originalColors.forEach((color) => {
        convertedColors.push(new Vector3(color[0] / 255, color[1] / 255, color[2] / 255))
    })
}

function resize() {

    if ((Math.abs(windowWidth() - lastSizeW)) >= 10) {
        renderer.setSize(windowWidth(), (windowHeight() * 2))
        camera.aspect = windowWidth() / windowHeight() * 2

        uniforms.u_resolution.value.x = windowWidth()
        uniforms.u_resolution.value.y = windowWidth()
        maxAnchorX = windowWidth() / 4
        maxAnchorY = windowHeight() / 2.5
        blobElements.forEach((blob) => {
            blob.resize(windowWidth(), centered ? windowHeight() * 2 : windowHeight() * 3)
        })
        lastSizeW = windowWidth()
    }
}

function createShader() {
    geometry = new PlaneBufferGeometry(2, 2)
    uniforms = {
        u_time: {type: "f", value: 1.0},
        u_resolution: {type: "v2", value: new Vector2(windowWidth(), windowWidth())},
        u_mouse: {type: "v2", value: new Vector2()},
        u_blobs: {type: "v3v", value: []},
        u_colors: {"value": colors}
    }

    material = new ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
transparent: true,
        fragmentShader: fragmentShaderContent
    })
    mesh = new Mesh(geometry, material)
    scene.add(mesh)
}

What it looks like - I don’t want the Blob to be transparent, but the background:

Bildschirmfoto 2020-11-24 um 15.44.30
Bildschirmfoto 2020-11-24 um 15.44.301830×1144 85.1 KB

2

Can you share contents of the fragment shader (I assume it’s a custom one) ?

3

Yes I figured that’s the problem - somehow the shader makes the background white. How can I pevent I from doing that?

const fragmentShaderContent =
    `#ifdef GL_ES
  precision highp float;
#endif
uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform vec3 u_blobs[3];
uniform vec3 u_colors[3];
uniform float u_time;
void main(){
  vec2 st = gl_FragCoord.xy/u_resolution;
  vec3 color = vec3(1.);
  const int count = 3;
  float totalV = 0.;
  for( int i = 0; i < count; i++){
    float d = distance((u_blobs[i].xy/u_resolution), st);
    float v = ((u_blobs[i].z * .3)/u_resolution.x) / pow(d, 3.0);
    color +=  u_colors[i] * (v);
    totalV += v;
  }
  color = color / totalV;
  gl_FragColor = vec4(vec3(color), 1);
}`
;

Changing gl_FragColor = vec4(vec3(color), 1); to gl_FragColor = vec4(vec3(color), 0.5); - will lower the opacity, but also from the blobs.

4

Setting gl_FragColor = vec4(vec3(color), 1); makes whichever color you output opaque.

5

Yes, I have three blobs and those are supposed to be opaque, but the white background is whats bothering me. I want the background to be transparent and the blobs to be opaque.