ANGLE_instanced_arrays
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2016.
ANGLE_instanced_arrays 拡張機能は WebGL API の一部であり、同じ頂点データ、プリミティブカウント、およびタイプを共有している同じオブジェクトまたは同様のオブジェクトのグループを複数回描画することができます。
WebGL 拡張機能は WebGLRenderingContext.getExtension() メソッドを使用することで利用できるようになります。詳しくは、 WebGL チュートリアル の 拡張機能の使用も参照してください。
定数
この拡張機能は新しい定数を公開します。これは gl.getVertexAttrib() メソッドで使用することができます。
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE-
GLintで、gl.getVertexAttrib()でpname引数として使用されたときにインスタンス化されたレンダリングに用いられる序数を記述したものを返します。
インスタンスメソッド
この拡張機能は 3 つの新しいメソッドを公開します。
ext.drawArraysInstancedANGLE()-
gl.drawArrays()と同様に動作しますが、要素の範囲の複数のインスタンスが実行され、反復ごとにインスタンスが進む点が異なります。 ext.drawElementsInstancedANGLE()-
gl.drawArrays()と同様に動作しますが、要素のセットの複数のインスタンスが実行され、各セット間でインスタンスが進む点が異なります。 ext.vertexAttribDivisorANGLE()-
プリミティブの複数のインスタンスを
ext.drawArraysInstancedANGLE()およびext.drawElementsInstancedANGLE()で描画する際に一般頂点属性が進む速度を変更します。
例
次の例は、与えられた図形を 1 回の draw 呼び出しで複数回描画する方法です。
警告: 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファーを構築することは、一般的に避けるべきです。
// 拡張機能を有効化
const ext = gl.getExtension("ANGLE_instanced_arrays");
// 通常通りに図形バッファーを関連付ける
gl.bindBuffer(gl.ARRAY_BUFFER, geometryVertexBuffer);
gl.enableVertexAttribArray(vertexPositionAttributeLocation);
gl.vertexAttribPointer(
vertexPositionAttributeLocation,
3,
gl.FLOAT,
false,
0,
0,
);
// 位置バッファーを構築
const instancePositions = [];
for (const instance of instances) {
instancePositions.push(
instance.position.x,
instance.position.y,
instance.position.z,
);
}
const instancePositionBuffer = createWebGLBufferFromData(instancePositions);
// 他の属性と同様に、このインスタンスと位置バッファーを関連付け
gl.bindBuffer(gl.ARRAY_BUFFER, instancePositionBuffer);
gl.enableVertexAttribArray(instancePositionAttributeLocation);
gl.vertexAttribPointer(
instancePositionAttributeLocation,
3,
gl.FLOAT,
false,
0,
0,
);
// 属性をインスタンスとしてマークし、すべての頂点ではなく、それぞれ（1 つ）のインスタンスを進めます。
ext.vertexAttribDivisorANGLE(instancePositionAttributeLocation, 1);
// それぞれのインスタンスについて、図形を描画します。
ext.drawArraysInstancedANGLE(
gl.TRIANGLES,
0,
numGeometryVertices,
instances.length,
);
仕様書
| Specification |
|---|
| WebGL ANGLE_instanced_arrays Khronos Ratified Extension Specification |
ブラウザーの互換性
BCD tables only load in the browser