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 批准的擴充套件規範

瀏覽器相容性

另見