Don't leave alpha of fog color unused

debug/fog.html

@@ -36,6 +36,7 @@
     this.start = 2;
     this.end = 12.0;
     this.color = [255, 255, 255];
+    this.opacity = 1.0;
     this.horizonBlend = 0.1;
     this.showTileBoundaries = false;
 };
@@ -99,7 +100,7 @@
     enableFog.onFinishChange((value) => {
         map.setFog(value ? {
             "range": [guiParams.start, guiParams.end],
-            "color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', 1.0)',
+            "color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + guiParams.opacity + ')',
             "horizon-blend": guiParams.horizonBlend
         } : null);
     });
@@ -125,10 +126,17 @@
         });
     });
 
+    var opacity = fog.add(guiParams, 'opacity', 0.0, 1.0);
+    opacity.onChange((value) => {
+        map.setFog({
+            "color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + value + ')'
+        });
+    });
+
     var color = fog.addColor(guiParams, 'color');
     color.onChange((value) => {
         map.setFog({
-            "color": 'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', 1.0)',
+            "color": 'rgba(' + value[0] + ', ' + value[1] + ', ' + value[2] + ', ' + guiParams.opacity + ')'
         });
     });
 };
@@ -189,7 +197,7 @@
 
     map.setFog(guiParams.enableFog ? {
         "range": [guiParams.start, guiParams.end],
-        "color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', 1.0)',
+        "color": 'rgba(' + guiParams.color[0] + ', ' + guiParams.color[1] + ', ' + guiParams.color[2] + ', ' + guiParams.opacity + ')',
         "horizon-blend": guiParams.horizonBlend
     } : null);
 

src/render/painter.js

@@ -180,12 +180,13 @@ class Painter {
     }
 
     _updateFog() {
-        if (this.transform.pitch <= FOG_PITCH_END || !(this.style && this.style.fog)) {
+        const fog = this.style && this.style.fog;
+        const fogOpacity = (fog && fog.properties.get('color').a) || 0.0;
+        if (this.transform.pitch <= FOG_PITCH_END || !fog || fogOpacity < 1.0) {
             this.transform.fogCullDistSq = null;
             return;
         }
 
-        const fog = this.style.fog;
         const fogStart = fog.properties.get('range')[0];
         const fogEnd = fog.properties.get('range')[1];
 
@@ -753,7 +754,8 @@ class Painter {
         const terrain = this.terrain && !this.terrain.renderingToTexture; // Enables elevation sampling in vertex shader.
         const rtt = this.terrain && this.terrain.renderingToTexture;
         const fog = this.style && this.style.fog;
-        const fogOpacity = fog && fog.getFogPitchFactor(this.transform.pitch);
+        const fogAlpha = (fog && fog.properties && fog.properties.get('color').a) || 1.0;
+        const fogOpacity = fog && (fog.getFogPitchFactor(this.transform.pitch) * fogAlpha) || 0.0;
 
         const defines = [];
         if (terrain) defines.push('TERRAIN');
@@ -838,25 +840,28 @@ class Painter {
 
     prepareDrawProgram(context: Context, program: Program<*>, tileID: ?UnwrappedTileID) {
         const fog = this.style && this.style.fog;
-        const fogOpacity = (fog && fog.getFogPitchFactor(this.transform.pitch)) || 0.0;
-        if (fog && fogOpacity !== 0.0) {
-            const temporalOffset = (this.frameCounter / 1000.0) % 1;
+        if (fog) {
             const fogColor = fog.properties.get('color');
-            const fogColorUnpremultiplied = fogColor.a === 0 ? [0, 0, 0] : [
-                fogColor.r / fogColor.a,
-                fogColor.g / fogColor.a,
-                fogColor.b / fogColor.a
-            ];
-            const uniforms = {};
-
-            uniforms['u_fog_matrix'] = tileID ? this.transform.calculateFogTileMatrix(tileID) : this.identityMat;
-            uniforms['u_fog_range'] = fog.properties.get('range');
-            uniforms['u_fog_color'] = fogColorUnpremultiplied;
-            uniforms['u_fog_horizon_blend'] = fog.properties.get('horizon-blend');
-            uniforms['u_fog_temporal_offset'] = temporalOffset;
-            uniforms['u_fog_opacity'] = fogOpacity;
-
-            program.setFogUniformValues(context, uniforms);
+            const fogOpacity = fog.getFogPitchFactor(this.transform.pitch) * fogColor.a;
+
+            if (fogOpacity !== 0.0) {
+                const temporalOffset = (this.frameCounter / 1000.0) % 1;
+                const fogColorUnpremultiplied = fogColor.a === 0 ? [0, 0, 0] : [
+                    fogColor.r / fogColor.a,
+                    fogColor.g / fogColor.a,
+                    fogColor.b / fogColor.a
+                ];
+                const uniforms = {};
+
+                uniforms['u_fog_matrix'] = tileID ? this.transform.calculateFogTileMatrix(tileID) : this.identityMat;
+                uniforms['u_fog_range'] = fog.properties.get('range');
+                uniforms['u_fog_color'] = fogColorUnpremultiplied;
+                uniforms['u_fog_horizon_blend'] = fog.properties.get('horizon-blend');
+                uniforms['u_fog_temporal_offset'] = temporalOffset;
+                uniforms['u_fog_opacity'] = fogOpacity;
+
+                program.setFogUniformValues(context, uniforms);
+            }
         }
     }
 

src/style-spec/validate/validate_fog.js

@@ -4,7 +4,6 @@ import validate from './validate.js';
 import getType from '../util/get_type.js';
 import {isExpression} from '../expression/index.js';
 import {deepUnbundle} from '../util/unbundle_jsonlint.js';
-import {parseCSSColor} from 'csscolorparser';
 
 export default function validateFog(options) {
     const fog = options.value;
@@ -21,13 +20,6 @@ export default function validateFog(options) {
         return errors;
     }
 
-    if (fog.color && !isExpression(deepUnbundle(fog.color))) {
-        const fogColor = parseCSSColor(fog.color);
-        if (fogColor && fogColor[3] === 0) {
-            errors = errors.concat([new ValidationError('fog', fog, 'fog.color alpha must be nonzero.')]);
-        }
-    }
-
     if (fog.range && !isExpression(deepUnbundle(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]')]);
     }

src/style/fog.js

@@ -43,7 +43,8 @@ class Fog extends Evented {
     get state(): FogState {
         return {
             range: this.properties.get('range'),
-            horizonBlend: this.properties.get('horizon-blend')
+            horizonBlend: this.properties.get('horizon-blend'),
+            opacity: this.properties.get('color').a
         };
     }
 

src/style/fog_helpers.js

@@ -12,7 +12,8 @@ export const FOG_SYMBOL_CLIPPING_THRESHOLD = 0.9;
 
 export type FogState = {
     range: [number, number],
-    horizonBlend: number
+    horizonBlend: number,
+    opacity: number
 };
 
 // As defined in _prelude_fog.fragment.glsl#fog_opacity
@@ -30,7 +31,7 @@ export function getFogOpacity(state: FogState, pos: Array<number>, pitch: number
     falloff *= falloff * falloff;
     falloff = Math.min(1.0, 1.00747 * falloff);
 
-    return falloff * fogPitchOpacity;
+    return falloff * fogPitchOpacity * state.opacity;
 }
 
 export function getFogOpacityAtTileCoord(state: FogState, x: number, y: number, z: number, tileId: UnwrappedTileID, transform: Transform): number {

test/integration/render-tests/fog/color-opacity/style.json

@@ -0,0 +1,29 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "allowed": 0.0005
+    }
+  },
+  "center": [
+    52.499167,
+    13.418056
+  ],
+  "zoom": 16,
+  "pitch": 70,
+  "fog": {
+    "range": [1, 4],
+    "color": "rgba(255, 30, 35, 0.8)"
+  },
+  "sources": {},
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "beige"
+      }
+    }
+  ]
+}

test/integration/render-tests/fog/culling/opacity/style.json

@@ -0,0 +1,60 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "debug": true,
+      "height": 512,
+      "width": 64
+    }
+  },
+  "center": [
+    0.1,
+    0.1
+  ],
+  "pitch": 70,
+  "bearing": 90,
+  "zoom": 15,
+  "sources": {
+    "geojson": {
+      "type": "geojson",
+      "data": {
+        "type": "Feature",
+          "geometry": {
+          "type": "LineString",
+          "coordinates": [
+            [
+              -180,
+              0
+            ],
+            [
+              180,
+              0.0
+            ]
+          ]
+        }
+      }
+    }
+  },
+  "fog": {
+    "range": [1, 1.2],
+    "color": "rgba(0, 0, 255, 0.8)"
+  },
+  "layers": [
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "beige"
+      }
+    },
+    {
+      "id": "dash",
+      "type": "line",
+      "source": "geojson",
+      "paint": {
+        "line-color": "green",
+        "line-width": 30
+      }
+    }
+  ]
+}

