webxr

Purpose

WebXR is a web standard API that allows developers to create immersive AR and VR experiences directly in the browser, leveraging hardware like headsets and controllers without proprietary plugins. It unifies access to XR devices, enabling cross-platform compatibility for web applications.

When to Use

Use this skill for building interactive 3D web apps that require AR/VR, such as virtual tours, training simulations, or product visualizations. Apply it when targeting modern browsers on devices with XR support, like Oculus or ARKit-enabled iOS, to avoid native app development. Avoid it for 2D web content or environments without XR hardware.

Key Capabilities

• Access XR devices via navigator.xr to check availability and request sessions.
• Render immersive content using WebGL-based APIs for 3D scenes, including positional tracking and controller input.
• Support for both VR (fully immersive) and AR (overlaid on real world) modes, with features like hand tracking and spatial audio.
• Inline and immersive sessions: Inline for simple previews, immersive for full hardware takeover.
• Integration with Web APIs like Fetch for loading assets, ensuring seamless data handling in XR contexts.

Usage Patterns

Always start by checking if XR is supported: use if ('xr' in navigator) before proceeding. For VR, request an immersive session and set up a render loop with xrFrame updates. For AR, use the 'immersive-ar' mode and anchor content to real-world surfaces. Structure code with event listeners for session events (e.g., end, visibility change) and handle frame rendering in a requestAnimationFrame loop tied to XR. Test patterns in a browser with WebXR emulation enabled, like Chrome's flags.