Three.js: Order independent transparency

[arose]

Recently @zz85 mentioned (#4724) a technique to render transparent objects without sorting. There is a paper and a blog post describing it. Also, it has been already implemented in webgl - in cesium (example).

I tried to implement the technique with three.js. Here is a demo and the code on github.

In the demo you can switch between the order independent rendering (oit), opaque or classical transparency requiring sorted rendering. It is quite convincing - until you start to zoom. I suspect it has something to do with how I calculate the z value for the accumulation and revelage shader. I'll try to figure that out, but any help is much appreciated!

[mrdoob]

/ping @zz85?

[arose]

I slightly changed the weighting function for the demo, i.e. lowered the _orderingStrength_ (for the terminology see the presentation on the paper website) of the weight function. Maybe its a trade-of: more ordering discrimination results in a stronger effect when zooming. I guess in a setting where you (always) zoom/scale the whole scene it could make sense just apply the the rotation but not the scaling term of the modelViewMatrix.

Some more notes on my implementation. I used the approach with multiple render passes. The other approach is to use multiple render targets. Since the _WEBGL_draw_buffers_ extension is now available in recent browsers it would be nice to have that too. However, as far as I know there is no api for multiple render targets in three.js so far. I guess this is a topic for another discussion.

[zz85]

looks cool... i'll need to free up a bit of my brain cycles first before looking into this...

[navigator117]

in your demo code,

1. the vertex shader, if the input is already premultipliedAlpha ( like transparent png output by PS), z = ( z4.xyz / z4.w ).z is not needed?
2. your 2D compositingMaterial with Custom parameters:
   blending: THREE.CustomBlending,
   blendEquation: THREE.AddEquation,
   blendSrc: THREE.OneMinusSrcAlphaFactor,
   blendDst: THREE.SrcAlphaFactor
   the src & dst blend is invert compare to
   http://casual-effects.blogspot.com/2015/03/implemented-weighted-blended-order.html 2D Compositing Pass. why?

[looeee]

Working live example: https://raw.githack.com/arose/three.js/oit/examples/webgl_oit.html

[trusktr]

Looks like @pailhead has also made some progress on order-independent-transparency here: https://discourse.threejs.org/t/depth-peel-and-transparency/5365 (or is that something else? It seems to solve some issues that I've seen with the order-dependent transparency)

[pailhead]

The demo doesnt run on ios :(

[pailhead]

My approach unfortunately can’t work with three unless render buffers are somehow decoupled from targets. I’ve been thinking of somehow hijacking the gl state at the right time to maybe allow for that, but it seems very gnarly.

This approach might be more modern, it seems different than what I attempted.

[mrdoob]

This approach might be more modern, it seems different than what I attempted.

How is it more modern?

[pailhead]

I don't know need to dig into it, i figured it was written more recently since it does leverage shaders, the depth peel paper i worked off of i think predates shaders.