ANGLE_instanced_arrays

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 呼び出しで複数回描画する方法です。

警告: 以下は教育的なものであり、製品レベルのコードではありません。レンダリングループ内や使用直前にデータ/バッファーを構築することは、一般的に避けるべきです。

js
// 拡張機能を有効化
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

関連情報