ol 8.1.1-dev.1694687206621 → 8.1.1-dev.1694712969002

package/render/webgl/renderinstructions.js

@@ -20,7 +20,7 @@ function pushCustomAttributesInRenderInstructions(
   let shift = 0;
   for (const key in customAttributes) {
     const attr = customAttributes[key];
-    const value = attr.callback(batchEntry.feature);
+    const value = attr.callback.call(batchEntry, batchEntry.feature);
     renderInstructions[currentIndex + shift++] = value[0] || value;
     if (!attr.size || attr.size === 1) {
       continue;

package/renderer/webgl/PointsLayer.d.ts

@@ -277,13 +277,6 @@ declare class WebGLPointsLayerRenderer extends WebGLLayerRenderer<any> {
      * @return {HTMLElement} The rendered element.
      */
     renderFrame(frameState: import("../../Map.js").FrameState): HTMLElement;
-    /**
-     * Compute world params
-     * @private
-     * @param {import("../../Map.js").FrameState} frameState Frame state.
-     * @return {Array<number>} The world start, end and width.
-     */
-    private getWorldParameters_;
     /**
      * Rebuild internal webgl buffers based on current view extent; costly, should not be called too much
      * @param {import("../../Map").FrameState} frameState Frame state.

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

@@ -1 +1 @@
-{"version":3,"file":"PointsLayer.d.ts","sourceRoot":"","sources":["PointsLayer.js"],"names":[],"mappings":";;;;;;;;;UA6Bc,MAAM;;;;;qBACG,OAAO,eAAe,EAAE,OAAO;YAAS,MAAM;UAAM,MAAM;;;;;;;;;;aAOnE,OAAO,eAAe,EAAE,OAAO;;;;;YACxB,MAAM;;;;;cACb,OAAO,YAAY,EAAE,QAAQ;;;;;;;;;;;;;;;;;;kBAW7B,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;AAzBpB;;;;;;GAMG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAqNjB;IAzMC,wBAAyB;IAEzB,kCAAuE;IACvE,iCAGC;IAED;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,iBAAa;IAEb;;;OAGG;IACH,6BAA+D;IAY/D;;;;OAIG;IACH,YAFU,MAAM,OAAO,uBAAuB,EAAE,oBAAoB,CAAC,CAapE;IAgBD,oCAAoE;IAEpE,kDAAoC;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;IAGtB,yDAyBC;IAsBH;;;OAGG;IACH,kCAQC;IAED;;;OAGG;IACH,oCAOC;IAED;;;OAGG;IACH,mCAIC;IAED;;OAEG;IACH,kCAGC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA2BtB;IAED;;;;;OAKG;IACH,4BAmBC;IA6CD;;;;OAIG;IACH,wBAqEC;IA6CD;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAgChB;CAcF;+BArpB8B,YAAY;6BADd,uBAAuB"}
+{"version":3,"file":"PointsLayer.d.ts","sourceRoot":"","sources":["PointsLayer.js"],"names":[],"mappings":";;;;;;;;;UA8Bc,MAAM;;;;;qBACG,OAAO,eAAe,EAAE,OAAO;YAAS,MAAM;UAAM,MAAM;;;;;;;;;;aAOnE,OAAO,eAAe,EAAE,OAAO;;;;;YACxB,MAAM;;;;;cACb,OAAO,YAAY,EAAE,QAAQ;;;;;;;;;;;;;;;;;;kBAW7B,MAAM;;;;oBACN,MAAM;;;;;;;;;;;;;;;;;AAzBpB;;;;;;GAMG;AAEH;;;;;;GAMG;AAEH;;;;;;;;;;;;;;GAcG;AAEH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8DG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAqNjB;IAzMC,wBAAyB;IAEzB,kCAAuE;IACvE,iCAGC;IAED;;OAEG;IACH,sBAAyC;IAEzC;;OAEG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,iBAAa;IAEb;;;OAGG;IACH,6BAA+D;IAY/D;;;;OAIG;IACH,YAFU,MAAM,OAAO,uBAAuB,EAAE,oBAAoB,CAAC,CAapE;IAgBD,oCAAoE;IAEpE,kDAAoC;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;IAGtB,yDAyBC;IAsBH;;;OAGG;IACH,kCAQC;IAED;;;OAGG;IACH,oCAOC;IAED;;;OAGG;IACH,mCAIC;IAED;;OAEG;IACH,kCAGC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA4BtB;IA6CD;;;;OAIG;IACH,wBAqEC;IA6CD;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAgChB;CAcF;+BA5nB8B,YAAY;6BADd,uBAAuB"}

package/renderer/webgl/PointsLayer.js

@@ -18,10 +18,11 @@ import {
   translate as translateTransform,
 } from '../../transform.js';
 import {assert} from '../../asserts.js';
-import {buffer, createEmpty, equals, getWidth} from '../../extent.js';
+import {buffer, createEmpty, equals} from '../../extent.js';
 import {colorDecodeId, colorEncodeId} from '../../render/webgl/utils.js';
 import {create as createWebGLWorker} from '../../worker/webgl.js';
 import {getUid} from '../../util.js';
+import {getWorldParameters} from './worldUtil.js';
 import {listen, unlistenByKey} from '../../events.js';
 
 /**
@@ -401,57 +402,31 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
   renderFrame(frameState) {
     const gl = this.helper.getGL();
     this.preRender(gl, frameState);
-
-    const [startWorld, endWorld, worldWidth] =
-      this.getWorldParameters_(frameState);
+    const [startWorld, endWorld, worldWidth] = getWorldParameters(
+      frameState,
+      this.getLayer()
+    );
 
     // draw the normal canvas
     this.renderWorlds(frameState, false, startWorld, endWorld, worldWidth);
-
     this.helper.finalizeDraw(
       frameState,
       this.dispatchPreComposeEvent,
       this.dispatchPostComposeEvent
     );
-    const canvas = this.helper.getCanvas();
 
     if (this.hitDetectionEnabled_) {
+      // draw the hit buffer
       this.renderWorlds(frameState, true, startWorld, endWorld, worldWidth);
       this.hitRenderTarget_.clearCachedData();
     }
 
     this.postRender(gl, frameState);
 
+    const canvas = this.helper.getCanvas();
     return canvas;
   }
 
-  /**
-   * Compute world params
-   * @private
-   * @param {import("../../Map.js").FrameState} frameState Frame state.
-   * @return {Array<number>} The world start, end and width.
-   */
-  getWorldParameters_(frameState) {
-    const projection = frameState.viewState.projection;
-    const layer = this.getLayer();
-    const vectorSource = layer.getSource();
-    // FIXME fix hit detection isn't reliable when rendering multiple worlds
-    const multiWorld = vectorSource.getWrapX() && projection.canWrapX();
-    const projectionExtent = projection.getExtent();
-
-    const extent = frameState.extent;
-    const worldWidth = multiWorld ? getWidth(projectionExtent) : null;
-    const endWorld = multiWorld
-      ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
-      : 1;
-
-    const startWorld = multiWorld
-      ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
-      : 0;
-
-    return [startWorld, endWorld, worldWidth];
-  }
-
   /**
    * Determine whether renderFrame should be called.
    * @param {import("../../Map.js").FrameState} frameState Frame state.
@@ -589,7 +564,7 @@ class WebGLPointsLayerRenderer extends WebGLLayerRenderer {
   ) {
     assert(
       this.hitDetectionEnabled_,
-      '`forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has not been enabled. This is done by providing adequate shaders using the `hitVertexShader` and `hitFragmentShader` properties of `WebGLPointsLayerRenderer`'
+      '`forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has been disabled using the `disableHitDetection: true` option.'
     );
     if (!this.renderInstructions_ || !this.hitDetectionEnabled_) {
       return undefined;

package/renderer/webgl/VectorLayer.d.ts

@@ -9,24 +9,6 @@ export const Uniforms: {
     ROTATION: string;
     VIEWPORT_SIZE_PX: string;
     PIXEL_RATIO: string;
-    /**
-     * @classdesc
-     * Experimental WebGL vector renderer. Supports polygons, lines and points:
-     *  * Polygons are broken down into triangles
-     *  * Lines are rendered as strips of quads
-     *  * Points are rendered as quads
-     *
-     * You need to provide vertex and fragment shaders as well as custom attributes for each type of geometry. All shaders
-     * can access the uniforms in the {@link module:ol/webgl/Helper~DefaultUniform} enum.
-     * The vertex shaders can access the following attributes depending on the geometry type:
-     *  * For polygons: {@link module:ol/render/webgl/PolygonBatchRenderer~Attributes}
-     *  * For line strings: {@link module:ol/render/webgl/LineStringBatchRenderer~Attributes}
-     *  * For points: {@link module:ol/render/webgl/PointBatchRenderer~Attributes}
-     *
-     * Please note that the fragment shaders output should have premultiplied alpha, otherwise visual anomalies may occur.
-     *
-     * Note: this uses {@link module:ol/webgl/Helper~WebGLHelper} internally.
-     */
     HIT_DETECTION: string;
 };
 export default WebGLVectorLayerRenderer;
@@ -40,6 +22,11 @@ export type Options = {
      * Vector style as literal style or shaders; can also accept an array of styles
      */
     style: VectorStyle | Array<VectorStyle>;
+    /**
+     * Setting this to true will provide a slight performance boost, but will
+     * prevent all hit detection on the layer.
+     */
+    disableHitDetection?: boolean | undefined;
     /**
      * Post-processes definitions
      */
@@ -52,6 +39,8 @@ export type Options = {
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
+ * prevent all hit detection on the layer.
  * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
 /**
@@ -78,6 +67,16 @@ declare class WebGLVectorLayerRenderer extends WebGLLayerRenderer<any> {
      * @param {Options} options Options.
      */
     constructor(layer: import("../../layer/Layer.js").default, options: Options);
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private hitDetectionEnabled_;
+    /**
+     * @type {WebGLRenderTarget}
+     * @private
+     */
+    private hitRenderTarget_;
     sourceRevision_: number;
     previousExtent_: import("../../extent.js").Extent;
     /**
@@ -170,6 +169,15 @@ declare class WebGLVectorLayerRenderer extends WebGLLayerRenderer<any> {
      * @return {HTMLElement} The rendered element.
      */
     renderFrame(frameState: import("../../Map.js").FrameState): HTMLElement;
+    /**
+     * Render the world, either to the main framebuffer or to the hit framebuffer
+     * @param {import("../../Map.js").FrameState} frameState current frame state
+     * @param {boolean} forHitDetection whether the rendering is for hit detection
+     * @param {number} startWorld the world to render in the first iteration
+     * @param {number} endWorld the last world to render
+     * @param {number} worldWidth the width of the worlds being rendered
+     */
+    renderWorlds(frameState: import("../../Map.js").FrameState, forHitDetection: boolean, startWorld: number, endWorld: number, worldWidth: number): void;
 }
 import WebGLLayerRenderer from './Layer.js';
 //# sourceMappingURL=VectorLayer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":"AA8BA;;;;;;;;;;;IAiBA;;;;;;;;;;;;;;;;;OAiBG;;EA9BD;;0BAGW,OAAO,2CAA2C,EAAE,WAAW;;;;;;;;;WAM9D,WAAW,GAAC,MAAM,WAAW,CAAC;;;;;;AAP5C;;GAEG;AAEH;;;;;GAKG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAuEjB;IA1DC,wBAAyB;IAEzB,kDAAoC;IAEpC;;;;;;OAMG;IACH,0BAA0C;IAE1C,wBAAsC;IACtC,mBAA4B;IAE5B;;;OAGG;IACH,oCAAoD;IAEpD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;OAGG;IACH,iBAAkB;IAIlB;;OAEG;IACH,eAAsC;IAEtC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,0BAA6B;IAG/B;;;OAGG;IACH,4BAqCC;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAKC;IAED,0BAMC;IAMD;;;;OAIG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CAoDtB;CAmGF;+BAla8B,YAAY"}
+{"version":3,"file":"VectorLayer.d.ts","sourceRoot":"","sources":["VectorLayer.js"],"names":[],"mappings":"AAmCA;;;;;;;;;;;;EAIE;;0BAGW,OAAO,2CAA2C,EAAE,WAAW;;;;;;;;;WAM9D,WAAW,GAAC,MAAM,WAAW,CAAC;;;;;;;;;;;AAP5C;;GAEG;AAEH;;;;;;;GAOG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AACH;IACE;;;OAGG;IACH,mBAHW,OAAO,sBAAsB,EAAE,OAAO,WACtC,OAAO,EAmFjB;IAtEC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,yBAAqB;IAErB,wBAAyB;IAEzB,kDAAoC;IAEpC;;;;;;OAMG;IACH,0BAA0C;IAE1C,wBAAsC;IACtC,mBAA4B;IAE5B;;;OAGG;IACH,oCAAoD;IAEpD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;OAGG;IACH,iBAAkB;IAIlB;;OAEG;IACH,eAAsC;IAEtC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,0BAA6B;IAG/B;;;OAGG;IACH,4BAqCC;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAMC;IAED,0BAMC;IASD;;;;OAIG;IACH,kCAGC;IAED;;;OAGG;IACH,oCAGC;IAED;;;OAGG;IACH,mCAGC;IAED;;OAEG;IACH,kCAEC;IAED;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,wBAHW,OAAO,cAAc,EAAE,UAAU,GAChC,WAAW,CA+BtB;IAoED;;;;;;;OAOG;IACH,yBANW,OAAO,cAAc,EAAE,UAAU,mBACjC,OAAO,cACP,MAAM,YACN,MAAM,cACN,MAAM,QAoChB;CAqDF;+BApe8B,YAAY"}

package/renderer/webgl/VectorLayer.js

@@ -7,25 +7,30 @@ import VectorEventType from '../../source/VectorEventType.js';
 import VectorStyleRenderer from '../../render/webgl/VectorStyleRenderer.js';
 import ViewHint from '../../ViewHint.js';
 import WebGLLayerRenderer from './Layer.js';
+import WebGLRenderTarget from '../../webgl/RenderTarget.js';
 import {DefaultUniform} from '../../webgl/Helper.js';
-import {buffer, createEmpty, equals, getWidth} from '../../extent.js';
-import {
-  create as createMat4,
-  fromTransform as mat4FromTransform,
-} from '../../vec/mat4.js';
 import {
+  apply as applyTransform,
   create as createTransform,
   makeInverse as makeInverseTransform,
   multiply as multiplyTransform,
   setFromArray as setFromTransform,
   translate as translateTransform,
 } from '../../transform.js';
+import {assert} from '../../asserts.js';
+import {buffer, createEmpty, equals} from '../../extent.js';
+import {colorDecodeId} from '../../render/webgl/utils.js';
+import {
+  create as createMat4,
+  fromTransform as mat4FromTransform,
+} from '../../vec/mat4.js';
 import {
   getTransformFromProjections,
   getUserProjection,
   toUserExtent,
   toUserResolution,
 } from '../../proj.js';
+import {getWorldParameters} from './worldUtil.js';
 import {listen, unlistenByKey} from '../../events.js';
 
 export const Uniforms = {
@@ -42,6 +47,8 @@ export const Uniforms = {
  * @typedef {Object} Options
  * @property {string} [className='ol-layer'] A CSS class name to set to the canvas element.
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
+ * prevent all hit detection on the layer.
  * @property {Array<import("./Layer").PostProcessesOptions>} [postProcesses] Post-processes definitions
  */
 
@@ -79,6 +86,18 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
       postProcesses: options.postProcesses,
     });
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.hitDetectionEnabled_ = !options.disableHitDetection;
+
+    /**
+     * @type {WebGLRenderTarget}
+     * @private
+     */
+    this.hitRenderTarget_;
+
     this.sourceRevision_ = -1;
 
     this.previousExtent_ = createEmpty();
@@ -198,7 +217,8 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
   createRenderers_() {
     this.buffers_ = [];
     this.styleRenderers_ = this.styles_.map(
-      (style) => new VectorStyleRenderer(style, this.helper)
+      (style) =>
+        new VectorStyleRenderer(style, this.helper, this.hitDetectionEnabled_)
     );
   }
 
@@ -212,6 +232,9 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
 
   afterHelperCreated() {
     this.createRenderers_();
+    if (this.hitDetectionEnabled_) {
+      this.hitRenderTarget_ = new WebGLRenderTarget(this.helper);
+    }
   }
 
   /**
@@ -279,41 +302,14 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     const gl = this.helper.getGL();
     this.preRender(gl, frameState);
 
-    this.helper.prepareDraw(frameState);
-    this.currentFrameStateTransform_ = this.helper.makeProjectionTransform(
+    const [startWorld, endWorld, worldWidth] = getWorldParameters(
       frameState,
-      this.currentFrameStateTransform_
+      this.getLayer()
     );
 
-    const layer = this.getLayer();
-    const vectorSource = layer.getSource();
-    const projection = frameState.viewState.projection;
-    const multiWorld = vectorSource.getWrapX() && projection.canWrapX();
-    const projectionExtent = projection.getExtent();
-    const extent = frameState.extent;
-    const worldWidth = multiWorld ? getWidth(projectionExtent) : null;
-    const endWorld = multiWorld
-      ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
-      : 1;
-    let world = multiWorld
-      ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
-      : 0;
-
-    translateTransform(this.currentFrameStateTransform_, world * worldWidth, 0);
-    do {
-      for (let i = 0, ii = this.styleRenderers_.length; i < ii; i++) {
-        const renderer = this.styleRenderers_[i];
-        const buffers = this.buffers_[i];
-        if (!buffers) {
-          continue;
-        }
-        renderer.render(buffers, frameState, () => {
-          this.applyUniforms_(buffers.invertVerticesTransform);
-        });
-      }
-      translateTransform(this.currentFrameStateTransform_, worldWidth, 0);
-    } while (++world < endWorld);
-
+    // draw the normal canvas
+    this.helper.prepareDraw(frameState);
+    this.renderWorlds(frameState, false, startWorld, endWorld, worldWidth);
     this.helper.finalizeDraw(frameState);
 
     const canvas = this.helper.getCanvas();
@@ -323,7 +319,13 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
       canvas.style.opacity = String(opacity);
     }
 
+    if (this.hitDetectionEnabled_) {
+      this.renderWorlds(frameState, true, startWorld, endWorld, worldWidth);
+      this.hitRenderTarget_.clearCachedData();
+    }
+
     this.postRender(gl, frameState);
+
     return canvas;
   }
 
@@ -393,6 +395,50 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     return true;
   }
 
+  /**
+   * Render the world, either to the main framebuffer or to the hit framebuffer
+   * @param {import("../../Map.js").FrameState} frameState current frame state
+   * @param {boolean} forHitDetection whether the rendering is for hit detection
+   * @param {number} startWorld the world to render in the first iteration
+   * @param {number} endWorld the last world to render
+   * @param {number} worldWidth the width of the worlds being rendered
+   */
+  renderWorlds(frameState, forHitDetection, startWorld, endWorld, worldWidth) {
+    let world = startWorld;
+
+    if (forHitDetection) {
+      this.hitRenderTarget_.setSize([
+        Math.floor(frameState.size[0] / 2),
+        Math.floor(frameState.size[1] / 2),
+      ]);
+      this.helper.prepareDrawToRenderTarget(
+        frameState,
+        this.hitRenderTarget_,
+        true
+      );
+    }
+
+    this.currentFrameStateTransform_ = this.helper.makeProjectionTransform(
+      frameState,
+      this.currentFrameStateTransform_
+    );
+
+    do {
+      for (let i = 0, ii = this.styleRenderers_.length; i < ii; i++) {
+        const renderer = this.styleRenderers_[i];
+        const buffers = this.buffers_[i];
+        if (!buffers) {
+          continue;
+        }
+        renderer.render(buffers, frameState, () => {
+          this.applyUniforms_(buffers.invertVerticesTransform);
+          this.helper.applyHitDetectionUniform(forHitDetection);
+        });
+      }
+      translateTransform(this.currentFrameStateTransform_, worldWidth, 0);
+    } while (++world < endWorld);
+  }
+
   /**
    * @param {import("../../coordinate.js").Coordinate} coordinate Coordinate.
    * @param {import("../../Map.js").FrameState} frameState Frame state.
@@ -409,6 +455,26 @@ class WebGLVectorLayerRenderer extends WebGLLayerRenderer {
     callback,
     matches
   ) {
+    assert(
+      this.hitDetectionEnabled_,
+      '`forEachFeatureAtCoordinate` cannot be used on a WebGL layer if the hit detection logic has been disabled using the `disableHitDetection: true` option.'
+    );
+    if (!this.styleRenderers_.length || !this.hitDetectionEnabled_) {
+      return undefined;
+    }
+
+    const pixel = applyTransform(
+      frameState.coordinateToPixelTransform,
+      coordinate.slice()
+    );
+
+    const data = this.hitRenderTarget_.readPixel(pixel[0] / 2, pixel[1] / 2);
+    const color = [data[0] / 255, data[1] / 255, data[2] / 255, data[3] / 255];
+    const ref = colorDecodeId(color);
+    const feature = this.batch_.getFeatureFromRef(ref);
+    if (feature) {
+      return callback(feature, this.getLayer(), null);
+    }
     return undefined;
   }
 

package/renderer/webgl/VectorTileLayer.d.ts

@@ -5,6 +5,11 @@ export type Options = {
      * Vector style as literal style or shaders; can also accept an array of styles
      */
     style: VectorStyle | Array<VectorStyle>;
+    /**
+     * Setting this to true will provide a slight performance boost, but will
+     * prevent all hit detection on the layer.
+     */
+    disableHitDetection?: boolean | undefined;
     /**
      * The vector tile cache size.
      */
@@ -17,6 +22,8 @@ export type LayerType = import("../../layer/BaseTile.js").default<any, any>;
 /**
  * @typedef {Object} Options
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
+ * prevent all hit detection on the layer.
  * @property {number} [cacheSize=512] The vector tile cache size.
  */
 /**
@@ -33,6 +40,11 @@ declare class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer<im
      * @param {Options} options Options.
      */
     constructor(tileLayer: import("../../layer/BaseTile.js").default<any, any>, options: Options);
+    /**
+     * @type {boolean}
+     * @private
+     */
+    private hitDetectionEnabled_;
     /**
      * @type {Array<VectorStyle>}
      * @private

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

@@ -1 +1 @@
-{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":";0BAoBa,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,MAAM,WAAW,CAAC;;;;;;;AAN5C;;GAEG;AAEH;;;;GAIG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,qFAFW,OAAO,EA8BjB;IAzBC;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD,wBAAsC;IACtC,mBAA4B;IAK9B;;OAEG;IACH,eAFW,OAAO,QASjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAIC;IAMD,qDAWC;IAED,8DAMC;IAED;;;;;OAKG;IACH,uBAkBC;IAED,6MA6BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAQ/B;uCAhMkD,oBAAoB;yBAF9C,6BAA6B"}
+{"version":3,"file":"VectorTileLayer.d.ts","sourceRoot":"","sources":["VectorTileLayer.js"],"names":[],"mappings":";0BAoBa,OAAO,2CAA2C,EAAE,WAAW;;;;;WAK9D,WAAW,GAAC,MAAM,WAAW,CAAC;;;;;;;;;;;;AAN5C;;GAEG;AAEH;;;;;;GAMG;AAEH;;GAEG;AAEH;;;;GAIG;AACH;IACE;;;OAGG;IACH,qFAFW,OAAO,EAoCjB;IA/BC;;;OAGG;IACH,6BAAwD;IAExD;;;OAGG;IACH,gBAAiB;IAEjB;;;OAGG;IACH,wBAAyB;IAEzB;;;;;;OAMG;IACH,oCAAoD;IAEpD,wBAAsC;IACtC,mBAA4B;IAK9B;;OAEG;IACH,eAFW,OAAO,QASjB;IAED;;;OAGG;IACH,sBAIC;IAED;;OAEG;IACH,yBAKC;IAMD,qDAWC;IAED,8DAMC;IAED;;;;;OAKG;IACH,uBAkBC;IAED,6MA6BC;IAED;;;OAGG;IACH,4BAFW,OAAO,cAAc,EAAE,UAAU,QAEd;CAQ/B;uCAzMkD,oBAAoB;yBAF9C,6BAA6B"}

package/renderer/webgl/VectorTileLayer.js

@@ -24,6 +24,8 @@ import {getIntersection} from '../../extent.js';
 /**
  * @typedef {Object} Options
  * @property {VectorStyle|Array<VectorStyle>} style Vector style as literal style or shaders; can also accept an array of styles
+ * @property {boolean} [disableHitDetection=false] Setting this to true will provide a slight performance boost, but will
+ * prevent all hit detection on the layer.
  * @property {number} [cacheSize=512] The vector tile cache size.
  */
 
@@ -44,6 +46,12 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
   constructor(tileLayer, options) {
     super(tileLayer, options);
 
+    /**
+     * @type {boolean}
+     * @private
+     */
+    this.hitDetectionEnabled_ = !options.disableHitDetection;
+
     /**
      * @type {Array<VectorStyle>}
      * @private
@@ -98,7 +106,8 @@ class WebGLVectorTileLayerRenderer extends WebGLBaseTileLayerRenderer {
    */
   createRenderers_() {
     this.styleRenderers_ = this.styles_.map(
-      (style) => new VectorStyleRenderer(style, this.helper)
+      (style) =>
+        new VectorStyleRenderer(style, this.helper, this.hitDetectionEnabled_)
     );
   }
 

package/renderer/webgl/worldUtil.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Compute world params
+ * @param {import("../../Map.js").FrameState} frameState Frame state.
+ * @param {any} layer The layer
+ * @return {Array<number>} The world start, end and width.
+ */
+export function getWorldParameters(frameState: import("../../Map.js").FrameState, layer: any): Array<number>;
+//# sourceMappingURL=worldUtil.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"worldUtil.d.ts","sourceRoot":"","sources":["worldUtil.js"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,+CAJW,OAAO,cAAc,EAAE,UAAU,SACjC,GAAG,GACF,MAAM,MAAM,CAAC,CAoBxB"}

package/renderer/webgl/worldUtil.js

@@ -0,0 +1,27 @@
+import {getWidth} from '../../extent.js';
+
+/**
+ * Compute world params
+ * @param {import("../../Map.js").FrameState} frameState Frame state.
+ * @param {any} layer The layer
+ * @return {Array<number>} The world start, end and width.
+ */
+export function getWorldParameters(frameState, layer) {
+  const projection = frameState.viewState.projection;
+
+  const vectorSource = layer.getSource();
+  const multiWorld = vectorSource.getWrapX() && projection.canWrapX();
+  const projectionExtent = projection.getExtent();
+
+  const extent = frameState.extent;
+  const worldWidth = multiWorld ? getWidth(projectionExtent) : null;
+  const endWorld = multiWorld
+    ? Math.ceil((extent[2] - projectionExtent[2]) / worldWidth) + 1
+    : 1;
+
+  const startWorld = multiWorld
+    ? Math.floor((extent[0] - projectionExtent[0]) / worldWidth)
+    : 0;
+
+  return [startWorld, endWorld, worldWidth];
+}

package/util.js

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

package/webgl/ShaderBuilder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ShaderBuilder.d.ts","sourceRoot":"","sources":["ShaderBuilder.js"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AACH;IAEI;;;;OAIG;IACH,kBAAmB;IAEnB;;;;OAIG;IACH,oBAAqB;IAErB;;;;OAIG;IACH,kBAAmB;IAEnB;;;OAGG;IACH,mBAAuB;IAEvB;;;OAGG;IACH,8BAEkE;IAElE;;;OAGG;IACH,kCAAsC;IAEtC;;;OAGG;IACH,gCAA0C;IAE1C;;;OAGG;IACH,+BAEC;IAED;;;OAGG;IACH,4BAAqD;IAErD;;;OAGG;IACH,2BAAiC;IAEjC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,mBAAuB;IAEvB;;;OAGG;IACH,+BAAyE;IAEzE;;;OAGG;IACH,+BAEC;IAED;;OAEG;IACH,gCAAmC;IAEnC;;OAEG;IACH,6BAAiD;IAEjD;;OAEG;IACH,8BAAkD;IAElD;;OAEG;IACH,oCAAwC;IAExC;;OAEG;IACH,uCAA8C;IAE9C;;;OAGG;IACH,iBAAqB;IAErB;;;OAGG;IACH,6BAEC;IAED;;;OAGG;IACH,+BAAgC;IAEhC;;;OAGG;IACH,iCAAkC;IAGpC;;;;;OAKG;IACH,iBAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;OAKG;IACH,mBAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;;OAOG;IACH,iBALW,MAAM,QACN,OAAO,GAAC,MAAM,GAAC,MAAM,GAAC,MAAM,cAC5B,MAAM,GACL,aAAa,CASxB;IAED;;;;;;OAMG;IACH,oCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;OAEG;IACH,2BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,wCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;OAMG;IACH,sCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;OAEG;IACH,6BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;OAEG;IACH,4BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,2CAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;;;OAQG;IACH,yCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;OAKG;IACH,wCAHW,OAAO,GACN,aAAa,CAKxB;IAED;;;OAGG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;;OAGG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;;OAGG;IACH,sCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,mCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,oCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,0CAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;OAIG;IACH,6CAJW,MAAM,GAEL,aAAa,CAKxB;IAED;;;OAGG;IACH,mCAHW,MAAM,GACL,aAAa,CAMxB;IAED,yCAKC;IACD,2CAKC;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CAoFtB;IAED;;;OAGG;IACH,2BAFY,MAAM,GAAC,IAAI,CAqCtB;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CAiHtB;IAED;;;;OAIG;IACH,2BAFY,MAAM,GAAC,IAAI,CAqJtB;IAED;;;;OAIG;IACH,uBAFY,MAAM,GAAC,IAAI,CAmCtB;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CA8CtB;CACF;;;;;UA53Ba,MAAM;;;;UACN,MAAM;;;;;gBACN,MAAM"}
+{"version":3,"file":"ShaderBuilder.d.ts","sourceRoot":"","sources":["ShaderBuilder.js"],"names":[],"mappings":"AA8BA;;;;;;GAMG;AAEH;;;;;;;;;;;;;GAaG;AACH;IAEI;;;;OAIG;IACH,kBAAmB;IAEnB;;;;OAIG;IACH,oBAAqB;IAErB;;;;OAIG;IACH,kBAAmB;IAEnB;;;OAGG;IACH,mBAAuB;IAEvB;;;OAGG;IACH,8BAEkE;IAElE;;;OAGG;IACH,kCAAsC;IAEtC;;;OAGG;IACH,gCAA0C;IAE1C;;;OAGG;IACH,+BAEC;IAED;;;OAGG;IACH,4BAAqD;IAErD;;;OAGG;IACH,2BAAiC;IAEjC;;;OAGG;IACH,8BAAkC;IAElC;;;OAGG;IACH,mBAAuB;IAEvB;;;OAGG;IACH,+BAAyE;IAEzE;;;OAGG;IACH,+BAEC;IAED;;OAEG;IACH,gCAAmC;IAEnC;;OAEG;IACH,6BAAiD;IAEjD;;OAEG;IACH,8BAAkD;IAElD;;OAEG;IACH,oCAAwC;IAExC;;OAEG;IACH,uCAA8C;IAE9C;;;OAGG;IACH,iBAAqB;IAErB;;;OAGG;IACH,6BAEC;IAED;;;OAGG;IACH,+BAAgC;IAEhC;;;OAGG;IACH,iCAAkC;IAGpC;;;;;OAKG;IACH,iBAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;OAKG;IACH,mBAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;;OAOG;IACH,iBALW,MAAM,QACN,OAAO,GAAC,MAAM,GAAC,MAAM,GAAC,MAAM,cAC5B,MAAM,GACL,aAAa,CASxB;IAED;;;;;;OAMG;IACH,oCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;OAEG;IACH,2BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,wCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;OAMG;IACH,sCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;OAEG;IACH,6BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;OAEG;IACH,4BAFY,MAAM,CAIjB;IAED;;;;;;OAMG;IACH,2CAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;;;;OAQG;IACH,yCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;;OAKG;IACH,wCAHW,OAAO,GACN,aAAa,CAKxB;IAED;;;OAGG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;;OAGG;IACH,qCAHW,MAAM,GACL,aAAa,CAMxB;IAED;;;OAGG;IACH,sCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,mCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,oCAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;OAGG;IACH,0CAHW,MAAM,GACL,aAAa,CAKxB;IAED;;;;OAIG;IACH,6CAJW,MAAM,GAEL,aAAa,CAKxB;IAED;;;OAGG;IACH,mCAHW,MAAM,GACL,aAAa,CAMxB;IAED,yCAKC;IACD,2CAKC;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CAoFtB;IAED;;;OAGG;IACH,2BAFY,MAAM,GAAC,IAAI,CAqCtB;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CAiHtB;IAED;;;;OAIG;IACH,2BAFY,MAAM,GAAC,IAAI,CAqJtB;IAED;;;;OAIG;IACH,uBAFY,MAAM,GAAC,IAAI,CAoCtB;IAED;;;OAGG;IACH,yBAFY,MAAM,GAAC,IAAI,CA8CtB;CACF;;;;;UA73Ba,MAAM;;;;UACN,MAAM;;;;;gBACN,MAAM"}

package/webgl/ShaderBuilder.js

@@ -865,6 +865,7 @@ ${this.varyings_
 ${this.vertexShaderFunctions_.join('\n')}
 void main(void) {
   gl_Position = u_projectionMatrix * vec4(a_position, 0.0, 1.0);
+  v_hitColor = a_hitColor;
 ${this.varyings_
   .map(function (varying) {
     return '  ' + varying.name + ' = ' + varying.expression + ';';