Transparent canvas and transparent ShaderMaterial

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?

Are you looking for something like that?

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

1 Like


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

1 Like