Fix alpha composing of horizon blend with sky gradient (#10640)

Make sure to un/post multiply alpha before/after applying sky gradient
contribution, as color ramps are premultiplied-alpha colors.  This prevents
washed out colors when using transparency.

src/shaders/skybox_gradient.fragment.glsl

@@ -8,14 +8,17 @@ uniform highp float u_temporal_offset;
 
 void main() {
     float progress = acos(dot(normalize(v_uv), u_center_direction)) / u_radius;
-    vec4 color = texture2D(u_color_ramp, vec2(progress, 0.5)) * u_opacity;
+    vec4 color = texture2D(u_color_ramp, vec2(progress, 0.5));
 
 #ifdef FOG
-    // Apply fog contribution if enabled
+    // Apply fog contribution if enabled, make sure to un/post multiply alpha before/after
+    // applying sky gradient contribution, as color ramps are premultiplied-alpha colors.
     // Swizzle to put z-up (ignoring x-y mirror since fog does not depend on azimuth)
-    color.rgb = fog_apply_sky_gradient(v_uv.xzy, color.rgb);
+    color.rgb = fog_apply_sky_gradient(v_uv.xzy, color.rgb / color.a) * color.a;
 #endif
 
+    color *= u_opacity;
+
     // Dither
     color.rgb = dither(color.rgb, gl_FragCoord.xy + u_temporal_offset);
 

test/integration/render-tests/fog/horizon-blend/atmosphere/opacity/style.json

@@ -0,0 +1,36 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 100,
+      "width": 512
+    }
+  },
+  "sources": {},
+  "zoom": 16,
+  "pitch": 85,
+  "fog": {
+    "range": [200, 1200],
+    "color": "rgba(255, 255, 255, 0.8)",
+    "horizon-blend": 0.2
+  },
+  "layers": [
+    {
+      "id": "sky",
+      "type": "sky",
+      "paint": {
+        "sky-type": "atmosphere",
+        "sky-atmosphere-sun": [0, 0],
+        "sky-atmosphere-sun-intensity": 15,
+        "sky-opacity": 0.5
+      }
+    },
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "beige"
+      }
+    }
+  ]
+}

test/integration/render-tests/fog/horizon-blend/gradient/opacity/style.json

@@ -0,0 +1,36 @@
+{
+  "version": 8,
+  "metadata": {
+    "test": {
+      "height": 100,
+      "width": 512
+    }
+  },
+  "sources": {},
+  "zoom": 16,
+  "pitch": 85,
+  "fog": {
+    "range": [200, 1200],
+    "color": "rgba(255, 255, 255, 1.0)",
+    "horizon-blend": 0.2
+  },
+  "layers": [
+    {
+      "id": "sky",
+      "type": "sky",
+      "paint": {
+        "sky-type": "gradient",
+        "sky-gradient-center": [0, 0],
+        "sky-gradient-radius": 90,
+        "sky-opacity": 0.5
+      }
+    },
+    {
+      "id": "background",
+      "type": "background",
+      "paint": {
+        "background-color": "beige"
+      }
+    }
+  ]
+}