WEBGL_multi_draw Erweiterung

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
WEBGL_multi_draw
multiDrawArraysInstancedWEBGL
multiDrawArraysWEBGL
multiDrawElementsInstancedWEBGL
multiDrawElementsWEBGL

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch