WebGL2RenderingContext.samplerParameter[if]() — Methode · JavaScript-Referenz

Signatur

WebGL2RenderingContext.samplerParameteri(sampler, pname, param) / WebGL2RenderingContext.samplerParameterf(sampler, pname, param)

Beschreibung

Mit samplerParameteri() (Ganzzahlwert) und samplerParameterf() (Gleitkommawert) konfigurierst du ein WebGLSampler-Objekt. Ein Sampler legt fest, wie eine Textur ausgelesen wird: Vergrößerungs- und Verkleinerungsfilter, Verhalten an den Rändern (Wrap-Modus), LOD-Grenzen sowie Tiefenvergleich für Schattentexturen.

Der Vorteil gegenüber texParameter[fi](): Die Sampling-Einstellungen sind von der Textur getrennt. Eine Textur kann so gleichzeitig mit verschiedenen Samplern (z. B. einmal NEAREST, einmal LINEAR) genutzt werden, und ein Sampler lässt sich für viele Texturen wiederverwenden. Ist ein Sampler per bindSampler(unit, sampler) an eine Textureinheit gebunden, überschreibt er die Parameter der dort gebundenen Textur.

Verwende samplerParameteri() für Enum-Werte wie gl.LINEAR, gl.CLAMP_TO_EDGE oder gl.COMPARE_REF_TO_TEXTURE, und samplerParameterf() für kontinuierliche Werte wie gl.TEXTURE_MIN_LOD, gl.TEXTURE_MAX_LOD oder die anisotrope Filterung.

Gültige Werte für pname:

gl.TEXTURE_MAG_FILTER – LINEAR, NEAREST
gl.TEXTURE_MIN_FILTER – LINEAR, NEAREST, NEAREST_MIPMAP_NEAREST, LINEAR_MIPMAP_NEAREST, NEAREST_MIPMAP_LINEAR, LINEAR_MIPMAP_LINEAR
gl.TEXTURE_WRAP_S, gl.TEXTURE_WRAP_T, gl.TEXTURE_WRAP_R – REPEAT, CLAMP_TO_EDGE, MIRRORED_REPEAT
gl.TEXTURE_COMPARE_MODE – NONE, COMPARE_REF_TO_TEXTURE
gl.TEXTURE_COMPARE_FUNC – LEQUAL, GEQUAL, LESS, GREATER, EQUAL, NOTEQUAL, ALWAYS, NEVER
gl.TEXTURE_MIN_LOD, gl.TEXTURE_MAX_LOD – Gleitkommawert
ext.TEXTURE_MAX_ANISOTROPY_EXT – nur mit Erweiterung EXT_texture_filter_anisotropic

Parameter

Name	Typ	Beschreibung
$sampler Pflicht	WebGLSampler	Das zu konfigurierende Sampler-Objekt, erzeugt mit `gl.createSampler()`.
$pname Pflicht	GLenum	Name des Parameters, z. B. `gl.TEXTURE_MIN_FILTER`, `gl.TEXTURE_WRAP_S` oder `gl.TEXTURE_MAX_LOD`.
$param Pflicht	GLint \| GLfloat	Neuer Wert: bei `samplerParameteri()` eine Ganzzahl bzw. Enum-Konstante, bei `samplerParameterf()` eine Gleitkommazahl.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined). Fehler werden über gl.getError() gemeldet.

Beispiele

Sampler mit Mipmap-Filterung und Wiederholung anlegen

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

const sampler = gl.createSampler();
gl.samplerParameteri(sampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.samplerParameteri(sampler, gl.TEXTURE_WRAP_T, gl.REPEAT);

// An Textureinheit 0 binden – überschreibt die Parameter der Textur
gl.bindSampler(0, sampler);
console.log(gl.getSamplerParameter(sampler, gl.TEXTURE_MIN_FILTER) === gl.LINEAR_MIPMAP_LINEAR);

true

Eine Textur mit zwei Samplern (pixelig und glatt)

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

const makeSampler = (filter) => {
  const s = gl.createSampler();
  gl.samplerParameteri(s, gl.TEXTURE_MIN_FILTER, filter);
  gl.samplerParameteri(s, gl.TEXTURE_MAG_FILTER, filter);
  gl.samplerParameteri(s, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
  gl.samplerParameteri(s, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
  return s;
};

const pixelSampler = makeSampler(gl.NEAREST);
const smoothSampler = makeSampler(gl.LINEAR);

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

// Dieselbe Textur, zwei Sampling-Varianten im Shader
gl.bindSampler(0, pixelSampler);
gl.bindSampler(1, smoothSampler);

Schatten-Sampler und LOD-Begrenzung per samplerParameterf

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

const shadowSampler = gl.createSampler();
gl.samplerParameteri(shadowSampler, gl.TEXTURE_COMPARE_MODE, gl.COMPARE_REF_TO_TEXTURE);
gl.samplerParameteri(shadowSampler, gl.TEXTURE_COMPARE_FUNC, gl.LEQUAL);
gl.samplerParameteri(shadowSampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.samplerParameteri(shadowSampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Gleitkommawerte: nur Mipmap-Stufen 0 bis 4 verwenden
gl.samplerParameterf(shadowSampler, gl.TEXTURE_MIN_LOD, 0.0);
gl.samplerParameterf(shadowSampler, gl.TEXTURE_MAX_LOD, 4.0);

// Optional: anisotrope Filterung
const ext = gl.getExtension('EXT_texture_filter_anisotropic');
if (ext) {
  const max = gl.getParameter(ext.MAX_TEXTURE_MAX_ANISOTROPY_EXT);
  gl.samplerParameterf(shadowSampler, ext.TEXTURE_MAX_ANISOTROPY_EXT, Math.min(8, max));
}
console.log(gl.getError() === gl.NO_ERROR);

true

Siehe auch

WebGL2RenderingContext.getSamplerParameter() WebGL2RenderingContext.getQueryParameter() WebGL2RenderingContext.getSyncParameter() WebGL2RenderingContext.clearBuffer[fiuv]() WebGL2RenderingContext.getIndexedParameter()