WebGLRenderingContext.deleteTexture() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.deleteTexture(texture)

Beschreibung

Mit deleteTexture() markierst du ein zuvor mit createTexture() erzeugtes WebGLTexture-Objekt als gelöscht. Der Treiber kann den belegten Grafikspeicher (Mipmaps, Pixeldaten) danach freigeben. Das ist wichtig, wenn Texturen häufig wechseln, zum Beispiel bei Kachel-Karten, Videoframes oder beim Wechsel zwischen Szenen oder Levels.

Ist die Textur beim Löschen noch an eine Texture-Unit gebunden (TEXTURE_2D oder TEXTURE_CUBE_MAP) oder hängt sie als Attachment an einem gerade gebundenen Framebuffer, hebt WebGL diese Bindung automatisch auf. Bei Framebuffern, die gerade nicht gebunden sind, bleibt das Attachment bestehen. Der Speicher wird dann erst frei, wenn die Textur nirgends mehr verwendet wird.

Das JavaScript-Objekt selbst lebt weiter, bis die Garbage Collection es einsammelt. Es ist nach dem Löschen aber ungültig. Wenn du es erneut an bindTexture() übergibst, erzeugt WebGL den Fehler INVALID_OPERATION. Verlasse dich beim GPU-Speicher nicht auf die Garbage Collection: Sie läuft zu unvorhersehbaren Zeitpunkten und kennt den Speicherdruck auf der GPU nicht.

Parameter

Name	Typ	Default	Beschreibung
$texture Pflicht	WebGLTexture \| null		Das zu löschende Texturobjekt. Bei `null` oder einer bereits gelöschten Textur passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Textur erzeugen, nutzen und wieder löschen

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

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
// 1×1-Pixel in Rot als Platzhalter
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
  new Uint8Array([255, 0, 0, 255]));

// ... Zeichnen ...

gl.deleteTexture(texture);
console.log(gl.isTexture(texture));
console.log(gl.getParameter(gl.TEXTURE_BINDING_2D));

false null

Texturen beim Szenenwechsel aufräumen

class TextureCache {
  constructor(gl) {
    this.gl = gl;
    this.textures = new Map();
  }

  async load(url) {
    if (this.textures.has(url)) return this.textures.get(url);
    const img = new Image();
    img.src = url;
    await img.decode();

    const { gl } = this;
    const tex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, tex);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    this.textures.set(url, tex);
    return tex;
  }

  // GPU-Speicher explizit freigeben
  dispose() {
    for (const tex of this.textures.values()) {
      this.gl.deleteTexture(tex);
    }
    this.textures.clear();
  }
}

const gl = document.querySelector('canvas').getContext('webgl');
const cache = new TextureCache(gl);
// beim Levelwechsel:
cache.dispose();

Fehler bei Nutzung einer gelöschten Textur

const gl = document.createElement('canvas').getContext('webgl');
const tex = gl.createTexture();
gl.deleteTexture(tex);

gl.bindTexture(gl.TEXTURE_2D, tex);
console.log(gl.getError() === gl.INVALID_OPERATION);

true

// Wichtig · Fallstricke

Doppeltes Löschen ist harmlos. Eine gelöschte Textur wiederzuverwenden ist dagegen ein Fehler (INVALID_OPERATION). Setze deine Referenz nach dem Löschen am besten auf null.
Texturen, die an einem nicht gebundenen Framebuffer hängen, belegen weiter Speicher. Lösche auch den Framebuffer (deleteFramebuffer()) oder löse das Attachment vorher.
Geht der Kontext verloren (webglcontextlost), sind alle Texturen automatisch ungültig. In dem Fall ist deleteTexture() wirkungslos, und du musst die Texturen nach webglcontextrestored neu erzeugen.
Du kannst eine Textur nur in dem Kontext löschen, der sie erzeugt hat. Andernfalls erzeugt WebGL den Fehler INVALID_OPERATION.
Die Methode ist in WebGL 1 und genauso in WebGL2RenderingContext verfügbar. Alle modernen Browser unterstützen sie.

Siehe auch

WebGLRenderingContext.createTexture() WebGLRenderingContext.bindTexture() WebGLRenderingContext.isTexture() WebGLRenderingContext.texImage2D() WebGLRenderingContext.deleteFramebuffer() WebGLTexture