diff --git a/src/ol/webgl/TileTexture.js b/src/ol/webgl/TileTexture.js index af86a851aa..d67a804d9b 100644 --- a/src/ol/webgl/TileTexture.js +++ b/src/ol/webgl/TileTexture.js @@ -36,19 +36,21 @@ function uploadImageTexture(gl, texture, image) { * @param {import("../DataTile.js").Data} data The pixel data. * @param {import("../size.js").Size} size The pixel size. * @param {number} bandCount The band count. - * @param {number} unpackAlignment The unpack alignment. */ -function uploadDataTexture( - helper, - texture, - data, - size, - bandCount, - unpackAlignment -) { +function uploadDataTexture(helper, texture, data, size, bandCount) { const gl = helper.getGL(); bindAndConfigure(gl, texture); + const bytesPerRow = data.byteLength / size[1]; + let unpackAlignment = 1; + if (bytesPerRow % 8 === 0) { + unpackAlignment = 8; + } else if (bytesPerRow % 4 === 0) { + unpackAlignment = 4; + } else if (bytesPerRow % 2 === 0) { + unpackAlignment = 2; + } + let format; switch (bandCount) { case 1: { @@ -81,6 +83,7 @@ function uploadDataTexture( textureType = gl.UNSIGNED_BYTE; } + const oldUnpackAlignment = gl.getParameter(gl.UNPACK_ALIGNMENT); gl.pixelStorei(gl.UNPACK_ALIGNMENT, unpackAlignment); gl.texImage2D( gl.TEXTURE_2D, @@ -93,7 +96,7 @@ function uploadDataTexture( textureType, data ); - gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4); + gl.pixelStorei(gl.UNPACK_ALIGNMENT, oldUnpackAlignment); } /** @@ -180,32 +183,15 @@ class TileTexture extends EventTarget { const pixelCount = this.size[0] * this.size[1]; const DataType = isFloat ? Float32Array : Uint8Array; const bytesPerElement = DataType.BYTES_PER_ELEMENT; - const byteWidth = data.byteLength / this.size[1]; - this.bandCount = Math.floor(byteWidth / bytesPerElement / this.size[0]); - const textureCount = Math.ceil(this.bandCount / 4); + const bytesPerRow = data.byteLength / this.size[1]; - let unpackAlignment; - if (byteWidth % 8 === 0) { - unpackAlignment = 8; - } else if (byteWidth % 4 === 0) { - unpackAlignment = 4; - } else if (byteWidth % 2 === 0) { - unpackAlignment = 2; - } else { - unpackAlignment = 1; - } + this.bandCount = Math.floor(bytesPerRow / bytesPerElement / this.size[0]); + const textureCount = Math.ceil(this.bandCount / 4); if (textureCount === 1) { const texture = gl.createTexture(); this.textures.push(texture); - uploadDataTexture( - helper, - texture, - data, - this.size, - this.bandCount, - unpackAlignment - ); + uploadDataTexture(helper, texture, data, this.size, this.bandCount); return; } @@ -221,36 +207,29 @@ class TileTexture extends EventTarget { let dataIndex = 0; let rowOffset = 0; - const valueCount = this.size[0] * this.bandCount; + const colCount = this.size[0] * this.bandCount; for (let rowIndex = 0; rowIndex < this.size[1]; ++rowIndex) { - for (let colIndex = 0; colIndex < valueCount; ++colIndex) { - const bandIndex = colIndex % this.bandCount; - const textureBandIndex = bandIndex % 4; - const textureIndex = Math.floor(bandIndex / 4); - const bandCount = - textureIndex < textureCount - 1 ? 4 : this.bandCount % 4; + for (let colIndex = 0; colIndex < colCount; ++colIndex) { + const dataValue = data[rowOffset + colIndex]; + const pixelIndex = Math.floor(dataIndex / this.bandCount); - textureDataArrays[textureIndex][ - pixelIndex * bandCount + textureBandIndex - ] = data[rowOffset + colIndex]; + const bandIndex = colIndex % this.bandCount; + const textureIndex = Math.floor(bandIndex / 4); + const textureData = textureDataArrays[textureIndex]; + const bandCount = textureData.length / pixelCount; + const textureBandIndex = bandIndex % 4; + textureData[pixelIndex * bandCount + textureBandIndex] = dataValue; + ++dataIndex; } - rowOffset += byteWidth / bytesPerElement; + rowOffset += bytesPerRow / bytesPerElement; } for (let textureIndex = 0; textureIndex < textureCount; ++textureIndex) { - const bandCount = - textureIndex < textureCount - 1 ? 4 : this.bandCount % 4; const texture = this.textures[textureIndex]; - const data = textureDataArrays[textureIndex]; - uploadDataTexture( - helper, - texture, - data, - this.size, - bandCount, - bytesPerElement - ); + const textureData = textureDataArrays[textureIndex]; + const bandCount = textureData.length / pixelCount; + uploadDataTexture(helper, texture, textureData, this.size, bandCount); } } diff --git a/test/rendering/cases/webgl-data-tile-3-band/expected.png b/test/rendering/cases/webgl-data-tile-3-band/expected.png new file mode 100644 index 0000000000..890747aca6 Binary files /dev/null and b/test/rendering/cases/webgl-data-tile-3-band/expected.png differ diff --git a/test/rendering/cases/webgl-data-tile-3-band/main.js b/test/rendering/cases/webgl-data-tile-3-band/main.js new file mode 100644 index 0000000000..951710c3a1 --- /dev/null +++ b/test/rendering/cases/webgl-data-tile-3-band/main.js @@ -0,0 +1,49 @@ +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 = [81, 99]; + +const canvas = document.createElement('canvas'); +canvas.width = size[0]; +canvas.height = size[1]; + +const context = canvas.getContext('2d'); +context.strokeStyle = 'white'; +context.textAlign = 'center'; +const lineHeight = 16; +context.font = `${lineHeight}px sans-serif`; + +new Map({ + target: 'map', + layers: [ + new TileLayer({ + source: new DataTile({ + loader: function (z, x, y) { + const halfWidth = size[0] / 2; + const halfHeight = size[1] / 2; + context.fillStyle = '#00AAFF'; + context.fillRect(0, 0, size[0], size[1]); + context.fillStyle = 'white'; + context.fillText(`z: ${z}`, halfWidth, halfHeight - lineHeight); + context.fillText(`x: ${x}`, halfWidth, halfHeight); + context.fillText(`y: ${y}`, halfWidth, halfHeight + lineHeight); + context.strokeRect(0, 0, size[0], size[1]); + const data = context.getImageData(0, 0, size[0], size[1]).data; + + const bandCount = 3; + const result = data.filter((_, index) => index % 4 < bandCount); + return Promise.resolve(result); + }, + tileSize: size, + }), + }), + ], + view: new View({ + center: [0, 0], + zoom: 4, + }), +}); + +render({tolerance: 0.03}); diff --git a/test/rendering/cases/webgl-data-tile-loosely-packed/expected.png b/test/rendering/cases/webgl-data-tile-loosely-packed/expected.png new file mode 100644 index 0000000000..890747aca6 Binary files /dev/null and b/test/rendering/cases/webgl-data-tile-loosely-packed/expected.png differ diff --git a/test/rendering/cases/webgl-data-tile-loosely-packed/main.js b/test/rendering/cases/webgl-data-tile-loosely-packed/main.js new file mode 100644 index 0000000000..d7bf1260af --- /dev/null +++ b/test/rendering/cases/webgl-data-tile-loosely-packed/main.js @@ -0,0 +1,67 @@ +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 = [81, 99]; + +const canvas = document.createElement('canvas'); +canvas.width = size[0]; +canvas.height = size[1]; + +const context = canvas.getContext('2d'); +context.strokeStyle = 'white'; +context.textAlign = 'center'; +const lineHeight = 16; +context.font = `${lineHeight}px sans-serif`; + +new Map({ + target: 'map', + layers: [ + new TileLayer({ + source: new DataTile({ + tileSize: size, + loader: function (z, x, y) { + const halfW = size[0] / 2; + const halfH = size[1] / 2; + context.fillStyle = '#00AAFF'; + context.fillRect(0, 0, size[0], size[1]); + context.fillStyle = 'white'; + context.fillText(`z: ${z}`, halfW, halfH - lineHeight); + context.fillText(`x: ${x}`, halfW, halfH); + context.fillText(`y: ${y}`, halfW, halfH + lineHeight); + context.strokeRect(0, 0, size[0], size[1]); + + const input = context.getImageData(0, 0, size[0], size[1]).data; + const bandCount = input.length / (size[0] * size[1]); + const inputColCount = bandCount * size[0]; + + const packAlignment = 8; + const outputColCount = + Math.ceil((bandCount * size[0]) / packAlignment) * packAlignment; + const output = new Uint8Array(outputColCount * size[1]); + + for (let row = 0; row < size[1]; ++row) { + let inputOffset = row * inputColCount; + let outputOffset = row * outputColCount; + for (let col = 0; col < inputColCount; col += bandCount) { + for (let band = 0; band < bandCount; ++band) { + output[outputOffset] = input[inputOffset]; + inputOffset += 1; + outputOffset += 1; + } + } + } + + return Promise.resolve(output); + }, + }), + }), + ], + view: new View({ + center: [0, 0], + zoom: 4, + }), +}); + +render({tolerance: 0.03});