Particle blending transparent PNG show black on alpha

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:


  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

    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)

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

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*/
  gl_FragColor = vec4( clamp(color,0.0,1.0), clamp(vAlpha, 0.0, 1.0)  ) * pixelref;

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 and this it seems work correctly, apparently without any “hack”.

Do you have any idea what the problem is?

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.


1 Like

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