PixelPilot: Instructions file for GitHub Copilot

WebXR — AR/VR Web Experiences

The web is going spatial. This file covers WebXR fundamentals, AR try-on, VR product experiences, and immersive interfaces — with graceful fallbacks for the 99% of users who don't have headsets.

---

CRITICAL RULES

1. Fallback first — Every XR feature needs a 2D alternative.
2. Performance — XR must hit 72fps minimum. 90fps preferred.
3. Motion sickness — Follow comfort guidelines (no artificial locomotion).
4. Accessibility — Provide non-XR alternatives for all features.
5. Progressive enhancement — Detect support, enhance gracefully.

---

WEBXR SUPPORT DETECTION

// xrSupport.ts
interface XRSupport {
  immersiveVR: boolean;    // Full VR headset
  immersiveAR: boolean;    // AR headset or phone
  inlineAR: boolean;       // AR on phone screen
}

export async function checkXRSupport(): Promise<XRSupport> {
  const support: XRSupport = {
    immersiveVR: false,
    immersiveAR: false,
    inlineAR: false,
  };

  if (!('xr' in navigator)) {
    return support;
  }

  try {
    support.immersiveVR = await navigator.xr!.isSessionSupported('immersive-vr');
    support.immersiveAR = await navigator.xr!.isSessionSupported('immersive-ar');
    support.inlineAR = await navigator.xr!.isSessionSupported('inline');
  } catch (e) {
    console.warn('WebXR check failed:', e);
  }

  return support;
}

// React hook
export function useXRSupport() {
  const [support, setSupport] = useState<XRSupport | null>(null);

  useEffect(() => {
    checkXRSupport().then(setSupport);
  }, []);

  return support;
}

---

AR PRODUCT TRY-ON

Model Viewer (Quick Start)

Use Google's <model-viewer> for easy AR:

<!-- Include the library -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<!-- AR-enabled 3D model -->
<model-viewer
  src="/models/product.glb"
  alt="Product name - 3D view"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  shadow-intensity="1"
  poster="/images/product-poster.webp"
  loading="lazy"
>
  <!-- AR button (auto-shown when supported) -->
  <button slot="ar-button" class="ar-button">
    View in your space
  </button>
  
  <!-- Fallback for no AR -->
  <div slot="poster" class="poster">
    <img src="/images/product-poster.webp" alt="Product preview">
    <p>Loading 3D model...</p>
  </div>
</model-viewer>