Aframe - How to render HUD on top of everything else

Question

The A-Frame camera docs say to create a HUD like this:

<a-entity camera look-controls>
  <a-entity geometry="primitive: plane; height: 0.2; width: 0.2" position="0 0 -1"
            material="color: gray; opacity: 0.5"></a-entity>
</a-entity>

However, this causes the HUD element to be clipped by in-game objects. Normally HUDs are rendered on a separate layer above all the other game objects. Is there a simple way to fix this?

Answer 1

You have to:

• Set renderer.sortObjects = true;
• Set a the render order of the entity this.el.object3D.renderOrder = 100;
• Disable the material depth test material.depthTest = false;

I created a simple overlay component that easily applies the above to any entity.

  AFRAME.registerComponent("overlay", {
        dependencies: ['material'],
        init: function () {
          this.el.sceneEl.renderer.sortObjects = true;
          this.el.object3D.renderOrder = 100;
          this.el.components.material.material.depthTest = false;
        }
  });

<a-entity camera look-controls wasd-controls position="0 1.6 0">
  <a-plane id="hud" overlay rotation="0 0 0" position="0 0 -2" width="1" height="1" color="purple" shadow></a-plane>
</a-entity>

Example on glitch