VREyeParameters.renderWidth — Eigenschaft · JavaScript-Referenz

Signatur

VREyeParameters.renderWidth

Beschreibung

Die schreibgeschützte Eigenschaft renderWidth einer VREyeParameters-Instanz liefert die empfohlene Breite des Renderziels für ein einzelnes Auge in Pixeln. Die Headset-Hardware bzw. der Treiber ermittelt diesen Wert so, dass nach der Linsenverzerrungs-Korrektur in der Bildmitte etwa ein Pixel pro Displaypixel ankommt.

In der Praxis braucht man den Wert, um die Größe des <canvas> für die WebVR-Darstellung festzulegen. Linkes und rechtes Bild werden in WebVR 1.1 nebeneinander auf einer Leinwand gerendert. Die Canvas-Breite ergibt sich deshalb meist aus Math.max(left.renderWidth, right.renderWidth) * 2, die Höhe aus dem größeren renderHeight-Wert.

Die Parameter pro Auge bekommt man über VRDisplay.getEyeParameters("left") bzw. getEyeParameters("right"). Beide Augen haben oft dieselbe Breite, garantiert ist das aber nicht.

Wichtig: Die gesamte WebVR-API ist veraltet und aus allen aktuellen Browsern entfernt. Für neue Projekte nutzt man die WebXR Device API. Dort übernimmt XRWebGLLayer zusammen mit XRViewport diese Aufgabe.

Rückgabewert

Typ

number

Beschreibung

Empfohlene Breite des Renderziels für das jeweilige Auge in Pixeln (vorzeichenlose Ganzzahl).

Beispiele

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

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

const setupCanvas = async () => {
  if (!navigator.getVRDisplays) {
    console.warn('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 auf einer Leinwand
  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}`);
};

setupCanvas();

Canvas: 2664 x 1586

Viewports pro Auge in WebGL setzen

const renderEyes = (gl, display, drawScene) => {
  const left = display.getEyeParameters('left');
  const right = display.getEyeParameters('right');

  // Linkes Auge: linke Hälfte
  gl.viewport(0, 0, left.renderWidth, left.renderHeight);
  drawScene('left');

  // Rechtes Auge: direkt daneben
  gl.viewport(left.renderWidth, 0, right.renderWidth, right.renderHeight);
  drawScene('right');
};

Auflösung aus Performance-Gründen skalieren

const scaledSize = (eyeParams, scale = 0.75) => ({
  width: Math.round(eyeParams.renderWidth * scale),
  height: Math.round(eyeParams.renderHeight * scale)
});

// Angenommen: renderWidth = 1332, renderHeight = 1586
console.log(scaledSize({ renderWidth: 1332, renderHeight: 1586 }));

{ width: 999, height: 1190 }

// Wichtig · Fallstricke

Veraltet: WebVR (navigator.getVRDisplays, VRDisplay, VREyeParameters) war nie standardisiert und ist aus Chrome, Firefox und Edge entfernt. Stattdessen die WebXR Device API verwenden (XRWebGLLayer.getViewport(view)).
Vor der Nutzung immer prüfen, ob die API vorhanden ist ('getVRDisplays' in navigator). Nur so bekommt man in modernen Browsern eine saubere Rückfalllösung.
Der Wert ist eine Empfehlung. Man darf kleiner rendern, um Leistung zu sparen (z. B. auf Mobilgeräten), größer rendern bringt dagegen kaum sichtbaren Gewinn.
renderWidth hat nichts mit window.devicePixelRatio oder der CSS-Größe des Canvas zu tun. Setzt die Pixelgröße über canvas.width, nicht über CSS.
Die Werte können sich ändern, etwa wenn das Gerät gewechselt wird. Fragt sie deshalb bei vrdisplaypresentchange neu ab.

Siehe auch

VREyeParameters VREyeParameters.renderHeight VRDisplay.getEyeParameters() VREyeParameters.offset XRWebGLLayer XRViewport VRStageParameters.sizeY