VREyeParameters.renderHeight — Eigenschaft · JavaScript-Referenz

Signatur

VREyeParameters.renderHeight

Beschreibung

Die schreibgeschützte Eigenschaft renderHeight des Interfaces VREyeParameters gehört zur veralteten WebVR-API. Sie liefert die vom VR-Headset empfohlene Höhe in Pixeln, mit der das Bild für ein Auge gerendert werden soll. Der Wert berücksichtigt die Linsenverzerrung, deshalb liegt er meist über der physischen Auflösung des Displays.

Sie erhalten das Objekt über VRDisplay.getEyeParameters("left") bzw. getEyeParameters("right"). Üblicherweise werden beide Augenbilder nebeneinander in ein gemeinsames <canvas> gezeichnet. Die Canvas-Breite ergibt sich dann aus der Summe beider renderWidth-Werte, die Höhe aus dem größeren der beiden renderHeight-Werte.

Typischerweise lesen Sie den Wert einmal vor dem Aufruf von VRDisplay.requestPresent() aus und stellen damit die Canvas-Größe ein. Ein zu kleines Renderziel macht das Bild unscharf, ein zu großes kostet Leistung und senkt die Bildrate.

Rückgabewert

Typ

number

Beschreibung

Empfohlene Renderhöhe des Augen-Viewports in Pixeln (vorzeichenlose Ganzzahl).

Beispiele

Renderhöhe des linken Auges auslesen

if (navigator.getVRDisplays) {
  const displays = await navigator.getVRDisplays();
  if (displays.length > 0) {
    const leftEye = displays[0].getEyeParameters('left');
    console.log(`Empfohlene Höhe: ${leftEye.renderHeight}px`);
  }
} else {
  console.log('WebVR wird nicht unterstützt.');
}

Empfohlene Höhe: 1440px

Canvas für Stereo-Rendering dimensionieren

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

const setupCanvas = (vrDisplay) => {
  const left = vrDisplay.getEyeParameters('left');
  const right = vrDisplay.getEyeParameters('right');

  // Beide Augen nebeneinander, Höhe = größerer Wert
  canvas.width = left.renderWidth + right.renderWidth;
  canvas.height = Math.max(left.renderHeight, right.renderHeight);
  console.log(`Canvas: ${canvas.width} x ${canvas.height}`);
};

const [vrDisplay] = await navigator.getVRDisplays();
if (vrDisplay) {
  setupCanvas(vrDisplay);
  await vrDisplay.requestPresent([{ source: canvas }]);
}

Canvas: 2560 x 1440

Modernes Gegenstück in WebXR

// WebXR ersetzt renderHeight durch Viewports der XRWebGLLayer
const session = await navigator.xr.requestSession('immersive-vr');
const gl = document.createElement('canvas').getContext('webgl', { xrCompatible: true });
const layer = new XRWebGLLayer(session, gl);
session.updateRenderState({ baseLayer: layer });

const refSpace = await session.requestReferenceSpace('local');
session.requestAnimationFrame((time, frame) => {
  const pose = frame.getViewerPose(refSpace);
  for (const view of pose?.views ?? []) {
    const vp = layer.getViewport(view);
    console.log(`${view.eye}: ${vp.width} x ${vp.height}`);
  }
});

left: 1280 x 1440 right: 1280 x 1440

// Wichtig · Fallstricke

Veraltet: Die WebVR-API ist obsolet und wurde durch die WebXR Device API ersetzt. Aktuelle Browser unterstützen sie praktisch nicht mehr. Für neue Projekte sollten Sie XRWebGLLayer.getViewport() bzw. XRWebGLLayer.framebufferHeight verwenden.
Prüfen Sie vor der Nutzung immer, ob die API vorhanden ist ('getVRDisplays' in navigator). Sonst kommt es zu einem TypeError.
Der Wert kann sich für linkes und rechtes Auge unterscheiden. Nehmen Sie für die Canvas-Höhe daher Math.max() beider Werte.
Der Wert ist eine Empfehlung. Auf schwacher Hardware können Sie ihn mit einem Faktor (z. B. 0,75) verkleinern und so Qualität gegen eine flüssigere Bildrate tauschen.
Die API erfordert einen sicheren Kontext (HTTPS), und in eingebetteten Frames kann sie durch Berechtigungsrichtlinien gesperrt sein.

Siehe auch

VREyeParameters VREyeParameters.renderWidth VREyeParameters.offset VRDisplay.getEyeParameters() VRDisplay.requestPresent() XRWebGLLayer.getViewport()