Switch fog from percentage window height to CSS vh units (#10632)

* Switch fog from percentage window height to CSS vh units * Fix tests * Fix more tests * Fix still more tests * Update src/style-spec/reference/v8.json
mapbox · May 4, 2021 · 6047053 · 6047053
1 parent 742e6c2
commit 6047053
Show file tree

Hide file tree

Showing 27 changed files with 41 additions and 40 deletions.
diff --git a/debug/fog.html b/debug/fog.html
@@ -33,8 +33,8 @@
     this.enableSky = true;
     this.terrainExaggeration = 1.5;
     this.style = 'satellite-streets-v11';
-    this.start = 2;
-    this.end = 12.0;
+    this.start = 200;
+    this.end = 1200;
     this.color = [255, 255, 255];
     this.horizonBlend = 0.1;
     this.showTileBoundaries = false;
@@ -104,14 +104,14 @@
         } : null);
     });
 
-    var start = fog.add(guiParams, 'start', 0.0, 15.0);
+    var start = fog.add(guiParams, 'start', 0.0, 1500.0);
     start.onChange((value) => {
         map.setFog({
             "range": [value, guiParams.end],
         });
     });
 
-    var end = fog.add(guiParams, 'end', 0.0, 15.0);
+    var end = fog.add(guiParams, 'end', 0.0, 1500.0);
     end.onChange((value) => {
         map.setFog({
             "range": [guiParams.start, value],

diff --git a/src/geo/transform.js b/src/geo/transform.js
@@ -1486,11 +1486,11 @@ class Transform {
 
         // The mercator fog matrix encodes transformation necessary to transform a position to camera fog space (in meters):
         // translates p to camera origin and transforms it from pixels to meters. The windowScaleFactor is used to have a
-        // consistent transformation across different window sizes.
+        // consistent transformation across different window sizes. The 100 in windowScaleFactor accounts for vh units (percentage of window height).
         // - p = p - cameraOrigin
         // - p.xy = p.xy * cameraWorldSize * windowScaleFactor
         // - p.z  = p.z  * cameraPixelsPerMeter * windowScaleFactor
-        const windowScaleFactor = 1.0 / this.height;
+        const windowScaleFactor = 100 / this.height;
         const metersToPixel = [cameraWorldSize, cameraWorldSize, cameraPixelsPerMeter];
         vec3.scale(metersToPixel, metersToPixel, windowScaleFactor);
         vec3.scale(cameraPos, cameraPos, -1);

diff --git a/src/style-spec/reference/v8.json b/src/style-spec/reference/v8.json
@@ -3685,7 +3685,8 @@
         12
       ],
       "minimum": 0,
-      "maximum": 20,
+      "maximum": 2000,
+      "units": "vh",
       "length": 2,
       "value": "number",
       "property-type": "data-constant",
@@ -3696,10 +3697,10 @@
           "zoom"
         ]
       },
-      "doc": "The near and far limits of the fog layer. Units are relative to the map height, so that 2.0 corresponds to twice the map height, in pixels.",
+      "doc": "The start and end distance range in which fog fades from fully transparent to fully opaque. Units are relative to the map window height in CSS `vh` units, so that 200 corresponds to 200% the map window height.",
       "example": [
-        2,
-        12
+        200,
+        1200
       ],
       "sdk-support": {
         "basic functionality": {

diff --git a/test/integration/render-tests/fog/2d/background-color/style.json b/test/integration/render-tests/fog/2d/background-color/style.json
@@ -9,7 +9,7 @@
   "pitch": 80,
   "zoom": 12,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "layers": [

diff --git a/test/integration/render-tests/fog/2d/background-pattern/style.json b/test/integration/render-tests/fog/2d/background-pattern/style.json
@@ -20,7 +20,7 @@
     }
   ],
   "fog": {
-    "range": [0.5, 1.5],
+    "range": [50, 150],
     "color": "white"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/basic/style.json b/test/integration/render-tests/fog/2d/basic/style.json
@@ -11,7 +11,7 @@
   "pitch": 80,
   "bearing": 64.5,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/fill-color/style.json b/test/integration/render-tests/fog/2d/fill-color/style.json
@@ -51,7 +51,7 @@
     }
   ],
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/fill-extrusion-pattern/style.json b/test/integration/render-tests/fog/2d/fill-extrusion-pattern/style.json
@@ -97,7 +97,7 @@
     }
   ],
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/fill-extrusion/style.json b/test/integration/render-tests/fog/2d/fill-extrusion/style.json
@@ -62,7 +62,7 @@
     }
   ],
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/fill-outline/style.json b/test/integration/render-tests/fog/2d/fill-outline/style.json
@@ -52,7 +52,7 @@
     }
   ],
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/fill-pattern/style.json b/test/integration/render-tests/fog/2d/fill-pattern/style.json
@@ -52,7 +52,7 @@
     }
   ],
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "black"
   }
 }
diff --git a/test/integration/render-tests/fog/2d/heatmap/style.json b/test/integration/render-tests/fog/2d/heatmap/style.json
@@ -13,7 +13,7 @@
   "pitch": 70,
   "zoom": 14,
   "fog": {
-    "range": [1.25, 1.75],
+    "range": [125, 175],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/hillshade/style.json b/test/integration/render-tests/fog/2d/hillshade/style.json
@@ -10,7 +10,7 @@
   "zoom": 11,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/line-gradient/style.json b/test/integration/render-tests/fog/2d/line-gradient/style.json
@@ -9,7 +9,7 @@
   "zoom": 2,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/line-pattern/style.json b/test/integration/render-tests/fog/2d/line-pattern/style.json
@@ -12,7 +12,7 @@
   "zoom": 17,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/line-sdf/style.json b/test/integration/render-tests/fog/2d/line-sdf/style.json
@@ -12,7 +12,7 @@
   "zoom": 17,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/line/style.json b/test/integration/render-tests/fog/2d/line/style.json
@@ -12,7 +12,7 @@
   "zoom": 14,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/2d/raster/style.json b/test/integration/render-tests/fog/2d/raster/style.json
@@ -13,7 +13,7 @@
   "zoom": 16,
   "pitch": 70,
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {

diff --git a/test/integration/render-tests/fog/color/style.json b/test/integration/render-tests/fog/color/style.json
@@ -13,7 +13,7 @@
   "zoom": 16,
   "pitch": 70,
   "fog": {
-    "range": [1, 4],
+    "range": [100, 400],
     "color": "rgba(255, 30, 35, 1)"
   },
   "sources": {},

diff --git a/test/integration/render-tests/fog/culling/close/style.json b/test/integration/render-tests/fog/culling/close/style.json
@@ -36,7 +36,7 @@
     }
   },
   "fog": {
-    "range": [1, 1.2],
+    "range": [100, 120],
     "color": "blue"
   },
   "layers": [

diff --git a/test/integration/render-tests/fog/culling/far/style.json b/test/integration/render-tests/fog/culling/far/style.json
@@ -36,7 +36,7 @@
     }
   },
   "fog": {
-    "range": [5, 6],
+    "range": [500, 600],
     "color": "blue"
   },
   "layers": [

diff --git a/test/integration/render-tests/fog/culling/mid/style.json b/test/integration/render-tests/fog/culling/mid/style.json
@@ -36,7 +36,7 @@
     }
   },
   "fog": {
-    "range": [1.7, 2],
+    "range": [170, 200],
     "color": "blue"
   },
   "layers": [

diff --git a/test/integration/render-tests/fog/terrain/basic/style.json b/test/integration/render-tests/fog/terrain/basic/style.json
@@ -14,7 +14,7 @@
     "source": "rgbterrain"
   },
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white"
   },
   "sources": {
@@ -45,4 +45,4 @@
       }
     }
   ]
-}
+}
diff --git a/test/integration/render-tests/fog/terrain/sky-composition/style.json b/test/integration/render-tests/fog/terrain/sky-composition/style.json
@@ -14,7 +14,7 @@
     "source": "rgbterrain"
   },
   "fog": {
-    "range": [1, 2],
+    "range": [100, 200],
     "color": "white",
     "horizon-blend": 0.15
   },
@@ -55,4 +55,4 @@
       }
     }
   ]
-}
+}
diff --git a/test/unit/geo/transform.test.js b/test/unit/geo/transform.test.js
@@ -408,7 +408,7 @@ test('transform', (t) => {
         transform.resize(200, 200);
         transform.center = {lng: -0.01, lat: 0.01};
         transform.zoom = 0;
-        transform.fogCullDistSq = 1.5;
+        transform.fogCullDistSq = 15000;
         transform.pitch = 85.0;
         t.deepEqual(transform.coveringTiles(options), []);
 

diff --git a/test/unit/ui/map.test.js b/test/unit/ui/map.test.js
@@ -1247,7 +1247,7 @@ test('Map', (t) => {
         const map = createMap(t, {style});
         map.on('load', () => {
             map.setFog({
-                "range": [2, 12]
+                "range": [200, 1200]
             });
 
             t.ok(map.getFog());
@@ -1269,10 +1269,10 @@ test('Map', (t) => {
 
                 t.deepEqual(map.queryFogOpacity([0, 0]), 0.0);
 
-                t.deepEqual(map.queryFogOpacity([0.5, 0]), 0.5963390859543484);
-                t.deepEqual(map.queryFogOpacity([0, 0.5]), 0.31817612773293763);
-                t.deepEqual(map.queryFogOpacity([-0.5, 0]), 0.0021931905967484703);
-                t.deepEqual(map.queryFogOpacity([-0.5, -0.5]), 0.4147318524978687);
+                t.deepEqual(map.queryFogOpacity([0.5, 0]), 0.5963360993372026);
+                t.deepEqual(map.queryFogOpacity([0, 0.5]), 0.3181747292975157);
+                t.deepEqual(map.queryFogOpacity([-0.5, 0]), 0.0021935811432850054);
+                t.deepEqual(map.queryFogOpacity([-0.5, -0.5]), 0.4147338484563584);
 
                 t.deepEqual(map.queryFogOpacity([2, 0]), 1.0);
                 t.deepEqual(map.queryFogOpacity([0, 2]), 1.0);

diff --git a/test/unit/ui/marker.test.js b/test/unit/ui/marker.test.js
@@ -854,7 +854,7 @@ test('Marker and fog', (t) => {
 
     map.on('load', () => {
         map.setFog({
-            "range": [2, 12]
+            "range": [200, 1200]
         });
 
         t.ok(map.getFog());