ANGLE_instanced_arrays
ANGLE_instanced_arrays 扩展是 WebGL API 的一部分,它允许在共享相同顶点数据、图元计数和类型的同一对象或一组相似对象被绘制多次时,高效地进行绘制。
可以使用 WebGLRenderingContext.getExtension() 方法来访问 WebGL 扩展。有关更多信息,请参阅 WebGL 教程中的 使用扩展。
常量
此扩展公开了一个新常数,该常数可用于 gl.getVertexAttrib() 方法中。
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE-
在将
gl.getVertexAttrib()的pname参数设置为此值时,它会返回一个GLint,该值描述了用于实例化渲染的频率除数。
实例方法
此扩展公开了三个新方法。
ext.drawArraysInstancedANGLE()-
与
gl.drawArrays()的行为完全相同,只是会执行范围内元素的多个实例,并且每次迭代都会前进一个实例。 ext.drawElementsInstancedANGLE()-
与
gl.drawElements()的行为完全相同,只是会执行一组元素的多个实例,并且在每个实例之间会前进一个实例。 ext.vertexAttribDivisorANGLE()-
使用
ext.drawArraysInstancedANGLE()和ext.drawElementsInstancedANGLE()渲染多个图元实例时,修改通用顶点属性前进的速率。
示例
以下示例展示了如何通过一次绘制调用多次绘制给定的几何图形。
警告:以下代码仅用于教学目的,并非生产级别代码。通常应避免在渲染循环内或使用前立即构建数据/缓冲区。
js
// enable the extension
const ext = gl.getExtension("ANGLE_instanced_arrays");
// binding the geometry buffer as usual
gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexBuffer);
gl.enableVertexAttribArray(vertexPositionAttributeLocation);
gl.vertexAttribPointer(
vertexPositionAttributeLocation,
3,
gl.FLOAT,
false,
0,
0,
);
// build position buffer
const instancePositions = [];
for (const instance of instances) {
instancePositions.push(
instance.position.x,
instance.position.y,
instance.position.z,
);
}
const instancePositionBuffer = createWebGLBufferFromData(instancePositions);
// binding the instance position buffer as you would with any attribute
gl.bindBuffer(gl.ARRAY_BUFFER, instancePositionBuffer);
gl.enableVertexAttribArray(instancePositionAttributeLocation);
gl.vertexAttribPointer(
instancePositionAttributeLocation,
3,
gl.FLOAT,
false,
0,
0,
);
// mark the attribute as instanced and advance it every single(1) instance rather than every vertex
ext.vertexAttribDivisorANGLE(instancePositionAttributeLocation, 1);
// draw geometry for each instance
ext.drawArraysInstancedANGLE(
gl.TRIANGLES,
0,
numGeometryVertices,
instances.length,
);
规范
| 规范 |
|---|
| WebGL ANGLE_instanced_arrays Khronos 批准的扩展规范 |
浏览器兼容性
加载中…