How to create advanced GUI for WebXR?

Hello Dear Community!

I’m trying to create GUI for WebXR Player which can play 360 and FishEye videos. I would like to render GUI inside an immersive experience. Which is very similar to this screenshot. Imagine Play Button, VideoScrubber, and so on… :slight_smile:

So far what I understand creating 3d GUI is away. I was able to render one button and inside PlanePanel and interact with it using the oculus controller which is great!

However I have couple questions:

  1. How to set the size (width, height) of PlanePanel and add background color to it?
  2. How I can manipulate Button Position inside PlanelPanel (I’m looking for something that will work like position absolute in CSS).
  3. Is there ready solution for slider input for 3d GUI?

To repro this one, I guess a 2d GUI would better fit and you could probably rely on the new editor from @msDestiny14 to design it ?

@msDestiny14 will be able to help as she is our GUI queen :slight_smile:

1 Like

@sebavan I was researching 2d GUI and I was testing this approach Selector | Babylon.js Documentation

However, looks like 2d GUI is not working in immersive mode and I can use only 3d GUI.

Please correct me if I’m wrong because I would like to use 2d GUI which seems to be more advanced and simpler. If possible

it won t work in full screen but it should if you create the texture for a mesh and apply it to a plane, @RaananW might confirm.

I confirm! :slight_smile:

And I can also say that fullscreen UI is half-way there, as we already have a PR to integrate WebXR Layers. It’s still in draft, but once this is merged it will also be possible to use it for UI. But for now, attaching UI to a mesh is the simplest solution.

2 Likes

Thank you :slight_smile:

EDIT::

I would like to confirm that approach from @RaananW , @sebavan did work.

1 Like