VRLayerInit.source — Eigenschaft · JavaScript-Referenz

Signatur

VRLayerInit.source

Beschreibung

Die Eigenschaft source gehört zum Dictionary VRLayerInit der veralteten WebVR-API. Damit gibst du die Zeichenfläche an, die VRDisplay.requestPresent() an das Headset weiterleitet. Normalerweise ist das ein HTMLCanvasElement mit WebGL-Kontext, in das die Szene für beide Augen nebeneinander gerendert wird: links das linke Auge, rechts das rechte.

Ein VRLayerInit-Objekt ist ein einfaches JavaScript-Objekt, keine Klasse mit Konstruktor. Neben source kann es leftBounds und rightBounds enthalten. Diese legen fest, welcher Bereich der Textur zu welchem Auge gehört. Mit VRDisplay.getLayers() kannst du die aktiven Ebenen später wieder auslesen. Ihr source verweist dann auf dasselbe Canvas.

Das Canvas sollte so groß sein, dass beide Augenbilder hineinpassen. Die empfohlene Größe ergibt sich aus VRDisplay.getEyeParameters(): renderWidth beider Augen addiert, dazu die größere der beiden renderHeight-Angaben. Nach jedem gerenderten Bild musst du VRDisplay.submitFrame() aufrufen, damit der Inhalt von source angezeigt wird.

Parameter

Name	Typ	Default	Beschreibung
$source Pflicht	HTMLCanvasElement \| OffscreenCanvas \| null	null	Das Canvas mit WebGL-Kontext, dessen Inhalt im Headset angezeigt wird.

Rückgabewert

Typ

HTMLCanvasElement | OffscreenCanvas | null

Beschreibung

Das Canvas, das als Quelle der VR-Ebene festgelegt ist. Ohne gesetzten Wert ist es null.

Beispiele

VR-Präsentation mit einem Canvas starten

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

const startVR = async () => {
  const displays = await navigator.getVRDisplays();
  if (!displays.length) {
    console.log('Kein VR-Gerät gefunden');
    return;
  }
  const vrDisplay = displays[0];

  // Canvas auf die empfohlene Größe für beide Augen setzen
  const left = vrDisplay.getEyeParameters('left');
  const right = vrDisplay.getEyeParameters('right');
  canvas.width = left.renderWidth + right.renderWidth;
  canvas.height = Math.max(left.renderHeight, right.renderHeight);

  // VRLayerInit mit source übergeben
  await vrDisplay.requestPresent([{ source: canvas }]);
  console.log('Präsentation läuft:', vrDisplay.isPresenting);
};

// requestPresent verlangt eine Nutzeraktion
document.querySelector('#enter-vr').addEventListener('click', startVR);

Präsentation läuft: true

Eigene Augenbereiche mit leftBounds/rightBounds

const layer = {
  source: document.querySelector('#vr-canvas'),
  leftBounds: [0.0, 0.0, 0.5, 1.0],  // linke Hälfte: linkes Auge
  rightBounds: [0.5, 0.0, 0.5, 1.0]  // rechte Hälfte: rechtes Auge
};

const enterVR = async (vrDisplay) => {
  await vrDisplay.requestPresent([layer]);
};

Aktive Quelle über getLayers() auslesen

const logActiveSource = (vrDisplay) => {
  const [layer] = vrDisplay.getLayers();
  if (layer) {
    console.log('Quelle:', layer.source.id);
    console.log('Gleiches Canvas?', layer.source === document.querySelector('#vr-canvas'));
  } else {
    console.log('Keine aktive Präsentation');
  }
};

window.addEventListener('vrdisplaypresentchange', async () => {
  const [display] = await navigator.getVRDisplays();
  logActiveSource(display);
});

Quelle: vr-canvas Gleiches Canvas? true

// Wichtig · Fallstricke

Veraltet: WebVR und damit VRLayerInit wurden nie standardisiert und sind aus allen aktuellen Browsern entfernt. Früher gab es die API in Firefox, in Chrome nur hinter einem Flag oder als Origin Trial und im Samsung Internet Browser. Für neue Projekte solltest du die WebXR Device API nutzen: navigator.xr.requestSession() zusammen mit XRWebGLLayer als Nachfolger dieser Ebenen-Konfiguration.

Hat das Canvas keinen WebGL-Kontext oder ist source nicht gesetzt, wird das Promise von requestPresent() abgelehnt.
requestPresent() muss aus einer Nutzeraktion heraus aufgerufen werden, zum Beispiel bei einem Klick. Sonst wird die Anfrage abgelehnt.
Die Spezifikation erlaubt derzeit nur eine Ebene. Weitere Einträge im Array werden ignoriert oder führen zu einem Fehler.
Ist das Canvas zu klein, sieht das Bild im Headset unscharf aus. Richte die Größe deshalb nach getEyeParameters().
Für ältere Browser gab es das Polyfill webvr-polyfill. Mit webxr-polyfill kann WebXR-Code auch auf Geräten laufen, die nur WebVR unterstützen.

Siehe auch

VRLayerInit VRLayerInit.leftBounds VRLayerInit.rightBounds VRDisplay.requestPresent() VRDisplay.getLayers() VRDisplay.submitFrame() XRWebGLLayer