A shader based HUD

Would making a hud using a fragment shader be significantly more efficient then using a canvas overlay? And what shader do I even put this in?

Should I use the effect composer for this?

Canvas overlay is surprisingly efficient. But there’s a handy third option: it’s really easy to use Three.js to render “2d” with OrthographicCamera. So do two renders per frame, one of your main scene with the PerspectiveCamera, one of your hud scene with OrthographicCamera—all in the same canvas!


No. If you want to render your UI based on WebGL, use instances of THREE.Sprite in order to create so called screen-space UI elements. @Jim outlined this approach in his post and it is demonstrated in the following example. Just check out how the red sprites are rendered:


However, many projects use HTML/CSS based UI elements since it’s easier to implement and style. Unfortunately, there are no real performance measurements comparing both approaches so it’s hard to quantify the performance differences.

If you put some crazy raymarching from shadertoy, it would definitely not be more effecient :slight_smile: