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 ⁨2016年6月⁩.

ANGLE_instanced_arrays 拡張機能はWebGL API の一部であり、同じ頂点データ、プリミティブカウント、およびタイプを共有している同じオブジェクトまたは同様のオブジェクトのグループを複数回描画することができます。

WebGL 拡張機能はWebGLRenderingContext.getExtension() メソッドを使用することで利用できるようになります。詳しくは、WebGL チュートリアルの拡張機能の使用も参照してください。

メモ:この拡張機能はWebGL1 のコンテキストでのみ利用可能です。WebGL2 のコンテキストでは、この機能は既定で使用することができ、定数やメソッドは "ANGLE" 接尾辞なしで使用することができます。

"ANGLE" という名前ですが、この拡張機能は ANGLE ライブラリーを使用していれば、 Windows でなくてもハードウェアが対応していればあらゆる端末で動作します。 "ANGLE" は単に、この拡張機能が ANGLE ライブラリーの作者によって書かれたことを示しているだけです。

定数

この拡張機能は新しい定数を公開します。これは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,);