Switch fog to use window-scaled units (#10533)

* Switch fog to use window-scaled units

* Update style spec for fog range

* Update fog validation tests to match new limits

* Update fog validations

debug/fog.html

@@ -33,8 +33,8 @@
     this.enableSky = true;
     this.terrainExaggeration = 1.5;
     this.style = 'satellite-streets-v11';
-    this.fogRangeStart = 1000;
-    this.fogRangeEnd = 10000;
+    this.fogRangeStart = 1.5;
+    this.fogRangeEnd = 2.0;
     this.fogColor = [255, 255, 255];
     this.fogSkyBlend = 0.1;
     this.showTileBoundaries = false;
@@ -111,14 +111,14 @@
         });
     });
 
-    var fogRangeStart = fog.add(guiParams, 'fogRangeStart', 0.0, 15000.0);
+    var fogRangeStart = fog.add(guiParams, 'fogRangeStart', 0.0, 15.0);
     fogRangeStart.onFinishChange((value) => {
         map.setFog({
             "range": [value, guiParams.fogRangeEnd],
         });
     });
 
-    var fogRangeEnd = fog.add(guiParams, 'fogRangeEnd', 0.0, 15000.0);
+    var fogRangeEnd = fog.add(guiParams, 'fogRangeEnd', 0.0, 15.0);
     fogRangeEnd.onFinishChange((value) => {
         map.setFog({
             "range": [guiParams.fogRangeStart, value],

src/geo/transform.js

@@ -1497,8 +1497,9 @@ class Transform {
         mat4.scale(m, m, metersToPixel);
         this.mercatorFogMatrix = m;
 
-        // matrix for conversion from tile coordinates to relative camera position in pixel coordinates
-        this.cameraMatrix = this._camera.getWorldToCameraPosition(cameraWorldSize, cameraPixelsPerMeter);
+        // matrix for conversion from tile coordinates to relative camera position in units of fractions of the map height
+        const windowScaleFactor = 1.0 / this.height;
+        this.cameraMatrix = this._camera.getWorldToCameraPosition(cameraWorldSize, cameraPixelsPerMeter, windowScaleFactor);
 
         // inverse matrix for conversion from screen coordinates to location
         m = mat4.invert(new Float64Array(16), this.pixelMatrix);

src/style-spec/reference/v8.json

@@ -3681,9 +3681,11 @@
     "range": {
       "type": "array",
       "default": [
-        3000,
-        8000
+        5,
+        10
       ],
+      "minimum": 0,
+      "maximum": 20,
       "length": 2,
       "value": "number",
       "property-type": "data-constant",
@@ -3696,8 +3698,8 @@
       },
       "doc": "",
       "example": [
-        3000,
-        8000
+        5,
+        10
       ],
       "sdk-support": {
         "basic functionality": {

src/style-spec/validate/validate_fog.js

@@ -18,12 +18,8 @@ export default function validateFog(options) {
         return errors;
     }
 
-    if (fog.range && fog.range[0] > fog.range[1]) {
-        errors = errors.concat([new ValidationError('fog', fog, 'fog.range[0] can\'t be greater than fog.range[1]')]);
-    }
-
-    if (fog.range && (fog.range[0] < 0 || fog.range[1] < 0)) {
-        errors = errors.concat([new ValidationError('fog', fog, 'fog.range can\'t be negative')]);
+    if (fog.range && fog.range[0] >= fog.range[1]) {
+        errors = errors.concat([new ValidationError('fog', fog, 'fog.range[0] can\'t be greater than or equal to fog.range[1]')]);
     }
 
     for (const key in fog) {

src/ui/free_camera.js

@@ -247,15 +247,16 @@ class FreeCamera {
         return cameraToWorld;
     }
 
-    getWorldToCameraPosition(worldSize: number, pixelsPerMeter: number): Float64Array {
+    getWorldToCameraPosition(worldSize: number, pixelsPerMeter: number, uniformScale: number): Float64Array {
         const invPosition = this.position;
 
         vec3.scale(invPosition, invPosition, -worldSize);
         const matrix = new Float64Array(16);
-        mat4.fromTranslation(matrix, invPosition);
+        mat4.fromScaling(matrix, [uniformScale, uniformScale, uniformScale]);
+        mat4.translate(matrix, matrix, invPosition);
 
         // Adjust scale on z (3rd column 3rd row)
-        matrix[10] = pixelsPerMeter;
+        matrix[10] *= pixelsPerMeter;
 
         return matrix;
     }

test/unit/style-spec/fixture/fog-invalid-input.input.json

@@ -8,7 +8,7 @@
   },
   "layers": [],
   "fog": {
-    "range": [-2000, -1000],
+    "range": [-2, -1],
     "sky-blend": -4
   }
-}
+}

test/unit/style-spec/fixture/fog-invalid-input.output-api-supported.json

@@ -1,10 +1,14 @@
 [
   {
-    "line": 10,
-    "message": "fog: fog.range can't be negative"
+    "line": 11,
+    "message": "range[0]: -2 is less than the minimum value 0"
+  },
+  {
+    "line": 11,
+    "message": "range[1]: -1 is less than the minimum value 0"
   },
   {
     "line": 12,
     "message": "sky-blend: -4 is less than the minimum value 0"
   }
-]
+]

test/unit/style-spec/fixture/fog-invalid-input.output.json

@@ -1,10 +1,14 @@
 [
   {
-    "line": 10,
-    "message": "fog: fog.range can't be negative"
+    "line": 11,
+    "message": "range[0]: -2 is less than the minimum value 0"
+  },
+  {
+    "line": 11,
+    "message": "range[1]: -1 is less than the minimum value 0"
   },
   {
     "line": 12,
     "message": "sky-blend: -4 is less than the minimum value 0"
   }
-]
+]

test/unit/style-spec/fixture/fog-invalid-range.input.json

@@ -8,6 +8,6 @@
   },
   "layers": [],
   "fog": {
-    "range": [2000, 1000]
+    "range": [2, 1]
   }
-}
+}

test/unit/style-spec/fixture/fog-invalid-range.output-api-supported.json

@@ -1,6 +1,6 @@
 [
   {
     "line": 10,
-    "message": "fog: fog.range[0] can't be greater than fog.range[1]"
+    "message": "fog: fog.range[0] can't be greater than or equal to fog.range[1]"
   }
-]
+]

test/unit/style-spec/fixture/fog-invalid-range.output.json

@@ -1,6 +1,6 @@
 [
   {
     "line": 10,
-    "message": "fog: fog.range[0] can't be greater than fog.range[1]"
+    "message": "fog: fog.range[0] can't be greater than or equal to fog.range[1]"
   }
-]
+]

