Loading XR::COSMOS...
“The WebXR Device API is the open standard interface connecting browsers directly to XR headsets (Apple Vision Pro, Meta Quest, HTC Vive). An application queries navigator.xr.isSessionSupported(), requests an XRSession (immersive-vr / immersive-ar), establishes an XRReferenceSpace, and executes an XRFrame render loop at native display refresh rates.”
Requesting immersive-vr or immersive-ar sessions, reference spaces, and the XR animation loop.
// Native WebXR Session Lifecycle
async function startXRSession() {
if (navigator.xr && await navigator.xr.isSessionSupported('immersive-vr')) {
const session = await navigator.xr.requestSession('immersive-vr');
const gl = canvas.getContext('webgl2', { xrCompatible: true });
await gl.makeXRCompatible();
session.updateRenderState({ baseLayer: new XRWebGLLayer(session, gl) });
const refSpace = await session.requestReferenceSpace('local-floor');
function onXRFrame(time, frame) {
session.requestAnimationFrame(onXRFrame);
const pose = frame.getViewerPose(refSpace);
if (pose) {
for (const view of pose.views) {
// Render Left Eye and Right Eye
}
}
}
session.requestAnimationFrame(onXRFrame);
}
}Query capability: navigator.xr.isSessionSupported("immersive-vr")
Request session: const session = await navigator.xr.requestSession("immersive-vr")
Obtain reference space: const refSpace = await session.requestReferenceSpace("local-floor")
Bind WebGL framebuffer to XRWebGLLayer
Execute render loop via session.requestAnimationFrame(onXRFrame)
Using local-floor reference space places origin [0,0,0] directly on the physical floor, ensuring virtual tables and objects match real-world gravity heights perfectly.