Order independent transparency (OIT)

Never realized this was such a huge topic across technical circles. Including three.js over the years. This post is an attempt to just know the current state of this capability in three.js. Has it been implemented as a nice and conveniently callable feature?

Thanks much.


Is this OIT in action ?


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

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

I would not view OIT as a feature that is going to conveniently solve all transparency problems any time soon. Transparency remains hard in every game engine, including those developed by large companies with thousands of employees. It is simply a very hard problem in realtime graphics today.

Likely three.js will eventually offer an OIT implementation — like in the PR above — but it will be considerably slower than other transparency methods. So that is something you’ll have to weigh when considering it.

We have recently added support for alpha hashed transparency, which is also order-independent, and very cheap. The tradeoff with alpha hashed transparency is noise and grain, which is tolerable in some cases, or requires TRAA to reduce in other cases.

I couldn’t say whether the image above is OIT or not. It’s only really a concern with realtime renderers – with offline path-tracers, all transparency is order independent. So I guess we’d have to know more about the image.

1 Like