test/unit/style/style.test.js

@@ -2360,7 +2360,7 @@ test('Style#setFog', (t) => {
         const style = new Style(new StubMap());
         style.loadJSON({
             "version": 8,
-            "fog": {"range": [1000, 2000], "color": "white", "sky-blend": 0.05},
+            "fog": {"range": [1, 2], "color": "white", "sky-blend": 0.05},
             "sources": {},
             "layers": []
         });
@@ -2382,15 +2382,15 @@ test('Style#getFog', (t) => {
         const style = new Style(new StubMap());
         style.loadJSON({
             "version": 8,
-            "fog": {"range": [1000, 2000], "color": "white", "sky-blend": 0.05},
+            "fog": {"range": [1, 2], "color": "white", "sky-blend": 0.05},
             "sources": {},
             "layers": []
         });
 
         style.on('style.load', () => {
-            style.setFog({"range": [0, 1000], "color": "white", "sky-blend": 0.0});
+            style.setFog({"range": [0, 1], "color": "white", "sky-blend": 0.0});
             t.ok(style.getFog());
-            t.deepEqual(style.getFog(), {"range": [0, 1000], "color": "white", "sky-blend": 0.0});
+            t.deepEqual(style.getFog(), {"range": [0, 1], "color": "white", "sky-blend": 0.0});
             t.end();
         });
     });