VRDisplay.getLayers() — Methode · JavaScript-Referenz

Signatur

VRDisplay.prototype.getLayers()

Beschreibung

Die Methode getLayers() der veralteten WebVR-Schnittstelle VRDisplay liefert die Ebenen (Layer), die aktuell auf dem VR-Headset dargestellt werden. Jede Ebene ist ein VRLayerInit-Objekt mit der Eigenschaft source (das <canvas>, in das gerendert wird) sowie optional leftBounds und rightBounds, die festlegen, welcher Teil der Leinwand dem linken bzw. rechten Auge zugeordnet ist.

Die Ebenen werden ursprünglich über VRDisplay.requestPresent(layers) übergeben. Mit getLayers() kann man nachträglich prüfen, welche Leinwand tatsächlich präsentiert wird und wie die Augenbereiche aufgeteilt sind – etwa zur Fehlersuche oder um das Rendering an die reale Konfiguration anzupassen.

Wird das Display gerade nicht präsentiert (VRDisplay.isPresenting === false), gibt die Methode ein leeres Array zurück. In der Praxis enthielt das Array bei allen Implementierungen höchstens einen Eintrag, da WebVR 1.1 nur eine einzige Ebene unterstützte.

Rückgabewert

Typ

Array<VRLayerInit>

Beschreibung

Array von VRLayerInit-Objekten ({ source, leftBounds, rightBounds }). leftBounds/rightBounds sind Arrays aus vier Zahlen [x, y, breite, höhe] im Bereich 0–1 (Standard: [0.0, 0.0, 0.5, 1.0] bzw. [0.5, 0.0, 0.5, 1.0]). Leeres Array, wenn nichts präsentiert wird.

Beispiele

Präsentierte Ebene nach requestPresent() auslesen

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

button.addEventListener('click', async () => {
  if (!navigator.getVRDisplays) {
    console.warn('WebVR wird nicht unterstützt.');
    return;
  }
  const [display] = await navigator.getVRDisplays();
  if (!display) return;

  // requestPresent() muss durch eine Benutzeraktion ausgelöst werden
  await display.requestPresent([{ source: canvas }]);

  const [layer] = display.getLayers();
  console.log('Quelle:', layer.source.id);
  console.log('Linkes Auge:', layer.leftBounds);
  console.log('Rechtes Auge:', layer.rightBounds);
});

Quelle: vr-canvas Linkes Auge: [0, 0, 0.5, 1] Rechtes Auge: [0.5, 0, 0.5, 1]

Leeres Array außerhalb der Präsentation

const checkLayers = async () => {
  const [display] = await navigator.getVRDisplays();
  if (!display) return;

  const layers = display.getLayers();
  console.log('Präsentiert:', display.isPresenting, '– Ebenen:', layers.length);
};

checkLayers();

Präsentiert: false – Ebenen: 0

Viewports für beide Augen aus den Ebenen-Grenzen berechnen

const getEyeViewports = (display) => {
  const [layer] = display.getLayers();
  if (!layer) return null;

  const { width, height } = layer.source;
  const toPixels = ([x, y, w, h]) => ({
    x: Math.round(x * width),
    y: Math.round(y * height),
    width: Math.round(w * width),
    height: Math.round(h * height)
  });

  return {
    left: toPixels(layer.leftBounds ?? [0, 0, 0.5, 1]),
    right: toPixels(layer.rightBounds ?? [0.5, 0, 0.5, 1])
  };
};

// Innerhalb der Render-Schleife, z. B. mit WebGL:
// const vp = getEyeViewports(display);
// gl.viewport(vp.left.x, vp.left.y, vp.left.width, vp.left.height);

// Wichtig · Fallstricke

Veraltet: Die gesamte WebVR-API (VRDisplay, navigator.getVRDisplays()) wurde nie standardisiert und ist aus allen aktuellen Browsern entfernt bzw. war nur hinter Flags oder in einzelnen Versionen von Firefox, Chrome für Android (Daydream) und Samsung Internet verfügbar. Für neue Projekte die WebXR Device API nutzen – dort übernimmt XRSession.updateRenderState({ baseLayer }) bzw. XRSession.renderState.baseLayer diese Rolle.

Vor dem Aufruf immer auf navigator.getVRDisplays prüfen (Feature-Detection), sonst kommt es zu einem TypeError.
Außerhalb der Präsentation ist das Ergebnis ein leeres Array – Destrukturierung wie const [layer] = … liefert dann undefined.
Die zurückgegebenen Objekte sind Kopien; Änderungen daran wirken sich nicht auf die Präsentation aus. Neue Ebenen müssen erneut per requestPresent() übergeben werden.
WebVR erfordert einen sicheren Kontext (HTTPS) und für requestPresent() eine Benutzeraktion.

Siehe auch

VRDisplay VRLayerInit XRSession VRDisplay.getPose() VRDisplay.getFrameData()