VRLayerInit.rightBounds — Eigenschaft · JavaScript-Referenz

Signatur

VRLayerInit.rightBounds

Beschreibung

Die Eigenschaft rightBounds des Dictionarys VRLayerInit gibt an, welcher Ausschnitt der Quell-Leinwand (source) auf dem VRDisplay dem rechten Auge gezeigt wird. Der Wert ist ein Array mit genau vier Gleitkommazahlen im Format [x, y, breite, höhe]. Die Angaben beziehen sich auf den normierten Texturraum: 0.0 steht für den linken bzw. oberen Rand, 1.0 für den rechten bzw. unteren Rand der Leinwand.

Wenn man nichts angibt, gilt [0.5, 0.0, 0.5, 1.0], also die rechte Hälfte der Leinwand. Das passt zum üblichen Side-by-Side-Rendering, bei dem die Szene nebeneinander für beide Augen in eine einzige Leinwand gezeichnet wird. Eigene Werte braucht man nur für abweichende Layouts, etwa wenn die Augen übereinander gerendert werden oder nur ein Teil der Leinwand genutzt wird (z. B. bei dynamischer Auflösungsskalierung).

Übergeben wird rightBounds in den Layer-Objekten, die man an VRDisplay.requestPresent() reicht. Liest man die aktiven Layer später über VRDisplay.getLayers() aus, enthält der Rückgabewert die tatsächlich verwendeten Grenzen. Das Gegenstück für das linke Auge ist VRLayerInit.leftBounds.

Rückgabewert

Typ

Array<number> | Float32Array

Beschreibung

Vier Zahlen [x, y, breite, höhe] im Bereich 0.0–1.0. Standardwert: [0.5, 0.0, 0.5, 1.0].

Beispiele

Präsentation mit expliziten Augengrenzen starten

const canvas = document.querySelector('#vr-canvas');
const [display] = await navigator.getVRDisplays();

// Klassisches Side-by-Side-Layout: links = linkes Auge, rechts = rechtes Auge
await display.requestPresent([{
  source: canvas,
  leftBounds: [0.0, 0.0, 0.5, 1.0],
  rightBounds: [0.5, 0.0, 0.5, 1.0]
}]);

console.log('Präsentation läuft:', display.isPresenting);

Präsentation läuft: true

Augen übereinander rendern (Top-Bottom-Layout)

const [display] = await navigator.getVRDisplays();
const canvas = document.createElement('canvas');
const eye = display.getEyeParameters('left');
canvas.width = eye.renderWidth;
canvas.height = eye.renderHeight * 2;

await display.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
}]);

Aktive Grenzen über getLayers() auslesen

const [display] = await navigator.getVRDisplays();
const canvas = document.querySelector('canvas');

await display.requestPresent([{ source: canvas }]);

const [layer] = display.getLayers();
// Ohne Angabe gilt der Standardwert
console.log(Array.from(layer.rightBounds));

[0.5, 0, 0.5, 1]

// Wichtig · Fallstricke

Veraltet: Die WebVR-API ist abgekündigt und wurde durch die WebXR Device API ersetzt. Aktuelle Browser unterstützen sie praktisch nicht mehr. Früher lief sie nur in alten Firefox-Versionen, in Chrome für Android hinter einem Flag und im Samsung Internet. Für neue Projekte XRWebGLLayer und XRView/XRViewport verwenden.

Das Array muss genau vier Werte enthalten. Andere Längen führen dazu, dass requestPresent() mit einem Fehler abgelehnt wird.
Die Werte sind normiert (0–1), nicht in Pixeln. Pixelmaße muss man vorher durch canvas.width bzw. canvas.height teilen.
Ob der Ursprung oben links liegt, war zwischen Implementierungen nicht immer einheitlich. Deshalb Top-Bottom-Layouts auf dem Zielgerät testen.
Die Grenzen nach dem Start zu ändern, erfordert einen erneuten Aufruf von requestPresent() mit neuen Layern.

Siehe auch

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