diff --git a/debug/fog.html b/debug/fog.html
index 570b27b37b5..c8184732d03 100644
--- 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
index 4cd28304d87..e4d8aa8c955 100644
--- 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
index 978da0cb8b8..0790dfddd6e 100644
--- 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
index c03cab734cc..c2a00afec82 100644
--- 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
index 30209b6eaea..9acc4084683 100644
--- 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
index dce11c46389..1652a67275f 100644
--- 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
index 671f9a2f0b0..6e5d4932515 100644
--- 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
index 7434ec62ddf..b0d38231cfa 100644
--- 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
index 087f0e47dbe..139fdb61b90 100644
--- 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
index 64335b0eb91..8fe30f5bec8 100644
--- 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
index 15e2b15d800..ab648f8ba77 100644
--- 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
index 3e293cb9b5e..804b9e38c93 100644
--- 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
index a699b1f294a..69b379c9f2f 100644
--- 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
index f42cf384769..21b7e24bba5 100644
--- 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
index c67f0697b9f..37e6542ffc8 100644
--- 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
index 2f0b598ff5a..c4f45a61eda 100644
--- 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
index 0b7fe0cc124..3690c358d87 100644
--- 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
index c64124250e8..03dc6e43d67 100644
--- 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
index 56f814262bb..0801364c653 100644
--- 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
index 23194dfcabe..0c7f32fd75e 100644
--- 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
index a0a9919027f..f20db1d4243 100644
--- 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
index 923890c73ec..b02fd54bf58 100644
--- 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
index 336d7da2d07..1bc770ce7c5 100644
--- 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 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/test/integration/render-tests/fog/terrain/sky-composition/style.json b/test/integration/render-tests/fog/terrain/sky-composition/style.json
index e167daa83bf..3b8c21e5f2e 100644
--- 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 @@
}
}
]
-}
\ No newline at end of file
+}
diff --git a/test/unit/geo/transform.test.js b/test/unit/geo/transform.test.js
index a5abf28c2e0..bded8a86d8c 100644
--- 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
index 14bb729e4f2..74deb9536ec 100755
--- 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
index ff6fcc6464d..1fcfcd099b9 100644
--- 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());