ANGLE_instanced_arrays

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

返回一个 GLint，描述在 gl.getVertexAttrib() 中作为 pname 参数使用时，用于实例化渲染的频率除数。

实例方法

此扩展公开三个新方法。

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

浏览器兼容性

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

另请参阅