Cross-Platform WebXR: Entwicklung für Quest, Vision Pro und Mobile

Spatial UI & Interaction Design for WebXR

Design principles and implementation patterns for building intuitive, accessible spatial user interfaces in WebXR — from layout and typography to gestures and feedback.

Plattformübergreifendes WebXR: Entwicklung für Quest, Vision Pro und Mobile

Das WebXR-Ökosystem im Jahr 2026 erstreckt sich über eine Vielzahl von Geräten – von der Meta Quest 3 und Apple Vision Pro bis hin zu mobilen AR-Handhelds und Desktop-VR-Headsets. Jede Plattform verfügt über einzigartige Funktionen, Eingabemethoden und Performance-Profile. Die Entwicklung von plattformübergreifendem WebXR erfordert einen Ansatz der progressiven Erweiterung (Progressive Enhancement) und keine Einheitslösung.

Die Gerätelandschaft 2026

Strategie zur Feature-Erkennung

Setzen Sie keine Funktionen voraus – erkennen Sie diese zur Laufzeit:

async function detectXRCapabilities() {
  if (!navigator.xr) return { supported: false, reason: "No WebXR" };

  const supportedModes = {
    inline: await navigator.xr.isSessionSupported("inline"),
    immersiveVR: await navigator.xr.isSessionSupported("immersive-vr"),
    immersiveAR: await navigator.xr.isSessionSupported("immersive-ar"),
  };

  // Detect specific features
  const features = {
    handTracking: supportedModes.immersiveVR && "hand-tracking" in XRSession.prototype,
    hitTest: "XRHitTestSource" in window,
    anchors: "XRAnchor" in window,
    depthSensing: "XRDepthInformation" in window,
    layers: "XRCompositionLayer" in window,
    eyeTracking: "XREye" in window,
  };

  return { supportedModes, features };
}

Architektur der progressiven Erweiterung

Schichten Sie die Funktionen von grundlegend bis fortgeschritten:

function XRApp() {
  const [capabilities, setCapabilities] = useState<XRCapabilities | null>(null);

  useEffect(() => {
    detectXRCapabilities().then(setCapabilities);
  }, []);

  if (!capabilities) return <LoadingScreen />;
  if (!capabilities.supportedModes.immersiveVR && !capabilities.supportedModes.immersiveAR) {
    return <Fallback3DView />;
  }

  return (
    <XRRenderer capabilities={capabilities}>
      <SpatialUI inputMethod={detectInputMethod(capabilities)} />
      <SceneGraph quality={selectQuality(capabilities)} />
    </XRRenderer>
  );
}

Input-Abstraktionsschicht

Abstrahieren Sie die Eingabe, damit die UI-Logik nicht vom Gerät abhängt:

type XRInputEvent = {
  position: THREE.Vector3;
  direction?: THREE.Quaternion;
  type: "select" | "squeeze" | "pinch" | "gaze" | "touch";
  source: "controller" | "hand" | "gaze" | "screen";
};

function createInputManager(capabilities: XRCapabilities) {
  const input$ = new Subject<XRInputEvent>();

  if (capabilities.features.handTracking) {
    setupHandTracking(input$);
  }
  if (capabilities.supportedModes.immersiveVR) {
    setupControllers(input$);
  }
  // Always add gaze fallback
  setupGazeInput(input$);

  return input$;
}

Gerätespezifische Optimierungen

Meta Quest 3

Die Quest bietet einen exzellenten WebXR-Support, verfügt jedoch über eine begrenzte GPU. Zentrale Strategien:

// Quest-specific optimization: fixed foveated rendering
const xrSession = await navigator.xr.requestSession("immersive-vr", {
  optionalFeatures: ["foveation"],
});
if (xrSession.updateRenderState) {
  xrSession.updateRenderState({
    foveationLevel: 0.5, // 0=off, 1=maximum
  });
}

Nutzen Sie Passthrough AR auf der Quest 3 für Mixed-Reality-Erlebnisse:

