XRMediaBinding: createQuadLayer()-Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig, bevor Sie diese produktiv verwenden.

Die createQuadLayer()-Methode der XRMediaBinding-Schnittstelle gibt ein XRQuadLayer-Objekt zurück, das eine Schicht ist, die einen flachen rechteckigen Raum in der virtuellen Umgebung einnimmt.

Syntax

js
createQuadLayer(video, options)

Parameter

video

Ein HTMLVideoElement, das angezeigt werden soll.

options

Ein Objekt zur Konfiguration der XRQuadLayer. Das Objekt kann die folgenden Eigenschaften haben, wobei space erforderlich ist:

height Optional

Eine Zahl, die die Höhe der Schicht angibt.

invertStereo Optional

Ein boolescher Wert, der angibt, ob die natürliche Position jeder Ansicht im Video invertiert werden soll. Standardmäßig false.

layout Optional

Ein String, der das Layout des Videos angibt. Mögliche Werte:

default

Die Schicht berücksichtigt alle Ansichten der Sitzung.

mono

Ein einzelnes XRSubImage wird zugewiesen und beiden Augen präsentiert.

stereo

Der User-Agent entscheidet, wie er das XRSubImage (eines oder zwei) zuweist und das Layout (oben/unten oder links/rechts) gestaltet. Es wird empfohlen, den texture-array-Texturtyp für stereo-Layouts zu verwenden.

stereo-left-right

Ein einzelnes XRSubImage wird zugewiesen. Das linke Auge erhält den linken Bereich der Textur, das rechte Auge den rechten. Dieses Layout ist darauf ausgelegt, Zeichnungsaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (zum Beispiel Stereo-Videos oder Bilder).

stereo-top-bottom

Ein einzelnes XRSubImage wird zugewiesen. Das linke Auge erhält den oberen Bereich der Textur, das rechte Auge den unteren. Dieses Layout ist darauf ausgelegt, Zeichnungsaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (zum Beispiel Stereo-Videos oder Bilder). Der Standardwert ist mono.

space Erforderlich

Ein XRSpace-Objekt, das die räumliche Beziehung der Schicht zur physischen Umgebung des Benutzers definiert.

transform Optional

Ein XRRigidTransform-Objekt, das den Versatz und die Orientierung relativ zu space definiert.

width Optional

Eine Zahl, die die Breite der Schicht angibt.

Rückgabewert

Ein XRQuadLayer-Objekt.

Beispiele

Erstellen eines XRQuadLayer, um ein Video anzuzeigen

Erstellen Sie ein XRMediaBinding und verwenden Sie ein HTMLVideoElement, das an createQuadLayer() übergeben wird. Konfigurieren Sie die Quad-Schicht mit den oben aufgelisteten Optionen und präsentieren Sie die Schicht auf dem XR-Gerät, indem Sie sie dem layers-Renderzustand in XRSession.updateRenderState() hinzufügen.

js
function onXRSessionStarted(xrSession) {
  const xrMediaBinding = new XRMediaBinding(xrSession);
  const video = document.createElement("video");
  video.src = "just-fascination.mp4";

  const videoLayer = xrMediaBinding.createQuadLayer(video, {
    space: xrReferenceSpace,
  });

  xrSession.updateRenderState({
    layers: [videoLayer],
  });
}

Spezifikationen

Specification
WebXR Layers API Level 1
# dom-xrmediabinding-createquadlayer

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch