I have a node.js app that generates a three object and passes it to the frontend as a json. Initially this object has no transparency.
I use threejs to visualize this json, which I can successfully load. However, I change the opacity of the object dynamically, and this causes a problem with my rendering as the rendering order is not correct.
I know I should change the rendering order in order to visualize the scene correctly. I should use the scene and the position of my perspective camera. Probably I can achieve this using raycasting.
My question is: what is the easiest way to achieve this rendering order, given the scene and the position of the camera? I cannot find an easy way to achieve a solution for, what looks to me, a very common problem. I would be thankful for an example on the recommended way to solve this problem.
three.js sorts transparent objects automatically for alpha compositing. If you want to define the rendering order manually, consider to use Object3D.renderOrder.
Keep in mind that solving transparency issues can be very tricky. And three.js does not have yet a transparency implementation like OIT that avoids common artifacts resulting from sorting objects.
Is there a discussion thread that one can read to get up to date on any efforts to improve rendering of scenes containing multiple transparent objects in Three.js? My application is facing some challenges in this area.
there’s a lot of threads concerning transparency render order issues spread around the forum eg.
having said that, these threads are likely now a little outdated and it could be good to have a definitive thread of the latest workflow using transparent objects and render orders…