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 扩展规范 |
浏览器兼容性
加载中…