XRWebGLLayer.antialias — Eigenschaft · JavaScript-Referenz

Signatur

XRWebGLLayer.antialias

Beschreibung

Die Eigenschaft XRWebGLLayer.antialias ist ein schreibgeschützter Wahrheitswert. Er ist true, wenn der Framebuffer der Render-Ebene Anti-Aliasing (in der Regel Multisampling) verwendet, sonst false.

Beim Erzeugen einer Ebene mit new XRWebGLLayer(session, gl, { antialias: true }) äußerst du nur einen Wunsch. Der User Agent entscheidet am Ende selbst, ob er Anti-Aliasing bereitstellt. Das hängt von der Hardware, dem Energiebudget und der Leistung ab. Erst über die Eigenschaft antialias der fertigen Ebene erfährst du, was tatsächlich eingestellt wurde. Ohne Angabe ist der Wunsch standardmäßig true.

Der Wert ist praktisch, um die Darstellung anzupassen. Ist kein Anti-Aliasing aktiv, kannst du zum Beispiel eine eigene Kantenglättung als Nachbearbeitung einsetzen (etwa FXAA). Du kannst auch feine Geometrie wie dünne Linien oder Gitter vereinfachen, damit sie weniger flimmert. Den Wert solltest du außerdem in Logs zur Fehlersuche mitschreiben.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn der Framebuffer der Ebene Anti-Aliasing unterstützt, sonst false. Der Wert ist nur lesbar.

Beispiele

Anti-Aliasing anfordern und das Ergebnis prüfen

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, { antialias: true });
  await session.updateRenderState({ baseLayer: layer });

  // Nur ein Wunsch – was der Browser tatsächlich einstellt, zeigt antialias
  console.log('Anti-Aliasing aktiv:', layer.antialias);
  return { session, gl, layer };
};

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

Anti-Aliasing aktiv: true

Eigene Kantenglättung einsetzen, wenn der Browser keine liefert

const configureRendering = (session) => {
  const { baseLayer } = session.renderState;
  const usePostFXAA = !baseLayer.antialias;

  if (usePostFXAA) {
    console.info('Kein natives Anti-Aliasing – FXAA-Pass wird aktiviert.');
  }
  return { usePostFXAA };
};

// Innerhalb einer aktiven Sitzung aufrufen:
// const settings = configureRendering(xrSession);

Kein natives Anti-Aliasing – FXAA-Pass wird aktiviert.

Aus Leistungsgründen bewusst auf Anti-Aliasing verzichten

const createFastLayer = (session, gl) => {
  const layer = new XRWebGLLayer(session, gl, {
    antialias: false,
    framebufferScaleFactor: 1.0
  });
  console.log(`antialias=${layer.antialias}, ${layer.framebufferWidth}x${layer.framebufferHeight}`);
  return layer;
};

antialias=false, 2880x1600

// Wichtig · Fallstricke

Nur ein Wunsch: Die Option antialias im Konstruktor ist eine Bitte an den Browser, keine Garantie. Verlass dich deshalb immer auf den gelesenen Wert der Eigenschaft und nicht auf den Wert, den du übergeben hast.
Nur lesbar: Wenn du der Eigenschaft einen Wert zuweist, passiert nichts. Im Strict Mode wird ein TypeError ausgelöst. Um die Einstellung zu ändern, erzeugst du eine neue Ebene und setzt sie mit session.updateRenderState({ baseLayer }) ein.
Hat nichts mit dem Canvas-Kontext zu tun: Das Attribut antialias des WebGL-Kontexts (getContext('webgl', { antialias })) gilt nur für die Zeichenfläche des Canvas. Für den XR-Framebuffer spielt es keine Rolle.
Leistung: Multisampling kostet vor allem auf mobilen Headsets Speicher und Füllrate. Bei hoher Auflösung (framebufferScaleFactor) kann es daher sinnvoll sein, darauf zu verzichten.
Kompatibilität: Die WebXR Device API wird bisher im Wesentlichen nur von Chromium-Browsern unterstützt. Firefox und Safari (außer auf visionOS) unterstützen sie nicht. Die API ist nur in sicheren Kontexten (HTTPS) verfügbar. Prüfe die Unterstützung vorher mit 'xr' in navigator.

Siehe auch

XRWebGLLayer XRWebGLLayer.framebuffer XRWebGLLayer.ignoreDepthValues XRSession.updateRenderState() XRRenderState.baseLayer Window.launchQueue