CODEWITHSUNDEEP
three.jsglslwebgl
Slow In
Slow In

Reputation: 31

GLSL: ShaderMaterial with custom shader is not transparent

I try to draw a texture onto a sphere like this:

script(type='x-shader/x-vertex')#Vertex
  varying vec2 vUv;
  void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }      

script(type='x-shader/x-fragment')#Fragment
  uniform sampler2D baseTexture;
  varying vec2 vUv;

  void main() {                   
    vec4 baseColor = texture2D( baseTexture, vUv );  
    gl_FragColor = baseColor;
  }

this.materials = new THREE.ShaderMaterial( { 
  uniforms: this.uniforms, 
  vertexShader: document.getElementById( 'Vertex' ).textContent, 
  fragmentShader: document.getElementById( 'Fragment' ).textContent,
  transparent: true,
  blending: THREE.AdditiveBlending 
});

This does work fine, but the texture is not transparent, even if I change the alpha value. Transparent pixels from my texture are just black.

But if I write baseColor.a = 0.0, I cannot see the texture anymore, but also not what lies behind it in the scene. I think I'm missing mixing the texture with the background somehow?

How can I achieve this with GLSL in three.js?

Thanks

Upvotes: 3

Views: 1934

Answers (1)

Michael IV
Michael IV

Reputation: 11506

I have no idea how THREE.js works under hood but I see you set blending to be additive.That's not what you want for alpha blending.Alpha blending uses this function :

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

while additive uses:

  glBlendFunc(GL_ONE, GL_ONE);

So make sure you use the first one and that your texture has in fact alpha channel as A component of RGBA.

Upvotes: 1

Related Questions