WEBGL_multi_draw 扩展
WEBGL_multi_draw
扩展是 WebGL API 的一部分,允许使用单个函数调用渲染多个图元。这可以提高 WebGL 应用程序的性能,因为它减少了渲染器中的绑定成本,并通过统一数据加快了 GPU 线程时间。
启用此扩展时
- 将添加处理一个调用中多个参数列表的新方法(请参见下面的方法列表)。
gl_DrawID
内置函数将添加到着色语言中。
注意:此扩展适用于 WebGL 1 和 WebGL 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
。
<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 教程 中。
let ext = gl.getExtension("WEBGL_multi_draw");
绘制多个数组
ext.multiDrawArraysWEBGL()
和 ext.multiDrawArraysInstancedWEBGL()
的示例调用
// multiDrawArrays variant
const firsts = new Int32Array(/* … */);
const counts = new Int32Array(/* … */);
ext.multiDrawArraysWEBGL(gl.TRIANGLES, firsts, 0, counts, 0, firsts.length);
// 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
。
// multiDrawElements variant
const counts = new Int32Array(/* … */);
const offsets = new Int32Array(/* … */);
ext.multiDrawElementsWEBGL(
gl.TRIANGLES,
counts,
0,
gl.UNSIGNED_SHORT,
offsets,
0,
counts.length,
);
// 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 的浏览器中加载。