ANGLE_instanced_arrays

Baseline 已广泛支持

此功能已成熟,可跨多种设备和浏览器版本正常运行。自 2016 年 6 月起,所有浏览器均已支持。

ANGLE_instanced_arrays 扩展是 WebGL API 的一部分,它允许在共享相同顶点数据、图元计数和类型的同一对象或一组相似对象被绘制多次时,高效地进行绘制。

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

注意:此扩展仅适用于 WebGL1 上下文。在 WebGL2 中,此扩展的功能默认即可在 WebGL2 上下文中获得,且常数和方法无需 ANGLE_ 前缀即可使用。

尽管名称中带有“ANGLE”,但只要硬件支持,此扩展就可以在任何设备上运行,而不仅仅是在使用 ANGLE 库的 Windows 上。“ANGLE”仅表示此扩展由 ANGLE 库的作者编写。

常量

此扩展公开了一个新常数,该常数可用于 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 批准的扩展规范

浏览器兼容性

另见