From 7af366586f3b79fb6a474d597c123cd5b29ad7b8 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:28:09 +0000
Subject: [PATCH 1/3] Pass tilePixelRatio and gutter to TileTexture

---
 src/ol/renderer/webgl/TileLayer.js | 11 +++++-
 src/ol/webgl/TileTexture.js        | 54 +++++++++++++++++++++++++-----
 2 files changed, 55 insertions(+), 10 deletions(-)

diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js
index 2af3a33b3d..2b3a7f4300 100644
--- a/src/ol/renderer/webgl/TileLayer.js
+++ b/src/ol/renderer/webgl/TileLayer.js
@@ -304,6 +304,9 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     const tileLayer = this.getLayer();
     const tileSource = tileLayer.getRenderSource();
     const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
+    const tilePixelRatio = tileSource.getTilePixelRatio(frameState.pixelRatio);
+    const gutter = tileSource.getGutterForProjection(viewState.projection);
+
     const tileTextureCache = this.tileTextureCache_;
     const tileRange = tileGrid.getTileRangeForExtentAndZ(
       extent,
@@ -348,7 +351,13 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
             viewState.projection
           );
           if (!tileTexture) {
-            tileTexture = new TileTexture(tile, tileGrid, this.helper);
+            tileTexture = new TileTexture(
+              tile,
+              tileGrid,
+              this.helper,
+              tilePixelRatio,
+              gutter
+            );
             tileTextureCache.set(cacheKey, tileTexture);
           } else {
             if (this.isDrawableTile_(tile)) {
diff --git a/src/ol/webgl/TileTexture.js b/src/ol/webgl/TileTexture.js
index 8bba95b877..e76c81abdb 100644
--- a/src/ol/webgl/TileTexture.js
+++ b/src/ol/webgl/TileTexture.js
@@ -9,6 +9,9 @@ import ReprojTile from '../reproj/Tile.js';
 import TileState from '../TileState.js';
 import WebGLArrayBuffer from './Buffer.js';
 import {ARRAY_BUFFER, STATIC_DRAW} from '../webgl.js';
+import {IMAGE_SMOOTHING_DISABLED} from '../renderer/canvas/common.js';
+import {assign} from '../obj.js';
+import {createCanvasContext2D} from '../dom.js';
 import {toSize} from '../size.js';
 
 /**
@@ -123,8 +126,10 @@ class TileTexture extends EventTarget {
    * @param {TileType} tile The tile.
    * @param {import("../tilegrid/TileGrid.js").default} grid Tile grid.
    * @param {import("../webgl/Helper.js").default} helper WebGL helper.
+   * @param {number} [opt_tilePixelRatio=1] Tile pixel ratio.
+   * @param {number} [opt_gutter=0] The size in pixels of the gutter around image tiles to ignore.
    */
-  constructor(tile, grid, helper) {
+  constructor(tile, grid, helper, opt_tilePixelRatio, opt_gutter) {
     super();
 
     /**
@@ -140,6 +145,11 @@ class TileTexture extends EventTarget {
 
     this.size = toSize(grid.getTileSize(tile.tileCoord[0]));
 
+    this.tilePixelRatio_ =
+      opt_tilePixelRatio !== undefined ? opt_tilePixelRatio : 1;
+
+    this.gutter_ = opt_gutter !== undefined ? opt_gutter : 0;
+
     this.bandCount = NaN;
 
     this.helper_ = helper;
@@ -192,21 +202,47 @@ class TileTexture extends EventTarget {
     const tile = this.tile;
 
     if (tile instanceof ImageTile || tile instanceof ReprojTile) {
+      let image = tile.getImage();
+      if (this.gutter_ !== 0) {
+        const gutter = this.tilePixelRatio_ * this.gutter_;
+        const width = Math.round(image.width - 2 * gutter);
+        const height = Math.round(image.height - 2 * gutter);
+        const context = createCanvasContext2D(width, height);
+        if (!tile.interpolate) {
+          assign(context, IMAGE_SMOOTHING_DISABLED);
+        }
+        context.drawImage(
+          image,
+          gutter,
+          gutter,
+          width,
+          height,
+          0,
+          0,
+          width,
+          height
+        );
+        image = context.canvas;
+      }
       const texture = gl.createTexture();
       this.textures.push(texture);
       this.bandCount = 4;
-      uploadImageTexture(gl, texture, tile.getImage(), tile.interpolate);
+      uploadImageTexture(gl, texture, image, tile.interpolate);
       return;
     }
 
+    const pixelSize = [
+      this.size[0] * this.tilePixelRatio_,
+      this.size[1] * this.tilePixelRatio_,
+    ];
     const data = tile.getData();
     const isFloat = data instanceof Float32Array;
-    const pixelCount = this.size[0] * this.size[1];
+    const pixelCount = pixelSize[0] * pixelSize[1];
     const DataType = isFloat ? Float32Array : Uint8Array;
     const bytesPerElement = DataType.BYTES_PER_ELEMENT;
-    const bytesPerRow = data.byteLength / this.size[1];
+    const bytesPerRow = data.byteLength / pixelSize[1];
 
-    this.bandCount = Math.floor(bytesPerRow / bytesPerElement / this.size[0]);
+    this.bandCount = Math.floor(bytesPerRow / bytesPerElement / pixelSize[0]);
     const textureCount = Math.ceil(this.bandCount / 4);
 
     if (textureCount === 1) {
@@ -216,7 +252,7 @@ class TileTexture extends EventTarget {
         helper,
         texture,
         data,
-        this.size,
+        pixelSize,
         this.bandCount,
         tile.interpolate
       );
@@ -235,8 +271,8 @@ class TileTexture extends EventTarget {
 
     let dataIndex = 0;
     let rowOffset = 0;
-    const colCount = this.size[0] * this.bandCount;
-    for (let rowIndex = 0; rowIndex < this.size[1]; ++rowIndex) {
+    const colCount = pixelSize[0] * this.bandCount;
+    for (let rowIndex = 0; rowIndex < pixelSize[1]; ++rowIndex) {
       for (let colIndex = 0; colIndex < colCount; ++colIndex) {
         const dataValue = data[rowOffset + colIndex];
 
@@ -261,7 +297,7 @@ class TileTexture extends EventTarget {
         helper,
         texture,
         textureData,
-        this.size,
+        pixelSize,
         bandCount,
         tile.interpolate
       );

From 2a421b9362af63434d95024e6025843a0753b590 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:35:51 +0000
Subject: [PATCH 2/3] test tilePixelRatio

---
 .../expected.png                              | Bin 0 -> 10231 bytes
 .../webgl-data-tile-tilepixelratio2/main.js   |  32 ++++++++++++++++++
 2 files changed, 32 insertions(+)
 create mode 100644 test/rendering/cases/webgl-data-tile-tilepixelratio2/expected.png
 create mode 100644 test/rendering/cases/webgl-data-tile-tilepixelratio2/main.js

diff --git a/test/rendering/cases/webgl-data-tile-tilepixelratio2/expected.png b/test/rendering/cases/webgl-data-tile-tilepixelratio2/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..a8f8bcfc6ae990d109680f01e24ce417d7a71843
GIT binary patch
literal 10231
zcmeAS@N?(olHy`uVBq!ia0y~yU<5K58911L)MWvCLlCbx$lZxy-8q?;Kn_c~qpu?a
z!^VE@KZ&eBK4*bPWHAE+-(e7DJf6QIg@Hl6$J50zq$2L_c||^EM;?}gzyB{cUlI^C
zttWPiX~I79A8bV@6x(G85laax0h=<?)K!-e5qKaaFGtm3OJn8zyiX=L^I2jiy!mlR
zpy?QC>b}2m!WCqwA#(|pi!-E0n7Vgz(s&BJ>2laoDyG;-Q}_O6E5UkVL{<VsR(f}A
z&2VPG3C?=9*vmll96Zw0-P_DPS_z;h0#NBsWTm&GI!6I_<1MBNPeF*JZKSE&lP-=~
z;3I_xydWHDl>m|cE&P7N0e2H+=NCK$A(FO{rmph5-e@I&6#wvopU6t@@w<(U@SKU6
zTSxm~SOe$Nyx7r709(iqS?L|Wo6HPPshFvEg!QeS5bIyt-J_KNwq!$OrPsInIKH7f
zBKssKMw+_O0Xxik5nTEcSvigl*de#ji0p$+7#*;~tQWzhKarKi=ztw^3ysJ=nBwSw
z9kx~-P>je*Z*;&8xrIh#AIy1lzz$oh4k$)sWidKnhdfnEWFM@3bifYBcqNgQ#pr+?
z@)$djeK5Y!0XyW@Fj5E-Sy_w@*rD{si0p%n4%i{LhLJ*$$jV}Lzz(H1Mr0rC$>@L`
lQUQk)f<#sp|32U2&-*kjd0~(JH{fDD22WQ%mvv4FO#l{+CpiEB

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/webgl-data-tile-tilepixelratio2/main.js b/test/rendering/cases/webgl-data-tile-tilepixelratio2/main.js
new file mode 100644
index 0000000000..32b0c30e4d
--- /dev/null
+++ b/test/rendering/cases/webgl-data-tile-tilepixelratio2/main.js
@@ -0,0 +1,32 @@
+import DataTile from '../../../../src/ol/source/DataTile.js';
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import View from '../../../../src/ol/View.js';
+
+const size = 512;
+
+const data = new Uint8Array(size * size);
+for (let row = 0; row < size; ++row) {
+  for (let col = 0; col < size; ++col) {
+    data[row * size + col] = (row + col) % 2 === 0 ? 255 : 0;
+  }
+}
+
+new Map({
+  target: 'map',
+  layers: [
+    new TileLayer({
+      source: new DataTile({
+        maxZoom: 0,
+        loader: () => data,
+        tilePixelRatio: 2,
+      }),
+    }),
+  ],
+  view: new View({
+    center: [0, 0],
+    zoom: 4,
+  }),
+});
+
+render();

From 6a26e6a27406a7270e682a5fa481d7d80a754f55 Mon Sep 17 00:00:00 2001
From: mike-000 <49240900+mike-000@users.noreply.github.com>
Date: Thu, 20 Jan 2022 17:43:51 +0000
Subject: [PATCH 3/3] test gutter

---
 .../cases/webgl-tilewms-gutter20/expected.png | Bin 0 -> 9179 bytes
 .../cases/webgl-tilewms-gutter20/main.js      |  25 ++++++++++++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 test/rendering/cases/webgl-tilewms-gutter20/expected.png
 create mode 100644 test/rendering/cases/webgl-tilewms-gutter20/main.js

diff --git a/test/rendering/cases/webgl-tilewms-gutter20/expected.png b/test/rendering/cases/webgl-tilewms-gutter20/expected.png
new file mode 100644
index 0000000000000000000000000000000000000000..31025d9aa734633cd1f1a521813dc4f4d1afc199
GIT binary patch
literal 9179
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
W4Yyt~9Qd^k=&8ECT7!zsoBsuT`ExS>

literal 0
HcmV?d00001

diff --git a/test/rendering/cases/webgl-tilewms-gutter20/main.js b/test/rendering/cases/webgl-tilewms-gutter20/main.js
new file mode 100644
index 0000000000..b01d59f885
--- /dev/null
+++ b/test/rendering/cases/webgl-tilewms-gutter20/main.js
@@ -0,0 +1,25 @@
+import Map from '../../../../src/ol/Map.js';
+import TileLayer from '../../../../src/ol/layer/WebGLTile.js';
+import TileWMS from '../../../../src/ol/source/TileWMS.js';
+import View from '../../../../src/ol/View.js';
+
+const tileWms = new TileWMS({
+  params: {
+    'LAYERS': 'layer',
+  },
+  gutter: 20,
+  url: '/data/tiles/wms/wms20.png',
+  transition: 0,
+});
+
+new Map({
+  pixelRatio: 1.5,
+  layers: [new TileLayer({source: tileWms})],
+  target: 'map',
+  view: new View({
+    center: [0, 0],
+    zoom: 5,
+  }),
+});
+
+render();