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 批准的擴充套件規範 |
瀏覽器相容性
載入中…