ol 10.6.2-dev.1751730309835 → 10.6.2-dev.1751964281167

package/render/webgl/bufferUtil.js

@@ -14,95 +14,57 @@ const tmpArray_ = [];
 /**
  * An object holding positions both in an index and a vertex buffer.
  * @typedef {Object} BufferPositions
- * @property {number} vertexPosition Position in the vertex buffer
- * @property {number} indexPosition Position in the index buffer
+ * @property {number} vertexAttributesPosition Position in the vertex buffer
+ * @property {number} instanceAttributesPosition Position in the vertex buffer
+ * @property {number} indicesPosition Position in the index buffer
  */
-const bufferPositions_ = {vertexPosition: 0, indexPosition: 0};
-
-/**
- * @param {Float32Array} buffer Buffer
- * @param {number} pos Position
- * @param {number} x X
- * @param {number} y Y
- * @param {number} index Index
- */
-function writePointVertex(buffer, pos, x, y, index) {
-  buffer[pos + 0] = x;
-  buffer[pos + 1] = y;
-  buffer[pos + 2] = index;
-}
+const bufferPositions_ = {
+  vertexAttributesPosition: 0,
+  instanceAttributesPosition: 0,
+  indicesPosition: 0,
+};
 
 /**
  * Pushes a quad (two triangles) based on a point geometry
  * @param {Float32Array} instructions Array of render instructions for points.
  * @param {number} elementIndex Index from which render instructions will be read.
- * @param {Float32Array} vertexBuffer Buffer in the form of a typed array.
- * @param {Uint32Array} indexBuffer Buffer in the form of a typed array.
+ * @param {Float32Array} instanceAttributesBuffer Buffer in the form of a typed array.
  * @param {number} customAttributesSize Amount of custom attributes for each element.
  * @param {BufferPositions} [bufferPositions] Buffer write positions; if not specified, positions will be set at 0.
  * @return {BufferPositions} New buffer positions where to write next
- * @property {number} vertexPosition New position in the vertex buffer where future writes should start.
- * @property {number} indexPosition New position in the index buffer where future writes should start.
+ * @property {number} vertexAttributesPosition New position in the vertex buffer where future writes should start.
+ * @property {number} indicesPosition New position in the index buffer where future writes should start.
  * @private
  */
 export function writePointFeatureToBuffers(
   instructions,
   elementIndex,
-  vertexBuffer,
-  indexBuffer,
+  instanceAttributesBuffer,
   customAttributesSize,
   bufferPositions,
 ) {
-  // This is for x, y and index
-  const baseVertexAttrsCount = 3;
-  const baseInstructionsCount = 2;
-  const stride = baseVertexAttrsCount + customAttributesSize;
-
-  const x = instructions[elementIndex + 0];
-  const y = instructions[elementIndex + 1];
+  const x = instructions[elementIndex++];
+  const y = instructions[elementIndex++];
 
   // read custom numerical attributes on the feature
   const customAttrs = tmpArray_;
   customAttrs.length = customAttributesSize;
   for (let i = 0; i < customAttrs.length; i++) {
-    customAttrs[i] = instructions[elementIndex + baseInstructionsCount + i];
+    customAttrs[i] = instructions[elementIndex + i];
   }
 
-  let vPos = bufferPositions ? bufferPositions.vertexPosition : 0;
-  let iPos = bufferPositions ? bufferPositions.indexPosition : 0;
-  const baseIndex = vPos / stride;
-
-  // push vertices for each of the four quad corners (first standard then custom attributes)
-  writePointVertex(vertexBuffer, vPos, x, y, 0);
-  customAttrs.length &&
-    vertexBuffer.set(customAttrs, vPos + baseVertexAttrsCount);
-  vPos += stride;
-
-  writePointVertex(vertexBuffer, vPos, x, y, 1);
-  customAttrs.length &&
-    vertexBuffer.set(customAttrs, vPos + baseVertexAttrsCount);
-  vPos += stride;
+  let instPos = bufferPositions
+    ? bufferPositions.instanceAttributesPosition
+    : 0;
 
-  writePointVertex(vertexBuffer, vPos, x, y, 2);
-  customAttrs.length &&
-    vertexBuffer.set(customAttrs, vPos + baseVertexAttrsCount);
-  vPos += stride;
-
-  writePointVertex(vertexBuffer, vPos, x, y, 3);
-  customAttrs.length &&
-    vertexBuffer.set(customAttrs, vPos + baseVertexAttrsCount);
-  vPos += stride;
-
-  indexBuffer[iPos++] = baseIndex;
-  indexBuffer[iPos++] = baseIndex + 1;
-  indexBuffer[iPos++] = baseIndex + 3;
-  indexBuffer[iPos++] = baseIndex + 1;
-  indexBuffer[iPos++] = baseIndex + 2;
-  indexBuffer[iPos++] = baseIndex + 3;
-
-  bufferPositions_.vertexPosition = vPos;
-  bufferPositions_.indexPosition = iPos;
+  instanceAttributesBuffer[instPos++] = x;
+  instanceAttributesBuffer[instPos++] = y;
+  if (customAttrs.length) {
+    instanceAttributesBuffer.set(customAttrs, instPos);
+    instPos += customAttrs.length;
+  }
 
+  bufferPositions_.instanceAttributesPosition = instPos;
   return bufferPositions_;
 }
 
