handle gutter in renderer

src/ol/renderer/webgl/TileLayer.js

@@ -420,6 +420,7 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
     const tileLayer = this.getLayer();
     const tileSource = tileLayer.getRenderSource();
     const tileGrid = tileSource.getTileGridForProjection(viewState.projection);
+    const gutter = tileSource.getGutterForProjection(viewState.projection);
     const extent = getRenderExtent(frameState, frameState.extent);
     const z = tileGrid.getZForResolution(
       viewState.resolution,
@@ -543,11 +544,13 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
           this.tileTransform_,
           0,
           0,
-          2 / ((frameState.size[0] * tileScale) / tileSize[0]),
+          2 / ((frameState.size[0] * tileScale) / (tileSize[0] + 2 * gutter)),
-          -2 / ((frameState.size[1] * tileScale) / tileSize[1]),
+          -2 / ((frameState.size[1] * tileScale) / (tileSize[1] + 2 * gutter)),
           viewState.rotation,
-          -(centerI - tileCenterI),
+          ((tileCenterI - centerI - gutter / tileSize[0]) * tileSize[0]) /
-          -(centerJ - tileCenterJ)
+            (tileSize[0] + 2 * gutter),
+          ((tileCenterJ - centerJ - gutter / tileSize[1]) * tileSize[1]) /
+            (tileSize[1] + 2 * gutter)
         );
 
         this.helper.setUniformMatrixValue(
@@ -599,11 +602,11 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
         this.helper.setUniformFloatValue(Uniforms.DEPTH, depth);
         this.helper.setUniformFloatValue(
           Uniforms.TEXTURE_PIXEL_WIDTH,
-          tileSize[0]
+          tileSize[0] + 2 * gutter
         );
         this.helper.setUniformFloatValue(
           Uniforms.TEXTURE_PIXEL_HEIGHT,
-          tileSize[1]
+          tileSize[1] + 2 * gutter
         );
         this.helper.setUniformFloatValue(
           Uniforms.TEXTURE_RESOLUTION,
@@ -611,13 +614,22 @@ class WebGLTileLayerRenderer extends WebGLLayerRenderer {
         );
         this.helper.setUniformFloatValue(
           Uniforms.TEXTURE_ORIGIN_X,
-          tileOrigin[0] + tileCenterI * tileSize[0] * tileResolution
+          tileOrigin[0] +
+            tileCenterI * tileSize[0] * tileResolution -
+            gutter * tileResolution
         );
         this.helper.setUniformFloatValue(
           Uniforms.TEXTURE_ORIGIN_Y,
-          tileOrigin[1] - tileCenterJ * tileSize[1] * tileResolution
+          tileOrigin[1] -
+            tileCenterJ * tileSize[1] * tileResolution +
+            gutter * tileResolution
         );
-        this.helper.setUniformFloatVec4(Uniforms.RENDER_EXTENT, extent);
+        let gutterExtent = extent;
+        if (gutter > 0) {
+          gutterExtent = tileGrid.getTileCoordExtent(tileCoord);
+          getIntersection(gutterExtent, extent, gutterExtent);
+        }
+        this.helper.setUniformFloatVec4(Uniforms.RENDER_EXTENT, gutterExtent);
         this.helper.setUniformFloatValue(
           Uniforms.RESOLUTION,
           viewState.resolution

src/ol/webgl/TileTexture.js

@@ -10,9 +10,6 @@ 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';
 
 /**
@@ -243,38 +240,16 @@ 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, image, tile.interpolate);
+      uploadImageTexture(gl, texture, tile.getImage(), tile.interpolate);
       return;
     }
 
     const pixelSize = [
-      this.size[0] * this.tilePixelRatio_,
+      (this.size[0] + 2 * this.gutter_) * this.tilePixelRatio_,
-      this.size[1] * this.tilePixelRatio_,
+      (this.size[1] + 2 * this.gutter_) * this.tilePixelRatio_,
     ];
     const data = tile.getData();
     const isFloat = data instanceof Float32Array;
@@ -373,14 +348,19 @@ class TileTexture extends EventTarget {
       return null;
     }
 
-    col = Math.floor(this.tilePixelRatio_ * col);
+    const gutter = Math.round(this.tilePixelRatio_ * this.gutter_);
-    row = Math.floor(this.tilePixelRatio_ * row);
+    col = Math.floor(this.tilePixelRatio_ * col) + gutter;
+    row = Math.floor(this.tilePixelRatio_ * row) + gutter;
 
     if (this.tile instanceof DataTile) {
       const data = this.tile.getData();
-      const pixelsPerRow = Math.floor(this.tilePixelRatio_ * this.size[0]);
+      let size = this.size;
+      if (gutter > 0) {
+        size = [size[0] + 2 * this.gutter_, size[1] + 2 * this.gutter_];
+      }
+      const pixelsPerRow = Math.floor(this.tilePixelRatio_ * size[0]);
       if (data instanceof DataView) {
-        const bytesPerPixel = data.byteLength / (this.size[0] * this.size[1]);
+        const bytesPerPixel = data.byteLength / (size[0] * size[1]);
         const offset = row * pixelsPerRow * bytesPerPixel + col * bytesPerPixel;
         const buffer = data.buffer.slice(offset, offset + bytesPerPixel);
         return new DataView(buffer);
@@ -397,19 +377,8 @@ class TileTexture extends EventTarget {
 
     let data;
     const image = this.tile.getImage();
-    const gutter = Math.round(this.tilePixelRatio_ * this.gutter_);
     try {
-      pixelContext.drawImage(
+      pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1);
-        image,
-        col + gutter,
-        row + gutter,
-        1,
-        1,
-        0,
-        0,
-        1,
-        1
-      );
       data = pixelContext.getImageData(0, 0, 1, 1).data;
     } catch (err) {
       pixelContext = null;