2D UI in WebVR?

[dinod]

Total Babylon noob here looking for some help!

I'm working on a WebVR game and want to add in some 2D elements like a small "Press the A button to start" box.

How would I go about something like this? I've played around with Canvas2D but for some reason have only been able to get it to show the 2D element through one eye of my headset and have since scrapped that idea.

Any ideas for the best way to go about this would be much appreciated!  

 

[GameMonetize]

ping @davrous who (I think) tackled that already

[jschwuch]

I suspect you tried to use the screenSpaceCanvas. It's expected that it is only visible on "one" eye as it's positioned relative to the screen, which is "split in half" for VR, and not to the scene. I prepared an example utilizing the worldSpaceCanvas that shows canvas2D elements on both eyes

http://babylonjs-playground.com/index.html#NJBBC9

[davrous]

Hello,

Here is a small sample I've created: http://www.babylonjs-playground.com/#6PVF0Y#2 that shows how to:

- Use WebVRCamera with a fallback to DeviceOrientation camera for Cardboard/mobile support
- Use Canvas2D in World Space mode to integrate some 2D UI in VR

Should be a good starting point.

David

[davrous]

Here's one with some 3D assets loaded: http://www.babylonjs-playground.com/#6PVF0Y#5

[dinod]

Thanks so much everyone!! This is exactly what I needed.