[Solved] Options for a HUD overlay on top of a 3D scene

[KevinG]

I'm working on a 3D interface which will leverage WebVR which means that everything needs to be done inside of a single canvas element.  The interface uses a FreeCamera to move around, but I'd like to also draw a HUD on top of the content.

My current thoughts were that I could draw elements to a second scene, and layer that on top of the 3D scene. Is the second scene even necessary? Is there some way to lock a HUD element in place so it doesn't move when the camera moves? Thanks!

[KevinG]

I did just see BABYLON.ScreenSpaceCanvas2D, would you be able to effectively use that on top of a 3D world to create a game HUD?

[gryff]

@KevinG : welcome to the forum

Simplest way that I know of creating an HUD interface is like this example:

DNA Example

It just parents the "buttons" to the camera.

Here is a Playground example of parenting a simple pair of buttons

cheers, gryff

[GameMonetize]

yes Canvas2D is meant to be used as a HUD on top of 3D: http://doc.babylonjs.com/overviews/Canvas2D_Home

[dbawel]

I personally use a seperate canvas for GUI elements, as I find problems in parenting elements to the camera such as gimble lock and "flipping" if your camera is animated. Creating a seperate "game" canvas has been the best solution for me personally.

DB

[KevinG]

Two canvases can be easier to manage, unfortunately for VR games you can only send a single canvas to the HMD.

Thanks for the tips all, for now ScreenSpaceCanvas2D seems like it might be the best bet. The problem I'm running into now is figuring out how to draw 3d game objects inside of ScreenSpaceCanvas2D so I can re-use game objects inside of menus.