I am building a VR Web app on unity and using the WebGL platform with the WebXR export. I am not doing much special at the moment except using the WebGLTemplate HTML file to request an XR session when the button is pressed, and the scene is not doing anything extra. Before, the VR experience would ask for permission from the browser then open the immersive-vr experience, but now it gets stuck on the loading pink/purple open world with the three dots loading.
I am looking through my commits and cannot find any change (breaking or otherwise) which separates the previous builds that ran from this one. Also there are no warnings or errors to help.
Here is the code I am using to request the XR experience. Also for reference, I am on Unity 6.3 (6000.3.19.f1) and used a scene based on the VR template.
// Source - https://stackoverflow.com/q/79918225
// Posted by Samson Afolabi
// Retrieved 2026-04-02, License - CC BY-SA 4.0
var script = document.createElement("script");
script.src = loaderUrl;
script.onload = () => {
createUnityInstance(canvas, config, (progress) => {
document.querySelector("#unity-progress-bar-full").style.width = 100 * progress + "%";
}).then((instance) => {
instat(instance);
}).catch((message) => {
alert(message);
});
};
document.body.appendChild(script);
let xr = null;
let xrSession = null;
let webxrPolyfill = null;
let enterVRButton = document.getElementById('entervr');
const instat = function (instance) {
unityInstance = instance;
xr = getXR();
if (xr) {
xr.isSessionSupported("immersive-vr").then((immersiveOK) => {
if (immersiveOK) {
enterVRButton.disabled = false;
enterVRButton.innerText = "VR Enabled";
} else {
enableVR(false);
}
})
} else {
enableVR(false);
}
}
enterVRButton.onclick = function () {
xr.requestSession("immersive-vr").then((session) => {
xrSession = session;
enableVR(true);
xrSession.onend = (event) => {
enableVR(false);
};
});
}
function enableVR(enabled) {
if (enabled) {
unityInstance.SendMessage("XREnabler", "Enable", 1);
} else {
unityInstance.SendMessage("XREnabler", "Enable", 0);
}
}
function getXR() {
let tempXR;
tempXR = navigator.xr;
if (!tempXR) {
webxrPolyfill = new WebXRPolyfill();
tempXR = webxrPolyfill;
}
return tempXR;
}