Signatur
Beschreibung
Der Konstruktor VRFrameData() gehört zur veralteten WebVR-API. Er erzeugt ein zunächst leeres Objekt. Übergibt man dieses an VRDisplay.getFrameData(), schreibt der Browser die Daten des nächsten darzustellenden Frames hinein: die Projektions- und View-Matrizen für das linke und das rechte Auge (leftProjectionMatrix, leftViewMatrix, rightProjectionMatrix, rightViewMatrix), die Pose (pose) sowie einen Zeitstempel (timestamp).
Üblicherweise legt man genau eine Instanz außerhalb der Render-Schleife an und verwendet sie in jedem Frame erneut. getFrameData() überschreibt die Werte dann jedes Mal, statt ein neues Objekt anzulegen. Das entlastet die Garbage Collection und hilft, eine stabile Bildrate von 90 fps zu halten.
Die Render-Schleife läuft über VRDisplay.requestAnimationFrame(). Nach dem Zeichnen beider Augen-Ansichten übergibt VRDisplay.submitFrame() das Bild an das Headset.
Rückgabewert
VRFrameData-Objekt, dessen Eigenschaften erst nach einem Aufruf von VRDisplay.getFrameData() gültige Werte enthalten.Beispiele
Instanz anlegen und einmalig befüllen
const frameData = new VRFrameData();
const displays = await navigator.getVRDisplays();
if (displays.length > 0) {
const vrDisplay = displays[0];
const ok = vrDisplay.getFrameData(frameData);
console.log(ok, frameData.leftProjectionMatrix.length);
}Wiederverwendung in der Render-Schleife
const frameData = new VRFrameData(); // einmal außerhalb der Schleife anlegen
const drawScene = (projection, view) => {
// WebGL-Zeichencode für ein Auge (hier nur als Platzhalter)
};
const startLoop = (vrDisplay) => {
const onFrame = () => {
vrDisplay.requestAnimationFrame(onFrame);
vrDisplay.getFrameData(frameData);
// linkes Auge
drawScene(frameData.leftProjectionMatrix, frameData.leftViewMatrix);
// rechtes Auge
drawScene(frameData.rightProjectionMatrix, frameData.rightViewMatrix);
vrDisplay.submitFrame();
};
vrDisplay.requestAnimationFrame(onFrame);
};Funktionsprüfung mit Rückfall auf WebXR
if ('xr' in navigator) {
const supported = await navigator.xr.isSessionSupported('immersive-vr');
console.log('WebXR verfügbar:', supported);
} else if ('VRFrameData' in window) {
const frameData = new VRFrameData();
console.log('Veraltetes WebVR verfügbar', frameData instanceof VRFrameData);
} else {
console.log('Keine VR-Unterstützung');
}// Wichtig · Fallstricke
Veraltet: WebVR ist durch die WebXR Device API ersetzt. Nur alte Firefox-Versionen, Firefox Reality und einige Oculus-/Samsung-Browser haben die API ausgeliefert, meist nur hinter Flags. Chrome hat sie nie standardmäßig aktiviert. Für neue Projekte verwendest du XRSession, XRFrame.getViewerPose() und XRView.
- Der Konstruktor erwartet keine Argumente. Direkt nach dem Anlegen enthalten die Eigenschaften noch keine brauchbaren Werte, erst nach
getFrameData(). - Die Matrizen sind
Float32Arrays mit 16 Werten in spaltenweiser Anordnung (column-major). Du kannst sie direkt angl.uniformMatrix4fv()übergeben. - Lege nicht in jedem Frame eine neue Instanz an. Das erzeugt unnötigen Speicherdruck und kann zu Rucklern führen.
- Die API funktioniert nur in einem sicheren Kontext (HTTPS). Außerdem brauchen einige Browser für
requestPresent()eine Nutzerinteraktion.