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 扩展规范

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