From 36159287d5be98992cf07985eaadd2fe642e4c09 Mon Sep 17 00:00:00 2001 From: mike-000 <49240900+mike-000@users.noreply.github.com> Date: Fri, 8 Apr 2022 11:29:07 +0100 Subject: [PATCH] handle gutter in renderer --- src/ol/renderer/webgl/TileLayer.js | 30 +++++++++++----- src/ol/webgl/TileTexture.js | 57 +++++++----------------------- 2 files changed, 34 insertions(+), 53 deletions(-) diff --git a/src/ol/renderer/webgl/TileLayer.js b/src/ol/renderer/webgl/TileLayer.js index 9323554099..565496d06e 100644 --- a/src/ol/renderer/webgl/TileLayer.js +++ b/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[1] * tileScale) / tileSize[1]), + 2 / ((frameState.size[0] * tileScale) / (tileSize[0] + 2 * gutter)), + -2 / ((frameState.size[1] * tileScale) / (tileSize[1] + 2 * gutter)), viewState.rotation, - -(centerI - tileCenterI), - -(centerJ - tileCenterJ) + ((tileCenterI - centerI - gutter / tileSize[0]) * tileSize[0]) / + (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 diff --git a/src/ol/webgl/TileTexture.js b/src/ol/webgl/TileTexture.js index 8c457639bf..35d3080e58 100644 --- a/src/ol/webgl/TileTexture.js +++ b/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[1] * this.tilePixelRatio_, + (this.size[0] + 2 * this.gutter_) * 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); - row = Math.floor(this.tilePixelRatio_ * row); + const gutter = Math.round(this.tilePixelRatio_ * this.gutter_); + 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( - image, - col + gutter, - row + gutter, - 1, - 1, - 0, - 0, - 1, - 1 - ); + pixelContext.drawImage(image, col, row, 1, 1, 0, 0, 1, 1); data = pixelContext.getImageData(0, 0, 1, 1).data; } catch (err) { pixelContext = null;