I am trying to sort transparent AABBs of varying sizes but not overlapping, back to front.
My use-case is rendering gaussian splats passed through OGC3DTiles.
The AABBs contain transparent point objects, in an InstancedMesh, that are sorted independently in workers.
The red AABB is closer to the camera according to euclidean distance yet it should be rendered behind.
The only way I see to sort these AABBs is to compute rays for each corner of one AABB and ray-cast onto the second AABB until I find a ray where the intersection is further or closer than the corner used to define the ray.
Intuitively, it feels like there’s a shortcut using the distance along each axis separately but I can’t figure it out.
This is definitely a general question.
Perhaps a question more closely related to three.js would be to know if this is handled in the normal sorting for Mesh objects?
Yep, it is trivial until you end up with two AABBs that touch like the red and the blue AABBs in your image… but the right side of the red is at 2.0000000000000004, while the left side of blue is at 2.
The turbulence of the least significant digits of floats is a nightmare.
Try to guess according to JS which one is bigger: 2 or (√2)²
