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:
// Hopefully the browsers will catch up
if (typeof window !== "undefined") {
if (window.location && window.location.protocol === "http:") {
Tools.Warn("WebXR can only be served over HTTPS");
}
}
if (options.customButtons) {
this._buttons = options.customButtons;
} else {
const sessionMode = options.sessionMode || "immersive-vr";
const referenceSpaceType = options.referenceSpaceType || "local-floor";
const url = !window.SVGSVGElement
? "https://cdn.babylonjs.com/Assets/vrButton.png"
: "data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%222048%22%20height%3D%221152%22%20viewBox%3D%220%200%202048%201152%22%20version%3D%221.1%22%3E%3Cpath%20transform%3D%22rotate%28180%201024%2C576.0000000000001%29%22%20d%3D%22m1109%2C896q17%2C0%2030%2C-12t13%2C-30t-12.5%2C-30.5t-30.5%2C-12.5l-170%2C0q-18%2C0%20-30.5%2C12.5t-12.5%2C30.5t13%2C30t30%2C12l170%2C0zm-85%2C256q59%2C0%20132.5%2C-1.5t154.5%2C-5.5t164.5%2C-11.5t163%2C-20t150%2C-30t124.5%2C-41.5q23%2C-11%2042%2C-24t38%2C-30q27%2C-25%2041%2C-61.5t14%2C-72.5l0%2C-257q0%2C-123%20-47%2C-232t-128%2C-190t-190%2C-128t-232%2C-47l-81%2C0q-37%2C0%20-68.5%2C14t-60.5%2C34.5t-55.5%2C45t-53%2C45t-53%2C34.5t-55.5%2C14t-55.5%2C-14t-53%2C-34.5t-53%2C-45t-55.5%2C-45t-60.5%2C-34.5t-68.5%2C-14l-81%2C0q-123%2C0%20-232%2C47t-190%2C128t-128%2C190t-47%2C232l0%2C257q0%2C68%2038%2C115t97%2C73q54%2C24%20124.5%2C41.5t150%2C30t163%2C20t164.5%2C11.5t154.5%2C5.5t132.5%2C1.5zm939%2C-298q0%2C39%20-24.5%2C67t-58.5%2C42q-54%2C23%20-122%2C39.5t-143.5%2C28t-155.5%2C19t-157%2C11t-148.5%2C5t-129.5%2C1.5q-59%2C0%20-130%2C-1.5t-148%2C-5t-157%2C-11t-155.5%2C-19t-143.5%2C-28t-122%2C-39.5q-34%2C-14%20-58.5%2C-42t-24.5%2C-67l0%2C-257q0%2C-106%2040.5%2C-199t110%2C-162.5t162.5%2C-109.5t199%2C-40l81%2C0q27%2C0%2052%2C14t50%2C34.5t51%2C44.5t55.5%2C44.5t63.5%2C34.5t74%2C14t74%2C-14t63.5%2C-34.5t55.5%2C-44.5t51%2C-44.5t50%2C-34.5t52%2C-14l14%2C0q37%2C0%2070%2C0.5t64.5%2C4.5t63.5%2C12t68%2C23q71%2C30%20128.5%2C78.5t98.5%2C110t63.5%2C133.5t22.5%2C149l0%2C257z%22%20fill%3D%22white%22%20/%3E%3C/svg%3E%0A";
var css =
".babylonVRicon { color: #868686; border-color: #868686; border-style: solid; margin-left: 10px; height: 50px; width: 80px; background-color: rgba(51,51,51,0.7); background-image: url(" +
url +
"); background-size: 80%; background-repeat:no-repeat; background-position: center; border: none; outline: none; transition: transform 0.125s ease-out } .babylonVRicon:hover { transform: scale(1.05) } .babylonVRicon:active {background-color: rgba(51,51,51,1) } .babylonVRicon:focus {background-color: rgba(51,51,51,1) }";
css += '.babylonVRicon.vrdisplaypresenting { background-image: none;} .vrdisplaypresenting::after { content: "EXIT"} .xr-error::after { content: "ERROR"}';
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
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
For change AR/VR/XR icon in Babylon.JS you can just add in your main css file something like in my example:
.xr-button-overlay
{
bottom: auto !important;
top: calc(56px + 55vw - 42px - 20px) !important;
height: 42px !important;
width: 42px !important;
right: 12px !important;
}
.babylonVRicon
{
height: 42px !important;
width: 42px !important;
background-image: url(icon.png);
}
1 Like
by the way…
There should be an easier way cc @RaananW
This was posted somewhere else and was answered
sebavan
January 29, 2024, 9:39pm
10
