XRWebGLLayer.fixedFoveation — Eigenschaft · JavaScript-Referenz

Signatur

XRWebGLLayer.fixedFoveation

Beschreibung

Die Eigenschaft fixedFoveation einer XRWebGLLayer legt fest, wie stark der XR-Compositor Fixed Foveated Rendering einsetzt. Dabei wird die Mitte des Sichtfelds in voller Auflösung gerendert, die Ränder mit weniger Pixeln. Weil die Linsen vieler Headsets die Ränder ohnehin unscharf abbilden, fällt der Qualitätsverlust dort kaum auf. Gleichzeitig muss die GPU weniger Fragmente berechnen, was die Leistung deutlich verbessern kann.

Der Wert ist eine Gleitkommazahl zwischen 0 und 1:

0: keine Foveation, also überall volle Auflösung.
1: stärkste Foveation, also die größte Einsparung bei den Randbereichen.
Werte dazwischen wählen Zwischenstufen. Die genaue Abbildung auf die Stufen der Hardware legt der Browser fest.

Unterstützt das Gerät keine Foveation, ist die Eigenschaft null, und Zuweisungen haben keine Wirkung. Die Eigenschaft lässt sich auch während einer laufenden Sitzung ändern, zum Beispiel um die Foveation bei sinkender Bildrate zu verstärken. Laut Spezifikation darf eine Änderung frühestens im nächsten Frame wirksam werden.

Typische Einsatzfälle sind GPU-intensive immersive Szenen auf mobilen, eigenständigen Headsets wie Meta Quest. Dort hilft Foveation, stabile 72 bis 90 Bilder pro Sekunde zu halten. Bei Inhalten mit viel Text oder feinen Details am Bildrand sollte man den Wert eher niedrig wählen.

Rückgabewert

Typ

number | null

Beschreibung

Eine Zahl zwischen 0 (keine Foveation) und 1 (maximale Foveation). Unterstützt das System keine Foveation, ist der Wert null. Werte außerhalb des Bereichs werden beim Setzen auf 0 bis 1 begrenzt.

Beispiele

Foveation beim Anlegen der Layer aktivieren

const startXR = async () => {
  const session = await navigator.xr.requestSession('immersive-vr');
  const canvas = document.createElement('canvas');
  const gl = canvas.getContext('webgl2', { xrCompatible: true });

  const layer = new XRWebGLLayer(session, gl);

  // Nur setzen, wenn das Gerät Foveation unterstützt
  if (layer.fixedFoveation !== null) {
    layer.fixedFoveation = 0.5; // mittlere Stärke
    console.log('Foveation:', layer.fixedFoveation);
  } else {
    console.log('Foveation wird nicht unterstützt');
  }

  session.updateRenderState({ baseLayer: layer });
};

document.querySelector('#vr-button').addEventListener('click', startXR);

Foveation: 0.5

Foveation dynamisch an die Bildrate anpassen

let lastTime = 0;
let slowFrames = 0;

const onXRFrame = (time, frame) => {
  const session = frame.session;
  const layer = session.renderState.baseLayer;
  const delta = time - lastTime;
  lastTime = time;

  // Mehr als ca. 14 ms pro Frame: unter 72 fps
  slowFrames = delta > 14 ? slowFrames + 1 : 0;

  if (layer.fixedFoveation !== null && slowFrames > 30) {
    layer.fixedFoveation = Math.min(1, layer.fixedFoveation + 0.25);
    console.log('Foveation erhöht auf', layer.fixedFoveation);
    slowFrames = 0;
  }

  // ... Szene rendern ...
  session.requestAnimationFrame(onXRFrame);
};

// Start: session.requestAnimationFrame(onXRFrame);

Foveation erhöht auf 0.75

Werte außerhalb des Bereichs werden begrenzt

const layer = session.renderState.baseLayer;

if (layer.fixedFoveation !== null) {
  layer.fixedFoveation = 2;
  console.log(layer.fixedFoveation);

  layer.fixedFoveation = -1;
  console.log(layer.fixedFoveation);
}

1 0

// Wichtig · Fallstricke

Experimentell: Die Eigenschaft wird derzeit nur von Chromium-Browsern mit WebXR (vor allem Chrome für Android und Meta Quest Browser) unterstützt. Firefox und Safari unterstützen sie nicht. Vor dem Setzen immer auf null prüfen.
Hardwareabhängig: Viele Geräte kennen nur wenige Stufen, zum Beispiel aus/niedrig/mittel/hoch. Der tatsächliche Effekt kann sich deshalb in Sprüngen ändern, und der zurückgelesene Wert muss nicht exakt dem gesetzten entsprechen.
Qualität: Bei starker Foveation (Werte nahe 1) können am Bildrand sichtbare Blockartefakte oder Flimmern entstehen. Das betrifft besonders Text und UI-Elemente außerhalb der Bildmitte.
Nicht blickgesteuert: Die Foveation ist fest und immer auf die Bildmitte ausgerichtet. Sie folgt nicht den Augen (kein Eye-Tracking).
Der Effekt gilt nur für die Layer, die der Compositor darstellt. Rendert man zuerst in eigene Framebuffer und kopiert dann, geht der Leistungsgewinn verloren. Für XRProjectionLayer aus der WebXR Layers API gibt es eine entsprechende Eigenschaft fixedFoveation.

Siehe auch

XRWebGLLayer XRSession.updateRenderState() XRSession.requestAnimationFrame() XRProjectionLayer.fixedFoveation XRWebGLLayer.framebuffer WorkerGlobalScope.performance