How to create advanced GUI for WebXR?

Questions
,
1

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:

Zrzut ekranu 2021-11-24 o 12.08.05
Zrzut ekranu 2021-11-24 o 12.08.051920×485 62.5 KB

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?
2

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
3

@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

4

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.

5

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.

3 Likes
6

Thank you :slight_smile:

EDIT::

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

1 Like