# How to keep transparency of PNGs with particle systems and shaders?

**URL:** <https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535>\
**Category:** Questions\
**Tags:** materials, shaders, geometry\
**Created:** [December 11, 2019, 10:38am UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535 "2019-12-11T10:38:21Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![triple3](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@triple3](https://discourse.threejs.org/u/triple3)\
**Post date:** [December 11, 2019, 10:38am UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/1 "2019-12-11T10:38:21Z")

</div>

Background of this question is this example [https://jsfiddle.net/zouxps2d/](https://jsfiddle.net/zouxps2d/)

If you replace the image with a transparent PNG – how could it be possible to keep its transparency?

Is this about shaders, colours of particle system, buffer geometry, renderer or all of them?

Many thanks for help.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 11, 2019, 3:39pm UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/2 "2019-12-11T15:39:11Z")

</div>

You need a custom color attribute since the default color attribute is just of type `RGB`. You need `RGBA` however. Check out the code from the following fiddle which uses a PNG with transparent parts:

[https://jsfiddle.net/czuso1fx/](https://jsfiddle.net/czuso1fx/)

---

<div class="post-metadata">

**Author:** ![triple3](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@triple3](https://discourse.threejs.org/u/triple3)\
**Post date:** [December 11, 2019, 4:14pm UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/3 "2019-12-11T16:14:39Z")

</div>

Thank you so much, @Mugen87! 🙏 Just perfect. 👍

---

<div class="post-metadata">

**Author:** ![triple3](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@triple3](https://discourse.threejs.org/u/triple3)\
**Post date:** [December 11, 2019, 4:54pm UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/4 "2019-12-11T16:54:45Z")

</div>

Only as a surplus question:  
When you are turning the image, do you realize that the transparency is converted to white in some views?

Is there a solution for this?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 11, 2019, 5:10pm UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/5 "2019-12-11T17:10:11Z")

</div>

It’s maybe because of the white background? Can’t you just pick a different background color? [https://jsfiddle.net/fbdv172w/](https://jsfiddle.net/fbdv172w/)

---

<div class="post-metadata">

**Author:** ![triple3](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@triple3](https://discourse.threejs.org/u/triple3)\
**Post date:** [December 12, 2019, 9:22am UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/6 "2019-12-12T09:22:22Z")

</div>

Unfortunately these artefacts are still there after rotating and when viewing from a flat angle.

But I found something interesting. I added to the ShaderMaterial:

depthWrite: false

… and the artfacts are gone.

Does it make sense to you?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 12, 2019, 9:25am UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/7 "2019-12-12T09:25:23Z")

</div>

> [@triple3](#):
>
> Does it make sense to you?

Yes, although transparent fragments are not visible, their depth values could still prevent others from being rendered. Disabling `depthWrite` is a typical workaround for such issues.

---

<div class="post-metadata">

**Author:** ![triple3](https://avatars.discourse-cdn.com/v4/letter/t/b487fb/32.png) [@triple3](https://discourse.threejs.org/u/triple3)\
**Post date:** [December 12, 2019, 9:33am UTC](https://discourse.threejs.org/t/how-to-keep-transparency-of-pngs-with-particle-systems-and-shaders/11535/8 "2019-12-12T09:33:49Z")

</div>

Yeah, a blind man may sometimes hit the mark (= me as newbie to this).

Excellent, you have been a great help. Thank you.