Tests for and adjustments to unpack alignment handling

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(
+function uploadDataTexture(helper, texture, data, size, bandCount) {
-  helper,
-  texture,
-  data,
-  size,
-  bandCount,
-  unpackAlignment
-) {
   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];
+    const bytesPerRow = data.byteLength / this.size[1];
-    this.bandCount = Math.floor(byteWidth / bytesPerElement / this.size[0]);
-    const textureCount = Math.ceil(this.bandCount / 4);
 
-    let unpackAlignment;
+    this.bandCount = Math.floor(bytesPerRow / bytesPerElement / this.size[0]);
-    if (byteWidth % 8 === 0) {
+    const textureCount = Math.ceil(this.bandCount / 4);
-      unpackAlignment = 8;
-    } else if (byteWidth % 4 === 0) {
-      unpackAlignment = 4;
-    } else if (byteWidth % 2 === 0) {
-      unpackAlignment = 2;
-    } else {
-      unpackAlignment = 1;
-    }
 
     if (textureCount === 1) {
       const texture = gl.createTexture();
       this.textures.push(texture);
-      uploadDataTexture(
+      uploadDataTexture(helper, texture, data, this.size, this.bandCount);
-        helper,
-        texture,
-        data,
-        this.size,
-        this.bandCount,
-        unpackAlignment
-      );
       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) {
+      for (let colIndex = 0; colIndex < colCount; ++colIndex) {
-        const bandIndex = colIndex % this.bandCount;
+        const dataValue = data[rowOffset + colIndex];
-        const textureBandIndex = bandIndex % 4;
+
-        const textureIndex = Math.floor(bandIndex / 4);
-        const bandCount =
-          textureIndex < textureCount - 1 ? 4 : this.bandCount % 4;
         const pixelIndex = Math.floor(dataIndex / this.bandCount);
-        textureDataArrays[textureIndex][
+        const bandIndex = colIndex % this.bandCount;
-          pixelIndex * bandCount + textureBandIndex
+        const textureIndex = Math.floor(bandIndex / 4);
-        ] = data[rowOffset + colIndex];
+        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];
+      const textureData = textureDataArrays[textureIndex];
-      uploadDataTexture(
+      const bandCount = textureData.length / pixelCount;
-        helper,
+      uploadDataTexture(helper, texture, textureData, this.size, bandCount);
-        texture,
-        data,
-        this.size,
-        bandCount,
-        bytesPerElement
-      );
     }
   }
 

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});

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});