# Particle blending transparent PNG show black on alpha

**URL:** <https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551>\
**Category:** Questions\
**Tags:** transparency, png, materials\
**Created:** [July 1, 2017, 7:54am UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551 "2017-07-01T07:54:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![williammanco](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williammanco/32/263_2.png) [@williammanco](https://discourse.threejs.org/u/williammanco)\
**Post date:** [July 1, 2017, 7:54am UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551/1 "2017-07-01T07:54:36Z")

</div>

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/](http://williammanco.cloud/particles/)

Thanks

* * *

![](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/1X/c28e544d4dff42464e46ebfcae406293e8311f21.jpg)

* * *

```
  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 );
}
```

---

<div class="post-metadata">

**Author:** ![INF1N1T](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/inf1n1t/32/79_2.png) [@INF1N1T](https://discourse.threejs.org/u/INF1N1T)\
**Post date:** [July 1, 2017, 8:11am UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551/2 "2017-07-01T08:11:02Z")

</div>

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;
}
```

---

<div class="post-metadata">

**Author:** ![williammanco](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williammanco/32/263_2.png) [@williammanco](https://discourse.threejs.org/u/williammanco)\
**Post date:** [July 2, 2017, 11:21am UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551/3 "2017-07-02T11:21:26Z")

</div>

Oh thanks @INF1N1T 🙂 , 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](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?

---

<div class="post-metadata">

**Author:** ![INF1N1T](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/inf1n1t/32/79_2.png) [@INF1N1T](https://discourse.threejs.org/u/INF1N1T)\
**Post date:** [July 2, 2017, 1:41pm UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551/4 "2017-07-02T13:41:33Z")

</div>

> [@williammanco](#):
>
> 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.

> [@williammanco](#):
>
> I wanted to understand the problem with the blending and png texture

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

GL & HF

---

<div class="post-metadata">

**Author:** ![williammanco](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/williammanco/32/263_2.png) [@williammanco](https://discourse.threejs.org/u/williammanco)\
**Post date:** [July 2, 2017, 1:45pm UTC](https://discourse.threejs.org/t/particle-blending-transparent-png-show-black-on-alpha/551/5 "2017-07-02T13:45:58Z")

</div>

It’s true 👍, thanks @INF1N1T for the support