WebGLRenderingContext.deleteBuffer() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.deleteBuffer(buffer)

Beschreibung

Mit deleteBuffer() gibst du einen Buffer frei, den du zuvor mit gl.createBuffer() erzeugt hast. Solche Buffer enthalten Vertex-Daten (ARRAY_BUFFER) oder Indizes (ELEMENT_ARRAY_BUFFER) und belegen Speicher auf der Grafikkarte. Der Garbage Collector von JavaScript räumt diesen Speicher zwar irgendwann auf, wann genau das passiert, ist aber nicht festgelegt. Wer Geometrie dynamisch lädt und wieder verwirft, sollte deshalb explizit aufräumen.

Ist der Buffer beim Löschen noch an ein Bindungsziel gebunden (z. B. über gl.bindBuffer(gl.ARRAY_BUFFER, buffer)), wird diese Bindung automatisch aufgehoben. Hängt der Buffer noch an einem Vertex-Attribut (vertexAttribPointer) oder einem Vertex Array Object, wird er wirklich erst gelöscht, wenn keine Referenz mehr darauf zeigt.

Typische Einsatzfälle: Szenenwechsel, Level-Wechsel in Spielen, das Entfernen einzelner Objekte oder das Zerstören einer WebGL-Komponente, z. B. beim Unmount in React oder Vue.

Parameter

Name	Typ	Default	Beschreibung
$buffer Pflicht	WebGLBuffer \| null		Das zu löschende Buffer-Objekt aus `gl.createBuffer()`. Bei `null` oder einem bereits gelöschten Buffer passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Buffer anlegen, befüllen und wieder löschen

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

const buffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([0, 1, -1, -1, 1, -1]), gl.STATIC_DRAW);

console.log(gl.isBuffer(buffer)); // true

gl.deleteBuffer(buffer);
console.log(gl.isBuffer(buffer)); // false
console.log(gl.getParameter(gl.ARRAY_BUFFER_BINDING)); // Bindung wurde aufgehoben

true false null

Aufräumen beim Entfernen eines Mesh-Objekts

class Mesh {
  constructor(gl, positions, indices) {
    this.gl = gl;
    this.vbo = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

    this.ibo = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.ibo);
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
  }

  dispose() {
    const { gl } = this;
    gl.deleteBuffer(this.vbo);
    gl.deleteBuffer(this.ibo);
    // Referenzen verwerfen, damit das Objekt nicht versehentlich weiter genutzt wird
    this.vbo = null;
    this.ibo = null;
  }
}

const gl = document.createElement('canvas').getContext('webgl');
const quad = new Mesh(gl, [-1, -1, 1, -1, 1, 1, -1, 1], [0, 1, 2, 0, 2, 3]);
quad.dispose();
console.log(quad.vbo);

null

Mehrfaches Löschen ist harmlos

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

gl.deleteBuffer(buf);
gl.deleteBuffer(buf);   // keine Wirkung
gl.deleteBuffer(null);  // ebenfalls keine Wirkung

console.log(gl.getError() === gl.NO_ERROR);

true

// Wichtig · Fallstricke

Nach dem Löschen nicht mehr verwenden: Wird ein gelöschter Buffer an bindBuffer() übergeben, erzeugt das in WebGL 1 den Fehler INVALID_OPERATION. Setze deine Referenzen daher auf null.
Kontext muss passen: Ein Buffer, der in einem anderen WebGL-Kontext erzeugt wurde, führt zu INVALID_OPERATION.
Verzögerte Freigabe: Solange ein Vertex-Attribut oder ein VAO den Buffer noch referenziert, bleibt der Speicher belegt. isBuffer() liefert dann trotzdem schon false.
Kontextverlust: Nach webglcontextlost sind alle Buffer ohnehin ungültig. Ein Aufruf von deleteBuffer() ist dann wirkungslos, und nach webglcontextrestored musst du die Buffer neu anlegen.
Die Methode gibt es genauso in WebGL2RenderingContext. Sie wird von allen aktuellen Browsern unterstützt.

Siehe auch

WebGLRenderingContext.createBuffer() WebGLRenderingContext.bindBuffer() WebGLRenderingContext.bufferData() WebGLRenderingContext.isBuffer() WebGLBuffer WebGLRenderingContext