WebGLObject — Schnittstelle · JavaScript-Referenz

Signatur

interface WebGLObject

Beschreibung

WebGLObject ist die gemeinsame Basisschnittstelle der WebGL API. Von ihr erben alle Objekte, die für eine Ressource auf der Grafikkarte stehen: WebGLBuffer, WebGLFramebuffer, WebGLProgram, WebGLRenderbuffer, WebGLShader und WebGLTexture. In WebGL 2 kommen WebGLQuery, WebGLSampler, WebGLSync, WebGLTransformFeedback und WebGLVertexArrayObject hinzu.

Die Schnittstelle definiert keine eigenen Eigenschaften oder Methoden und besitzt keinen aufrufbaren Konstruktor. Du erzeugst WebGL-Objekte immer über die Fabrikmethoden des Rendering-Kontexts, zum Beispiel gl.createBuffer() oder gl.createTexture(). Mit den passenden delete*-Methoden gibst du sie wieder frei.

Im Alltag brauchst du WebGLObject vor allem für Typprüfungen mit instanceof, etwa in Hilfsfunktionen, die beliebige WebGL-Ressourcen verwalten oder protokollieren. Jedes WebGL-Objekt gehört zu genau dem Kontext, der es erzeugt hat. In einem anderen Kontext kannst du es nicht verwenden.

Beispiele

WebGL-Objekte erzeugen und Vererbung prüfen

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

// Instanzen entstehen über Fabrikmethoden des Kontexts
const buffer = gl.createBuffer();
const texture = gl.createTexture();

console.log(buffer instanceof WebGLBuffer);   // true
console.log(buffer instanceof WebGLObject);   // true
console.log(texture instanceof WebGLObject);  // true

true true true

Direkte Instanziierung ist nicht möglich

try {
  new WebGLObject();
} catch (err) {
  console.log(err.name); // TypeError: Illegal constructor
}

TypeError

Generischer Ressourcen-Tracker zum Aufräumen

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

const track = (obj) => {
  if (!(obj instanceof WebGLObject)) {
    throw new TypeError('Kein WebGL-Objekt');
  }
  resources.add(obj);
  return obj;
};

const disposeAll = () => {
  for (const obj of resources) {
    if (obj instanceof WebGLBuffer) gl.deleteBuffer(obj);
    else if (obj instanceof WebGLTexture) gl.deleteTexture(obj);
    else if (obj instanceof WebGLProgram) gl.deleteProgram(obj);
    else if (obj instanceof WebGLShader) gl.deleteShader(obj);
    else if (obj instanceof WebGLFramebuffer) gl.deleteFramebuffer(obj);
    else if (obj instanceof WebGLRenderbuffer) gl.deleteRenderbuffer(obj);
    else if (obj instanceof WebGLVertexArrayObject) gl.deleteVertexArray(obj);
  }
  console.log(`${resources.size} Ressourcen freigegeben`);
  resources.clear();
};

track(gl.createBuffer());
track(gl.createTexture());
track(gl.createVertexArray());
disposeAll();

3 Ressourcen freigegeben

// Wichtig · Fallstricke

Kein Konstruktor: new WebGLObject() und new WebGLBuffer() werfen einen TypeError. Nutze immer die gl.create*()-Methoden.
Speicherverwaltung: Der Garbage Collector gibt GPU-Speicher nicht zuverlässig oder nicht sofort frei. Rufe deshalb selbst gl.deleteBuffer(), gl.deleteTexture() usw. auf, sobald du eine Ressource nicht mehr brauchst.
Kontextverlust: Nach webglcontextlost sind alle vorhandenen WebGL-Objekte ungültig. Nach webglcontextrestored musst du sie neu erzeugen. Mit gl.isBuffer(), gl.isTexture() usw. prüfst du, ob ein Objekt noch gültig ist.
Nicht kontextübergreifend: Ein Objekt aus einem Kontext in einem anderen Kontext zu verwenden, erzeugt den Fehler INVALID_OPERATION.
Kompatibilität: Alle modernen Browser unterstützen die Schnittstelle. Die WebGL-2-Unterklassen wie WebGLVertexArrayObject gibt es nur, wenn der Browser WebGL 2 unterstützt. createVertexArray() existiert nur auf einem webgl2-Kontext. In Web Workers steht die Schnittstelle über OffscreenCanvas zur Verfügung.

Siehe auch

WebGLQuery WebGLSync WebSocket BlobEvent WebGLBuffer