Fix size projection in billboard mode (visgl#5798)

harisbal · May 25, 2021 · 0859e15 · 0859e15
1 parent a77e8c9
commit 0859e15
Show file tree

Hide file tree

Showing 26 changed files with 33 additions and 23 deletions.
diff --git a/docs/upgrade-guide.md b/docs/upgrade-guide.md
@@ -8,6 +8,11 @@ The module entry point is now only lightly transpiled for the most commonly used
 
 ### Layers
 
+- A bug is fixed in projecting sizes in billboard mode. Pixel sizes now match their CSS counterparts. This change affects the following layers when used with a `MapView`:
+  + `ArcLayer`, `LineLayer` and `PointCloudLayer`
+  + `IconLayer` and `TextLayer` with the default `billboard` prop
+  + `PathLayer` with `billboard: true`
+  After upgrading to v8.5, in order to maintain the same appearance, you need to multiply `2/3` to the objects' width/size. This can be done by either changing the accessor (`getWidth`/`getSize`) or the scaling prop (`sizeScale`/`widthScale`).
 - `TextLayer`'s `backgroundColor` prop is deprecated. Use `background: true` and `getBackgroundColor` instead.
 - `TextLayer`'s default `fontSettings` have changed. When using `sdf`, the default `buffer` is now `4` and the default `radius` is now `12`.
 - `PathLayer`'s `rounded` prop is deprecated, replaced by two separate flags `jointRounded` and `capRounded`.

diff --git a/examples/website/arc/app.js b/examples/website/arc/app.js
@@ -76,7 +76,7 @@ function getTooltip({object}) {
 }
 
 /* eslint-disable react/no-deprecated */
-export default function App({data, strokeWidth = 2, mapStyle = MAP_STYLE}) {
+export default function App({data, strokeWidth = 1, mapStyle = MAP_STYLE}) {
   const [selectedCounty, selectCounty] = useState(null);
 
   const arcs = useMemo(() => calculateArcs(data, selectedCounty), [data, selectedCounty]);

diff --git a/examples/website/brushing/app.js b/examples/website/brushing/app.js
@@ -116,7 +116,7 @@ export default function App({
   data,
   enableBrushing = true,
   brushRadius = 100000,
-  strokeWidth = 2,
+  strokeWidth = 1,
   opacity = 0.7,
   mapStyle = MAP_STYLE
 }) {

diff --git a/examples/website/icon/app.js b/examples/website/icon/app.js
@@ -89,7 +89,7 @@ export default function App({
   };
 
   const layer = showCluster
-    ? new IconClusterLayer({...layerProps, id: 'icon-cluster', sizeScale: 60})
+    ? new IconClusterLayer({...layerProps, id: 'icon-cluster', sizeScale: 40})
     : new IconLayer({
         ...layerProps,
         id: 'icon',

diff --git a/examples/website/icon/icon-cluster-layer.js b/examples/website/icon/icon-cluster-layer.js
@@ -28,7 +28,7 @@ export default class IconClusterLayer extends CompositeLayer {
     const rebuildIndex = changeFlags.dataChanged || props.sizeScale !== oldProps.sizeScale;
 
     if (rebuildIndex) {
-      const index = new Supercluster({maxZoom: 16, radius: props.sizeScale});
+      const index = new Supercluster({maxZoom: 16, radius: props.sizeScale * Math.sqrt(2)});
       index.load(
         props.data.map(d => ({
           geometry: {coordinates: props.getPosition(d)},

diff --git a/examples/website/safegraph/app.js b/examples/website/safegraph/app.js
@@ -67,7 +67,7 @@ function renderLayers(map, data) {
     getTargetPosition: d => [d.home_lng, d.home_lat],
     getSourceColor: [255, 0, 128],
     getTargetColor: [0, 200, 255],
-    getWidth: d => Math.max(2, d.count / 10)
+    getWidth: d => Math.max(2, d.count / 15)
   });
 
   const selectPOI = hex => {

diff --git a/modules/core/src/shaderlib/project/viewport-uniforms.js b/modules/core/src/shaderlib/project/viewport-uniforms.js
@@ -214,6 +214,13 @@ function calculateViewportUniforms({
 
   const viewportSize = [viewport.width * devicePixelRatio, viewport.height * devicePixelRatio];
 
+  // Distance at which screen pixels are projected.
+  // Used to scale sizes in clipspace to match screen pixels.
+  // When using Viewport class's default projection matrix, this yields 1 for orthographic
+  // and `viewport.focalDistance` for perspective views
+  const focalDistance =
+    viewport.projectionMatrix.transform([0, 0, -viewport.focalDistance, 1])[3] || 1;
+
   const uniforms = {
     // Projection mode values
     project_uCoordinateSystem: coordinateSystem,
@@ -225,8 +232,7 @@ function calculateViewportUniforms({
     project_uViewportSize: viewportSize,
     project_uDevicePixelRatio: devicePixelRatio,
 
-    // Distance at which screen pixels are projected
-    project_uFocalDistance: viewport.focalDistance || 1,
+    project_uFocalDistance: focalDistance,
     project_uCommonUnitsPerMeter: distanceScales.unitsPerMeter,
     project_uCommonUnitsPerWorldUnit: distanceScales.unitsPerMeter,
     project_uCommonUnitsPerWorldUnit2: DEFAULT_PIXELS_PER_UNIT2,

diff --git a/modules/core/src/viewports/web-mercator-viewport.js b/modules/core/src/viewports/web-mercator-viewport.js
@@ -111,8 +111,7 @@ export default class WebMercatorViewport extends Viewport {
       orthographic,
       fovyRadians: fov,
       aspect,
-      // TODO Viewport is already carefully set up to "focus" on ground, so can't use focal distance
-      focalDistance: orthographic ? focalDistance : 1,
+      focalDistance,
       near,
       far
     });

diff --git a/test/render/golden-images/arc-lnglat-3d.png b/test/render/golden-images/arc-lnglat-3d.png
diff --git a/test/render/golden-images/arc-lnglat-high-zoom.png b/test/render/golden-images/arc-lnglat-high-zoom.png
diff --git a/test/render/golden-images/arc-lnglat.png b/test/render/golden-images/arc-lnglat.png
diff --git a/test/render/golden-images/arc-shortest-path-high-zoom-2.png b/test/render/golden-images/arc-shortest-path-high-zoom-2.png
diff --git a/test/render/golden-images/arc-shortest-path-high-zoom.png b/test/render/golden-images/arc-shortest-path-high-zoom.png
diff --git a/test/render/golden-images/arc-shortest-path.png b/test/render/golden-images/arc-shortest-path.png
diff --git a/test/render/golden-images/great-circle.png b/test/render/golden-images/great-circle.png
diff --git a/test/render/golden-images/icon-lnglat.png b/test/render/golden-images/icon-lnglat.png
diff --git a/test/render/golden-images/line-lnglat.png b/test/render/golden-images/line-lnglat.png
diff --git a/test/render/golden-images/path-billboard.png b/test/render/golden-images/path-billboard.png
diff --git a/test/render/golden-images/text-layer-auto-wrapping.png b/test/render/golden-images/text-layer-auto-wrapping.png
diff --git a/test/render/golden-images/text-layer-background.png b/test/render/golden-images/text-layer-background.png
diff --git a/test/render/golden-images/text-layer-multi-lines.png b/test/render/golden-images/text-layer-multi-lines.png
diff --git a/test/render/golden-images/text-layer.png b/test/render/golden-images/text-layer.png
diff --git a/test/render/test-cases/contour-layer.js b/test/render/test-cases/contour-layer.js
@@ -74,8 +74,8 @@ export default [
         cellSize: 200,
         getPosition: d => d.COORDINATES,
         contours: [
-          {threshold: 1, color: [255, 0, 0], strokeWidth: 6},
-          {threshold: 5, color: [0, 255, 0], strokeWidth: 3},
+          {threshold: 1, color: [255, 0, 0], strokeWidth: 4},
+          {threshold: 5, color: [0, 255, 0], strokeWidth: 2},
           {threshold: 15, color: [0, 0, 255]}
         ],
         gpuAggregation: false
@@ -99,8 +99,8 @@ export default [
         cellSize: 200,
         getPosition: d => d.COORDINATES,
         contours: [
-          {threshold: 1, color: [255, 0, 0], strokeWidth: 6},
-          {threshold: 5, color: [0, 255, 0], strokeWidth: 3},
+          {threshold: 1, color: [255, 0, 0], strokeWidth: 4},
+          {threshold: 5, color: [0, 255, 0], strokeWidth: 2},
           {threshold: 15, color: [0, 0, 255]}
         ],
         gpuAggregation: true

diff --git a/test/render/test-cases/icon-layer.js b/test/render/test-cases/icon-layer.js
@@ -109,7 +109,7 @@ export default [
         updateTriggers: {
           getIcon: 1
         },
-        sizeScale: 24,
+        sizeScale: 16,
         opacity: 0.8,
         getSize: d => (d.RACKS > 2 ? 2 : 1),
         getPosition: d => d.COORDINATES,
@@ -146,7 +146,7 @@ export default [
         updateTriggers: {
           getIcon: 2
         },
-        sizeScale: 24,
+        sizeScale: 16,
         opacity: 0.8,
         getSize: d => (d.RACKS > 2 ? 2 : 1),
         getPosition: d => d.COORDINATES,

diff --git a/test/render/test-cases/point-cloud-layer.js b/test/render/test-cases/point-cloud-layer.js
@@ -49,7 +49,7 @@ export default [
         getPosition: d => [d.position[0] * 1e-5, d.position[1] * 1e-5, d.position[2]],
         getNormal: d => d.normal,
         getColor: d => d.color,
-        pointSize: 2,
+        pointSize: 1.333333,
         pickable: true
       })
     ],
@@ -77,7 +77,7 @@ export default [
         },
         coordinateSystem: COORDINATE_SYSTEM.METER_OFFSETS,
         coordinateOrigin: positionOrigin,
-        pointSize: 2,
+        pointSize: 1.333333,
         pickable: true
       })
     ],

diff --git a/test/render/test-cases/text-layer.js b/test/render/test-cases/text-layer.js
@@ -63,7 +63,7 @@ export default (OS === 'Mac'
             getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`,
             getPosition: x => x.COORDINATES,
             getColor: x => [255, 0, 0],
-            getSize: x => 32,
+            getSize: x => 20,
             getAngle: x => 0,
             sizeScale: 1,
             getTextAnchor: x => 'start',
@@ -91,7 +91,7 @@ export default (OS === 'Mac'
             getText: x => `${x.PLACEMENT}-${x.YR_INSTALLED}`,
             getPosition: x => x.COORDINATES,
             getColor: x => [255, 0, 0],
-            getSize: x => 32,
+            getSize: x => 20,
             getAngle: x => 0,
             sizeScale: 21.343755,
             sizeUnits: 'meters',
@@ -124,7 +124,7 @@ export default (OS === 'Mac'
               }
             ),
             fontFamily: 'Arial',
-            getSize: 32,
+            getSize: 20,
             getAngle: 0,
             sizeScale: 1,
             getTextAnchor: 'start',
@@ -154,7 +154,7 @@ export default (OS === 'Mac'
             getText: x => `${x.ADDRESS}\n${x.SPACES}`,
             getPosition: (_, {index}) => [0, (index - 5) * 1000],
             getColor: [255, 0, 0],
-            getSize: 32,
+            getSize: 20,
             getTextAnchor: 'middle',
             getAlignmentBaseline: 'center'
           })
@@ -183,7 +183,7 @@ export default (OS === 'Mac'
             getText: x => `${x.LOCATION_NAME} ${x.ADDRESS}`,
             getPosition: (_, {index}) => [0, (index - 2) * 2000],
             getColor: [255, 0, 0],
-            getSize: 32,
+            getSize: 20,
             getTextAnchor: 'middle',
             getAlignmentBaseline: 'center'
           })
@@ -215,7 +215,7 @@ export default (OS === 'Mac'
             getPosition: (_, {index}) => [0, (index - 5) * 1000],
             getColor: [255, 0, 0],
             getAngle: 15,
-            getSize: 32,
+            getSize: 20,
             getTextAnchor: 'start',
             getAlignmentBaseline: 'center'
           })