VRFrameData.rightViewMatrix — Eigenschaft · JavaScript-Referenz

Signatur

VRFrameData.rightViewMatrix

Beschreibung

Die schreibgeschützte Eigenschaft rightViewMatrix des Interfaces VRFrameData enthält ein Float32Array mit 16 Werten. Diese bilden eine 4×4-Matrix in spaltenweiser Anordnung (column-major), wie sie WebGL direkt erwartet. Die Matrix beschreibt die Sichttransformation (View-Matrix) für das rechte Auge und berücksichtigt dabei Kopfposition, Kopfausrichtung und den Augenabstand.

Die Werte werden bei jedem Aufruf von VRDisplay.getFrameData() aktualisiert. Üblicherweise übergibt man die Matrix pro Frame mit gl.uniformMatrix4fv() an den Vertex-Shader und rendert die rechte Bildhälfte der Canvas, zusammen mit rightProjectionMatrix.

Die Eigenschaft gehört zur veralteten WebVR-API. Für neue Projekte solltest du die WebXR Device API verwenden. Dort entspricht die Eigenschaft XRView.transform.inverse.matrix einer XRView mit eye === "right".

Rückgabewert

Typ

Float32Array

Beschreibung

Ein Float32Array der Länge 16 mit der View-Matrix des rechten Auges in spaltenweiser Anordnung (column-major).

Beispiele

Stereo-Rendering für das rechte Auge

const frameData = new VRFrameData();

const renderFrame = () => {
  vrDisplay.requestAnimationFrame(renderFrame);
  vrDisplay.getFrameData(frameData);

  const { width, height } = canvas;
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Linkes Auge: linke Bildhälfte
  gl.viewport(0, 0, width / 2, height);
  gl.uniformMatrix4fv(uProjection, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(uView, false, frameData.leftViewMatrix);
  drawScene();

  // Rechtes Auge: rechte Bildhälfte
  gl.viewport(width / 2, 0, width / 2, height);
  gl.uniformMatrix4fv(uProjection, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(uView, false, frameData.rightViewMatrix);
  drawScene();

  vrDisplay.submitFrame();
};

vrDisplay.requestAnimationFrame(renderFrame);

Matrix inspizieren und Augenposition ableiten

const frameData = new VRFrameData();
vrDisplay.getFrameData(frameData);

const m = frameData.rightViewMatrix;
console.log(m.length);            // 16
console.log(m instanceof Float32Array);

// Translation steht in column-major an Index 12–14
console.log('View-Translation:', m[12].toFixed(3), m[13].toFixed(3), m[14].toFixed(3));

16 true View-Translation: -0.032 -1.600 0.000

Feature-Erkennung mit WebXR-Fallback

const startVR = async () => {
  if (navigator.xr && await navigator.xr.isSessionSupported('immersive-vr')) {
    console.log('WebXR verwenden (empfohlen)');
    return;
  }
  if ('getVRDisplays' in navigator && 'VRFrameData' in window) {
    const [display] = await navigator.getVRDisplays();
    const frameData = new VRFrameData();
    display?.getFrameData(frameData);
    console.log('WebVR-Matrix rechts:', frameData.rightViewMatrix);
  } else {
    console.log('Kein VR verfügbar');
  }
};

startVR();

WebXR verwenden (empfohlen)

// Wichtig · Fallstricke

Veraltet: WebVR wurde nie Standard und in aktuellen Browsern entfernt (früher in Firefox und in Chrome hinter einem Flag bzw. als Origin Trial). Verwende die WebXR Device API.
Das zurückgegebene Array wird bei jedem getFrameData()-Aufruf überschrieben. Brauchst du die Werte länger, erstelle mit new Float32Array(frameData.rightViewMatrix) eine Kopie.
Die Matrix ist spaltenweise angeordnet (column-major). Übergib sie an uniformMatrix4fv daher mit transpose = false.
Es handelt sich um eine View-Matrix, also die Inverse der Augen-Pose. Die Weltposition des Auges erhältst du erst durch Invertieren der Matrix.
Der Zugriff funktioniert nur in einem sicheren Kontext mit einem verbundenen VRDisplay.

Siehe auch

VRFrameData VRFrameData.leftViewMatrix VRFrameData.rightProjectionMatrix VRDisplay.getFrameData() XRView Float32Array WorkerNavigator.platform