Ignore internal transparency of a mesh

[gkjohnson]

Finally, if performance and complexity are of little concern, I’ve occasionally seen people implement depth peeling with three.js, but this isn’t a feature built into the library at this time.

The cheaper, per-object version of depth peeling would just be implementing a depth prepass, which I think should be reasonably cheap as long as you’re not doing it with a ton of objects. Here’s an explanation and example:

Does anyone know how the "depth pre-pass" option of babylonjs is implemented?

For transparent objects you can add two versions of the transparent object to the scene with the same transform (or make a multi material mesh) with one material that writes only to depth first and one that draws the blended transparent object. Here’s a js fiddle showing how: With multiple overlapping transparent objects there are couple ways to do it. You could draw all transparent depth prepass objects first and then draw the blended materials afterward which will result in no transparent o…

Fundamentally it works like so:

• Draw the mesh once with just depth (discarded color) so the depth buffer is populated.
• Draw the mesh again with depthTest set to EqualDepth.

This adds a second draw call but with the fragment shader completely skipped. And compared to proper depth peeling this won’t require any full screen passes.

edit: A depth peeling demo I’d put together is also available in this repo. And another survey of other transparency techniques is available in this post.