HMDVRDevice.getEyeParameters() — Methode · JavaScript-Referenz

Signatur

HMDVRDevice.prototype.getEyeParameters(whichEye)

Beschreibung

Die Methode getEyeParameters() der Schnittstelle HMDVRDevice liefert die aktuellen optischen Parameter für ein Auge eines Head-Mounted-Displays. Das Auge gibst du als Zeichenkette an, also "left" oder "right". Zurück kommt ein VREyeParameters-Objekt.

Das Objekt enthält unter anderem:

minimumFieldOfView, maximumFieldOfView, recommendedFieldOfView und currentFieldOfView: jeweils ein VRFieldOfView mit upDegrees, rightDegrees, downDegrees und leftDegrees.
eyeTranslation: ein DOMPoint mit dem Versatz des Auges zur Kopfmitte in Metern. Die x-Komponente entspricht etwa dem halben Augenabstand (IPD).
renderRect: ein DOMRect, das angibt, in welchen Bereich der Zeichenfläche das Bild für dieses Auge gerendert werden soll.

Du brauchst diese Werte für stereoskopisches Rendern. Aus ihnen baust du für jedes Auge eine eigene Projektionsmatrix und View-Matrix und legst die Canvas-Größe fest. Ruf die Methode erneut auf, nachdem du mit setFieldOfView() das Sichtfeld geändert hast, denn currentFieldOfView und renderRect können sich dadurch ändern.

Diese Schnittstelle gehört zur frühen, experimentellen WebVR-Fassung (0.x). Sie wurde zuerst durch VRDisplay.getEyeParameters() (WebVR 1.1) ersetzt und inzwischen vollständig durch die WebXR Device API.

Parameter

Name	Typ	Default	Beschreibung
$whichEye Pflicht	"left" \| "right"		Das Auge, dessen Parameter du abfragen willst: `"left"` oder `"right"`.

Rückgabewert

Typ

VREyeParameters

Beschreibung

Ein Objekt mit Sichtfeld-Angaben (minimumFieldOfView, maximumFieldOfView, recommendedFieldOfView, currentFieldOfView), dem Augenversatz eyeTranslation und dem Render-Bereich renderRect.

Beispiele

Headset finden und Parameter des linken Auges auslesen

const findHmd = async () => {
  if (!navigator.getVRDevices) {
    console.log('WebVR 0.x wird nicht unterstützt');
    return null;
  }
  const devices = await navigator.getVRDevices();
  return devices.find((d) => d instanceof HMDVRDevice) ?? null;
};

const hmd = await findHmd();
if (hmd) {
  const left = hmd.getEyeParameters('left');
  const fov = left.currentFieldOfView;
  console.log(`Sichtfeld links: oben ${fov.upDegrees}°, unten ${fov.downDegrees}°`);
  console.log(`Augenversatz x: ${left.eyeTranslation.x} m`);
}

Sichtfeld links: oben 53.09°, unten 53.09° Augenversatz x: -0.032 m

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

const sizeCanvasForHmd = (hmd, canvas) => {
  const left = hmd.getEyeParameters('left');
  const right = hmd.getEyeParameters('right');

  // Beide Augen liegen nebeneinander auf einer Zeichenfläche
  canvas.width = left.renderRect.width + right.renderRect.width;
  canvas.height = Math.max(left.renderRect.height, right.renderRect.height);

  return { left, right };
};

const canvas = document.querySelector('#vr-canvas');
const { left, right } = sizeCanvasForHmd(hmd, canvas);
console.log(canvas.width, canvas.height);

1920 1080

Projektionsmatrix aus dem Sichtfeld erzeugen

const deg2rad = (d) => (d * Math.PI) / 180;

const projectionFromFov = (fov, near = 0.1, far = 1000) => {
  const up = Math.tan(deg2rad(fov.upDegrees));
  const down = Math.tan(deg2rad(fov.downDegrees));
  const leftT = Math.tan(deg2rad(fov.leftDegrees));
  const rightT = Math.tan(deg2rad(fov.rightDegrees));
  const xScale = 2 / (leftT + rightT);
  const yScale = 2 / (up + down);

  // Matrix in Spaltenreihenfolge für WebGL
  return new Float32Array([
    xScale, 0, 0, 0,
    0, yScale, 0, 0,
    -((leftT - rightT) * xScale * 0.5), (up - down) * yScale * 0.5, far / (near - far), -1,
    0, 0, (far * near) / (near - far), 0
  ]);
};

const eye = hmd.getEyeParameters('right');
const projection = projectionFromFov(eye.currentFieldOfView);
console.log(projection.length);

16

// Wichtig · Fallstricke

Veraltet und nicht standardisiert: HMDVRDevice und navigator.getVRDevices() gab es nur in experimentellen Builds, etwa in Firefox Nightly und speziellen Chromium-Builds. Aktuelle Browser unterstützen sie nicht mehr. Für neuen Code nimm die WebXR Device API, also navigator.xr.requestSession() und XRView mit projectionMatrix.

Prüfe vorher, ob die API existiert ('getVRDevices' in navigator). Sonst wirft der Aufruf einen TypeError.
Nur HMDVRDevice-Instanzen haben diese Methode. Positionssensoren (PositionSensorVRDevice) haben sie nicht.
Die Werte können sich zur Laufzeit ändern, zum Beispiel nach setFieldOfView() oder wenn am Headset der Augenabstand verstellt wird. Speichere sie deshalb nicht dauerhaft zwischen.
In WebVR 1.1 heißt die Nachfolgemethode VRDisplay.getEyeParameters(). Deren VREyeParameters hat eine andere Struktur: offset (ein Array), renderWidth und renderHeight.

Siehe auch

HMDVRDevice HMDVRDevice.setFieldOfView() VREyeParameters VRFieldOfView VRDisplay.getEyeParameters() XRView