ANGLE_instanced_arrays
Базовая Широко доступна
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июня 2016 года.
Расширение ANGLE_instanced_arrays является частью WebGL API и позволяет рисовать один и тот же объект или группы похожих объектов несколько раз, если они используют общие данные вершин, количество и тип примитивов.
WebGL-расширения доступны с помощью метода WebGLRenderingContext.getExtension(). Дополнительную информацию см. также в разделе Использование расширений в учебнике по WebGL.
Примечание: Это расширение доступно только для контекстов WebGL1. В WebGL2 функциональность этого расширения доступна по умолчанию в контексте WebGL2, и константы и методы доступны без суффикса ANGLE_.
Несмотря на название «ANGLE», это расширение работает на любом устройстве, если аппаратное обеспечение его поддерживает, а не только на Windows при использовании библиотеки ANGLE. «ANGLE» просто указывает, что это расширение было написано авторами библиотеки ANGLE.
Константы
Это расширение предоставляет одну новую константу, которая может быть использована в методе gl.getVertexAttrib():
ext.VERTEX_ATTRIB_ARRAY_DIVISOR_ANGLE-
Возвращает
GLint, описывающую делитель частоты, используемый для инстанцированного рендеринга, когда используется вgl.getVertexAttrib()в качестве параметраpname.
Методы
Это расширение предоставляет три новых метода.
ext.drawArraysInstancedANGLE()-
Ведёт себя идентично
gl.drawArrays(), за исключением того, что выполняются несколько экземпляров диапазона элементов, и экземпляр перемещается при каждой итерации. ext.drawElementsInstancedANGLE()-
Ведёт себя идентично
gl.drawElements(), за исключением того, что выполняются несколько экземпляров набора элементов, и экземпляр перемещается между каждым набором. ext.vertexAttribDivisorANGLE()-
Изменяет скорость перемещения атрибутов вершин при рендеринге нескольких экземпляров примитивов с помощью
ext.drawArraysInstancedANGLE()иext.drawElementsInstancedANGLE().
Примеры
Следующий пример демонстрирует, как отрисовать заданную геометрию несколько раз с помощью одного вызова отрисовки.
Предупреждение: Следующий код предназначен для обучения, а не для использования в производстве. В общем, следует избегать создания данных/буферов внутри цикла рендеринга или непосредственно перед использованием.
// 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,
);
Спецификации
Совместимость с браузерами
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
ANGLE_instanced_arrays |
3230Доступно только на macOS. |
12 | 47 | 1917Доступно только на macOS. |
8 | 30 | 47 | 18 | 8 | 2.0 | 4.4 |
drawArraysInstancedANGLE |
30 | 12 | 47 | 17 | 8 | 30 | 47 | 18 | 8 | 2.0 | 4.4 |
drawElementsInstancedANGLE |
30 | 12 | 47 | 17 | 8 | 30 | 47 | 18 | 8 | 2.0 | 4.4 |
vertexAttribDivisorANGLE |
30 | 12 | 47 | 17 | 8 | 30 | 47 | 18 | 8 | 2.0 | 4.4 |
См. также
© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/ANGLE_instanced_arrays