EXT_texture_filter_anisotropic extension — Schnittstelle · JavaScript-Referenz

Signatur

interface EXT_texture_filter_anisotropic

Beschreibung

Die Erweiterung EXT_texture_filter_anisotropic gehört zur WebGL-API und schaltet anisotropes Filtern frei. Sie verbessert die Qualität von Texturen, die in einem flachen Winkel betrachtet werden, zum Beispiel Böden, Straßen oder Wände in 3D-Szenen. Nur mit Mipmapping und trilinearer Filterung wirken solche Flächen in der Entfernung verwaschen. AF nimmt in Blickrichtung mehr Texturproben und bleibt dadurch deutlich schärfer.

Das Objekt bekommst du mit gl.getExtension("EXT_texture_filter_anisotropic"). In manchen älteren Browsern trägt die Erweiterung ein Herstellerpräfix (WEBKIT_ oder MOZ_). Die Erweiterung hat keine Methoden, sondern nur zwei Konstanten:

ext.TEXTURE_MAX_ANISOTROPY_EXT (0x84FE): Parametername für gl.texParameterf() bzw. gl.getTexParameter(). Damit setzt oder liest du den Anisotropiegrad der gerade gebundenen Textur.
ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT (0x84FF): Parametername für gl.getParameter(). Damit fragst du den höchsten Wert ab, den die Hardware unterstützt (meistens 16).

Die Erweiterung funktioniert in WebGL 1 und WebGL 2 gleich. Am meisten bringt AF zusammen mit einem Mipmap-Filter wie gl.LINEAR_MIPMAP_LINEAR. Der Wert gilt immer nur für eine Textur und muss für jede Textur einzeln gesetzt werden.

Parameter

Name	Typ	Default	Beschreibung
$TEXTURE_MAX_ANISOTROPY_EXT	GLenum (0x84FE)	1.0	Konstante als `pname` für `texParameterf()` und `getTexParameter()`. Der Wert muss zwischen `1.0` und dem Hardware-Maximum liegen.
$MAX_TEXTURE_MAX_ANISOTROPY_EXT	GLenum (0x84FF)		Konstante als `pname` für `getParameter()`. Sie liefert den höchsten unterstützten Anisotropiegrad als `number`.

Beispiele

Erweiterung laden (mit Herstellerpräfixen) und Maximum abfragen

const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl2") ?? canvas.getContext("webgl");

const ext =
  gl.getExtension("EXT_texture_filter_anisotropic") ??
  gl.getExtension("WEBKIT_EXT_texture_filter_anisotropic") ??
  gl.getExtension("MOZ_EXT_texture_filter_anisotropic");

if (ext) {
  const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  console.log(`Maximale Anisotropie: ${max}`);
} else {
  console.log("Anisotropes Filtern wird nicht unterstützt");
}

Maximale Anisotropie: 16

Textur mit Mipmaps und anisotropem Filtern laden

const loadTexture = async (gl, ext, url, wunsch = 8) => {
  const img = new Image();
  img.crossOrigin = "anonymous";
  img.src = url;
  await img.decode();

  const tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
  gl.generateMipmap(gl.TEXTURE_2D);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

  if (ext) {
    const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
    // Gewünschten Wert auf das Hardware-Maximum begrenzen
    gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(wunsch, max));
  }
  return tex;
};

// Aufruf:
// const bodenTextur = await loadTexture(gl, ext, "/img/boden.jpg");

Gesetzten Anisotropiewert einer Textur auslesen

gl.bindTexture(gl.TEXTURE_2D, bodenTextur);
const aktuell = gl.getTexParameter(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT);
console.log(`Anisotropie der Bodentextur: ${aktuell}`);

Anisotropie der Bodentextur: 8

// Wichtig · Fallstricke

Immer auf null prüfen: Die Erweiterung ist fast überall verfügbar, aber nicht garantiert, etwa bei Software-Rendering oder auf manchen mobilen GPUs. Ohne Prüfung löst der Zugriff auf ext.TEXTURE_MAX_ANISOTROPY_EXT einen TypeError aus.
Wertebereich: Werte unter 1.0 erzeugen den Fehler INVALID_VALUE. Werte über dem Maximum begrenzt der Treiber meistens selbst. Trotzdem ist es besser, den Wert selbst mit Math.min() zu begrenzen.
Leistung: Höhere Werte kosten Speicherbandbreite. Auf schwachen Mobilgeräten reichen oft 4 oder 8. Ob sich 16 lohnt, hängt von der Szene ab.
Nur mit Mipmaps wirklich sinnvoll: Ohne Mipmap-Filter (*_MIPMAP_*) bringt AF wenig sichtbare Verbesserung. In WebGL 1 lassen sich Mipmaps nur für Texturen erzeugen, deren Kantenlänge eine Zweierpotenz ist.
Kompatibilität: Die Erweiterung wird in Chrome, Edge, Firefox und Safari unterstützt, sowohl in WebGL 1 als auch in WebGL 2. Die Herstellerpräfixe WEBKIT_ und MOZ_ braucht man nur noch für sehr alte Browser.
Die Einstellung gilt für die gebundene Textur. Wer Sampler-Objekte in WebGL 2 nutzt, setzt den Wert stattdessen mit gl.samplerParameterf().

Siehe auch

WebGLRenderingContext.getExtension() WebGLRenderingContext.getTexParameter() WebGLRenderingContext.generateMipmap() WebGLRenderingContext EXT_texture_compression_bptc extension