WebGL2RenderingContext.deleteVertexArray() — Methode · JavaScript-Referenz

Signatur

WebGL2RenderingContext.prototype.deleteVertexArray(vertexArray)

Beschreibung

Die Methode deleteVertexArray() des WebGL-2-Kontexts markiert ein zuvor mit createVertexArray() erzeugtes Vertex Array Object (VAO) zum Löschen. Ein VAO speichert den kompletten Zustand der Vertex-Attribute: welche Puffer an welche Attribute gebunden sind, Formate, Strides, Offsets, Divisoren und den gebundenen ELEMENT_ARRAY_BUFFER.

Man ruft sie auf, wenn ein Mesh bzw. eine Geometrie nicht mehr gebraucht wird, zum Beispiel beim Wechsel einer Szene, beim Entladen eines Levels oder beim Abbauen einer Komponente in einer Single-Page-App. So wachsen die GPU-Ressourcen nicht unkontrolliert an. Der JavaScript-Garbage-Collector gibt GPU-Speicher nämlich nicht verlässlich oder rechtzeitig frei.

Wichtig: Beim Löschen eines VAO werden die Puffer darin nicht gelöscht. Die WebGLBuffer-Objekte, die in einem VAO referenziert sind, musst du selbst mit deleteBuffer() freigeben. Ist das VAO beim Löschen gerade gebunden, wird die Bindung automatisch auf das Standard-VAO (null) zurückgesetzt.

Parameter

Name	Typ	Default	Beschreibung
$vertexArray Pflicht	WebGLVertexArrayObject \| null		Das VAO, das gelöscht werden soll. Bei `null` oder einem bereits gelöschten Objekt passiert nichts.

Beispiele

VAO erzeugen, benutzen und löschen

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

const vao = gl.createVertexArray();
gl.bindVertexArray(vao);
// ... Attribute konfigurieren ...
gl.bindVertexArray(null);

console.log(gl.isVertexArray(vao)); // true
gl.deleteVertexArray(vao);
console.log(gl.isVertexArray(vao)); // false

true false

Mesh sauber freigeben (VAO + Puffer)

const createMesh = (gl, positions) => {
  const vao = gl.createVertexArray();
  const vbo = gl.createBuffer();
  gl.bindVertexArray(vao);
  gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
  gl.enableVertexAttribArray(0);
  gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0);
  gl.bindVertexArray(null);
  return { vao, vbo, count: positions.length / 2 };
};

const disposeMesh = (gl, mesh) => {
  // VAO löscht keine Puffer – beides einzeln freigeben
  gl.deleteVertexArray(mesh.vao);
  gl.deleteBuffer(mesh.vbo);
};

const gl = document.createElement('canvas').getContext('webgl2');
const triangle = createMesh(gl, [0, 0.5, -0.5, -0.5, 0.5, -0.5]);
disposeMesh(gl, triangle);
console.log(gl.getError() === gl.NO_ERROR);

true

Gebundenes VAO löschen setzt die Bindung zurück

const gl = document.createElement('canvas').getContext('webgl2');
const vao = gl.createVertexArray();
gl.bindVertexArray(vao);

gl.deleteVertexArray(vao);
console.log(gl.getParameter(gl.VERTEX_ARRAY_BINDING)); // null

null

// Wichtig · Fallstricke

Puffer werden nicht mitgelöscht: Referenzierte WebGLBuffer-Objekte bleiben bestehen und müssen mit deleteBuffer() freigegeben werden.
Ein gelöschtes VAO lässt sich nicht erneut binden. bindVertexArray() mit einem gelöschten Objekt erzeugt INVALID_OPERATION.
Das VAO muss aus demselben Kontext stammen. Ein Objekt aus einem anderen Kontext führt zu INVALID_OPERATION.
Geht der Kontext verloren (webglcontextlost), werden alle Objekte ungültig. Dann deleteVertexArray() aufzurufen ist unschädlich, bewirkt aber nichts.
Nur in WebGL 2 verfügbar. In WebGL 1 gibt es dafür die Erweiterung OES_vertex_array_object mit der Methode deleteVertexArrayOES().

Siehe auch

WebGL2RenderingContext.createVertexArray() WebGL2RenderingContext.bindVertexArray() WebGL2RenderingContext.isVertexArray() WebGLVertexArrayObject WebGLRenderingContext.deleteBuffer()