</> programmierung.net
Start · Sprachen · JavaScript · Referenz · WebGLRenderingContext.texParameter[fi]()

WebGLRenderingContext.texParameter[fi]()

Methode

Setzt Parameter der aktuell gebundenen Textur, etwa Filterung (<code>TEXTURE_MIN_FILTER</code>) oder Randverhalten (<code>TEXTURE_WRAP_S</code>).

seit JavaScript WebGL 1.0 – Baseline: alle modernen Browser Kategorie: webapi

Signatur

WebGLRenderingContext.prototype.texParameterf(target, pname, param) / WebGLRenderingContext.prototype.texParameteri(target, pname, param)

Beschreibung

Mit texParameteri() (Ganzzahlwert) und texParameterf() (Gleitkommawert) legst du fest, wie WebGL eine Textur beim Sampling im Shader ausliest. Die Methoden wirken immer auf die Textur, die gerade mit gl.bindTexture() an das angegebene Ziel (target) gebunden ist, und nicht auf ein Texturobjekt, das du direkt übergibst.

Die wichtigsten Einstellungen sind:

  • Filterung: gl.TEXTURE_MAG_FILTER (beim Vergrößern: NEAREST oder LINEAR) und gl.TEXTURE_MIN_FILTER (beim Verkleinern, zusätzlich Mipmap-Varianten wie LINEAR_MIPMAP_LINEAR).
  • Randverhalten: gl.TEXTURE_WRAP_S und gl.TEXTURE_WRAP_T mit REPEAT, CLAMP_TO_EDGE oder MIRRORED_REPEAT.
  • Anisotrope Filterung: ext.TEXTURE_MAX_ANISOTROPY_EXT, wenn die Erweiterung EXT_texture_filter_anisotropic verfügbar ist. Hier setzt man meist einen Gleitkommawert mit texParameterf().
  • Nur WebGL 2: TEXTURE_WRAP_R, TEXTURE_MIN_LOD, TEXTURE_MAX_LOD, TEXTURE_BASE_LEVEL, TEXTURE_MAX_LEVEL, TEXTURE_COMPARE_MODE und TEXTURE_COMPARE_FUNC.

Rufe die Methode in der Regel direkt nach dem Anlegen und Befüllen einer Textur auf. Die Werte gehören zum Texturobjekt und bleiben erhalten, bis du sie wieder änderst. In WebGL 2 kannst du stattdessen auch WebGLSampler-Objekte verwenden. Deren Einstellungen haben Vorrang vor den Texturparametern.

Parameter

Name Typ Default Beschreibung
$target Pflicht GLenum Texturziel: gl.TEXTURE_2D oder gl.TEXTURE_CUBE_MAP; in WebGL 2 zusätzlich gl.TEXTURE_3D und gl.TEXTURE_2D_ARRAY.
$pname Pflicht GLenum Name des Parameters, z. B. gl.TEXTURE_MIN_FILTER, gl.TEXTURE_MAG_FILTER, gl.TEXTURE_WRAP_S, gl.TEXTURE_WRAP_T oder ext.TEXTURE_MAX_ANISOTROPY_EXT.
$param Pflicht GLint | GLfloat Neuer Wert. Bei texParameteri() ist das eine Ganzzahl bzw. ein GLenum wie gl.LINEAR, bei texParameterf() eine Gleitkommazahl.

Rückgabewert

Typ
void
Beschreibung
Kein Rückgabewert (undefined). Fehler meldet WebGL nur über gl.getError().

Beispiele

Textur mit linearer Filterung und Randbegrenzung anlegen

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

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// 1×1 blauer Pixel als Platzhalter
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA,
  gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255]));

// Ohne Mipmaps: MIN_FILTER muss NEAREST oder LINEAR sein
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

console.log(gl.getTexParameter(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER) === gl.LINEAR);
true

Bild laden, Mipmaps erzeugen und Kachelung aktivieren

const loadTexture = async (gl, url) => {
  const img = new Image();
  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);

  // In WebGL 1 nur bei Zweierpotenz-Größen (z. B. 512×512) erlaubt
  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);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
  return tex;
};

const gl = document.querySelector('canvas').getContext('webgl');
const floorTex = await loadTexture(gl, 'boden-512.png');

Anisotrope Filterung mit texParameterf

const gl = document.querySelector('canvas').getContext('webgl');
const ext = gl.getExtension('EXT_texture_filter_anisotropic');

const tex = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, tex);

if (ext) {
  const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  gl.texParameterf(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(8, max));
  console.log('Anisotropie:', gl.getTexParameter(gl.TEXTURE_2D, ext.TEXTURE_MAX_ANISOTROPY_EXT));
} else {
  console.log('Anisotrope Filterung nicht verfügbar');
}
Anisotropie: 8

// Wichtig · Fallstricke

  • Häufigster Fehler – schwarze Textur: Der Standardwert von TEXTURE_MIN_FILTER ist NEAREST_MIPMAP_LINEAR. Gibt es keine Mipmaps und stellst du den Filter nicht auf LINEAR oder NEAREST um, gilt die Textur als unvollständig und wird schwarz gezeichnet.
  • Größen, die keine Zweierpotenz sind (NPOT), in WebGL 1: Solche Texturen funktionieren nur mit CLAMP_TO_EDGE für beide Wrap-Richtungen und ohne Mipmap-Filter. WebGL 2 hat diese Einschränkung nicht.
  • Die Methoden wirken auf die aktuell gebundene Textur der aktiven Textureinheit. Ruf also vorher bindTexture() (und gegebenenfalls activeTexture()) auf.
  • Ein ungültiges target oder pname erzeugt INVALID_ENUM, ein unzulässiger Wert für param ebenfalls INVALID_ENUM bzw. INVALID_VALUE. Prüfe das mit gl.getError().
  • Parameter, die nur WebGL 2 kennt (TEXTURE_WRAP_R, TEXTURE_MIN_LOD usw.), gibt es nur in einem WebGL2RenderingContext.
  • Kompatibilität: In allen modernen Browsern mit WebGL-Unterstützung verfügbar, auch in OffscreenCanvas-Kontexten.

Siehe auch

WebGLRenderingContext.getParameter() WebGLRenderingContext.getTexParameter() WebGLRenderingContext.bindFramebuffer() WebGLRenderingContext.clearStencil() WebGLRenderingContext.getBufferParameter() WebGLRenderingContext.uniform[1234][fi][v]()
← Vorheriger Eintrag WebGLRenderingContext.texImage2D()