# Webxr Ar Vr Development

> Use when building WebXR AR/VR experiences.

- Skill: `loopyluci/webxr-ar-vr-development` (Agent Skill)
- Install (CLI): `npx skillmds@latest add loopyluci/webxr-ar-vr-development`
- Raw SKILL.md: https://api.skillmd.com/api/skills/loopyluci/webxr-ar-vr-development/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- License: MIT
- Author: LoopyLuci (https://skillmd.com/u/loopyluci)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/loopyluci/webxr-ar-vr-development

---


# WebXR AR/VR Development

Building immersive AR/VR experiences with WebXR — from session management and spatial tracking through 3D rendering, hand input, and performance optimization.

## When to Use

- Building browser-based VR experiences
- Implementing AR features (object placement, face tracking)
- Creating cross-platform XR apps with Three.js or A-Frame
- Adding spatial UI and interactions

## WebXR Setup

```javascript
// Request XR session
async function startXR(mode = 'immersive-vr') {
    if (!navigator.xr) throw new Error('WebXR not supported');
    
    const session = await navigator.xr.requestSession(mode, {
        requiredFeatures: ['local-floor', 'hand-tracking']
    });
    
    session.addEventListener('end', () => { /* cleanup */ });
    return session;
}

// Animation loop with XR frame
function xrFrameCallback(time, frame) {
    const pose = frame.getViewerPose(referenceSpace);
    if (pose) {
        for (const view of pose.views) {
            // Render from each eye (left/right)
            renderer.render(scene, view.projectionMatrix, view.transform.matrix);
        }
    }
    session.requestAnimationFrame(xrFrameCallback);
}
```

## Verification Checklist

- [ ] WebXR feature detection (navigator.xr)
- [ ] VR/AR session mode selected appropriately
- [ ] Reference space type chosen (local, local-floor, bounded-floor, unbounded)
- [ ] Hand/controller input handled
- [ ] Performance: 90fps target, use instancing, LOD
- [ ] Graceful fallback when WebXR unavailable