Precomputing Transparency Order in 3D

Summary

Precomputing Transparency Order in 3D Transparency — or more precisely, translucency — remains a problem when rendering in 3D. When you have translucent shapes, the order in which they get rendered is very important. Consider what happens if this is done incorrectly. Today, getting the correct order for translucent faces typically involves sorting the faces by their distance to the camera on the CPU, then sending the sorted faces to the GPU. This means every time the camera moves, you need to re-sort the translucent faces. In this post, I will show a method I believe may be unique to sort faces independently of the camera position. This sorting is more expensive — O(n²) compared to O(n log n) — but it only needs to be done once. As this sorting is more expensive, it is only really suitable to places where the translucent faces do not move much. There are also some cases where it won’t work, and will have to fall back to CPU sorting. A Bit About GPUs We don’t need to know too much about GPUs for this post, but you do need to know GPUs will do anything other than sort geometry. For opaque faces, you can imagine the GPU takes an array of faces, and each face is drawn one-by-one, in the order. To make sure faces farther away from the camera don’t start drawing over faces closer to the camera, they keep a per-pixel record of the closest distance rendered from the camera. Then when drawing each pixel in a new face, they’ll only draw it if it’s actually closer to the camera. This means they can avoid sorting the geometry, for opaque faces at least. There’s one more thing about GPUs you’ll need to know to understand this post, which is face culling. This is an optimisation available to reduce the number of faces you have to consider. If you imagine each face like a coin, with heads and tails, face culling is a way to say only draw faces if you see ‘heads’ on the face. Typical use for this is when rendering volumes. First, you would set up a cube where the faces on the outsi...