How to make a GUI to follow the camera in XR/VR

Hi Everyone,

I want to ask about how to make a GUI can follow the camera. For example, when the camera moves by x, the GUI will also move by camera.position.x + 2. I include a video to make my question clearer. Maybe someone can include documentation or playground. thanks.

Displays gui from oculus touch input according to initial camera position.

When I move and I try to display the gui, the gui position remains the same as the beginning.

Is this any other than this -

Tracking position GUI for WebXR / VR ?

Also, an example would be great. You will probably need to realign the GUI, but will be great to see the code

Hi @RaananW,

I am always very grateful that you always reply to my questions. Next I will attach an example of my question and its playground. On my playground when when the Trigger button on the oculus quest controller is pressed, the GUI will appear.

Playground : https://playground.babylonjs.com/#61D37G#1

What I’m asking is located at 00:08 to 00:24

1 Like

So you are trying to achieve an HUD-Style GUI that will follow the camera wherever you go.
You could use a full-screen UI for that. This is our default GUI example with XR support and a bit of changes so that you will see it correctly in XR:

https://playground.babylonjs.com/#J8AGW2

This can get you started with building HUD-style GUI.

It will work better once this is merged - [XR] Babylon calculates the view matrix of the main camera by RaananW · Pull Request #8487 · BabylonJS/Babylon.js · GitHub , but the fullscreen GUI does work correctly

2 Likes

Thank you, I will try it

2 Likes

I got this look after running the Babylon.js Playground

Awesome, exactly what I was hoping you will see. This just shows that full screen UI works - notice the color picker that keeps on following you. Now you need to build the GUI as you see fit :slight_smile:

1 Like

But when I use it directly on Oculus, the appearance is divided into 2 parts and it makes me dizzy unlike normal 3D environments. And also I can’t interact with the color picker who follows my camera. Is there a way to overcome this?

I found a playground with the same example

https://www.babylonjs-playground.com/#GM1XMV#3

Got it! I will check why it happens on the quest. I was checking in an MR device and it was working correctly. Will get back to you on this one!

1 Like

Hi @RaananW,

I made a new playground about the topic above, it looks like I will make it like this. So I will make a GUI where every camera moves, I can display the GUI in front of my camera’s latest position with the keyboard button or the button on the oculus touch. I managed to make it with input from my keyboard button (I did console log on the camera to find out the latest camera position). But I was not able to do it using my oculus touch. GUI position is always in the initial position of the camera. It is as if the camera has not moved position and the value of the camera position has not changed when I press the button on my oculus touch. I included videos and related playgrounds. Maybe you can teach me to overcome this. Thank you very much

Playground : https://playground.babylonjs.com/#S1UH7X#3

Video 1 : Input from Keyboard

VIdeo 2 : input from Trigger Button Oculus Touch

Oh, this one is simple - you are referencing the wrong camera :slight_smile:

The XR camera is not the camera you create in the createScene, but a camera created in the xr experience helper. When you are moving the xr camera, the original camera’s position stays the same. To overcome this, either use the camera in the experience helper’s baseExperience , or use scene.activeCamera, which will always be the currently used camera.

Awesome! But If you don’t mind, can you give the example to the playground? I’m sorry I still don’t get it about this

Just change all references to camera with scene.activeCamera:

https://playground.babylonjs.com/#S1UH7X#4

1 Like

Oh I see, Thank you @RaananW

May I ask one more time? In the playground above, we can display the 3D GUI according to the camera position where gui.position = scene.active.camera.y - 1. So that the camera will always be on that axis even though the camera’s view is facing another axis. Is there a way for us to be able to display the GUI according to the viewpoint of the facing camera?

Sure, you can connect the GUI to the correct transform node:

https://playground.babylonjs.com/#S1UH7X#5

No need to set the position

1 Like

I just tried this on Oculus and I was amazed. Thank you very much for helping me. :smile: :smile: :+1: :+1:

2 Likes