How to make a HUD (heads-up display) using depthWrite?

Questions
, ,
1

The Material docs hint at the possibility of making HUDs (f.e. 2D overlays) by modifying material.depthWrite. How would this be done?

2

I think it would make more sense to disable depthWrite and depthTest since elements of a heads-up display have no relation to the depth of the 3D scene.

The text in the documentation refers on the situation where you want to avoid z-fighting like in the following example. In combination with polygonOffset, a depthWrite value of false avoids flickering of overlaying splashes of color (or elements).

https://threejs.org/examples/webgl_decals.html

1 Like
3

A simple example of an interactive HUD with .depthTest of false.
https://jsfiddle.net/prisoner849/p9kk3u5g/

4

An interesting and maybe profitable way to look at things. Depth Write. Some Z factor. Nice. If the system had the values you needed in that buffer, all would be good. Just access, modify, and view. The truth is, you gonna create that on your own, if it’s important. Or you’re going to find another way.

5

So the strategy is to draw the regular scene objects first with depthTest on, then draw the HUD scene second with a second renderer.render() call while depthTest is off?

What about if the HUD has it’s own 3D objects and needs them to be rendered in the correct order?