ol 10.2.2-dev.1727715662036 → 10.2.2-dev.1727768316442

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ol",
-  "version": "10.2.2-dev.1727715662036",
+  "version": "10.2.2-dev.1727768316442",
   "description": "OpenLayers mapping library",
   "keywords": [
     "map",

package/reproj/DataTile.d.ts

@@ -61,6 +61,10 @@ export type Options = {
      * transitions in milliseconds. A duration of 0 disables the opacity transition.
      */
     transition?: number | undefined;
+    /**
+     * Render reprojection edges.
+     */
+    renderEdges?: boolean | undefined;
 };
 /**
  * @typedef {function(number, number, number, number) : import("../DataTile.js").default} TileGetter
@@ -86,6 +90,7 @@ export type Options = {
  * @property {number} [errorThreshold] Acceptable reprojection error (in px).
  * @property {number} [transition=250] A duration for tile opacity
  * transitions in milliseconds. A duration of 0 disables the opacity transition.
+ * @property {boolean} [renderEdges] Render reprojection edges.
  */
 /**
  * @classdesc
@@ -98,6 +103,11 @@ declare class ReprojDataTile extends DataTile {
      * @param {Options} options Tile options.
      */
     constructor(options: Options);
+    /**
+     * @private
+     * @type {boolean | Array<number>}
+     */
+    private renderEdges_;
     /**
      * @private
      * @type {number}

package/reproj/DataTile.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":";yBAoBa,CAAS,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,KAAI,OAAO,gBAAgB,EAAE,OAAO;;;;;UAK1E,QAAQ;;;;YACR,MAAM;;;;;;gBAKN,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;eACzC,OAAO,iBAAiB,EAAE,SAAS;;;;;;;;gBAEnC,MAAM;;;;YACN,MAAM;;;;qBACN,UAAU;;;;;;;;;;;;;;;;AApBxB;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;GAKG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAyNjB;IA/MC;;;OAGG;IACH,oBAAqC;IAErC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,oBAAuB;IAEvB;;;OAGG;IACH,qBAAwB;IAExB;;;OAGG;IACH,oBAA4B;IAE5B;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,0BAAsE;IAEtE;;;OAGG;IACH,qBAAsB;IAEtB;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAIwB;IAmDxB;;;OAGG;IACH,uBAOC;IAgGH;;OAEG;IACH,mBAoLC;IAqDD;;OAEG;IACH,yBAGC;CACF;qBA3hByD,gBAAgB"}
+{"version":3,"file":"DataTile.d.ts","sourceRoot":"","sources":["DataTile.js"],"names":[],"mappings":";yBAsBa,CAAS,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,EAAE,IAAM,EAAN,MAAM,KAAI,OAAO,gBAAgB,EAAE,OAAO;;;;;UAK1E,QAAQ;;;;YACR,MAAM;;;;;;gBAKN,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;gBACzC,OAAO,uBAAuB,EAAE,OAAO;;;;oBACvC,OAAO,yBAAyB,EAAE,OAAO;;;;eACzC,OAAO,iBAAiB,EAAE,SAAS;;;;;;;;gBAEnC,MAAM;;;;YACN,MAAM;;;;qBACN,UAAU;;;;;;;;;;;;;;;;;;;;AApBxB;;GAEG;AAEH;;;;GAIG;AAEH;;;;;;;;;;;;;;;;;GAiBG;AAEH;;;;;GAKG;AACH;IACE;;OAEG;IACH,qBAFW,OAAO,EAgOjB;IAtNC;;;OAGG;IACH,qBACiE;IAEjE;;;OAGG;IACH,oBAAqC;IAErC;;;OAGG;IACH,gBAA6B;IAE7B;;;OAGG;IACH,oBAAuB;IAEvB;;;OAGG;IACH,qBAAwB;IAExB;;;OAGG;IACH,oBAA4B;IAE5B;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,wBAA6C;IAE7C;;;OAGG;IACH,0BAAsE;IAEtE;;;OAGG;IACH,qBAAsB;IAEtB;;;OAGG;IACH,6BAAgC;IAEhC;;;OAGG;IACH,iBAAiB;IAMjB;;;OAGG;IACH,oBAIwB;IAmDxB;;;OAGG;IACH,uBAOC;IAgGH;;OAEG;IACH,mBAsMC;IAqDD;;OAEG;IACH,yBAGC;CACF;qBAvjByD,gBAAgB"}

package/reproj/DataTile.js

@@ -7,13 +7,15 @@ import DataTile, {asArrayLike, asImageLike, toArray} from '../DataTile.js';
 import EventType from '../events/EventType.js';
 import TileState from '../TileState.js';
 import Triangulation from './Triangulation.js';
+import {calculateSourceExtentResolution} from '../reproj.js';
 import {
-  calculateSourceExtentResolution,
-  canvasPool,
+  canvasGLPool,
+  createCanvasContextWebGL,
+  releaseGLCanvas,
   render as renderReprojected,
-} from '../reproj.js';
+} from './glreproj.js';
 import {clamp} from '../math.js';
-import {createCanvasContext2D, releaseCanvas} from '../dom.js';
+import {createCanvasContext2D} from '../dom.js';
 import {getArea, getIntersection, getWidth, wrapAndSliceX} from '../extent.js';
 import {listen, unlistenByKey} from '../events.js';
 
@@ -43,6 +45,7 @@ import {listen, unlistenByKey} from '../events.js';
  * @property {number} [errorThreshold] Acceptable reprojection error (in px).
  * @property {number} [transition=250] A duration for tile opacity
  * transitions in milliseconds. A duration of 0 disables the opacity transition.
+ * @property {boolean} [renderEdges] Render reprojection edges.
  */
 
 /**
@@ -63,6 +66,13 @@ class ReprojDataTile extends DataTile {
       transition: options.transition,
     });
 
+    /**
+     * @private
+     * @type {boolean | Array<number>}
+     */
+    this.renderEdges_ =
+      options.renderEdges !== undefined ? options.renderEdges : false;
+
     /**
      * @private
      * @type {number}
@@ -334,20 +344,6 @@ class ReprojDataTile extends DataTile {
       const bandCount = Math.floor(
         bytesPerRow / bytesPerElement / pixelSize[0],
       );
-      const packedLength = pixelCount * bandCount;
-      let packedData = tileDataR;
-      if (tileDataR.length !== packedLength) {
-        packedData = new DataType(packedLength);
-        let dataIndex = 0;
-        let rowOffset = 0;
-        const colCount = pixelSize[0] * bandCount;
-        for (let rowIndex = 0; rowIndex < pixelSize[1]; ++rowIndex) {
-          for (let colIndex = 0; colIndex < colCount; ++colIndex) {
-            packedData[dataIndex++] = tileDataR[rowOffset + colIndex];
-          }
-          rowOffset += bytesPerRow / bytesPerElement;
-        }
-      }
       const extent = this.sourceTileGrid_.getTileCoordExtent(tile.tileCoord);
       extent[0] += source.offset;
       extent[2] += source.offset;
@@ -359,10 +355,11 @@ class ReprojDataTile extends DataTile {
       dataSources.push({
         extent: extent,
         clipExtent: clipExtent,
-        data: new Uint8ClampedArray(packedData.buffer),
+        data: tileDataR,
         dataType: DataType,
         bytesPerPixel: bytesPerPixel,
         pixelSize: pixelSize,
+        bandCount: bandCount,
       });
     });
     this.sourceTiles_.length = 0;
@@ -377,6 +374,8 @@ class ReprojDataTile extends DataTile {
     const size = this.targetTileGrid_.getTileSize(z);
     const targetWidth = typeof size === 'number' ? size : size[0];
     const targetHeight = typeof size === 'number' ? size : size[1];
+    const outWidth = targetWidth * this.pixelRatio_;
+    const outHeight = targetHeight * this.pixelRatio_;
     const targetResolution = this.targetTileGrid_.getResolution(z);
     const sourceResolution = this.sourceTileGrid_.getResolution(this.sourceZ_);
 
@@ -384,90 +383,122 @@ class ReprojDataTile extends DataTile {
       this.wrappedTileCoord_,
     );
 
-    let dataR, dataU;
+    const bandCount = dataSources[0].bandCount;
+    const dataR = new dataSources[0].dataType(bandCount * outWidth * outHeight);
 
-    const bytesPerPixel = dataSources[0].bytesPerPixel;
+    const gl = createCanvasContextWebGL(outWidth, outHeight, canvasGLPool, {
+      premultipliedAlpha: false,
+      antialias: false,
+    });
 
-    const reprojs = Math.ceil(bytesPerPixel / 3);
+    let willInterpolate;
+    const format = gl.RGBA;
+    let textureType;
+    if (dataSources[0].dataType == Float32Array) {
+      textureType = gl.FLOAT;
+      gl.getExtension('WEBGL_color_buffer_float');
+      gl.getExtension('OES_texture_float');
+      gl.getExtension('EXT_float_blend');
+      const extension = gl.getExtension('OES_texture_float_linear');
+      const canInterpolate = extension !== null;
+      willInterpolate = canInterpolate && this.interpolate;
+    } else {
+      textureType = gl.UNSIGNED_BYTE;
+      willInterpolate = this.interpolate;
+    }
+
+    const BANDS_PR_REPROJ = 4;
+    const reprojs = Math.ceil(bandCount / BANDS_PR_REPROJ);
     for (let reproj = reprojs - 1; reproj >= 0; --reproj) {
       const sources = [];
       for (let i = 0, len = dataSources.length; i < len; ++i) {
         const dataSource = dataSources[i];
-        const buffer = dataSource.data;
+
         const pixelSize = dataSource.pixelSize;
         const width = pixelSize[0];
         const height = pixelSize[1];
-        const context = createCanvasContext2D(width, height, canvasPool);
-        const imageData = context.createImageData(width, height);
-        const data = imageData.data;
-        let offset = reproj * 3;
-        for (let j = 0, len = data.length; j < len; j += 4) {
-          data[j] = buffer[offset];
-          data[j + 1] = buffer[offset + 1];
-          data[j + 2] = buffer[offset + 2];
-          data[j + 3] = 255;
-          offset += bytesPerPixel;
+
+        const data = new dataSource.dataType(BANDS_PR_REPROJ * width * height);
+        const dataS = dataSource.data;
+        let offset = reproj * BANDS_PR_REPROJ;
+        for (let j = 0, len = data.length; j < len; j += BANDS_PR_REPROJ) {
+          data[j] = dataS[offset];
+          data[j + 1] = dataS[offset + 1];
+          data[j + 2] = dataS[offset + 2];
+          data[j + 3] = dataS[offset + 3];
+          offset += bandCount;
         }
-        context.putImageData(imageData, 0, 0);
+
+        const texture = gl.createTexture();
+        gl.bindTexture(gl.TEXTURE_2D, texture);
+
+        if (willInterpolate) {
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+        } else {
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
+          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
+        }
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+        gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+        gl.texImage2D(
+          gl.TEXTURE_2D,
+          0,
+          format,
+          width,
+          height,
+          0,
+          format,
+          textureType,
+          data,
+        );
+
         sources.push({
           extent: dataSource.extent,
-          clipExtent: dataSource.clipExtent,
-          image: context.canvas,
+          texture: texture,
+          width: width,
+          height: height,
         });
       }
 
-      const canvas = renderReprojected(
+      const {framebuffer, width, height} = renderReprojected(
+        gl,
         targetWidth,
         targetHeight,
         this.pixelRatio_,
         sourceResolution,
-        this.sourceTileGrid_.getExtent(),
         targetResolution,
         targetExtent,
         this.triangulation_,
         sources,
         this.gutter_,
-        false,
-        false,
-        false,
+        textureType,
+        this.renderEdges_,
+        willInterpolate,
       );
 
-      for (let i = 0, len = sources.length; i < len; ++i) {
-        const canvas = sources[i].image;
-        const context = canvas.getContext('2d');
-        releaseCanvas(context);
-        canvasPool.push(context.canvas);
-      }
-
-      const context = canvas.getContext('2d');
-      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
-
-      releaseCanvas(context);
-      canvasPool.push(canvas);
-
-      if (!dataR) {
-        dataU = new Uint8ClampedArray(
-          bytesPerPixel * imageData.width * imageData.height,
-        );
-        dataR = new dataSources[0].dataType(dataU.buffer);
-      }
-
-      const data = imageData.data;
-      let offset = reproj * 3;
-      for (let i = 0, len = data.length; i < len; i += 4) {
-        if (data[i + 3] === 255) {
-          dataU[offset] = data[i];
-          dataU[offset + 1] = data[i + 1];
-          dataU[offset + 2] = data[i + 2];
-        } else {
-          dataU[offset] = 0;
-          dataU[offset + 1] = 0;
-          dataU[offset + 2] = 0;
-        }
-        offset += bytesPerPixel;
+      // The texture is always RGBA.
+      const rows = width;
+      const cols = height * BANDS_PR_REPROJ;
+      const data = new dataSources[0].dataType(rows * cols);
+      gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer);
+      gl.readPixels(0, 0, width, height, gl.RGBA, textureType, data);
+
+      let offset = reproj * BANDS_PR_REPROJ;
+      for (let i = 0, len = data.length; i < len; i += BANDS_PR_REPROJ) {
+        // The data read by `readPixels` is flipped in the y-axis so flip it again.
+        const flipY = (rows - 1 - ((i / cols) | 0)) * cols + (i % cols);
+        dataR[offset] = data[flipY];
+        dataR[offset + 1] = data[flipY + 1];
+        dataR[offset + 2] = data[flipY + 2];
+        dataR[offset + 3] = data[flipY + 3];
+        offset += bandCount;
       }
     }
 
+    releaseGLCanvas(gl);
+    canvasGLPool.push(gl.canvas);
+
     if (imageLike) {
       const context = createCanvasContext2D(targetWidth, targetHeight);
       const imageData = new ImageData(dataR, targetWidth);
@@ -476,10 +507,7 @@ class ReprojDataTile extends DataTile {
     } else {
       this.reprojData_ = dataR;
     }
-    this.reprojSize_ = [
-      Math.round(targetWidth * this.pixelRatio_),
-      Math.round(targetHeight * this.pixelRatio_),
-    ];
+    this.reprojSize_ = [Math.round(outWidth), Math.round(outHeight)];
     this.state = TileState.LOADED;
     this.changed();
   }

package/reproj/glreproj.d.ts

@@ -0,0 +1,70 @@
+/**
+ * Create an html canvas element and returns its webgl context.
+ * @param {number} [width] Canvas width.
+ * @param {number} [height] Canvas height.
+ * @param {Array<HTMLCanvasElement | OffscreenCanvas>} [canvasPool] Canvas pool to take existing canvas from.
+ * @param {WebGLContextAttributes} [settings] CanvasRenderingContext2DSettings
+ * @return {WebGLRenderingContext} The context.
+ */
+export function createCanvasContextWebGL(width?: number | undefined, height?: number | undefined, canvasPool?: (HTMLCanvasElement | OffscreenCanvas)[] | undefined, settings?: WebGLContextAttributes | undefined): WebGLRenderingContext;
+/**
+ * Releases canvas memory to avoid exceeding memory limits in Safari.
+ * See https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/
+ * @param {WebGLRenderingContext} gl Context.
+ */
+export function releaseGLCanvas(gl: WebGLRenderingContext): void;
+/**
+ * @typedef {Object} ImageExtent
+ * @property {import("../extent.js").Extent} extent Extent.
+ * @property {WebGLTexture} texture Texture.
+ * @property {number} width Width of texture.
+ * @property {number} height Height of texture.
+ */
+/**
+ * Renders the source data into new canvas based on the triangulation.
+ *
+ * @param {WebGLRenderingContext} gl the context to render in.
+ * @param {number} width_ Width of the canvas.
+ * @param {number} height_ Height of the canvas.
+ * @param {number} pixelRatio Pixel ratio.
+ * @param {number} sourceResolution Source resolution.
+ * @param {number} targetResolution Target resolution.
+ * @param {import("../extent.js").Extent} targetExtent Target extent (tile).
+ * @param {import("../reproj/Triangulation.js").default} triangulation Calculated triangulation.
+ * @param {Array<ImageExtent>} sources Array of sources.
+ * @param {number} gutter Gutter of the sources.
+ * @param {number} dataType What kind of data is the textures, must be gl.FLOAT or gl.UNSIGNED_BYTE
+ * TODO: Allow setting renderEdges value in the data as this is done in "data-space".
+ * @param {boolean | Array<number>} [renderEdges] Render reprojection edges.
+ * @param {boolean} [interpolate] Use linear interpolation when resampling.
+ * @return {{framebuffer: WebGLFramebuffer, width: number, height: number, texture: WebGLTexture}} Canvas with reprojected data.
+ */
+export function render(gl: WebGLRenderingContext, width_: number, height_: number, pixelRatio: number, sourceResolution: number, targetResolution: number, targetExtent: import("../extent.js").Extent, triangulation: import("../reproj/Triangulation.js").default, sources: Array<ImageExtent>, gutter: number, dataType: number, renderEdges?: boolean | number[] | undefined, interpolate?: boolean | undefined): {
+    framebuffer: WebGLFramebuffer;
+    width: number;
+    height: number;
+    texture: WebGLTexture;
+};
+/**
+ * @type {Array<HTMLCanvasElement | OffscreenCanvas>}
+ */
+export const canvasGLPool: Array<HTMLCanvasElement | OffscreenCanvas>;
+export type ImageExtent = {
+    /**
+     * Extent.
+     */
+    extent: import("../extent.js").Extent;
+    /**
+     * Texture.
+     */
+    texture: WebGLTexture;
+    /**
+     * Width of texture.
+     */
+    width: number;
+    /**
+     * Height of texture.
+     */
+    height: number;
+};
+//# sourceMappingURL=glreproj.d.ts.map

package/reproj/glreproj.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"glreproj.d.ts","sourceRoot":"","sources":["glreproj.js"],"names":[],"mappings":"AA4DA;;;;;;;GAOG;AACH,oNAFY,qBAAqB,CAsBhC;AAED;;;;GAIG;AACH,oCAFW,qBAAqB,QAO/B;AAOD;;;;;;GAMG;AAEH;;;;;;;;;;;;;;;;;;GAkBG;AACH,2BAhBW,qBAAqB,UACrB,MAAM,WACN,MAAM,cACN,MAAM,oBACN,MAAM,oBACN,MAAM,gBACN,OAAO,cAAc,EAAE,MAAM,iBAC7B,OAAO,4BAA4B,EAAE,OAAO,WAC5C,KAAK,CAAC,WAAW,CAAC,UAClB,MAAM,YACN,MAAM,oFAIL;IAAC,WAAW,EAAE,gBAAgB,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,YAAY,CAAA;CAAC,CAyThG;AAvVD;;GAEG;AACH,2BAFU,KAAK,CAAC,iBAAiB,GAAG,eAAe,CAAC,CAErB;;;;;YAIjB,OAAO,cAAc,EAAE,MAAM;;;;aAC7B,YAAY;;;;WACZ,MAAM;;;;YACN,MAAM"}