Signatur
Beschreibung
Die Methode createSampler() des WebGL2RenderingContext erzeugt ein Sampler-Objekt. Ein Sampler enthält Einstellungen, die festlegen, wie eine Textur im Shader gelesen wird: Filterung (TEXTURE_MIN_FILTER, TEXTURE_MAG_FILTER), Randverhalten (TEXTURE_WRAP_S/T/R), LOD-Grenzen und Vergleichsmodus für Tiefentexturen.
In WebGL 1 hingen diese Einstellungen immer fest an der Textur (texParameteri()). Mit Samplern trennst du Daten (Textur) und Leseverhalten (Sampler). So kannst du dieselbe Textur mit unterschiedlichen Filtern lesen oder einen Sampler für viele Texturen wiederverwenden, ohne ständig die Texturparameter zu ändern.
Üblicher Ablauf: Sampler mit createSampler() anlegen, mit samplerParameteri() bzw. samplerParameterf() einrichten und mit bindSampler(unit, sampler) an eine Textureinheit binden. Solange ein Sampler an einer Einheit gebunden ist, überschreibt er die Parameter der dort gebundenen Textur. Wird er nicht mehr gebraucht, gibst du ihn mit deleteSampler() frei.
Rückgabewert
WebGLSampler-Objekt. Ist der Kontext verloren (context lost), wird null zurückgegeben.Beispiele
Sampler erstellen und konfigurieren
const canvas = document.querySelector('canvas');
const gl = canvas.getContext('webgl2');
if (!gl) throw new Error('WebGL 2 wird nicht unterstützt');
const sampler = gl.createSampler();
// Trilineare Filterung und wiederholende Ränder
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);
console.log(gl.isSampler(sampler));Dieselbe Textur mit zwei unterschiedlichen Samplern lesen
const gl = document.querySelector('canvas').getContext('webgl2');
const pixelSampler = gl.createSampler();
gl.samplerParameteri(pixelSampler, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.samplerParameteri(pixelSampler, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
const smoothSampler = gl.createSampler();
gl.samplerParameteri(smoothSampler, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.samplerParameteri(smoothSampler, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE,
new Uint8Array([255,0,0,255, 0,255,0,255, 0,0,255,255, 255,255,255,255]));
// Textur auf Einheit 0 und 1, jeweils mit anderem Sampler
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(0, pixelSampler);
gl.activeTexture(gl.TEXTURE1);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.bindSampler(1, smoothSampler);
// Im Shader: uniform sampler2D uPixel (Einheit 0), uSmooth (Einheit 1)
// gl.uniform1i(locPixel, 0); gl.uniform1i(locSmooth, 1);Sampler lösen und aufräumen
const gl = document.querySelector('canvas').getContext('webgl2');
const sampler = gl.createSampler();
gl.bindSampler(0, sampler);
// ... rendern ...
gl.bindSampler(0, null); // wieder Texturparameter verwenden
gl.deleteSampler(sampler);
console.log(gl.isSampler(sampler));// Wichtig · Fallstricke
- Nur WebGL 2: Die Methode existiert nicht im
WebGLRenderingContext(WebGL 1). Prüfe, obcanvas.getContext('webgl2')tatsächlich einen Kontext liefert. - Ein gebundener Sampler überschreibt die per
texParameteri()gesetzten Parameter der Textur. Wer sich wundert, warum Texturparameter „nicht wirken“, sollte prüfen, ob noch ein Sampler gebunden ist (gl.bindSampler(unit, null)). bindSampler()erwartet die Einheit als Zahl (0,1, …), nichtgl.TEXTURE0.- Mipmap-Filter (
*_MIPMAP_*) setzen voraus, dass die Textur Mipmaps besitzt (gl.generateMipmap()), sonst bleibt die Textur unvollständig und wird schwarz gerendert. - Nach einem Kontextverlust sind alle Sampler ungültig und müssen nach
webglcontextrestoredneu erstellt werden. - Sampler nicht pro Frame neu erzeugen – einmal anlegen und wiederverwenden; die Anzahl unterschiedlicher Sampler ist in der Praxis klein.