WEBGL_multi_draw Erweiterung

Die WEBGL_multi_draw Erweiterung ist Teil der WebGL API und ermöglicht das Rendern von mehr als einem Primiv mit einem einzelnen Funktionsaufruf. Dies kann die Leistung einer WebGL-Anwendung verbessern, da es die Bindungskosten im Renderer reduziert und die GPU-Thread-Zeit mit einheitlichen Daten erhöht.

Wenn diese Erweiterung aktiviert ist:

  • Neue Methoden, die mehrere Listen von Argumenten in einem Aufruf verarbeiten, werden hinzugefügt (siehe Methodensammlung unten).
  • Das integrierte gl_DrawID wird zur Shadersprache hinzugefügt.

Hinweis: Diese Erweiterung ist sowohl für WebGL 1 als auch WebGL 2 Kontexte verfügbar.

Im Shader-Code muss die Direktive #extension GL_ANGLE_multi_draw aufgerufen werden, um die Erweiterung zu aktivieren.

Diese Erweiterung aktiviert implizit die ANGLE_instanced_arrays Erweiterung.

Instanzmethoden

ext.multiDrawArraysWEBGL()

Rendert mehrere Primitiven aus Array-Daten (identisch zu mehreren Aufrufen von drawArrays).

ext.multiDrawElementsWEBGL()

Rendert mehrere Primitiven aus Element-Array-Daten (identisch zu mehreren Aufrufen von drawElements).

ext.multiDrawArraysInstancedWEBGL()

Rendert mehrere Primitiven aus Array-Daten (identisch zu mehreren Aufrufen von drawArraysInstanced).

ext.multiDrawElementsInstancedWEBGL()

Rendert mehrere Primitiven aus Element-Array-Daten (identisch zu mehreren Aufrufen von drawElementsInstanced).

Shader-Erweiterung

Hinweis: Obwohl der Erweiterungsname WEBGL_multi_draw lautet, muss die Erweiterung mit der Direktive #extension GL_ANGLE_multi_draw aktiviert werden, um die Erweiterung in einem Shader zu verwenden.

Wenn diese Erweiterung aktiviert ist, kann das integrierte gl_DrawID im Shader-Code verwendet werden. Für jeden multi* Draw-Aufrufvariante kann der Index der Zeichnung i vom Vertex-Shader als gl_DrawID gelesen werden. Für nicht-multi* Aufrufe ist der Wert von gl_DrawID 0.

html
<script type="x-shader/x-vertex">
  #extension GL_ANGLE_multi_draw : require
  void main() {
    gl_Position = vec4(gl_DrawID, 0, 0, 1);
  }
</script>

Beispiele

Aktivierung der Erweiterung

WebGL-Erweiterungen sind mit der WebGLRenderingContext.getExtension() Methode verfügbar. Für weitere Informationen siehe auch Verwendung von Erweiterungen im WebGL Tutorial.

js
let ext = gl.getExtension("WEBGL_multi_draw");

Zeichnen mehrerer Arrays

Beispielaufrufe für ext.multiDrawArraysWEBGL() und ext.multiDrawArraysInstancedWEBGL():

js
// multiDrawArrays variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
js
// multiDrawArraysInstanced variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
const instanceCounts = new Int32Array(/* … */);
ext.multiDrawArraysInstancedWEBGL(
  gl.TRIANGLES,
  firsts,
  0,
  counts,
  0,
  instanceCounts,
  0,
  firsts.length,
);

Zeichnen mehrerer Elemente

Beispielaufrufe für ext.multiDrawElementsWEBGL() und ext.multiDrawElementsInstancedWEBGL().

Es wird angenommen, dass die zuvor auf den ELEMENT_ARRAY_BUFFER hochgeladenen Indizes als UNSIGNED_SHORT behandelt werden.

js
// multiDrawElements variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
ext.multiDrawElementsWEBGL(
  gl.TRIANGLES,
  counts,
  0,
  gl.UNSIGNED_SHORT,
  offsets,
  0,
  counts.length,
);
js
// multiDrawElementsInstanced variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
const instanceCounts = new Int32Array(/* … */);
ext.multiDrawElementsInstancedWEBGL(
  gl.TRIANGLES,
  counts,
  0,
  gl.UNSIGNED_SHORT,
  offsets,
  0,
  instanceCounts,
  0,
  counts.length,
);

Spezifikationen

Specification
WebGL WEBGL_multi_draw Extension Specification

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch