XRMediaBinding: createCylinderLayer()-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 vor der Verwendung auf produktiven Webseiten.

Die createCylinderLayer()-Methode der XRMediaBinding-Schnittstelle gibt ein XRCylinderLayer-Objekt zurück, das eine Schicht darstellt, die in der virtuellen Umgebung einen gekrümmten rechteckigen Raum einnimmt.

Syntax

createCylinderLayer(video, options)

Parameter

video

Ein HTMLVideoElement, das angezeigt werden soll.

options

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

aspectRatio Optional

Eine Zahl, die das Verhältnis des sichtbaren Zylinderabschnitts angibt. Es ist das Verhältnis der Breite des sichtbaren Abschnitts des Zylinders geteilt durch seine Höhe. Die Breite wird berechnet, indem der radius mit dem centralAngle multipliziert wird.

centralAngle Optional

Eine Zahl, die den Winkel in Radianten des sichtbaren Zylinderabschnitts angibt. Standardwert: 0.78539 (π / 4).

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 umfasst alle Ansichten der Sitzung.
mono: Ein einziges XRSubImage wird zugewiesen und beiden Augen präsentiert.
stereo: Der Benutzeragent entscheidet, wie er das XRSubImage (eines oder zwei) zuweist und das Layout (oben/unten oder links/rechts) festlegt. Es wird empfohlen, den texture-array-Texturtyp für stereo-Layouts zu verwenden.
stereo-left-right: Ein einziges XRSubImage wird zugewiesen. Das linke Auge erhält den linken Bereich der Textur, das rechte Auge den rechten. Dieses Layout ist darauf ausgelegt, Zeichenaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (zum Beispiel Stereo-Videos oder -Bilder).
stereo-top-bottom: Ein einziges XRSubImage wird zugewiesen. Das linke Auge erhält den oberen Bereich der Textur, das rechte Auge den unteren. Dieses Layout ist darauf ausgelegt, Zeichenaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (zum Beispiel Stereo-Videos oder -Bilder). Der Standardwert ist mono.

radius Optional

Eine Zahl, die den Radius des Zylinders angibt. Standardwert 2.0.

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 Ausrichtung relativ zu space definiert.

Rückgabewert

Ein XRCylinderLayer-Objekt.

Beispiele

Erstellen eines `XRCylinderLayer` zur Anzeige eines Videos

Erstellen Sie ein XRMediaBinding und verwenden Sie ein HTMLVideoElement, das in createCylinderLayer() übergeben wird. Konfigurieren Sie die Quad-Schicht mithilfe der oben aufgeführten Optionen und präsentieren Sie die Schicht dem XR-Gerät, indem Sie sie dem layers-Renderzustand in XRSession.updateRenderState() hinzufügen.

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

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

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

XRCylinderLayer