@@ -131,8 +93,7 @@ export function writePointFeatureToBuffers(
  * @param {number} segmentEndIndex Index of the segment end point from which render instructions will be read.
  * @param {number|null} beforeSegmentIndex Index of the point right before the segment (null if none, e.g this is a line start)
  * @param {number|null} afterSegmentIndex Index of the point right after the segment (null if none, e.g this is a line end)
- * @param {Array<number>} vertexArray Array containing vertices.
- * @param {Array<number>} indexArray Array containing indices.
+ * @param {Array<number>} instanceAttributesArray Array containing instance attributes.
  * @param {Array<number>} customAttributes Array of custom attributes value
  * @param {import('../../transform.js').Transform} toWorldTransform Transform matrix used to obtain world coordinates from instructions
  * @param {number} currentLength Cumulated length of segments processed so far
@@ -146,18 +107,12 @@ export function writeLineSegmentToBuffers(
   segmentEndIndex,
   beforeSegmentIndex,
   afterSegmentIndex,
-  vertexArray,
-  indexArray,
+  instanceAttributesArray,
   customAttributes,
   toWorldTransform,
   currentLength,
   currentAngleTangentSum,
 ) {
-  // compute the stride to determine how many vertices were already pushed
-  const baseVertexAttrsCount = 10; // base attributes: x0, y0, m0, x1, y1, m1, angle0, angle1, distance, params
-  const stride = baseVertexAttrsCount + customAttributes.length;
-  const baseIndex = vertexArray.length / stride;
-
   // The segment is composed of two positions called P0[x0, y0] and P1[x1, y1]
   // Depending on whether there are points before and after the segment, its final shape
   // will be different
@@ -242,62 +197,7 @@ export function writeLineSegmentToBuffers(
     }
   }
 
-  /**
-   * @param {number} vertexIndex From 0 to 3, indicating position in the quad
-   * @param {number} angleSum Sum of the join angles encountered so far (used to compute distance offset
-   * @return {number} A float value containing both information
-   */
-  function computeParameters(vertexIndex, angleSum) {
-    if (angleSum === 0) {
-      return vertexIndex * 10000;
-    }
-    return Math.sign(angleSum) * (vertexIndex * 10000 + Math.abs(angleSum));
-  }
-
-  // add main segment triangles
-  vertexArray.push(
-    p0[0],
-    p0[1],
-    m0,
-    p1[0],
-    p1[1],
-    m1,
-    angle0,
-    angle1,
-    currentLength,
-    computeParameters(0, currentAngleTangentSum),
-  );
-  vertexArray.push(...customAttributes);
-
-  vertexArray.push(
-    p0[0],
-    p0[1],
-    m0,
-    p1[0],
-    p1[1],
-    m1,
-    angle0,
-    angle1,
-    currentLength,
-    computeParameters(1, currentAngleTangentSum),
-  );
-  vertexArray.push(...customAttributes);
-
-  vertexArray.push(
-    p0[0],
-    p0[1],
-    m0,
-    p1[0],
-    p1[1],
-    m1,
-    angle0,
-    angle1,
-    currentLength,
-    computeParameters(2, currentAngleTangentSum),
-  );
-  vertexArray.push(...customAttributes);
-
-  vertexArray.push(
+  instanceAttributesArray.push(
     p0[0],
     p0[1],
     m0,
@@ -307,18 +207,9 @@ export function writeLineSegmentToBuffers(
     angle0,
     angle1,
     currentLength,
-    computeParameters(3, currentAngleTangentSum),
-  );
-  vertexArray.push(...customAttributes);
-
-  indexArray.push(
-    baseIndex,
-    baseIndex + 1,
-    baseIndex + 2,
-    baseIndex + 1,
-    baseIndex + 3,
-    baseIndex + 2,
+    currentAngleTangentSum,
   );
+  instanceAttributesArray.push(...customAttributes);
 
   return {
     length:

package/render/webgl/constants.d.ts

@@ -28,13 +28,17 @@ export type WebGLWorkerGenerateBuffersMessage = {
      */
     customAttributesSize?: number | undefined;
     /**
-     * Vertices array raw binary buffer (sent by the worker).
+     * Indices array raw binary buffer (sent by the worker).
      */
-    vertexBuffer?: ArrayBuffer | undefined;
+    indicesBuffer?: ArrayBuffer | undefined;
     /**
-     * Indices array raw binary buffer (sent by the worker).
+     * Vertex attributes array raw binary buffer (sent by the worker).
+     */
+    vertexAttributesBuffer?: ArrayBuffer | undefined;
+    /**
+     * Instance attributes array raw binary buffer (sent by the worker).
      */
-    indexBuffer?: ArrayBuffer | undefined;
+    instanceAttributesBuffer?: ArrayBuffer | undefined;
     /**
      * Transformation matrix used to project the instructions coordinates
      */

package/render/webgl/constants.js

@@ -21,7 +21,8 @@ export const WebGLWorkerMessageType = {
  * @property {WebGLWorkerMessageType} type Message type
  * @property {ArrayBuffer} renderInstructions render instructions raw binary buffer.
  * @property {number} [customAttributesSize] Amount of hit detection + custom attributes count in the render instructions.
- * @property {ArrayBuffer} [vertexBuffer] Vertices array raw binary buffer (sent by the worker).
- * @property {ArrayBuffer} [indexBuffer] Indices array raw binary buffer (sent by the worker).
+ * @property {ArrayBuffer} [indicesBuffer] Indices array raw binary buffer (sent by the worker).
+ * @property {ArrayBuffer} [vertexAttributesBuffer] Vertex attributes array raw binary buffer (sent by the worker).
+ * @property {ArrayBuffer} [instanceAttributesBuffer] Instance attributes array raw binary buffer (sent by the worker).
  * @property {import("../../transform").Transform} [renderInstructionsTransform] Transformation matrix used to project the instructions coordinates
  */

package/renderer/webgl/PointsLayer.d.ts

@@ -183,6 +183,10 @@ declare class WebGLPointsLayerRenderer extends WebGLLayerRenderer<any> {
      * @private
      */
     private verticesBuffer_;
+    /**
+     * @private
+     */
+    private instanceAttributesBuffer_;
     /**
      * @private
      */
@@ -206,11 +210,14 @@ declare class WebGLPointsLayerRenderer extends WebGLLayerRenderer<any> {
      */
     private hitDetectionEnabled_;
     /**
-     * A list of attributes used by the renderer. By default only the position and
-     * index of the vertex (0 to 3) are required.
+     * A list of attributes used by the renderer.
      * @type {Array<import('../../webgl/Helper.js').AttributeDescription>}
      */
     attributes: Array<import("../../webgl/Helper.js").AttributeDescription>;
+    /**
+     * @type {Array<import('../../webgl/Helper.js').AttributeDescription>}
+     */
+    instanceAttributes: Array<import("../../webgl/Helper.js").AttributeDescription>;
     customAttributes: CustomAttribute[];
     /**
      * @private

package/renderer/webgl/PointsLayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PointsLayer.d.ts","sourceRoot":"","sources":["PointsLayer.js"],"names":[],"mappings":";oBA4Bc,OAAO,qBAAqB,EAAE,OAAO;2BACrC,OAAO,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC;;;;;;;;;UAKtC,MAAM;;;;;cACN,CAAS,IAAY,EAAZ,YAAY,EAAE,IAAiB,EAAjB;YAAO,MAAM,GAAE,GAAC;KAAC,KAAE,MAAM;;;;;;;;;;aAOhD,YAAY;;;;;;;;;;qBAEZ,OAAO,qBAAqB,EAAE,UAAU;;;;;;;;;;;;;;;;;;kBAWxC,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;AA5BpB,6DAA6D;AAC7D,qEAAqE;AAErE;;;;;;GAMG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAyOjB;IA7NC;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,wBAAuE;IACvE;;OAEG;IACH,uBAGC;IAED;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,iBAAa;IAEb;;;OAGG;IACH,6BAA+D;IAY/D;;;;OAIG;IACH,YAFU,KAAK,CAAC,OAAO,uBAAuB,EAAE,oBAAoB,CAAC,CAapE;IAgBD,oCAAoE;IAEpE;;OAEG;IACH,wBAAoC;IAEpC;;;;;;OAMG;IACH,0BAAkD;IAElD;;;;OAIG;IACH,yBAAyC;IAEzC;;;OAGG;IACH,+BAA+C;IAE/C;;;OAGG;IACH,4BAA8C;IAE9C;;;OAGG;IACH,yBAAqB;IAErB;;;;OAIG;IACH,mBAAmB;IAEnB;;OAEG;IACH,gBAAkC;IAgClC;;;;OAIG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,sBAAsB;IAKtB;;OAEG;IACH,0BAyBC;IAoCH;;;OAGG;IACH,kCAWC;IAED;;;OAGG;IACH,oCAyBC;IAED;;;OAGG;IACH,mCAOC;IAED;;OAEG;IACH,kCAGC;IAED;;;;;OAKG;IACH,iCAJW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA6BtB;IA8CD;;;;OAIG;IACH,wBAwEC;IA8CD;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAgChB;IAeD,wBAAoB;CACrB;+BA7qB8B,YAAY"}
+{"version":3,"file":"PointsLayer.d.ts","sourceRoot":"","sources":["PointsLayer.js"],"names":[],"mappings":";oBA4Bc,OAAO,qBAAqB,EAAE,OAAO;2BACrC,OAAO,eAAe,EAAE,OAAO,CAAC,KAAK,CAAC;;;;;;;;;UAKtC,MAAM;;;;;cACN,CAAS,IAAY,EAAZ,YAAY,EAAE,IAAiB,EAAjB;YAAO,MAAM,GAAE,GAAC;KAAC,KAAE,MAAM;;;;;;;;;;aAOhD,YAAY;;;;;;;;;;qBAEZ,OAAO,qBAAqB,EAAE,UAAU;;;;;;;;;;;;;;;;;;kBAWxC,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;AA5BpB,6DAA6D;AAC7D,qEAAqE;AAErE;;;;;;GAMG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAyPjB;IA7OC;;OAEG;IACH,wBAAyB;IAEzB;;OAEG;IACH,wBAAuE;IACvE;;OAEG;IACH,kCAGC;IACD;;OAEG;IACH,uBAGC;IAED;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,iBAAa;IAEb;;;OAGG;IACH,6BAA+D;IAY/D;;;OAGG;IACH,YAFU,KAAK,CAAC,OAAO,uBAAuB,EAAE,oBAAoB,CAAC,CAQpE;IAED;;OAEG;IACH,oBAFU,KAAK,CAAC,OAAO,uBAAuB,EAAE,oBAAoB,CAAC,CAQpE;IAgBD,oCAAoE;IAEpE;;OAEG;IACH,wBAAoC;IAEpC;;;;;;OAMG;IACH,0BAAkD;IAElD;;;;OAIG;IACH,yBAAyC;IAEzC;;;OAGG;IACH,+BAA+C;IAE/C;;;OAGG;IACH,4BAA8C;IAE9C;;;OAGG;IACH,yBAAqB;IAErB;;;;OAIG;IACH,mBAAmB;IAEnB;;OAEG;IACH,gBAAkC;IAoClC;;;;OAIG;IACH,sBAAuB;IAEvB;;;;OAIG;IACH,sBAAsB;IAKtB;;OAEG;IACH,0BAyBC;IAoCH;;;OAGG;IACH,kCAWC;IAED;;;OAGG;IACH,oCAyBC;IAED;;;OAGG;IACH,mCAOC;IAED;;OAEG;IACH,kCAGC;IAED;;;;;OAKG;IACH,iCAJW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA6BtB;IAyCD;;;;OAIG;IACH,wBAwEC;IA8CD;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAyChB;IAeD,wBAAoB;CACrB;+BAjsB8B,YAAY"}

package/renderer/webgl/PointsLayer.js

@@ -148,6 +148,13 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
      * @private
      */
     this.verticesBuffer_ = new WebGLArrayBuffer(ARRAY_BUFFER, DYNAMIC_DRAW);
+    /**
+     * @private
+     */
+    this.instanceAttributesBuffer_ = new WebGLArrayBuffer(
+      ARRAY_BUFFER,
+      DYNAMIC_DRAW,
+    );
     /**
      * @private
      */
@@ -189,36 +196,41 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
       : [];
 
     /**
-     * A list of attributes used by the renderer. By default only the position and
-     * index of the vertex (0 to 3) are required.
+     * A list of attributes used by the renderer.
      * @type {Array<import('../../webgl/Helper.js').AttributeDescription>}
      */
     this.attributes = [
       {
-        name: 'a_position',
+        name: 'a_localPosition',
         size: 2,
         type: AttributeType.FLOAT,
       },
+    ];
+
+    /**
+     * @type {Array<import('../../webgl/Helper.js').AttributeDescription>}
+     */
+    this.instanceAttributes = [
       {
-        name: 'a_index',
-        size: 1,
+        name: 'a_position',
+        size: 2,
         type: AttributeType.FLOAT,
       },
     ];
 
     if (this.hitDetectionEnabled_) {
-      this.attributes.push({
+      this.instanceAttributes.push({
         name: 'a_hitColor',
         size: 4,
         type: AttributeType.FLOAT,
       });
-      this.attributes.push({
+      this.instanceAttributes.push({
         name: 'a_featureUid',
         size: 1,
         type: AttributeType.FLOAT,
       });
     }
-    this.attributes.push(...customAttributes);
+    this.instanceAttributes.push(...customAttributes);
 
     this.customAttributes = options.attributes ? options.attributes : [];
 
@@ -282,9 +294,13 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
         const received = event.data;
         if (received.type === WebGLWorkerMessageType.GENERATE_POINT_BUFFERS) {
           const projectionTransform = received.projectionTransform;
-          this.verticesBuffer_.fromArrayBuffer(received.vertexBuffer);
+          this.verticesBuffer_.fromArrayBuffer(received.vertexAttributesBuffer);
+          this.instanceAttributesBuffer_.fromArrayBuffer(
+            received.instanceAttributesBuffer,
+          );
           this.helper.flushBufferData(this.verticesBuffer_);
-          this.indicesBuffer_.fromArrayBuffer(received.indexBuffer);
+          this.helper.flushBufferData(this.instanceAttributesBuffer_);
+          this.indicesBuffer_.fromArrayBuffer(received.indicesBuffer);
           this.helper.flushBufferData(this.indicesBuffer_);
 
           this.renderTransform_ = projectionTransform;
@@ -523,11 +539,6 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
     this.helper.useProgram(this.program_, frameState);
     this.helper.prepareDraw(frameState);
 
-    // write new data
-    this.helper.bindBuffer(this.verticesBuffer_);
-    this.helper.bindBuffer(this.indicesBuffer_);
-    this.helper.enableAttributes(this.attributes);
-
     return true;
   }
 
@@ -679,18 +690,27 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
       );
     }
 
-    this.helper.bindBuffer(this.verticesBuffer_);
-    this.helper.bindBuffer(this.indicesBuffer_);
-    this.helper.enableAttributes(this.attributes);
+    const instanceAttributesStride = this.instanceAttributes.reduce(
+      (prev, curr) => prev + (curr.size || 1),
+      0,
+    );
+    const instanceCount =
+      this.instanceAttributesBuffer_.getSize() / instanceAttributesStride;
 
     do {
+      this.helper.bindBuffer(this.indicesBuffer_);
+      this.helper.bindBuffer(this.verticesBuffer_);
+      this.helper.enableAttributes(this.attributes);
+      this.helper.bindBuffer(this.instanceAttributesBuffer_);
+      this.helper.enableAttributesInstanced(this.instanceAttributes);
+
       this.helper.makeProjectionTransform(frameState, this.currentTransform_);
       translateTransform(this.currentTransform_, world * worldWidth, 0);
       multiplyTransform(this.currentTransform_, this.invertRenderTransform_);
       this.helper.applyUniforms(frameState);
       this.helper.applyHitDetectionUniform(forHitDetection);
       const renderCount = this.indicesBuffer_.getSize();
-      this.helper.drawElements(0, renderCount);
+      this.helper.drawElementsInstanced(0, renderCount, instanceCount);
     } while (++world < endWorld);
   }
 

package/util.js

@@ -33,4 +33,4 @@ export function getUid(obj) {
  * OpenLayers version.
  * @type {string}
  */
-export const VERSION = '10.6.2-dev.1751730309835';
+export const VERSION = '10.6.2-dev.1751964281167';

package/webgl/Helper.d.ts

@@ -387,6 +387,11 @@ declare class WebGLHelper extends Disposable {
      * @return {Object|null} The extension or null if not supported.
      */
     getExtension(name: string): any | null;
+    /**
+     * Will throw if the extension is not available
+     * @return {ANGLE_instanced_arrays} Extension
+     */
+    getInstancedRenderingExtension_(): ANGLE_instanced_arrays;
     /**
      * Just bind the buffer if it's in the cache. Otherwise create
      * the WebGL buffer, bind it, populate it, and add an entry to
@@ -452,6 +457,14 @@ declare class WebGLHelper extends Disposable {
      * @param {number} end End index.
      */
     drawElements(start: number, end: number): void;
+    /**
+     * Execute a draw call similar to `drawElements`, but using instanced rendering.
+     * Will have no effect if `enableAttributesInstanced` was not called for this rendering pass.
+     * @param {number} start Start index.
+     * @param {number} end End index.
+     * @param {number} instanceCount The number of instances to render
+     */
+    drawElementsInstanced(start: number, end: number, instanceCount: number): void;
     /**
      * Apply the successive post process passes which will eventually render to the actual canvas.
      * @param {import("../Map.js").FrameState} frameState current frame state
@@ -564,9 +577,16 @@ declare class WebGLHelper extends Disposable {
      * @param {number} type UNSIGNED_INT, UNSIGNED_BYTE, UNSIGNED_SHORT or FLOAT
      * @param {number} stride Stride in bytes (0 means attribs are packed)
      * @param {number} offset Offset in bytes
+     * @param {boolean} instanced Whether the attribute is used for instanced rendering
      * @private
      */
     private enableAttributeArray_;
+    /**
+     * @private
+     * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
+     * @param {boolean} instanced Whether the attributes are instanced.
+     */
+    private enableAttributes_;
     /**
      * Will enable the following attributes to be read from the currently bound buffer,
      * i.e. tell the GPU where to read the different attributes in the buffer. An error in the
@@ -574,6 +594,12 @@ declare class WebGLHelper extends Disposable {
      * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
      */
     enableAttributes(attributes: Array<AttributeDescription>): void;
+    /**
+     * Will enable these attributes as instanced, meaning that they will only be read
+     * once per instance instead of per vertex.
+     * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
+     */
+    enableAttributesInstanced(attributes: Array<AttributeDescription>): void;
     /**
      * WebGL context was lost
      * @param {WebGLContextEvent} event The context loss event.

package/webgl/Helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Helper.d.ts","sourceRoot":"","sources":["Helper.js"],"names":[],"mappings":"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"}
+{"version":3,"file":"Helper.d.ts","sourceRoot":"","sources":["Helper.js"],"names":[],"mappings":"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"}

package/webgl/Helper.js

@@ -2,6 +2,7 @@
  * @module ol/webgl/Helper
  */
 import Disposable from '../Disposable.js';
+import {assert} from '../asserts.js';
 import {clear} from '../obj.js';
 import {
   compose as composeTransform,
@@ -499,6 +500,19 @@ class WebGLHelper extends Disposable {
     return extension;
   }
 
+  /**
+   * Will throw if the extension is not available
+   * @return {ANGLE_instanced_arrays} Extension
+   */
+  getInstancedRenderingExtension_() {
+    const ext = this.getExtension('ANGLE_instanced_arrays');
+    assert(
+      !!ext,
+      "WebGL extension 'ANGLE_instanced_arrays' is required for vector rendering",
+    );
+    return ext;
+  }
+
   /**
    * Just bind the buffer if it's in the cache. Otherwise create
    * the WebGL buffer, bind it, populate it, and add an entry to
@@ -721,6 +735,37 @@ class WebGLHelper extends Disposable {
     gl.drawElements(gl.TRIANGLES, numItems, elementType, offsetInBytes);
   }
 
+  /**
+   * Execute a draw call similar to `drawElements`, but using instanced rendering.
+   * Will have no effect if `enableAttributesInstanced` was not called for this rendering pass.
+   * @param {number} start Start index.
+   * @param {number} end End index.
+   * @param {number} instanceCount The number of instances to render
+   */
+  drawElementsInstanced(start, end, instanceCount) {
+    const gl = this.gl_;
+    this.getExtension('OES_element_index_uint');
+    const ext = this.getInstancedRenderingExtension_();
+
+    const elementType = gl.UNSIGNED_INT;
+    const elementSize = 4;
+
+    const numItems = end - start;
+    const offsetInBytes = start * elementSize;
+    ext.drawElementsInstancedANGLE(
+      gl.TRIANGLES,
+      numItems,
+      elementType,
+      offsetInBytes,
+      instanceCount,
+    );
+
+    // reset divisor values to avoid side effects
+    for (let i = 0; i < this.maxAttributeCount_; i++) {
+      ext.vertexAttribDivisorANGLE(i, 0);
+    }
+  }
+
   /**
    * Apply the successive post process passes which will eventually render to the actual canvas.
    * @param {import("../Map.js").FrameState} frameState current frame state
@@ -1092,9 +1137,10 @@ class WebGLHelper extends Disposable {
    * @param {number} type UNSIGNED_INT, UNSIGNED_BYTE, UNSIGNED_SHORT or FLOAT
    * @param {number} stride Stride in bytes (0 means attribs are packed)
    * @param {number} offset Offset in bytes
+   * @param {boolean} instanced Whether the attribute is used for instanced rendering
    * @private
    */
-  enableAttributeArray_(attribName, size, type, stride, offset) {
+  enableAttributeArray_(attribName, size, type, stride, offset, instanced) {
     const location = this.getAttributeLocation(attribName);
     // the attribute has not been found in the shaders or is not used; do not enable it
     if (location < 0) {
@@ -1102,15 +1148,21 @@ class WebGLHelper extends Disposable {
     }
     this.gl_.enableVertexAttribArray(location);
     this.gl_.vertexAttribPointer(location, size, type, false, stride, offset);
+    if (instanced) {
+      // note: this is reset to 0 after drawElementsInstanced is called
+      this.getInstancedRenderingExtension_().vertexAttribDivisorANGLE(
+        location,
+        1,
+      );
+    }
   }
 
   /**
-   * Will enable the following attributes to be read from the currently bound buffer,
-   * i.e. tell the GPU where to read the different attributes in the buffer. An error in the
-   * size/type/order of attributes will most likely break the rendering and throw a WebGL exception.
+   * @private
    * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
+   * @param {boolean} instanced Whether the attributes are instanced.
    */
-  enableAttributes(attributes) {
+  enableAttributes_(attributes, instanced) {
     const stride = computeAttributesStride(attributes);
     let offset = 0;
     for (let i = 0; i < attributes.length; i++) {
@@ -1123,12 +1175,32 @@ class WebGLHelper extends Disposable {
           attr.type || FLOAT,
           stride,
           offset,
+          instanced,
         );
       }
       offset += attr.size * getByteSizeFromType(attr.type);
     }
   }
 
+  /**
+   * Will enable the following attributes to be read from the currently bound buffer,
+   * i.e. tell the GPU where to read the different attributes in the buffer. An error in the
+   * size/type/order of attributes will most likely break the rendering and throw a WebGL exception.
+   * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
+   */
+  enableAttributes(attributes) {
+    this.enableAttributes_(attributes, false);
+  }
+
+  /**
+   * Will enable these attributes as instanced, meaning that they will only be read
+   * once per instance instead of per vertex.
+   * @param {Array<AttributeDescription>} attributes Ordered list of attributes to read from the buffer
+   */
+  enableAttributesInstanced(attributes) {
+    this.enableAttributes_(attributes, true);
+  }
+
   /**
    * WebGL context was lost
    * @param {WebGLContextEvent} event The context loss event.