An example of order independent transparency (kind of)
Hey,
I wanted to share with you this patch I just made, which illustrates how to make order independent transparency rendering, or at least faking it.
The main limitation is that it only work with two mesh (or two groups of geometry, separated in two jit.gl.node). Also I dont think it works well with complex shapes. Up to you to try!
A good point is that I also update the normals+depth texture while taking into account the transparency, so we can use fancy shaders on the whole scene, such as the depth of field effect (featured in the patch). However as it requires different nodes for rendering the scene, I was not able to use jit.gl.pass as intended, so I used jit.gl.slab instead.
The idea is quite simple: render each geometry in a separate [jit.gl.node @capture 2 @type float32], then combine the depth and color alpha channels to guess which object you're supposed to see for each pixel.
Also, I didn't try textures with gradients of transparency. It should work but might mess the normals+depth texture a bit. If so, I assume that could be fixed with some minor modification in the jit.gl.pix.
So a lot of caveats, but it works great for the specific situation where you have two overlapping mesh with textures using alpha channel, which is exactly the case of a project I work on from time to time since a few years. I already asked for a solution 3 years ago on this topic, ended up adjusting manually the rendering order (using the layer attribute) depending on the mesh z position, which was ok-ish but would not work in some configuration (especially when both mesh are overlapping). So today I'm glad to share with you the solution I eventually came out with on my own.
I hope it can help some of you!
Hey TFL,
Thanks for sharing! Transparency is tricky, indeed.
If you know how to write custom shaders, a feasible order-independent approximation is stochastic transparency.
The idea is very straightforward: don't bother about the rendering order, and randomly discard some fragments.
The number of fragments to discard should be directly proportional to the transparency of the object. To make things more efficient, in the patch attached, I pre-computed a 3D texture filled with ones and zeros (0 = fragment to discard, 1 = fragment to render).
The texture contains 64 slices of increasing density. When red in the fragment shader using the mesh texture coordinates, it automatically takes care of which and how many fragments to discard. You could make the color value's alpha component control the slice's selection. The pattern I used to fill the texture is a low discrepancy sequence (check out this link).
The result is quite noisy, but a touch of blur could significantly improve the result (maybe using an edge-preserving filter)