VRDisplay.getEyeParameters() — Methode · JavaScript-Referenz

Signatur

VRDisplay.prototype.getEyeParameters(whichEye)

Beschreibung

Die Methode getEyeParameters() der veralteten WebVR-Schnittstelle VRDisplay liefert die Parameter, die man zum stereoskopischen Rendern eines Auges braucht. Übergeben wird dazu der String "left" oder "right". Das zurückgegebene VREyeParameters-Objekt enthält unter anderem offset (den Versatz des Auges zur Kopfmitte in Metern, grob die halbe Pupillendistanz) sowie renderWidth und renderHeight (die empfohlene Auflösung pro Auge in Pixeln).

Meist nutzt man die Methode, um die Größe des <canvas>-Elements festzulegen, bevor man mit requestPresent() die VR-Darstellung startet. Üblicherweise wird die Breite beider Augen addiert und für die Höhe der größere der beiden Werte genommen. Dann werden beide Augen nebeneinander in dieselbe Zeichenfläche gerendert.

Die Projektions- und Ansichtsmatrizen für jedes Bild holt man in WebVR 1.1 besser über VRFrameData und getFrameData(), denn das ältere fieldOfView aus VREyeParameters ist selbst schon veraltet. getEyeParameters() bleibt aber die Quelle für die empfohlene Renderauflösung.

Wichtig: Die gesamte WebVR-API ist veraltet und wurde durch die WebXR Device API ersetzt. Neue Projekte sollten navigator.xr, XRSession und XRView verwenden.

Parameter

Name	Typ	Default	Beschreibung
$whichEye Pflicht	"left" \| "right"		Das Auge, dessen Parameter abgefragt werden. Andere Werte führen zu einem `TypeError`, weil es sich um einen Enum-Wert (`VREye`) handelt.

Rückgabewert

Typ

VREyeParameters

Beschreibung

Ein Objekt mit den Eigenschaften offset (Float32Array mit 3 Werten in Metern), renderWidth, renderHeight (Pixel) und dem veralteten fieldOfView (VRFieldOfView).

Beispiele

Canvas-Größe für stereoskopisches Rendern festlegen

const canvas = document.querySelector('#vr-canvas');

const initVR = 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');

  // Beide Augen nebeneinander in einer Zeichenfläche
  canvas.width = Math.max(left.renderWidth, right.renderWidth) * 2;
  canvas.height = Math.max(left.renderHeight, right.renderHeight);
  console.log(`Canvas: ${canvas.width}x${canvas.height}`);
};

initVR();

Canvas: 2160x1200

Augenabstand (IPD) aus dem Offset ermitteln

const logIPD = async () => {
  const [display] = await navigator.getVRDisplays();
  const left = display.getEyeParameters('left');
  const right = display.getEyeParameters('right');

  // offset[0] ist der horizontale Versatz in Metern
  const ipd = Math.abs(right.offset[0] - left.offset[0]);
  console.log(`IPD: ${(ipd * 1000).toFixed(1)} mm`);
};

logIPD();

IPD: 64.0 mm

Viewports pro Auge beim Rendern mit WebGL

const renderEyes = (gl, display, drawScene) => {
  const frameData = new VRFrameData();
  display.getFrameData(frameData);

  const { renderWidth: w, renderHeight: h } = display.getEyeParameters('left');

  // Linkes Auge
  gl.viewport(0, 0, w, h);
  drawScene(frameData.leftProjectionMatrix, frameData.leftViewMatrix);

  // Rechtes Auge
  gl.viewport(w, 0, w, h);
  drawScene(frameData.rightProjectionMatrix, frameData.rightViewMatrix);

  display.submitFrame();
};

// Wichtig · Fallstricke

Veraltet: WebVR war nie ein Webstandard und wurde aus Chrome, Firefox und Edge entfernt (in Firefox war es zuletzt nur noch unter einem Flag verfügbar). Heute ist WebXR der richtige Weg. Dort bekommt man die Auflösung pro Auge über XRWebGLLayer.getViewport(view) und die Matrizen über XRView.projectionMatrix.
Die Werte können sich während der Laufzeit ändern, etwa wenn der Nutzer die IPD am Headset verstellt. Deshalb sollte man sie bei vrdisplaypresentchange neu auslesen.
fieldOfView im Rückgabeobjekt ist bereits in WebVR 1.1 veraltet. Für die Projektionsmatrizen VRFrameData verwenden.
Vor dem Aufruf per Feature-Erkennung prüfen ('getVRDisplays' in navigator). Ohne passende Hardware liefert getVRDisplays() ein leeres Array.
Die Ausgaben in den Beispielen sind beispielhaft. Die echten Werte hängen vom Headset ab.

Siehe auch

VRDisplay VREyeParameters VRDisplay.getFrameData() VRDisplay.requestPresent() Navigator.getVRDisplays() XRView VRDisplay.getImmediatePose()