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

Background of this question is this example 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.

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/

Thank you so much, @Mugen87! :pray: Just perfect. :+1:

1 Like

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?

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

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?

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.

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

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