Order independent transparency

Transparent objects need to be rendered from back to front. This is simple to do each frame on CPU when you have a limited number of convex meshes which are small relative to their distance to each other.

However, when parts of a mesh overlap each other, you have large meshes which overlap each other, or you have a huge number of transparent objects, it may be necessary to switch to an order-independent transparency.

The main idea of order-independent transparency is to either:

1. Approximate transparency using a commutative operation, i.e. addition.
2. Render fragments (per-pixel colors) from back to front.

Additive Transparency

Take all the transparent colors and add them up. Addition is commutative so the order doesn't matter.

Weighted Blended Order Independent Transparency

See http://casual-effects.blogspot.com/2014/03/weighted-blended-order-independent.html

This builds upon additive transparency with two buffers:

1. Accum buffer: weighted average of all premultiplied-alpha RGB colors.
2. Revealage buffer: buffer representing how much of the opaque background is visible through the transparent layers.

Depth Peeling

Do several render passes. In each render pass, set a range of z values from back to front and render only z values within the threshold for each render pass.

Dual Depth Peeling

https://developer.download.nvidia.com/SDK/10/opengl/src/dual_depth_peeling/doc/DualDepthPeeling.pdf

This is a performance optimization over depth peeling which allows using half the number of passes.

Stochastic Transparency

https://research.nvidia.com/publication/2011-08_stochastic-transparency

The idea is to apply dithering, rendering objects as opaque. When objects overlap, the depth test prevents objects behind from rendering over objects in front.

Per-Pixel Linked Lists

This method requires an atomic counter or storage buffers with atomic operations, available in OpenGL 4.2+, Vulkan, and WebGPU. It also requires a small amount of overdraw since sorting needs to happen per pixel.

The idea is to have each pixel build a linked list of each fragment being drawn. Then the linked list will be sorted and rendered back to front.