Start · Sprachen · JavaScript · Referenz · VREyeParameters.offset

VREyeParameters.offset

Eigenschaft

Schreibgeschütztes <code>Float32Array</code> mit dem Versatz (x, y, z) in Metern vom Mittelpunkt zwischen den Augen zum Zentrum des jeweiligen Auges.

seit JavaScript WebVR 1.1 (veraltet, nie Baseline – ersetzt durch deprecated seit ja Kategorie: webapi

Signatur

VREyeParameters.offset

Beschreibung

Die schreibgeschützte Eigenschaft offset der Schnittstelle VREyeParameters gibt den Versatz vom Mittelpunkt zwischen den Augen des Benutzers zum Zentrum des linken bzw. rechten Auges an, gemessen in Metern. Der Wert ist ein Float32Array mit drei Komponenten [x, y, z].

Die x-Komponente entspricht dabei der halben Pupillendistanz (IPD): Beim linken Auge ist sie negativ, beim rechten positiv. y und z sind in der Praxis meist 0. Aus dem Betrag beider x-Werte lässt sich daher die gesamte IPD berechnen.

Man verwendet offset in stereoskopischen Renderern, um für jedes Auge eine eigene View-Matrix zu erzeugen: Die Kamera wird pro Auge um diesen Vektor verschoben, damit ein räumlicher Tiefeneindruck entsteht. Die Werte erhält man über VRDisplay.getEyeParameters("left") bzw. "right".

In WebVR 1.1 liefert VRDisplay.getFrameData() bereits fertige View-Matrizen (leftViewMatrix, rightViewMatrix), die den Augenversatz enthalten. offset ist daher vor allem für eigene Kameramodelle oder zur Anzeige der IPD nützlich.

Rückgabewert

Typ
Float32Array
Beschreibung
Ein Array mit drei Elementen [x, y, z] in Metern, das den Versatz des Augenzentrums vom Mittelpunkt zwischen den Augen beschreibt.

Beispiele

Augenversatz auslesen und Pupillendistanz berechnen

// Nur in Browsern mit WebVR-Unterstützung lauffähig
const showIpd = async () => {
  if (!navigator.getVRDisplays) {
    console.log('WebVR wird nicht unterstützt');
    return;
  }
  const [display] = await navigator.getVRDisplays();
  if (!display) return;

  const left = display.getEyeParameters('left');
  const right = display.getEyeParameters('right');

  console.log('Links:', Array.from(left.offset));
  console.log('Rechts:', Array.from(right.offset));

  const ipd = Math.abs(right.offset[0] - left.offset[0]);
  console.log(`Pupillendistanz: ${(ipd * 1000).toFixed(1)} mm`);
};

showIpd();
Links: [-0.032, 0, 0] Rechts: [0.032, 0, 0] Pupillendistanz: 64.0 mm

Eigene View-Matrix pro Auge verschieben

// Verschiebt eine 4x4-Kameramatrix (Spaltenmajor) um den Augenversatz
const eyeViewMatrix = (cameraMatrix, eyeParams) => {
  const [x, y, z] = eyeParams.offset;
  const m = new Float32Array(cameraMatrix);
  // View-Matrix = Inverse der Kamera: daher negativer Versatz
  m[12] -= x;
  m[13] -= y;
  m[14] -= z;
  return m;
};

const render = (display, camera) => {
  for (const eye of ['left', 'right']) {
    const params = display.getEyeParameters(eye);
    const view = eyeViewMatrix(camera, params);
    console.log(eye, view[12].toFixed(3));
  }
};
left 0.032 right -0.032

Feature-Erkennung mit WebXR-Fallback

const detectVr = async () => {
  if ('xr' in navigator) {
    const ok = await navigator.xr.isSessionSupported('immersive-vr');
    return ok ? 'WebXR' : 'keine VR';
  }
  if ('getVRDisplays' in navigator) return 'WebVR (veraltet)';
  return 'keine VR';
};

detectVr().then(console.log);
WebXR

// Wichtig · Fallstricke

  • Veraltet: Die gesamte WebVR-API ist obsolet und wurde aus allen aktuellen Browsern entfernt bzw. war nur hinter Flags oder in Firefox und Samsung Internet verfügbar. Für neue Projekte die WebXR Device API verwenden – dort entspricht XRView.transform bzw. XRView.viewMatrix dem Augenversatz.
  • Der Rückgabewert ist ein Float32Array, kein normales Array – für map mit Nicht-Zahlen oder JSON-Ausgabe vorher Array.from() nutzen.
  • Die Werte können sich zur Laufzeit ändern, z. B. wenn der Benutzer die IPD am Headset einstellt. Nicht einmalig zwischenspeichern, sondern regelmäßig (etwa pro Frame oder bei vrdisplaypresentchange) neu abfragen.
  • Die Einheit ist Meter – bei Szenen mit anderem Maßstab muss der Versatz entsprechend skaliert werden, sonst wirkt die Welt zu groß oder zu klein.
  • Der Zugriff funktioniert nur in sicheren Kontexten (HTTPS) und teilweise nur nach Benutzerinteraktion.