Start · Sprachen · JavaScript · Referenz · XRRigidTransform.inverse

XRRigidTransform.inverse

Eigenschaft

Liefert ein neues <code>XRRigidTransform</code>, das die Umkehrung der aktuellen Transformation darstellt – also Position und Ausrichtung rückgängig macht.

seit JavaScript WebXR Device API – Chromium-Browser (Chrome/Edge 7 Kategorie: webapi

Signatur

XRRigidTransform.inverse

Beschreibung

Die schreibgeschützte Eigenschaft inverse eines XRRigidTransform-Objekts gibt ein weiteres XRRigidTransform zurück, das die inverse Transformation beschreibt. Wendet man eine Transformation und danach ihre Inverse an, erhält man wieder die Ausgangslage (Identität).

Da ein XRRigidTransform nur Verschiebung (position) und Drehung (orientation) enthält, ist die Inverse immer definiert: Die Drehung wird durch das konjugierte Quaternion umgekehrt, die Verschiebung wird negiert und mit dieser umgekehrten Drehung rotiert. Die zugehörige matrix der Inversen ist die Inverse der ursprünglichen 4×4-Matrix.

Typische Einsatzgebiete:

  • View-Matrix berechnen: XRView.transform beschreibt die Pose der Kamera im Raum; die View-Matrix für WebGL ist deren Inverse – sie steht bereits als view.transform.inverse.matrix zur Verfügung.
  • Referenzräume versetzen: Mit XRReferenceSpace.getOffsetReferenceSpace() und einer invertierten Transformation lässt sich z. B. der Betrachter „teleportieren“.
  • Relative Posen: Umrechnen einer Pose aus einem Koordinatensystem in ein anderes.

Die Eigenschaft wird vom Browser bei Bedarf berechnet und anschließend zwischengespeichert, sodass wiederholte Zugriffe dasselbe Objekt liefern.

Rückgabewert

Typ
XRRigidTransform
Beschreibung
Ein XRRigidTransform, dessen position, orientation und matrix die Umkehrung der ursprünglichen Transformation darstellen. Die inverse dieses Objekts verweist wieder auf das Original.

Beispiele

Inverse einer einfachen Verschiebung

// Transformation: 2 m nach rechts, 1 m nach oben
const transform = new XRRigidTransform({ x: 2, y: 1, z: 0 });
const inv = transform.inverse;

const { x, y, z } = inv.position;
console.log(x, y, z);
// Die Inverse zeigt auf das Original zurück
console.log(inv.inverse === transform);
-2 -1 0 true

View-Matrix pro Auge für WebGL setzen

const onXRFrame = (time, frame) => {
  const session = frame.session;
  session.requestAnimationFrame(onXRFrame);

  const pose = frame.getViewerPose(refSpace);
  if (!pose) return;

  for (const view of pose.views) {
    const viewport = glLayer.getViewport(view);
    gl.viewport(viewport.x, viewport.y, viewport.width, viewport.height);

    // Kamera-Pose invertieren = View-Matrix
    gl.uniformMatrix4fv(uViewMatrix, false, view.transform.inverse.matrix);
    gl.uniformMatrix4fv(uProjMatrix, false, view.projectionMatrix);
    drawScene();
  }
};

Betrachter per Teleport an eine Zielposition versetzen

// refSpace: zuvor mit session.requestReferenceSpace('local-floor') ermittelt
const teleportTo = (target) => {
  // Zielposition des Nutzers in der Welt
  const targetPose = new XRRigidTransform({ x: target.x, y: 0, z: target.z });
  // Referenzraum um die Inverse verschieben, damit der Nutzer dort steht
  refSpace = refSpace.getOffsetReferenceSpace(targetPose.inverse);
};

teleportTo({ x: 3, z: -5 });

// Wichtig · Fallstricke

  • Schreibgeschützt: Zuweisungen an inverse werden ignoriert (im Strict Mode TypeError). Auch XRRigidTransform-Objekte selbst sind unveränderlich – für eine neue Transformation immer ein neues Objekt erzeugen.
  • Richtung beachten: getOffsetReferenceSpace() erwartet die Transformation des Ursprungs. Wer den Betrachter an Position P setzen will, muss die Inverse von P übergeben – ein häufiger Vorzeichenfehler.
  • Gleitkomma-Genauigkeit: transform.inverse.inverse liefert zwar das Originalobjekt, eigenständig berechnete Inversen können aber minimale Rundungsabweichungen (z. B. -0 oder 1e-16) enthalten.
  • Kompatibilität: WebXR ist nur in sicheren Kontexten (HTTPS) verfügbar und wird vor allem von Chromium-Browsern und dem Meta Quest Browser unterstützt; Firefox und Safari (Desktop) bieten kein WebXR. Vor Nutzung 'XRRigidTransform' in window bzw. navigator.xr prüfen.