VRDisplay.getFrameData() — Methode · JavaScript-Referenz

Signatur

VRDisplay.prototype.getFrameData(frameData)

Beschreibung

getFrameData() ist die zentrale Methode der WebVR-1.1-API. In jedem Frame der Render-Schleife übergibt man ein zuvor mit new VRFrameData() erzeugtes Objekt. Die Methode schreibt die aktuellen Werte hinein: leftProjectionMatrix, leftViewMatrix, rightProjectionMatrix, rightViewMatrix (jeweils Float32Array mit 16 Werten), die pose (Position, Ausrichtung, Geschwindigkeiten) und einen timestamp.

Das Objekt wird wiederverwendet: Man legt es einmal an und übergibt es jedes Frame erneut. So entsteht kein Müll für den Garbage Collector, was bei 90 Bildern pro Sekunde wichtig ist. Die Methode ersetzt das ältere VRDisplay.getPose() und liefert zusätzlich fertig berechnete Matrizen, die man direkt als Uniforms an WebGL-Shader übergeben kann.

Man ruft die Methode typischerweise innerhalb eines Callbacks von VRDisplay.requestAnimationFrame() auf, rendert dann beide Augen in die linke und rechte Hälfte des Canvas und schließt den Frame mit VRDisplay.submitFrame() ab.

Parameter

Name	Typ	Default	Beschreibung
$frameData Pflicht	VRFrameData		Ein mit `new VRFrameData()` erzeugtes Objekt, das von der Methode mit den aktuellen Frame-Daten befüllt wird.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn gültige Daten in das Objekt geschrieben wurden, sonst false (z. B. wenn gerade keine Pose verfügbar ist). Die eigentlichen Daten stehen im übergebenen frameData-Objekt.

Beispiele

Einfache Render-Schleife mit wiederverwendetem VRFrameData

const frameData = new VRFrameData();

const start = async () => {
  const displays = await navigator.getVRDisplays();
  if (!displays.length) {
    console.log('Kein VR-Display gefunden');
    return;
  }
  const vrDisplay = displays[0];

  const onFrame = () => {
    vrDisplay.requestAnimationFrame(onFrame);
    if (vrDisplay.getFrameData(frameData)) {
      console.log('Zeitstempel:', frameData.timestamp);
    }
  };
  vrDisplay.requestAnimationFrame(onFrame);
};

start();

Zeitstempel: 1234.56 Zeitstempel: 1245.67 ...

Stereo-Rendering mit WebGL für beide Augen

const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl');
const frameData = new VRFrameData();

// Annahme: program, uProj, uView und drawScene() sind bereits eingerichtet
const renderEye = (x, width, proj, view) => {
  gl.viewport(x, 0, width, canvas.height);
  gl.uniformMatrix4fv(uProj, false, proj);
  gl.uniformMatrix4fv(uView, false, view);
  drawScene();
};

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

  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  const half = canvas.width / 2;
  renderEye(0, half, frameData.leftProjectionMatrix, frameData.leftViewMatrix);
  renderEye(half, half, frameData.rightProjectionMatrix, frameData.rightViewMatrix);

  vrDisplay.submitFrame();
};

Kopfposition und -ausrichtung auslesen

const frameData = new VRFrameData();

const logPose = (vrDisplay) => {
  vrDisplay.getFrameData(frameData);
  const { position, orientation } = frameData.pose;
  // position kann null sein, wenn das Gerät kein Positions-Tracking hat
  console.log('Position:', position ? Array.from(position) : 'nicht verfügbar');
  console.log('Ausrichtung (Quaternion):', orientation ? Array.from(orientation) : 'nicht verfügbar');
};

Position: [0.02, 1.61, -0.1] Ausrichtung (Quaternion): [0, 0.12, 0, 0.99]

// Wichtig · Fallstricke

Veraltet: WebVR und damit getFrameData() wurde nie standardisiert und ist aus allen aktuellen Browsern entfernt bzw. war nur hinter Flags oder in alten Firefox-/Edge-/Oculus-Browser-Versionen verfügbar. Für neue Projekte die WebXR Device API nutzen (XRFrame.getViewerPose()).

Das VRFrameData-Objekt einmal anlegen und wiederverwenden – nicht in jedem Frame neu erzeugen.
Die Methode außerhalb von VRDisplay.requestAnimationFrame() aufzurufen kann zu veralteten oder ruckelnden Posen führen.
pose.position ist bei reinen 3DoF-Geräten (z. B. Cardboard) null.
Nur in sicheren Kontexten (HTTPS) zuverlässig nutzbar; Feature-Erkennung per 'getVRDisplays' in navigator.

Siehe auch

VRDisplay VRFrameData VRPose Response.formData() VRDisplay.getLayers()