Order independent transparency (OIT)

Mugen87 · October 8, 2023, 8:18am

No, OIT is not available in three.js. The last PR that tried to implement is:

github.com/mrdoob/three.js

Examples: Add weighted, blended order-independent transparency pass / demo

mrdoob:dev ← stevinz:wboit

opened 11:45PM - 02 Nov 22 UTC

stevinz

+1382 -0

Related issue: #9977 **Description** This is an implementation of weighted…, blended order independent transparency. It is designed as a `Pass` that can be used as a stand-alone renderer (similar to [RenderPass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/RenderPass.js)), or in combination with other passes within an `Effect Composer` composition. It is based on the floating point buffer blending technique described in this [paper](http://casual-effects.blogspot.ca/2014/03/weighted-blended-order-independent.html) and requested by this [bounty](https://github.com/mrdoob/three.js/issues/9977#issuecomment-1173786755). This pull request is a result of the work in this [GitHub Repo](https://github.com/stevinz/three-wboit). It was designed as a stand-alone renderer to allow room for other order-independent techniques to be implemented without complicating the renderer. And also to allow for it to be used in a larger rendering stack that may include pre-passes (i.e. background, skybox, etc.) and post-passes (outline, FXAA, etc.). In keeping this as a stand-alone pass, this technique does not add shader code to the built-in materials. This pass includes a material (`MeshWboitMaterial`) that is functionally equivalent to MeshBasicMaterial, with the addition of a weight property. This is implemented in the style presented in [MeshGouraudMaterial](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/materials/MeshGouraudMaterial.js). The material is meant to serve as an example of the changes necessary to allow any material to be compatible with this pass. Users could easily add support to any material by monkey patching with `onBeforeCompile`. The biggest disadvantage of not being in the `renderer` core is that the `renderer` will still sort transparent objects. This could be avoided with the addition of a way to overwrite / disable transparent object sorting (https://github.com/mrdoob/three.js/pull/24809, https://github.com/mrdoob/three.js/issues/19305). This pass keeps it's own list of opaque / transparent objects and renders them separately by implementing a visibility cache (similar to [OutlinePass](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/postprocessing/OutlinePass.js)). This pass doesn't need access to internal `renderer` framebuffers, and does not use a depth texture (instead it re-uses the depth buffer of the current render target). In doing so it remains WebGL 1 compatible and mobile friendly. Newer phones will fall back to gl.HALF_FLOAT with roughly the same visual quality of gl.FLOAT. Older phones that don't support the writing to gl.FLOAT framebuffers will fall back to gl.UNSIGNED_BYTE, which works but doesn't look as nice. Live link: https://raw.githack.com/stevinz/three.js/wboit/examples/index.html?q=wboit#webgl_transparency_wboit

However, all PRs did not implement the feature properly yet.

Topic		Replies	Views
Order independent transparency Discussion geometry , shaders , transparency	9	4081	May 14, 2018
InstancedBufferGeometry and transparency? Questions instancing , transparency	5	1177	October 30, 2018
ShaderMaterial: make it hide itself Questions materials , shaders	4	2150	January 8, 2021
Does Three.js support additive blending for opaque? Questions blending	7	2797	March 23, 2022
Easiest way to set rendering order for transparent objects Questions transparency , render	3	5998	August 22, 2023

Order independent transparency (OIT)

Related topics