XRMediaBinding: createEquirectLayer()-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 createEquirectLayer()-Methode der XRMediaBinding-Schnittstelle gibt ein XREquirectLayer-Objekt zurück, das eine Ebene ist, die equirectangular codierte Daten auf die Innenseite einer Kugel abbildet.

Syntax

js
createEquirectLayer(video, options)

Parameter

video

Ein HTMLVideoElement, das angezeigt werden soll.

options

Ein Objekt zum Konfigurieren des XREquirectLayer. Das Objekt kann die folgenden Eigenschaften haben und space ist erforderlich:

centralHorizontalAngle Optional

Eine Zahl, die den zentralen horizontalen Winkel in Radianten für die Kugel angibt. Standardwert: 6.28318 (2π).

invertStereo Optional

Ein Boolean, 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 Ebene 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, Zeichenaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (z.B. 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, Zeichenaufrufe für Inhalte zu minimieren, die bereits in Stereo vorliegen (z.B. Stereo-Videos oder -Bilder). Der Standardwert ist mono.

lowerVerticalAngle Optional

Eine Zahl, die den unteren vertikalen Winkel in Radianten für die Kugel angibt. Standardwert: -1.570795 (-π/2).

radius Optional

Eine Zahl, die den Radius der Kugel angibt. Standardwert 0.0.

space Erforderlich

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

transform Optional

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

upperVerticalAngle Optional

Eine Zahl, die den oberen vertikalen Winkel in Radianten für die Kugel angibt. Standardwert: 1.570795 (π/2).

Rückgabewert

Ein XREquirectLayer-Objekt.

Beispiele

Erstellen eines XREquirectLayer, um ein Video anzuzeigen

Erstellen Sie ein XRMediaBinding und verwenden Sie ein HTMLVideoElement, das in createEquirectLayer() übergeben wird. Konfigurieren Sie die Quad-Ebene mit den oben aufgeführten Optionen und präsentieren Sie die Ebene 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.createEquirectLayer(video, {
    space: xrReferenceSpace,
  });

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

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch