VRFieldOfView — Schnittstelle · JavaScript-Referenz

Signatur

interface VRFieldOfView

Beschreibung

Die Schnittstelle VRFieldOfView gehört zur WebVR-API. Sie beschreibt, wie weit das Sichtfeld eines Auges in einem VR-Headset reicht. Das Sichtfeld wird nicht als einzelner Öffnungswinkel angegeben. Stattdessen gibt es vier einzelne Winkel in Grad, jeweils von der Blickachse (dem Mittelpunkt) aus gemessen: upDegrees, rightDegrees, downDegrees und leftDegrees. So lassen sich auch asymmetrische Sichtkegel abbilden, wie sie bei Headset-Linsen üblich sind. Dort ist das Sichtfeld zur Nase hin meist kleiner als zur Schläfe hin.

Ein Objekt dieser Schnittstelle legt man nicht selbst an. Man liest es über die Eigenschaft VREyeParameters.fieldOfView aus. Das zugehörige VREyeParameters-Objekt liefert VRDisplay.getEyeParameters('left') bzw. getEyeParameters('right'). Mit den Werten berechnet man die Projektionsmatrix für die Darstellung des jeweiligen Auges, etwa in WebGL.

Alle vier Eigenschaften sind schreibgeschützte number-Werte (Gleitkomma, in Grad):

VRFieldOfView.upDegrees: Winkel nach oben
VRFieldOfView.rightDegrees: Winkel nach rechts
VRFieldOfView.downDegrees: Winkel nach unten
VRFieldOfView.leftDegrees: Winkel nach links

In der Praxis braucht man VRFieldOfView fast nur noch, um alten Code zu pflegen. Die WebVR-API ist durch die WebXR Device API abgelöst. Dort liefert XRView.projectionMatrix die fertige Projektionsmatrix direkt, ein eigenes Sichtfeld-Objekt gibt es nicht mehr.

Rückgabewert

Typ

VRFieldOfView

Beschreibung

Man erhält das Objekt über VREyeParameters.fieldOfView. Es hat die vier schreibgeschützten Eigenschaften upDegrees, rightDegrees, downDegrees und leftDegrees (jeweils number, in Grad).

Beispiele

Sichtfeld beider Augen auslesen

const zeigeSichtfeld = async () => {
  if (!navigator.getVRDisplays) {
    console.log('WebVR wird von diesem Browser nicht unterstützt.');
    return;
  }

  const displays = await navigator.getVRDisplays();
  if (displays.length === 0) {
    console.log('Kein VR-Headset gefunden.');
    return;
  }

  const display = displays[0];
  for (const auge of ['left', 'right']) {
    const fov = display.getEyeParameters(auge).fieldOfView;
    console.log(`${auge}: oben ${fov.upDegrees}°, rechts ${fov.rightDegrees}°, ` +
                `unten ${fov.downDegrees}°, links ${fov.leftDegrees}°`);
  }
};

zeigeSichtfeld();

left: oben 50°, rechts 45°, unten 50°, links 52° right: oben 50°, rechts 52°, unten 50°, links 45°

Projektionsmatrix für WebGL aus dem Sichtfeld berechnen

// Berechnet eine 4x4-Projektionsmatrix (spaltenweise, wie in WebGL üblich)
const projektionAusFov = (fov, near, far) => {
  const grad = Math.PI / 180;
  const obenTan   = Math.tan(fov.upDegrees * grad);
  const untenTan  = Math.tan(fov.downDegrees * grad);
  const linksTan  = Math.tan(fov.leftDegrees * grad);
  const rechtsTan = Math.tan(fov.rightDegrees * grad);

  const xScale = 2 / (linksTan + rechtsTan);
  const yScale = 2 / (obenTan + untenTan);

  const m = new Float32Array(16);
  m[0]  = xScale;
  m[5]  = yScale;
  m[8]  = -((linksTan - rechtsTan) * xScale * 0.5);
  m[9]  = (obenTan - untenTan) * yScale * 0.5;
  m[10] = far / (near - far);
  m[11] = -1;
  m[14] = (far * near) / (near - far);
  return m;
};

// Test mit einem symmetrischen Sichtfeld von 45° in jede Richtung
const fov = { upDegrees: 45, downDegrees: 45, leftDegrees: 45, rightDegrees: 45 };
const matrix = projektionAusFov(fov, 0.1, 1000);
console.log(matrix[0].toFixed(3), matrix[5].toFixed(3));

1.000 1.000

Gesamtes Sichtfeld berechnen und auf WebXR ausweichen

const gesamtSichtfeld = (fov) => ({
  horizontal: fov.leftDegrees + fov.rightDegrees,
  vertikal: fov.upDegrees + fov.downDegrees
});

const starteVR = async () => {
  if ('xr' in navigator && await navigator.xr.isSessionSupported('immersive-vr')) {
    console.log('WebXR verfügbar – Projektion kommt aus XRView.projectionMatrix.');
    return;
  }
  if (navigator.getVRDisplays) {
    const [display] = await navigator.getVRDisplays();
    if (display) {
      const fov = display.getEyeParameters('left').fieldOfView;
      console.log('Linkes Auge (WebVR):', gesamtSichtfeld(fov));
    }
    return;
  }
  console.log('Weder WebXR noch WebVR verfügbar.');
};

starteVR();

WebXR verfügbar – Projektion kommt aus XRView.projectionMatrix.

// Wichtig · Fallstricke

Veraltet und kein Standard: Die WebVR-API und damit VRFieldOfView wurden nie standardisiert und sind überholt. Die meisten Browser haben WebVR entfernt oder nie ohne Flag angeboten. Firefox hat die Unterstützung mit Version 98 entfernt. Für neue Projekte ist die WebXR Device API (navigator.xr) zu verwenden.

Die Werte sind in Grad angegeben, nicht im Bogenmaß. Vor Math.tan() muss man sie mit Math.PI / 180 umrechnen.
Das Sichtfeld ist oft asymmetrisch und für das linke und das rechte Auge spiegelverkehrt. Man sollte also nicht einfach einen Winkel verdoppeln, sondern alle vier Werte getrennt verwenden.
Ältere Entwurfsfassungen hatten einen Konstruktor new VRFieldOfView(). In WebVR 1.1 gibt es ihn nicht mehr. Das Objekt erhält man nur über VREyeParameters.fieldOfView.
In WebVR 1.1 ist auch VREyeParameters.fieldOfView selbst als veraltet markiert. Empfohlen wurde dort stattdessen die Projektionsmatrix aus VRFrameData (leftProjectionMatrix/rightProjectionMatrix).
WebVR und WebXR funktionieren nur in einem sicheren Kontext (HTTPS). In Frames kann zusätzlich eine Berechtigungsrichtlinie (Permissions Policy) nötig sein.

Siehe auch

XRView Credential File FileList FileReader