VRLayerInit.leftBounds — Eigenschaft · JavaScript-Referenz

Signatur

VRLayerInit.leftBounds

Beschreibung

Die Eigenschaft leftBounds gehört zum Dictionary VRLayerInit der veralteten WebVR-API. Sie gibt an, welcher Ausschnitt des Quell-Canvas (source) im Headset als Bild für das linke Auge verwendet wird. Der Wert ist ein Array mit vier Gleitkommazahlen: [x, y, Breite, Höhe].

Die Angaben sind normierte Texturkoordinaten von 0.0 bis 1.0 und beziehen sich auf die gesamte Canvas-Fläche. Der Ursprung (0, 0) liegt oben links. Standardmäßig ist leftBounds [0.0, 0.0, 0.5, 1.0], also die linke Hälfte des Canvas. Das passende Gegenstück rightBounds hat den Standardwert [0.5, 0.0, 0.5, 1.0].

Brauchbar ist die Eigenschaft vor allem dann, wenn Sie eine eigene Anordnung im Canvas verwenden, zum Beispiel die Augen übereinander statt nebeneinander. Ein weiterer Anwendungsfall ist dynamische Auflösungsskalierung: Man rendert nur in einen Teil des Canvas und schreibt diesen Teilbereich in die Bounds. Das Dictionary übergeben Sie in einem Array an VRDisplay.requestPresent(). Die aktuell verwendeten Werte liest VRDisplay.getLayers() aus.

Parameter

Name	Typ	Default	Beschreibung
$leftBounds	Array<number> \| Float32Array	[0.0, 0.0, 0.5, 1.0]	Vier normierte Werte `[x, y, Breite, Höhe]` im Bereich `0.0`–`1.0`. Ein leeres Array oder ein fehlender Wert führt zum Standardwert.

Rückgabewert

Typ

Array<number>

Beschreibung

Die Texturgrenzen für das linke Auge als Array aus vier Gleitkommazahlen [x, y, Breite, Höhe].

Beispiele

Präsentation mit expliziten Standard-Bounds starten

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

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

  await vrDisplay.requestPresent([{
    source: canvas,
    leftBounds: [0.0, 0.0, 0.5, 1.0],  // linke Canvas-Hälfte
    rightBounds: [0.5, 0.0, 0.5, 1.0]  // rechte Canvas-Hälfte
  }]);
  console.log('Präsentation läuft');
};

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

Präsentation läuft

Aktuelle leftBounds über getLayers() auslesen

const logBounds = (vrDisplay) => {
  const [layer] = vrDisplay.getLayers();
  if (!layer) {
    console.log('Es wird gerade nichts präsentiert');
    return;
  }
  const [x, y, w, h] = layer.leftBounds;
  console.log(`Linkes Auge: x=${x}, y=${y}, Breite=${w}, Höhe=${h}`);
};

window.addEventListener('vrdisplaypresentchange', (e) => logBounds(e.display));

Linkes Auge: x=0, y=0, Breite=0.5, Höhe=1

Augen übereinander anordnen (Top/Bottom-Layout)

const presentTopBottom = async (vrDisplay, canvas) => {
  const leftEye = vrDisplay.getEyeParameters('left');
  const rightEye = vrDisplay.getEyeParameters('right');

  // Canvas so groß wie beide Augenbilder übereinander
  canvas.width = Math.max(leftEye.renderWidth, rightEye.renderWidth);
  canvas.height = leftEye.renderHeight + rightEye.renderHeight;

  await vrDisplay.requestPresent([{
    source: canvas,
    leftBounds: [0.0, 0.0, 1.0, 0.5],  // obere Hälfte
    rightBounds: [0.0, 0.5, 1.0, 0.5]  // untere Hälfte
  }]);
  // Beim Rendern den gl.viewport passend setzen:
  // links: (0, 0, width, height/2), rechts: (0, height/2, width, height/2)
};

// Wichtig · Fallstricke

Veraltet: WebVR wurde nie standardisiert und ist aus aktuellen Browsern entfernt worden. Unterstützt wurde die API nur in älteren Firefox-Versionen, im Oculus Browser, in Samsung Internet und in Chrome hinter einem Flag. Für neue Projekte ist die WebXR Device API gedacht (XRWebGLLayer, XRView, getViewport()).
Die Werte sind normiert und keine Pixel. Wer [0, 0, 1024, 1024] statt [0, 0, 0.5, 1] übergibt, bekommt eine verzerrte oder leere Darstellung. Ein Array mit einer anderen Länge als 4 (bzw. 0) kann in manchen Implementierungen einen Fehler auslösen.
Ohne WebGL-Viewport bewirkt leftBounds nichts. Die Werte müssen zu den gl.viewport()-Aufrufen beim Rendern passen, sonst zeigt jedes Auge den falschen Bildausschnitt.
Nachträgliche Änderungen am Objekt wirken nicht automatisch. Damit neue Bounds gelten, rufen Sie requestPresent() erneut mit den geänderten Layern auf.
requestPresent() muss aus einer Nutzergeste heraus aufgerufen werden, zum Beispiel aus einem Klick-Handler.

Siehe auch

VRLayerInit VRLayerInit.rightBounds VRLayerInit.source VRDisplay.requestPresent() VRDisplay.getLayers() XRWebGLLayer URLPattern.hasRegExpGroups