Transparent canvas and transparent ShaderMaterial

Questions
, , ,
1

I have a renderer:

const renderer = new THREE.WebGLRenderer({
  canvas: canvas,
  antialias: false,
  alpha: true
})

And a ShaderMaterial:

const material = new THREE.ShaderMaterial({
  uniforms: { ... },
  transparent: true,
  blending: THREE.NormalBlending,
  vertexShader: renderVert,
  fragmentShader: renderFrag
})

And i have a fragment shader (simplified here):

void main() {
    gl_FragColor = vec4(vec3(0.0), 0.2);
}

But the alpha is not taken into account and the shader renders all colours fully opaque. Also with another blending mode still doesn’t work as expected. Why?

2

Are you looking for something like that?

https://jsfiddle.net/f2Lommf5/6414/

Please provide a live example so it’s easier to see why it does not work in your particular case.

1 Like
3

Crossposting:

4

You are right, this works. Thanks a lot for the example, that helped me find the bug in my code which actually draws THREE.Points like this https://jsfiddle.net/f2Lommf5/6426/

1 Like