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.

Die ANGLE_instanced_arrays Erweiterung ist Teil der WebGL API und ermöglicht es, dasselbe Objekt oder Gruppen ähnlicher Objekte mehrfach zu zeichnen, wenn sie die gleichen Vertexdaten, Primittivanzahl und Typ teilen.

WebGL-Erweiterungen sind verfügbar über die Methode WebGLRenderingContext.getExtension(). Weitere Informationen finden Sie unter Verwendung von Erweiterungen im WebGL-Leitfaden.

Hinweis: Diese Erweiterung ist nur für WebGL1 Kontexte verfügbar. In WebGL2 ist die Funktionalität dieser Erweiterung im WebGL2-Kontext standardmäßig verfügbar, und die Konstanten und Methoden sind ohne das ANGLE_-Präfix verfügbar.

Trotz des Namens "ANGLE" funktioniert diese Erweiterung auf jedem Gerät, wenn die Hardware sie unterstützt, und nicht nur auf Windows, wenn die ANGLE-Bibliothek verwendet wird. "ANGLE" zeigt lediglich an, dass diese Erweiterung von den Autoren der ANGLE-Bibliothek geschrieben wurde.

Konstanten

Diese Erweiterung stellt eine neue Konstante bereit, die in der Methode gl.getVertexAttrib() verwendet werden kann:

ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE

Liefert einen GLint, der den Frequenzteiler beschreibt, der für das instanzierte Rendering verwendet wird, wenn er in gl.getVertexAttrib() als pname-Parameter verwendet wird.

Instanzmethoden

Diese Erweiterung stellt drei neue Methoden bereit.

ext.drawArraysInstancedANGLE()

Verhält sich identisch zu gl.drawArrays(), außer dass mehrere Instanzen des Elementbereichs ausgeführt werden und die Instanz sich bei jeder Iteration weiterbewegt.

ext.drawElementsInstancedANGLE()

Verhält sich identisch zu gl.drawElements(), außer dass mehrere Instanzen des Elementsatzes ausgeführt werden und die Instanz sich zwischen jeder Gruppe weiterbewegt.

ext.vertexAttribDivisorANGLE()

Modifiziert die Rate, mit der generische Vertex-Attribute fortschreiten, wenn mehrere Instanzen von Primitiven mit ext.drawArraysInstancedANGLE() und ext.drawElementsInstancedANGLE() gerendert werden.

Beispiele

Das folgende Beispiel zeigt, wie man eine bestimmte Geometrie mit einem einzigen Zeichnungsaufruf mehrfach zeichnet.

Warnung: Das folgende ist Bildungsinhalt, kein Produktions-Code. Es sollte allgemein vermieden werden, Daten / Puffer innerhalb der Rendering-Schleife oder direkt vor der Verwendung zu erstellen.

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,
);

Spezifikationen

Specification
WebGL ANGLE_instanced_arrays Khronos Ratified Extension Specification

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch