XRWebGLBinding: Methode getSubImage()

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Mehr erfahren
Vollständige Kompatibilität anzeigen

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die getSubImage() Methode des XRWebGLBinding-Interfaces gibt ein XRWebGLSubImage-Objekt zurück, das die zu rendernde WebGL-Textur darstellt.

Der XRCompositionLayer, der für das Rendering verwendet werden soll (kann alle Arten von XRCompositionLayer-Objekten außer XRProjectionLayer sein, siehe XRWebGLBinding.getViewSubImage() für die Projektion von Schichten).

frame

Der XRFrame-Frame, der für das Rendering verwendet werden soll.

eye Optional

Ein optionales XRView.eye, das angibt, welches Auge der Ansicht für das Rendering verwendet werden soll. Mögliche Werte:

left: Die XRView repräsentiert die Perspektive des linken Auges des Betrachters.
right: Die Ansicht repräsentiert das rechte Auge des Betrachters.
none: Die Ansicht beschreibt eine monokulare Ansicht oder repräsentiert anderweitig nicht die Perspektive eines bestimmten Auges. Standardwert ist none.

Rückgabewert

Ein XRWebGLSubImage-Objekt.

Ausnahmen

Ein TypeError wird ausgelöst,

wenn layer sich nicht im Session-layer Array befindet.
wenn layer ein XRProjectionLayer ist.
wenn die Eigenschaft layout des Layers default ist.
wenn die Eigenschaft layout des Layers stereo ist und eye none ist.

Beispiele

Rendern eines `XRQuadLayer`

Das folgende Beispiel rendert einen XRQuadLayer.

const xrGlBinding = new XRWebGLBinding(xrSession, gl);
const quadLayer = xrGlBinding.createQuadLayer({
  space: xrReferenceSpace,
  viewPixelWidth: 512,
  viewPixelHeight: 512,
});

// Position 2 meters away from the origin with a width and height of 1.5 meters
quadLayer.transform = new XRRigidTransform({ z: -2 });
quadLayer.width = 1.5;
quadLayer.height = 1.5;

const framebuffer = gl.createFramebuffer();
xrSession.updateRenderState({ layers: [quadLayer] });
xrSession.requestAnimationFrame(onXRFrame);

function onXRFrame(time, xrFrame) {
  xrSession.requestAnimationFrame(onXRFrame);

  gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
  let subImage = xrGlBinding.getSubImage(quadLayer, xrFrame);
  gl.framebufferTexture2D(
    gl.FRAMEBUFFER,
    gl.COLOR_ATTACHMENT0,
    subImage.colorTexture,
    0,
  );
  let viewport = subImage.viewport;
  gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

  // Render content for the quad layer
}