From c95414fe65102ab1a7da22cb7faae237bcb1f3bf Mon Sep 17 00:00:00 2001 From: Mark Lundin Date: Tue, 28 Oct 2025 16:08:57 +0000 Subject: [PATCH] Update XR setup instructions in user manual Added XR compatibility requirements and code example. --- .../user-manual/playcanvas-react/guide/xr.mdx | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/docs/user-manual/playcanvas-react/guide/xr.mdx b/docs/user-manual/playcanvas-react/guide/xr.mdx index f7c1c36a3af..e625359e7bf 100644 --- a/docs/user-manual/playcanvas-react/guide/xr.mdx +++ b/docs/user-manual/playcanvas-react/guide/xr.mdx @@ -13,10 +13,23 @@ PlayCanvas React makes it easy to add Virtual Reality (VR) and Augmented Reality To enable XR support in your React application, you'll need: -1. **XR Scripts** - Import the XR controller and navigation scripts from the PlayCanvas engine package -2. **Camera Setup** - Configure your camera entity with XR scripts attached -3. **XR Controls** - Add UI buttons to enter and exit XR sessions (WebXR requires user interaction) -4. **Secure Context** - Serve your app over HTTPS (or `localhost` during development) +1. **XR-Compatible Graphics Device** - Enable the `xrCompatible` flag when creating your application +2. **XR Scripts** - Import the XR controller and navigation scripts from the PlayCanvas engine package +3. **Camera Setup** - Configure your camera entity with XR scripts attached +4. **XR Controls** - Add UI buttons to enter and exit XR sessions (WebXR requires user interaction) +5. **Secure Context** - Serve your app over HTTPS (or `localhost` during development) + +### Enable XR Compatibility + +First, ensure your application's graphics device is XR-compatible by setting the `xrCompatible` flag: + +```tsx + + {/* Your XR content */} + +``` + +This tells the browser to create a WebGL context that's compatible with WebXR. Without this flag, XR features won't work. ## XR Scripts @@ -81,7 +94,7 @@ Here's a complete example with XR support, including buttons to enter AR/VR mode showDemo showControls={false} > - + @@ -90,7 +103,6 @@ Here's a complete example with XR support, including buttons to enter AR/VR mode :::tip -- Press **Escape** to exit an active XR session - XR availability depends on your device and browser support - Use a VR headset or AR-capable mobile device to test the full experience - During development, Chrome and Edge support WebXR emulation via DevTools