webxr-ar-vr-expert

WebXR AR/VR Expert

English | Bahasa Indonesia

---

English

Orchestration & Integration

Connects and orchestrates with relevant domain skills like brainstorming, zero-to-prod-orchestrator, and project-context-mapper to ensure cohesive execution.

Description

Production-grade guidance for building immersive Augmented Reality (AR) and Virtual Reality (VR) experiences in the browser using the WebXR Device API. Focuses on implementation via Babylon.js (which has industry-leading WebXR support) and Three.js / React Three Fiber.

Trigger Conditions

Activate this skill when the user is:

• Building AR/VR experiences for Oculus/Meta Quest, Apple Vision Pro, or mobile AR devices.
• Setting up an immersive-vr or immersive-ar WebXR session.
• Implementing controller tracking, hand tracking, or teleportation in 3D space.
• Using AR Hit-Testing to place digital objects on physical surfaces (floors/tables).

Core Concepts

1. Babylon.js WebXR Setup

Babylon.js provides the most robust default WebXR experience.

import { Scene, FreeCamera, Vector3, Engine } from '@babylonjs/core';

async function setupXR(scene: Scene) {
  // Initialize default WebXR experience
  // This automatically adds the "Enter VR/AR" button, teleportation, and controller models
  const xr = await scene.createDefaultXRExperienceAsync({
    uiOptions: {
      sessionMode: 'immersive-vr', // or 'immersive-ar'
    },
    optionalFeatures: true
  });
  
  // Example: Listen for controller input
  xr.input.onControllerAddedObservable.add((controller) => {
    controller.onMotionControllerInitObservable.add((motionController) => {
      // Handle button presses
    });
  });
}

2. Three.js / React Three Fiber Setup

In R3F, use @react-three/xr.

import { Canvas } from '@react-three/fiber';
import { XR, createXRStore } from '@react-three/xr';

const store = createXRStore();

export default function App() {
  return (
    <>
      <button onClick={() => store.enterVR()}>Enter VR</button>
      <Canvas>
        <XR store={store}>
          <mesh>
            <boxGeometry />
            <meshBasicMaterial color="red" />
          </mesh>
        </XR>
      </Canvas>
    </>
  );
}