Dual-translucent Gizmos

[viridia]

What problem does this solve or what need does it fill?

Gizmos often interpenetrate objects in the scene. In many cases, you'd like to see the entire gizmo, including the parts that are obscured by other objects, but you would also like to know where they penetrate.

What solution would you like?

A solution I have used many times in three.js is to make the gizmos render in two passes:

• The first pass has a relatively high opacity, and uses a Z-Test function of GREATER.
• The second pass has a lower opacity and uses a Z-Test function of LESS_OR_EQUAL.

This means that the parts of the gizmo which are not obscured by other object render brightly, but the parts which are obscured render dimly.

What alternative(s) have you considered?

Writing my own gizmo system, which I would prefer to avoid :)

Additional context

A screenshot from my three.js engine. Note how the lines for the physics colliders are dimmer in places where they are obscured by other objects in the scene: