XRWebGLBinding: createQuadLayer()-Methode

options

Ein Objekt zur Konfiguration des XRQuadLayer. Es muss die Eigenschaften space, viewPixelHeight und viewPixelWidth haben. init hat die folgenden Eigenschaften:

colorFormat Optional

Ein GLenum, das den Datentyp der Farbetexturdaten definiert. Mögliche Werte:

• gl.RGB
• gl.RGBA Zusätzlich, für Kontexte mit der EXT_sRGB-Erweiterung aktiviert:
• ext.SRGB_EXT
• ext.SRGB_ALPHA_EXT Zusätzlich, für WebGL2RenderingContext-Kontexte:
• gl.RGBA8
• gl.RGB8
• gl.SRGB8
• gl.RGB8_ALPHA8 Zusätzlich, für Kontexte mit der WEBGL_compressed_texture_etc-Erweiterung aktiviert:
• ext.COMPRESSED_RGB8_ETC2
• ext.COMPRESSED_RGB8_PUNCHTHROUGH_ALPHA1_ETC2
• ext.COMPRESSED_RGBA8_ETC2_EAC
• ext.COMPRESSED_SRGB8_ETC2
• ext.COMPRESSED_SRGB8_PUNCHTHROUGH_ALPHA1_ETC2
• ext.COMPRESSED_SRGB8_ALPHA8_ETC2_EAC Zusätzlich, für Kontexte mit der WEBGL_compressed_texture_astc-Erweiterung aktiviert:
• Alle Formate, die die Erweiterung unterstützt. Der Standardwert ist gl.RGBA.

depthFormat Optional

Ein GLenum, das den Datentyp der Tiefentexturdaten definiert oder 0, was anzeigt, dass die Ebene keine Tiefentextur bereitstellen sollte (in diesem Fall wird XRProjectionLayer.ignoreDepthValues true sein). Mögliche Werte innerhalb von WebGLRenderingContext-Kontexten mit der WEBGL_depth_texture-Erweiterung aktiviert oder innerhalb von WebGL2RenderingContext-Kontexten (keine Erweiterung erforderlich):

• gl.DEPTH_COMPONENT
• gl.DEPTH_STENCIL Zusätzlich, für WebGL2RenderingContext-Kontexte:
• gl.DEPTH_COMPONENT24
• gl.DEPTH24_STENCIL24 Der Standardwert ist gl.DEPTH_COMPONENT.

height Optional

Eine Zahl, die die Höhe der Ebene in Metern angibt. Der Standardwert ist 1.0.

isStatic Optional

Ein boolescher Wert, der, wenn wahr, anzeigt, dass Sie nur auf diese Ebene zeichnen können, wenn needsRedraw true ist. Der Standardwert ist false.

layout Optional

Ein String, der das Layout der Ebene 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 Benutzeragent entscheidet, wie er das XRSubImage (eins oder zwei) zuweist und das Layout (oben/unten oder links/rechts) gestaltet.

stereo-left-right

Ein einzelnes XRSubImage wird zugewiesen. Das linke Auge erhält den linken Bereich der Textur, das rechte Auge den rechten.

stereo-top-bottom

Ein einzelnes XRSubImage wird zugewiesen. Das linke Auge erhält den oberen Bereich der Textur, das rechte Auge den unteren. Der Standardwert ist mono.

mipLevels Optional

Eine Zahl, die die gewünschte Anzahl der Mip-Ebenen angibt. Der Standardwert ist 1.

space Erforderlich

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

textureType Optional

Ein String, der die Art der Textur definiert, die die Ebene haben wird. Mögliche Werte:

texture

Die Texturen von XRWebGLSubImage werden vom Typ gl.TEXTURE_2D sein.

texture-array

Die Texturen von XRWebGLSubImage werden vom Typ gl.TEXTURE_2D_ARRAY sein (nur WebGL 2-Kontexte). Der Standardwert ist texture.

transform Optional

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

viewPixelHeight Erforderlich

Eine Zahl, die die Pixelhöhe der Ebenenansicht angibt.

viewPixelWidth Erforderlich

Eine Zahl, die die Pixelbreite der Ebenenansicht angibt.

width Optional

Eine Zahl, die die Breite der Ebene in Metern angibt. Der Standardwert ist 1.0.

Ein XRQuadLayer-Objekt.

Konfigurieren Sie das Quad-Layer mithilfe der oben aufgelisteten Eigenschaften in einem Aufruf von createQuadLayer(). Um Layer auf dem XR-Gerät zu präsentieren, fügen Sie sie dem layers-Renderzustand mithilfe von XRSession.updateRenderState() hinzu.

function onXRSessionStarted(xrSession) {
  const glCanvas = document.createElement("canvas");
  const gl = glCanvas.getContext("webgl2", { xrCompatible: true });
  const xrGlBinding = new XRWebGLBinding(xrSession, gl);
  const quadLayer = xrGlBinding.createQuadLayer({
    space: xrReferenceSpace,
    viewPixelHeight: 512,
    viewPixelWidth: 512,
    transform: new XRRigidTransform({ z: -2 }),
  });
  xrSession.updateRenderState({
    layers: [quadLayer],
  });
}

• XRQuadLayer
• WebGL Konstanten