Particle blending transparent PNG show black on alpha

Questions
, ,
1

Hi guys, I’ve got a particle system threejs shader with a png for a texture but on the alpha channel I see a black solid color, I’ve used a lot of blending custom function but not function.
What am I doing wrong?

this is the link: http://williammanco.cloud/particles/

Thanks

  state.textures.particle = new TextureLoader().load(particleImage)
    state.textures.particle.minFilter = LinearMipMapLinearFilter
    state.textures.particle.flipY = false
    state.textures.particle.needsUpdate = true
    state.textures.particle.premultiplyAlpha = true

    console.log(state.textures.particle)
    this.mat = new ShaderMaterial({
      vertexShader: vert,
      fragmentShader: frag,
      uniforms: {
        texture: { type: 't', value: state.textures.particle },
        color: { type: 'c', value: new Color(0xffffff) },
      },
      transparent: true,
      blending: CustomBlending,
      blendSrc: OneFactor,
      blendDst: OneMinusSrcAlphaFactor,
      blendEquation: AddEquation,
    })
    this.particles = new Points(this.geom, this.mat)
    this.add(this.particles)
  }

uniform vec3 color;
uniform sampler2D texture;
varying float vAlpha;

void main() {
  gl_FragColor = vec4( clamp(color,0.0,1.0), clamp(vAlpha, 0.0, 1.0)  ) * texture2D( texture, gl_PointCoord );
}
1 Like
2

Hello williammanco,

If the png has a transparent background, you can try something like this in the fragment shader:

uniform vec3 color;
uniform sampler2D texture;
varying float vAlpha;

void main() {
  vec4 pixelref= texture2D( texture, gl_PointCoord );
  if(pixelref.a<.5) /*change threshold to desired output*/
        discard;
  gl_FragColor = vec4( clamp(color,0.0,1.0), clamp(vAlpha, 0.0, 1.0)  ) * pixelref;
}
3

Oh thanks @INF1N1T :slight_smile: , as the last option I would done the same, I wanted to understand the problem with the blending and png texture, because I see this ThreeJS
example https://threejs.org/examples/?q=blendin#webgl_materials_blending_custom and this it seems work correctly, apparently without any “hack”.

Do you have any idea what the problem is?

4

It is hard to tell without seeing the code, it could be in multiple places: background color, object background if any, renderer setup, material config, render order and the custom shaders.

My guess is when the material is compiled with the blendEquation: AddEquation option, it adds the black bg color to the image. You may try to change this option first and see what you get.

I would recommend to use a simpler example and customize the params 1 at a time to see each blending effects applied.

GL & HF

1 Like
5

It’s true :thumbsup:, thanks @INF1N1T for the support