triple3
December 11, 2019, 10:38am
1
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.
Mugen87
December 11, 2019, 3:39pm
2
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/
triple3
December 11, 2019, 4:14pm
3
Thank you so much, @Mugen87 ! Just perfect.
1 Like
triple3
December 11, 2019, 4:54pm
4
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?
Mugen87
December 11, 2019, 5:10pm
5
Itβs maybe because of the white background? Canβt you just pick a different background color? https://jsfiddle.net/fbdv172w/
triple3
December 12, 2019, 9:22am
6
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?
Mugen87
December 12, 2019, 9:25am
7
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.
triple3
December 12, 2019, 9:33am
8
Yeah, a blind man may sometimes hit the mark (= me as newbie to this).
Excellent, you have been a great help. Thank you.