IconLayer: fix copy texture data when resize (#4151)

visgl · Jan 15, 2020 · 7407fe5 · 7407fe5
1 parent 49779ec
commit 7407fe5
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 36 deletions.
diff --git a/docs/layers/icon-layer.md b/docs/layers/icon-layer.md
@@ -273,7 +273,6 @@ The rotating angle  of each object, in degrees.
 - If a number is provided, it is used as the angle for all objects.
 - If a function is provided, it is called on each object to retrieve its angle.
 
-
 ## Use binary attributes
 
 This section is about the special requirements when [supplying attributes directly](/docs/developer-guide/performance.md#supply-attributes-directly) to an `IconLayer`.

diff --git a/modules/layers/src/icon-layer/icon-manager.js b/modules/layers/src/icon-layer/icon-manager.js
@@ -13,7 +13,10 @@ const noop = () => {};
 const DEFAULT_TEXTURE_PARAMETERS = {
   [GL.TEXTURE_MIN_FILTER]: GL.LINEAR_MIPMAP_LINEAR,
   // GL.LINEAR is the default value but explicitly set it here
-  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR
+  [GL.TEXTURE_MAG_FILTER]: GL.LINEAR,
+  // for texture boundary artifact
+  [GL.TEXTURE_WRAP_S]: GL.CLAMP_TO_EDGE,
+  [GL.TEXTURE_WRAP_T]: GL.CLAMP_TO_EDGE
 };
 
 function nextPowOfTwo(number) {
@@ -49,7 +52,7 @@ function resizeTexture(gl, texture, width, height) {
 
   const newTexture = cloneTextureFrom(texture, {width, height});
   copyToTexture(texture, newTexture, {
-    targetY: height - oldHeight,
+    targetY: 0,
     width: oldWidth,
     height: oldHeight
   });

diff --git a/test/render/golden-images/icon-lnglat-large.png b/test/render/golden-images/icon-lnglat-large.png
diff --git a/test/render/golden-images/icon-lnglat-resize-texture.png b/test/render/golden-images/icon-lnglat-resize-texture.png
diff --git a/test/render/test-cases.js b/test/render/test-cases.js
@@ -735,7 +735,7 @@ export const TEST_CASES = [
     viewState: {
       latitude: 37.751537058389985,
       longitude: -122.42694203247012,
-      zoom: 11.5,
+      zoom: 12,
       pitch: 0,
       bearing: 0
     },
@@ -746,7 +746,10 @@ export const TEST_CASES = [
         updateTriggers: {
           getIcon: 1
         },
-        sizeScale: 12,
+        sizeScale: 24,
+        opacity: 0.8,
+        pickable: true,
+        getSize: d => (d.RACKS > 2 ? 2 : 1),
         getPosition: d => d.COORDINATES,
         getColor: d => [64, 64, 72],
         getIcon: d => {
@@ -758,19 +761,16 @@ export const TEST_CASES = [
           return Object.assign({}, dataSamples.iconAtlas['marker-warning'], {
             url: './test/render/icon-warning.png'
           });
-        },
-        getSize: d => (d.RACKS > 2 ? 2 : 1),
-        opacity: 0.8,
-        pickable: true,
-        onAfterRender: ({layers, done}) => {
-          if (layers[0].state.iconManager.loaded) {
-            // data is loaded
-            done();
-          }
         }
       })
     ],
-    goldenImage: './test/render/golden-images/icon-lnglat.png'
+    onAfterRender: ({layers, done}) => {
+      if (layers[0].state.iconManager.loaded) {
+        // data is loaded
+        done();
+      }
+    },
+    goldenImage: './test/render/golden-images/icon-lnglat-large.png'
   },
   // This is based on last test case
   // use the same layer id 'icon-lnglat-auto' as last test case to trigger the layer update and test texture resize logic
@@ -779,47 +779,47 @@ export const TEST_CASES = [
     viewState: {
       latitude: 37.751537058389985,
       longitude: -122.42694203247012,
-      zoom: 11.5,
+      zoom: 12,
       pitch: 0,
       bearing: 0
     },
     layers: [
       new IconLayer({
         id: 'icon-lnglat-auto',
         data: dataSamples.points,
-        opacity: 0.8,
         updateTriggers: {
           getIcon: 2
         },
-        sizeScale: 12,
+        sizeScale: 24,
+        opacity: 0.8,
+        pickable: true,
+        getSize: d => (d.RACKS > 2 ? 2 : 1),
         getPosition: d => d.COORDINATES,
         getColor: d => [64, 64, 72],
         getIcon: d => {
           if (d.PLACEMENT === 'SW') {
-            return {
-              url: './test/render/golden-images/pointcloud-meter.png',
+            return Object.assign({}, dataSamples.iconAtlas.marker, {
+              url: './test/render/icon-marker.png',
+              id: 'marker-large',
               width: 256,
-              height: 256,
-              anchorY: 256,
-              mask: false
-            };
+              height: 256
+            });
           }
-          return {
-            url: './test/render/golden-images/h3-hexagon-flat.png',
+          return Object.assign({}, dataSamples.iconAtlas['marker-warning'], {
+            id: 'warning-large',
+            url: './test/render/icon-warning.png',
             width: 1024,
-            height: 1024,
-            anchorY: 1024,
-            mask: false
-          };
-        },
-        onAfterRender: ({layers, done}) => {
-          if (layers[0].state.iconManager.loaded) {
-            // data is loaded
-            done();
-          }
+            height: 1024
+          });
         }
       })
     ],
+    onAfterRender: ({layers, done}) => {
+      if (layers[0].state.iconManager.loaded) {
+        // data is loaded
+        done();
+      }
+    },
     goldenImage: './test/render/golden-images/icon-lnglat-resize-texture.png'
   },
   {