VRFrameData.leftProjectionMatrix — Eigenschaft · JavaScript-Referenz

Signatur

VRFrameData.leftProjectionMatrix

Beschreibung

Die Eigenschaft leftProjectionMatrix der Schnittstelle VRFrameData aus der veralteten WebVR-API enthält die Projektionsmatrix für das linke Auge. Sie ist ein Float32Array mit 16 Werten, die eine 4×4-Matrix in spaltenweiser Anordnung (column-major) beschreiben, also genau im Format, das WebGL-Funktionen wie gl.uniformMatrix4fv() erwarten.

Die Matrix berücksichtigt das Sichtfeld (Field of View) des Headsets für das linke Auge sowie die über VRDisplay.depthNear und VRDisplay.depthFar gesetzten Clipping-Ebenen. Sie wird bei jedem Aufruf von VRDisplay.getFrameData() aktualisiert und typischerweise zusammen mit leftViewMatrix an den Vertex-Shader übergeben.

Verwendet wird sie im Render-Loop, der über VRDisplay.requestAnimationFrame() läuft: Zuerst wird die linke Hälfte der Canvas als Viewport gesetzt und mit leftProjectionMatrix/leftViewMatrix gezeichnet, danach die rechte Hälfte mit rightProjectionMatrix/rightViewMatrix.

Rückgabewert

Typ

Float32Array

Beschreibung

Ein Float32Array der Länge 16 mit der Projektionsmatrix des linken Auges in spaltenweiser Anordnung. Schreibgeschützt; der Inhalt wird bei jedem getFrameData()-Aufruf neu befüllt.

Beispiele

Projektionsmatrix auslesen

const frameData = new VRFrameData();

navigator.getVRDisplays().then((displays) => {
  if (displays.length === 0) return;
  const vrDisplay = displays[0];
  vrDisplay.depthNear = 0.1;
  vrDisplay.depthFar = 1000;

  vrDisplay.getFrameData(frameData);
  const m = frameData.leftProjectionMatrix;
  console.log(m instanceof Float32Array, m.length);
});

true 16

Stereo-Rendering mit WebGL (linkes Auge)

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const frameData = new VRFrameData();
// Annahme: program, projLoc und viewLoc wurden vorher erstellt

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

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  // Linke Hälfte der Canvas
  gl.viewport(0, 0, canvas.width / 2, canvas.height);
  gl.uniformMatrix4fv(projLoc, false, frameData.leftProjectionMatrix);
  gl.uniformMatrix4fv(viewLoc, false, frameData.leftViewMatrix);
  drawScene();

  // Rechte Hälfte der Canvas
  gl.viewport(canvas.width / 2, 0, canvas.width / 2, canvas.height);
  gl.uniformMatrix4fv(projLoc, false, frameData.rightProjectionMatrix);
  gl.uniformMatrix4fv(viewLoc, false, frameData.rightViewMatrix);
  drawScene();

  vrDisplay.submitFrame();
};

Matrix kopieren, statt Referenz zu halten

const frameData = new VRFrameData();
const history = [];

const capture = (vrDisplay) => {
  vrDisplay.getFrameData(frameData);
  // Kopie anlegen – das Original wird beim nächsten Frame überschrieben
  history.push(Float32Array.from(frameData.leftProjectionMatrix));
};

// Wichtig · Fallstricke

Veraltet: WebVR wurde nie standardisiert und ist durch die WebXR Device API ersetzt. Das Pendant dort ist XRView.projectionMatrix. Aktuelle Browser unterstützen WebVR nicht mehr (früher nur Firefox, Edge Legacy und Chrome/Android hinter Flags).
Die Matrix ist spaltenweise angeordnet; beim Übergeben an gl.uniformMatrix4fv() muss transpose auf false stehen.
Änderungen an depthNear/depthFar wirken sich erst beim nächsten getFrameData()-Aufruf aus.
Wird dasselbe VRFrameData-Objekt wiederverwendet, ändern sich die Werte bei jedem Frame – wer sie aufbewahren will, muss sie kopieren.
Zugriff in der Regel nur in sicheren Kontexten (HTTPS).

Siehe auch

VRFrameData VRFrameData.rightProjectionMatrix VRFrameData.leftViewMatrix VRDisplay.getFrameData() XRView.projectionMatrix PerformanceTiming.secureConnectionStart WorkerNavigator.globalPrivacyControl