Proposed: Order Independent Transparency

Description of the problem

We (@Jozain and myself) are currently implementing out-of-order transparency for ThreeJS for a project of ours. We’d like to contribute it back. We are implementing the method of Morgan Mcguire, Weighted-Blended Order Independent Transparency: http://casual-effects.blogspot.ca/2014/03/weighted-blended-order-independent.html

We are helped a lot by @arose’s example OIT code on which our stuff will be partially based, just our stuff will be designed into the core of Three.JS: https://github.com/mrdoob/three.js/issues/4814

Here is an proposed example of how to enable this mode:

var renderer = new THREE.WebGLRendererer( .... );

// add new "transparency" variable to renderer to select the transparency rendering mode
//renderer.transparency = THREE.PaintersTransparency; // the current ThreeJS method, the painter's algorithm
renderer.transparency = THREE.OrderIndependentTransperancy; // the new OIT method

This mode will be implemented by a new WebGLOrderIndependentTransparency class that will be responsible for managing the buffers. It will create two additional RenderTargets that will track the size of the current render buffer. The first will be the accumulation buffer which we will render all transparency objects to and then we will render the objects as well to some alpha product buffers - thus two separate renders. This will be followed by a “resolve” stage that renders the transparent objects over top of the existing beauty render of the opaque objects.

This workflow will work with base WebGL and work with multi-sample buffers as well. It can obviously be speed up using multiple render targets, but this shouldn’t be that slow for non-huge numbers of transparent objects.

We are going to implement this now, just wanted to give a heads up as to our design so that if you have feedback on it, we can incorporate it now.

/ping @WestLangley @arose @spidersharma03

[bhouston]

Myself and https://github.com/Threekit are pleased to put a bounty of $500 USD on an accepted PR of an implementation that supports order independent blending of transparent surfaces using the floating point buffer blending technique described in the original issue description above (or any further improved version.)

[stevinz]

I have implemented weighted, blended order independent transparency as a Pass that can be used as a stand-alone renderer, or in combination with other passes within an Effect Composer composition.

Github Repo - Online Example

This example builds on the progress made by @arose, @pailhead, and others.

Instead of monkey patching existing shaders (like 24227), the pass includes a material MeshWboitMaterial. This material is functionally equivalent to MeshBasicMaterial, with the addition of a weight property. This is implemented in the style presented in MeshGouraudMaterial.

This pass doesn’t need access to internal renderer framebuffers, and does not create a depth texture. In doing so it remains WebGL 1 compatible and mobile friendly (although, iPhone still doesn’t support writing to gl.FLOAT framebuffers and falls back to gl.UNSIGNED_BYTE which works, but doesn’t look as nice).

It is able to avoid creating a depth texture and the need to bind multiple render targets by re-using the depth buffer of the current writebuffer after each step. It also is able to generate it’s own list of opaque / transparent objects and render them separately by implementing a visibility cache (similar to OutlinePass).

I would be happy to submit a pull request to add this into the examples if this approach looks acceptable.