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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
ANGLE_instanced_arrays
drawArraysInstancedANGLE
drawElementsInstancedANGLE
vertexAttribDivisorANGLE

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

Siehe auch