AR / WebXR

WEFA uses WebXR for augmented reality game play and creature interactions. AR is always optional — a non-AR 3D canvas fallback is always available.

Platform Support

Platform	AR Support	Fallback
Android Chrome	Full WebXR immersive-ar	N/A
iPad Safari	No WebXR	3D canvas with OrbitControls
Desktop browsers	No WebXR	3D canvas with OrbitControls

AR in Garden

The Garden view uses AR for two activities:

AR Nurture

Creature overlaid on camera feed with energy slider controls.

AR Evolution

Creature shown with glow effects during evolution confirmation.

AR in Games

The GameCanvas component handles both AR and non-AR rendering:

GameCanvas
├── Non-AR mode (default)
│   ├── <Canvas> with OrbitControls
│   ├── Background environment
│   └── Board + pieces rendered normally
│
└── AR mode (when WebXR available)
    ├── <XR> session wrapper
    ├── BoardPlacer (hit test → anchor on tap)
    ├── Board + pieces in anchored XR space
    └── GameHUD in <XRDomOverlay>

Board Placement

1. useXRHitTest renders a continuous ring indicator on detected surfaces
2. Player taps to place the board
3. useXRAnchor anchors the board position
4. Board and pieces render inside <XRSpace space={anchor.anchorSpace}>

XR Store

A shared XR store singleton configures the session:

createXRStore({
  planeDetection: true,
  anchors: true,
  domOverlay: true,
  screenInput: true,
  hand: false,          // not needed for board games
  meshDetection: false,
});

Feature Detection

// src/utils/feature-detect.ts
const arSupported = await navigator.xr?.isSessionSupported('immersive-ar');

The "Enter AR" button is hidden when AR is unsupported. The app never blocks functionality behind AR availability.

Key Files

• src/components/game/GameCanvas.tsx - AR/non-AR canvas wrapper
• src/components/game/BoardPlacer.tsx - AR surface detection and board anchoring
• src/components/game/BoardRenderer.tsx - 3D board meshes
• src/components/game/GamePiece.tsx - 3D/2D creature pieces
• src/components/game/GameHUD.tsx - AR DOM overlay HUD
• src/modules/xr-store.ts - Shared XR store singleton