test/integration/render-tests/fog/disable/style.json

@@ -0,0 +1,63 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256,
+      "operations": [
+        ["wait", 500],
+        ["setFog", null],
+        ["wait", 500]
+      ]
+    }
+  },
+  "center": [-113.32296, 35.94662],
+  "zoom": 12.1,
+  "pitch": 80,
+  "bearing": 64.5,
+  "terrain": {
+    "source": "rgbterrain"
+  },
+  "fog": {
+    "range": [1, 2],
+    "color": "white",
+    "horizon-blend": 0.15
+  },
+  "sources": {
+    "rgbterrain": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.terrain.png"
+      ],
+      "maxzoom": 12,
+      "tileSize": 256
+    },
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "sky",
+      "type": "sky",
+      "paint": {
+        "sky-type": "atmosphere",
+        "sky-atmosphere-sun": [0, 0],
+        "sky-atmosphere-sun-intensity": 15
+      }
+    },
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}

test/integration/render-tests/fog/reenable/style.json

@@ -0,0 +1,59 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 256,
+      "width": 256,
+      "operations": [
+        ["wait", 500],
+        ["setFog", null],
+        ["setFog", {
+          "range": [1, 2],
+          "color": "blue",
+          "horizon-blend": 0.15
+        }],
+        ["wait", 500]
+      ]
+    }
+  },
+  "center": [-113.32296, 35.94662],
+  "zoom": 12.1,
+  "pitch": 80,
+  "bearing": 64.5,
+  "terrain": {
+    "source": "rgbterrain"
+  },
+  "fog": {
+    "range": [1, 2],
+    "color": "white",
+    "horizon-blend": 0.15
+  },
+  "sources": {
+    "rgbterrain": {
+      "type": "raster-dem",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.terrain.png"
+      ],
+      "maxzoom": 12,
+      "tileSize": 256
+    },
+    "satellite": {
+      "type": "raster",
+      "tiles": [
+        "local://tiles/{z}-{x}-{y}.satellite.png"
+      ],
+      "maxzoom": 17,
+      "tileSize": 256
+    }
+  },
+  "layers": [
+    {
+      "id": "raster",
+      "type": "raster",
+      "source": "satellite",
+      "paint": {
+        "raster-fade-duration": 0
+      }
+    }
+  ]
+}