GUI in Vr Mode can't be click

https://www.babylonjs-playground.com/#UU7RQ#383
my button can’t be clicked in vr mode

Seems like there are no actions to the buttons. Am I missing something?

This is a part of my code,In htc focus’s firefox reality browser,if i click the button,i can see the buton in pressed state in normal mode,but in vr mode,i click the button and it never into pressed state.so i create this demo https://www.babylonjs-playground.com/#UU7RQ#383 ,it’s button are the same as my project(i open it in htc focus )

That might help (if you dont use the default experience):

https://doc.babylonjs.com/how_to/webxr#controller-input

Or:

https://doc.babylonjs.com/how_to/webvr_helper#gaze-and-interaction

I dont have a VR headset, so I can’t test ATM, sorry

Sorry! Seems like this will be the best way (found in the documentation):

https://doc.babylonjs.com/how_to/webxr#quickstart-and-migrating-from-webvr-to-webxr

This will, according to docs, Enable pointer selection from the XR controller (For clicking on buttons or gui elements). I guess enabling interactions will also do the trick. If not, do try using webXR (which is a bit more future proof than WebVR)

1 Like

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);
var gd = new BABYLON.GUI.Grid();
advancedTexture.addControl(gd);
var sendBtn = BABYLON.GUI.Button.CreateSimpleButton(“sendBtn”, “send”);
gd.addControl(sendBtn,0,1);
This code,button can’t be click in Vr mode ,

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);
var sendBtn = BABYLON.GUI.Button.CreateSimpleButton(“sendBtn”, “send”);
advancedTexture .addControl(sendBtn,0,1);
This code,button can be click,
I think Grid Intercept the onPointerClickObservable so i can’t click the button

Is it working natively? Because then it’s rather odd. the same events are being triggered when you click the mouse or your VR controller. Might be a z index issue. Could you share a playground with the scene working native but not in VR?

1 Like

In Vr mode ,My Controller’s Ray accross the gui,the end of Ray is not in the gui so my click is unuseful.

Will check that and let you know

https://www.babylonjs-playground.com/#GM1XMV#3 you can use this demo to test

I find this answer from forum,CreateFullscreenUI is not supported for webVR ,but AdvancedDynamicTexture.CreateForMesh can’t fix the gui in scene.

2 Likes

Trevor is wiser :grin:

Does this work now?

No,Use CreateFullscreenUI can make my UI as 2D UI in fixed position,when i move camera,the UI can’t be move,This is the effect I want,Use CreateForMesh,I can click the UI in vr mode,but UI will be move by camera…

That’s a matter of ux, but as Trevor said - it’s not supported in VR. You could use the forMesh in a static mesh, that should achieve the same effect, no?

thank you for your answer,but i don’t know static mesh’s mean.I try so many times but can’t achieve CreateFullscreenUI‘s effect

That would be a very quick implementation of CreateForMesh with a static mesh (a mesh that doesn’t move). Of course, you can attach the mesh to the camera to get the effect of “moving UI”, by setting the mesh’s parent to be the camera

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

3 Likes