VRLayerInit — Schnittstelle · JavaScript-Referenz

Signatur

dictionary VRLayerInit { source, leftBounds, rightBounds }

Beschreibung

VRLayerInit ist ein Wörterbuch, also ein einfaches Objekt und keine Klasse, aus der WebVR-API. Es beschreibt eine Inhaltsschicht: ein HTMLCanvasElement oder OffscreenCanvas, dessen Inhalt auf einem VR-Headset angezeigt werden soll. Übergeben wird es als Array an VRDisplay.requestPresent(layers). Die aktuell verwendeten Schichten liefert VRDisplay.getLayers().

Das Canvas wird in der Regel mit einem WebGL-Kontext betrieben und in zwei Hälften geteilt: links das Bild für das linke Auge, rechts das Bild für das rechte Auge. Über leftBounds und rightBounds legen Sie fest, welcher Bereich der Textur zu welchem Auge gehört. Die Werte werden als Anteile von 0 bis 1 in der Form [x, y, Breite, Höhe] angegeben.

In der Praxis passt man die Canvas-Größe an VRDisplay.getEyeParameters() an, ruft requestPresent() innerhalb einer Benutzeraktion auf (zum Beispiel nach einem Klick) und rendert anschließend pro Bild über VRDisplay.requestAnimationFrame() und VRDisplay.submitFrame().

Wichtig: WebVR ist veraltet. Für neue Projekte ist die WebXR Device API zu verwenden, wo XRWebGLLayer diese Aufgabe übernimmt.

Parameter

Name	Typ	Default	Beschreibung
$source Pflicht	HTMLCanvasElement \| OffscreenCanvas \| null	null	Das Canvas, dessen Inhalt auf dem VR-Display angezeigt wird. Meist mit einem `webgl`- oder `webgl2`-Kontext.
$leftBounds	number[] (4 Werte)	[0.0, 0.0, 0.5, 1.0]	Textur-Bereich für das linke Auge als `[x, y, Breite, Höhe]`. Die Werte liegen jeweils zwischen 0 und 1.
$rightBounds	number[] (4 Werte)	[0.5, 0.0, 0.5, 1.0]	Textur-Bereich für das rechte Auge als `[x, y, Breite, Höhe]`. Die Werte liegen jeweils zwischen 0 und 1.

Rückgabewert

Typ

VRLayerInit

Beschreibung

Ein einfaches Objekt mit den Feldern source, leftBounds und rightBounds. Es wird an requestPresent() übergeben bzw. von getLayers() zurückgegeben.

Beispiele

Schicht anlegen und Präsentation starten

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

const startVR = async () => {
  if (!navigator.getVRDisplays) {
    console.log('WebVR wird nicht unterstützt');
    return;
  }
  const [display] = await navigator.getVRDisplays();
  if (!display) return;

  // Canvas-Größe an die Augen-Parameter anpassen
  const left = display.getEyeParameters('left');
  const right = display.getEyeParameters('right');
  canvas.width = Math.max(left.renderWidth, right.renderWidth) * 2;
  canvas.height = Math.max(left.renderHeight, right.renderHeight);

  /** @type {VRLayerInit} */
  const layer = { source: canvas };
  await display.requestPresent([layer]);
  console.log('Präsentation läuft:', display.isPresenting);
};

// requestPresent muss durch eine Benutzeraktion ausgelöst werden
document.querySelector('#enter-vr').addEventListener('click', startVR);

Präsentation läuft: true

Eigene Augen-Bereiche mit leftBounds/rightBounds

// Übereinander statt nebeneinander: oben linkes Auge, unten rechtes Auge
const layer = {
  source: document.querySelector('#vr-canvas'),
  leftBounds: [0.0, 0.0, 1.0, 0.5],
  rightBounds: [0.0, 0.5, 1.0, 0.5]
};

const [display] = await navigator.getVRDisplays();
await display.requestPresent([layer]);

Aktive Schichten auslesen

const [display] = await navigator.getVRDisplays();

if (display.isPresenting) {
  const [layer] = display.getLayers();
  console.log(layer.source.id, layer.leftBounds, layer.rightBounds);
}

vr-canvas [0, 0, 0.5, 1] [0.5, 0, 0.5, 1]

// Wichtig · Fallstricke

Veraltet: WebVR wurde nie standardisiert und ist durch die WebXR Device API ersetzt. Chrome und Firefox haben WebVR entfernt. Unterstützung gab es nur zeitweise, etwa in Firefox auf Windows, im Oculus- bzw. Samsung-Internet-Browser oder in Chrome hinter einem Flag. Für neue Projekte verwenden Sie navigator.xr und XRWebGLLayer.

Aktuell wird nur eine Schicht unterstützt. Weitere Einträge im Array an requestPresent() werden ignoriert oder führen zu einem Fehler.
requestPresent() wird ohne Benutzeraktion (zum Beispiel einen Klick) meist mit einem Fehler abgewiesen.
Ist source gleich null oder kein gültiges Canvas, wird das Promise abgelehnt.
Die Werte in leftBounds und rightBounds sind Anteile von 0 bis 1, keine Pixel.
Prüfen Sie immer, ob die API vorhanden ist, bevor Sie sie nutzen: 'getVRDisplays' in navigator.

Siehe auch

VRDisplay VRDisplay.requestPresent() VRDisplay.getLayers() VRDisplay.submitFrame() XRWebGLLayer HTMLCanvasElement OffscreenCanvas