const session = await navigator.xr.requestSession("immersive-ar", {
  optionalFeatures: ["passthrough"],
});

Apple Vision Pro

Vision Pro Safari 18 supports WebXR with unique constraints:

// Vision Pro: use eye tracking for precision targeting
const eyeGazeSource = await session.requestReferenceSpace("local");
const eyeTracker = await session.requestAnimationFrame((time, frame) => {
  const pose = frame.getPose(eyeGazeSpace, referenceSpace);
  if (pose) highlightTarget(pose.transform.position);
});

// Vision Pro: handle direct touch input
element.addEventListener("touchstart", (e) => {
  // Vision Pro reports touches as pointer events from eye + pinch
});

Key Vision Pro considerations:

• No controllers — design for hands + eyes + voice
• Limited draw calls (~50 for comfort) — VisionOS compositor handles windowed apps
• Chromatic aberration — avoid thin bright lines at display edges

Mobile AR (iOS/Android)

Mobile AR is the widest reach but most constrained:

if (sessionMode === "immersive-ar" && isMobileDevice()) {
  // Mobile AR: flat surface placement is the primary interaction
  session.requestHitTestSource({ space: viewerSpace });
  // Limit draw calls to ~30
  // Use half-resolution rendering
  gl.setSize(window.innerWidth / 2, window.innerHeight / 2);
}

Rendering Quality Ladder

Scale rendering quality based on device capability:

function selectQuality(device: XRCapabilities): QualitySettings {
  const gpuTier = detectGPUTier();

  if (gpuTier === "high") {
    return { pixelRatio: 1, shadows: true, postProcessing: true, msaa: 4 };
  }
  if (gpuTier === "medium") {
    return { pixelRatio: 0.75, shadows: false, postProcessing: false, msaa: 2 };
  }
  // Low-end (mobile)
  return { pixelRatio: 0.5, shadows: false, postProcessing: false, msaa: 1 };
}

CI/CD for Cross-Platform Testing

Test across devices in CI:

jobs:
  webxr-test:
    strategy:
      matrix:
        device: [quest-3, vision-pro, mobile-ios, mobile-android]
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run build
      - uses: WebXR-Test/action@v2
        with:
          device: ${{ matrix.device }}
          url: https://staging.example.com/xr-app
          tests: tests/webxr/

Fallback for Non-WebXR Browsers

Always provide a non-XR experience:

function Fallback3DView() {
  return (
    <div className="relative h-screen w-full">
      <canvas ref={canvasRef} /> {/* Three.js fallback */}
      <div className="absolute bottom-8 left-1/2 -translate-x-1/2">
        <p className="text-sm text-gray-500">
          WebXR not supported on this device. View the 3D scene in your browser instead.
        </p>
      </div>
    </div>
  );
}

Testing-Checkliste

Bevor Sie plattformübergreifendes XR veröffentlichen:

• Feature-Detection wird vor der Session-Anfrage ausgeführt
• Alle Eingabetypen funktionieren: Controller, Hand, Gaze, Touch
• UI ist auf Quest (niedrigerer PPI) und Vision Pro (höherer PPI) lesbar
• Performance bleibt auf dem Zielgerät über 72fps
• Fallback-3D-Ansicht funktioniert ohne WebXR
• Barrierefreiheit: Sprach- und Tastaturnavigation funktionieren
• Session-Wiederherstellung bei Suspend/Resume

Nächste Schritte

• Erfahren Sie mehr über spatial UI design patterns für plattformübergreifende Interfaces
• Erkunden Sie AI-assisted XR toolchains für eine schnellere Entwicklung
• Lesen Sie die WebXR Performance Optimization für gerätespezifisches Tuning

Plattformübergreifendes WebXR im Jahr 2026 bedeutet, eine größere Auswahl an Geräten als je zuvor zu unterstützen. Testen Sie auf echter Hardware, nicht nur mit Emulatoren.