latest

Author: slimbuck

src/index.ts

@@ -94,8 +94,8 @@ const createApp = async (canvas: HTMLCanvasElement, config: Config) => {
     const useWebGPU = config.renderer === 'webgpu';
 
     // Create the graphics device. The engine auto-appends WebGL2/null fallbacks
-    // when WebGPU isn't supported, so request xrCompatible so the WebGL fallback
-    // is also usable for AR/VR.
+    // when WebGPU isn't supported. Request xrCompatible so the device — WebGPU
+    // (via XRGPUBinding) or the WebGL fallback — is usable for AR/VR.
     const device = await createGraphicsDevice(canvas, {
         deviceTypes: useWebGPU ? ['webgpu'] : [],
         antialias: false,
@@ -262,8 +262,8 @@ const main = async (canvas: HTMLCanvasElement, settingsJson: any, config: Config
 
     camera.addComponent('camera');
 
-    // Initialize XR support (availability detection always runs so the UI can offer
-    // a reload into WebGL when the user requests AR/VR under WebGPU)
+    // Initialize XR support (any backend; when the current device can't host a
+    // session the UI can offer a reload into WebGL instead)
     initXr(global);
 
     // Initialize user interface

src/ui.ts

@@ -393,10 +393,11 @@ const initUI = (global: Global) => {
     const arChanged = () => dom.arMode.classList[state.hasAR ? 'remove' : 'add']('hidden');
     const vrChanged = () => dom.vrMode.classList[state.hasVR ? 'remove' : 'add']('hidden');
 
-    // XR sessions require a WebGL device. Under WebGPU, prompt the user to reload
-    // the viewer with the WebGL renderer before starting AR/VR. Use replace() so
-    // the renderer-switch reload doesn't add a back-button entry — important
-    // because the viewer often runs inside an iframe (e.g. superspl.at /scene).
+    // When a session can't start on the current (WebGPU) device but would work on
+    // WebGL, prompt the user to reload the viewer with the WebGL renderer before
+    // starting AR/VR. Use replace() so the renderer-switch reload doesn't add a
+    // back-button entry — important because the viewer often runs inside an
+    // iframe (e.g. superspl.at /scene).
     const reloadWithWebgl = () => {
         const reloadUrl = new URL(location.href);
         reloadUrl.searchParams.set('webgl', '');
@@ -411,10 +412,13 @@ const initUI = (global: Global) => {
     dom.xrModal.addEventListener('pointerdown', hideXrModal);
 
     const handleXrClick = (type: 'AR' | 'VR') => {
-        if (global.renderer !== 'webgl') {
-            showXrModal();
-        } else {
+        // Availability is backend-aware: when the session can start on the current
+        // device (WebGPU included), start it directly. Otherwise the button is only
+        // visible because the session would work on WebGL, so offer the reload.
+        if (global.app.xr.isAvailable(type === 'AR' ? 'immersive-ar' : 'immersive-vr')) {
             events.fire(type === 'AR' ? 'startAR' : 'startVR');
+        } else {
+            showXrModal();
         }
     };
 

src/xr.ts

@@ -1,8 +1,10 @@
 import {
     Color,
+    DEVICETYPE_WEBGL2,
     Entity,
     Quat,
     Vec3,
+    XrManager,
     type CameraComponent
 } from 'playcanvas';
 import { XrControllers } from 'playcanvas/scripts/esm/xr-controllers.mjs';
@@ -14,21 +16,31 @@ import { Global } from './types';
 const initXr = (global: Global) => {
     const { app, events, state, camera, renderer } = global;
 
-    state.hasAR = app.xr.isAvailable('immersive-ar');
-    state.hasVR = app.xr.isAvailable('immersive-vr');
-
-    // initialize ar/vr
-    app.xr.on('available:immersive-ar', (available) => {
-        state.hasAR = available;
-    });
-    app.xr.on('available:immersive-vr', (available) => {
-        state.hasVR = available;
-    });
+    // Engine availability is backend-aware (2.20+): under WebGPU a session is only
+    // reported available when it can start on the current device (browser exposes
+    // XRGPUBinding, e.g. Safari on Apple Vision Pro). A session the WebGPU device
+    // can't host may still run after reloading into WebGL, so keep the buttons
+    // visible then — the UI offers that reload when the session can't start directly.
+    let webglAR = false;
+    let webglVR = false;
+
+    const updateAvailable = () => {
+        state.hasAR = app.xr.isAvailable('immersive-ar') || webglAR;
+        state.hasVR = app.xr.isAvailable('immersive-vr') || webglVR;
+    };
 
-    // XR sessions require a WebGL device; under WebGPU we only expose availability so
-    // the UI can offer to reload the viewer in WebGL mode.
-    if (renderer !== 'webgl') {
-        return;
+    updateAvailable();
+    app.xr.on('available', updateAvailable);
+
+    if (renderer === 'webgpu') {
+        Promise.all([
+            XrManager.isDeviceSupported(DEVICETYPE_WEBGL2, 'immersive-ar'),
+            XrManager.isDeviceSupported(DEVICETYPE_WEBGL2, 'immersive-vr')
+        ]).then(([ar, vr]) => {
+            webglAR = ar;
+            webglVR = vr;
+            updateAvailable();
+        });
     }
 
     const parent = camera.parent as Entity;