WEBGL_multi_draw 扩展

可用性有限

此特性不是基线特性,因为它在一些最广泛使用的浏览器中不起作用。

WEBGL_multi_draw 扩展是 WebGL API 的一部分,它允许通过单次函数调用渲染多个图元。这可以提高 WebGL 应用程序的性能,因为它减少了渲染器中的绑定开销,并通过统一数据加快了 GPU 线程的时间。

启用此扩展后

  • 将添加处理单次调用中多个参数列表的新方法(请参阅下面的方法列表)。
  • 将 `gl_DrawID` 内置变量添加到着色语言中。

注意:此扩展同时适用于 WebGL 1WebGL 2 上下文。

在着色器代码中,需要调用 `#extension GL_ANGLE_multi_draw` 指令来启用该扩展。

此扩展会隐式启用 ANGLE_instanced_arrays 扩展。

实例方法

ext.multiDrawArraysWEBGL()

从数组数据渲染多个图元(与多次调用 drawArrays 相同)。

ext.multiDrawElementsWEBGL()

从元素数组数据渲染多个图元(与多次调用 drawElements 相同)。

ext.multiDrawArraysInstancedWEBGL()

从数组数据渲染多个图元(与多次调用 drawArraysInstanced 相同)。

ext.multiDrawElementsInstancedWEBGL()

从元素数组数据渲染多个图元(与多次调用 drawElementsInstanced 相同)。

着色器扩展

注意:虽然扩展名为 `WEBGL_multi_draw`,但在着色器中使用该扩展时,必须通过 `#extension GL_ANGLE_multi_draw` 指令启用它。

启用此扩展后,`gl_DrawID` 内置变量可以在着色器代码中使用。对于任何 `multi*` 绘制调用变体,绘制索引 `i` 可以作为 `gl_DrawID` 被顶点着色器读取。对于非 `multi*` 调用,`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>

示例

启用扩展

可以使用 WebGLRenderingContext.getExtension() 方法来访问 WebGL 扩展。有关更多信息,请参阅 WebGL 教程中的 使用扩展

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

绘制多个数组

ext.multiDrawArraysWEBGL()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,
);

绘制多个元素

ext.multiDrawElementsWEBGL()ext.multiDrawElementsInstancedWEBGL() 的示例调用。

假定先前已上传到 `ELEMENT_ARRAY_BUFFER` 的索引将被视为 `UNSIGNED_SHORT`。

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,
);

规范

规范
WebGL WEBGL_multi_draw 扩展规范

浏览器兼容性

另见