threejs-kit icon indicating copy to clipboard operation
threejs-kit copied to clipboard

Sorting for transparent mesh

Open richfwebb opened this issue 1 year ago • 2 comments

I'm running into an issue where sprites with semi-transparent areas need to be sorted back-to-front per-frame before render, for example clouds. Otherwise, you get issues like this image, where the cloud should be fading to 0 opacity, revealing the cloud behind it, but instead the overlapping area becomes fully white. Screenshot from 2024-07-01 12-41-22

richfwebb avatar Jul 01 '24 17:07 richfwebb

I'm running into an issue where sprites with semi-transparent areas need to be sorted back-to-front per-frame before render, for example clouds. Otherwise, you get issues like this image, where the cloud should be fading to 0 opacity, revealing the cloud behind it, but instead the overlapping area becomes fully white. Screenshot from 2024-07-01 12-41-22

Sorry for late reply, I completely missed this. I think I'm going to work on some improvements for the library in the coming weeks and sorting is definitely one of the things on my radar.

Just to be sure, could you make a super simple reproduction (just a scene with a couple of cloud sprites like above) so that I can test the library as I work on it?

jerzakm avatar Jul 25 '24 10:07 jerzakm

spriteSorting.txt merged

This email got buried somehow! Thanks for getting back to me. Not sure if it still relevant or not, but this test might help!

lambocorp avatar Sep 15 '24 08:09 lambocorp