WebGLRenderingContext.deleteRenderbuffer() — Methode · JavaScript-Referenz

Signatur

WebGLRenderingContext.prototype.deleteRenderbuffer(renderbuffer)

Beschreibung

deleteRenderbuffer() markiert einen mit createRenderbuffer() erzeugten Renderbuffer zum Löschen. Renderbuffer dienen meist als Tiefen-, Stencil- oder Farbanhang eines Framebuffers für das Offscreen-Rendering, z. B. für Post-Processing, Schatten oder Picking.

Die Methode verwenden Sie, wenn ein Renderbuffer nicht mehr gebraucht wird. Das ist zum Beispiel der Fall, wenn Sie beim Ändern der Canvas-Größe einen Framebuffer neu anlegen oder eine Szene bzw. Komponente abbauen. JavaScript-Garbage-Collection gibt GPU-Ressourcen nicht zuverlässig oder rechtzeitig frei. Explizites Löschen verhindert daher Speicherlecks auf der Grafikkarte.

Ist der Renderbuffer gerade an gl.RENDERBUFFER gebunden, wird die Bindung automatisch auf null gesetzt. Hängt er noch an einem aktuell gebundenen Framebuffer, wird er dort ebenfalls gelöst. Bei nicht gebundenen Framebuffern bleibt der Anhang laut Spezifikation bestehen, bis der Framebuffer selbst gelöscht oder neu belegt wird. Erst dann wird der Speicher tatsächlich freigegeben.

Parameter

Name	Typ	Default	Beschreibung
$renderbuffer Pflicht	WebGLRenderbuffer \| null		Der zu löschende Renderbuffer. Bei `null` oder einem bereits gelöschten Objekt passiert nichts.

Rückgabewert

Typ

void

Beschreibung

Kein Rückgabewert (undefined).

Beispiele

Renderbuffer erzeugen und wieder löschen

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

const rb = gl.createRenderbuffer();
gl.bindRenderbuffer(gl.RENDERBUFFER, rb);
gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, 256, 256);

console.log(gl.isRenderbuffer(rb));

gl.deleteRenderbuffer(rb);
console.log(gl.isRenderbuffer(rb));
console.log(gl.getParameter(gl.RENDERBUFFER_BINDING));

true false null

Offscreen-Framebuffer beim Ändern der Größe neu aufbauen

const gl = document.querySelector('canvas').getContext('webgl');
let fbo = null, colorTex = null, depthRb = null;

const createTarget = (width, height) => {
  // Alte Ressourcen freigeben
  if (fbo) gl.deleteFramebuffer(fbo);
  if (colorTex) gl.deleteTexture(colorTex);
  if (depthRb) gl.deleteRenderbuffer(depthRb);

  colorTex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, colorTex);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, null);
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);

  depthRb = gl.createRenderbuffer();
  gl.bindRenderbuffer(gl.RENDERBUFFER, depthRb);
  gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, width, height);

  fbo = gl.createFramebuffer();
  gl.bindFramebuffer(gl.FRAMEBUFFER, fbo);
  gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, colorTex, 0);
  gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depthRb);
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
};

createTarget(gl.drawingBufferWidth, gl.drawingBufferHeight);
window.addEventListener('resize', () => createTarget(gl.drawingBufferWidth, gl.drawingBufferHeight));

Aufräumen beim Abbau einer Komponente

const disposeRenderTarget = (gl, target) => {
  gl.bindFramebuffer(gl.FRAMEBUFFER, null);
  gl.deleteFramebuffer(target.framebuffer);
  gl.deleteRenderbuffer(target.depthStencil);
  // Mehrfaches Löschen ist harmlos
  gl.deleteRenderbuffer(target.depthStencil);
  target.framebuffer = null;
  target.depthStencil = null;
};

// Wichtig · Fallstricke

Ein gelöschter Renderbuffer darf nicht erneut gebunden werden. bindRenderbuffer() mit einem gelöschten Objekt erzeugt den Fehler INVALID_OPERATION. Setzen Sie deshalb Ihre Referenzen nach dem Löschen auf null.
An nicht gebundenen Framebuffern bleibt der Anhang bestehen. Der Speicher wird erst freigegeben, wenn auch der Framebuffer gelöscht oder neu belegt wird. Lösen Sie also Anhänge oder löschen Sie den Framebuffer mit.
Ein Renderbuffer aus einem anderen WebGL-Kontext führt zu INVALID_OPERATION.
Nach einem Kontextverlust (webglcontextlost) sind alle Objekte ungültig. Das Löschen ist dann wirkungslos, die Ressourcen müssen neu erzeugt werden.
Die Methode ist auch in WebGL2RenderingContext verfügbar und wird von allen modernen Browsern unterstützt.

Siehe auch

WebGLRenderingContext.createRenderbuffer() WebGLRenderingContext.bindRenderbuffer() WebGLRenderingContext.isRenderbuffer() WebGLRenderingContext.renderbufferStorage() WebGLRenderingContext.framebufferRenderbuffer() WebGLRenderingContext.deleteFramebuffer() WebGLRenderbuffer