WebXR change Default Enter Exit Icons

Hi, I’m working with the latest version of Babylonjs WebXR. However, I haven’t been able to find anything about changing the default enterVR and exitVR icons. Searches in playground turn up older WebVR examples.

What is the correct procedure for changing these icons (and their styles) with const xrHelper = await scene.createDefaultXRExperienceAsync(vrHelperOptions);

I’ve tried some properties in the vrHelperOptions object - none from playground work.

Hi @Pete_Markiewicz, welcome to the forum!

There is an option to add custom buttons instead of the default one - Babylon.js/webXREnterExitUI.ts at master · BabylonJS/Babylon.js · GitHub . They need to have this type - Babylon.js/webXREnterExitUI.ts at master · BabylonJS/Babylon.js · GitHub and are added to the standard overlay, which is, at the moment, not configurable. You can see how we implement the default one here:

In the very near future I will add a css class to the overlay so that it will be fully css-able, and will expose it so that it can be changed using code as well.

Thanks! Will experiment -pete

This PR addresses the overlay issue - [XR] Expose HTML overlay and allow styling by RaananW · Pull Request #8755 · BabylonJS/Babylon.js · GitHub

1 Like

I think we corresponded a few years ago, when you were just putting WebVR into babylon. I wrote a simple engine, WebVR-mini (on github), mostly to explore how to make VR system that worked on all the browsers (including experimental Edge). But it’s much nicer to use an existing engine, rather than build all the WebGL stuff from scratch!

2 Likes