diff --git a/src/runtime-three/runtime-host.ts b/src/runtime-three/runtime-host.ts
index c8bd70a6..019e0978 100644
--- a/src/runtime-three/runtime-host.ts
+++ b/src/runtime-three/runtime-host.ts
@@ -89,7 +89,11 @@ import {
   resolveBoxVolumeRenderPaths,
   type ResolvedBoxVolumeRenderPaths
 } from "../rendering/advanced-rendering";
-import { applyAdvancedRenderingPerspectiveCameraFar } from "../rendering/distance-fog-pass";
+import {
+  applyAdvancedRenderingPerspectiveCameraFar,
+  createDistanceFogSkyColorSource,
+  syncDistanceFogSkyColorSource
+} from "../rendering/distance-fog-pass";
 import {
   createScreenSpaceGodRaysLightSource,
   resolveDominantScreenSpaceGodRaysLightInput,
@@ -106,6 +110,7 @@ import {
 import {
   resolveWorldCelestialBodiesState,
   resolveWorldCelestialHorizonVisibility,
+  resolveWorldBackgroundSkyColorState,
   resolveWorldEnvironmentState,
   WorldBackgroundRenderer
 } from "../rendering/world-background-renderer";
@@ -672,6 +677,8 @@ export class RuntimeHost {
   private readonly sunLight = new DirectionalLight();
   private readonly moonLight = new DirectionalLight();
   private readonly godRaysLightSource = createScreenSpaceGodRaysLightSource();
+  private readonly distanceFogSkyColorSource =
+    createDistanceFogSkyColorSource();
   private readonly localLightGroup = new Group();
   private readonly lightVolumeGroup = new Group();
   private readonly brushGroup = new Group();
@@ -2943,6 +2950,10 @@ export class RuntimeHost {
       celestialBodiesState,
       shaderSkyState
     );
+    syncDistanceFogSkyColorSource(
+      this.distanceFogSkyColorSource,
+      resolveWorldBackgroundSkyColorState(resolvedWorld.background, shaderSkyState)
+    );
     const godRaysLightInput =
       shaderSkyState !== null
         ? resolveDominantScreenSpaceGodRaysLightInput(
@@ -3121,7 +3132,8 @@ export class RuntimeHost {
       this.camera,
       settings,
       this.worldBackgroundRenderer.scene,
-      this.godRaysLightSource
+      this.godRaysLightSource,
+      this.distanceFogSkyColorSource
     );
     this.currentAdvancedRenderingSettings =
       cloneAdvancedRenderingSettings(settings);
diff --git a/src/viewport-three/viewport-host.ts b/src/viewport-three/viewport-host.ts
index 5e99516f..b7b253b9 100644
--- a/src/viewport-three/viewport-host.ts
+++ b/src/viewport-three/viewport-host.ts
@@ -215,7 +215,11 @@ import {
   createAdvancedRenderingComposer,
   resolveBoxVolumeRenderPaths
 } from "../rendering/advanced-rendering";
-import { applyAdvancedRenderingPerspectiveCameraFar } from "../rendering/distance-fog-pass";
+import {
+  applyAdvancedRenderingPerspectiveCameraFar,
+  createDistanceFogSkyColorSource,
+  syncDistanceFogSkyColorSource
+} from "../rendering/distance-fog-pass";
 import {
   createScreenSpaceGodRaysLightSource,
   resolveDominantScreenSpaceGodRaysLightInput,
@@ -236,6 +240,7 @@ import {
 import {
   resolveWorldCelestialBodiesState,
   resolveWorldCelestialHorizonVisibility,
+  resolveWorldBackgroundSkyColorState,
   resolveWorldEnvironmentState,
   WorldBackgroundRenderer
 } from "../rendering/world-background-renderer";
@@ -749,6 +754,8 @@ export class ViewportHost {
   private readonly sunLight = new DirectionalLight();
   private readonly moonLight = new DirectionalLight();
   private readonly godRaysLightSource = createScreenSpaceGodRaysLightSource();
+  private readonly distanceFogSkyColorSource =
+    createDistanceFogSkyColorSource();
   private readonly localLightGroup = new Group();
   private readonly lightVolumeGroup = new Group();
   private readonly brushGroup = new Group();
@@ -2240,6 +2247,10 @@ export class ViewportHost {
         celestialBodiesState,
         shaderSkyState
       );
+      syncDistanceFogSkyColorSource(
+        this.distanceFogSkyColorSource,
+        resolveWorldBackgroundSkyColorState(displayedBackground, shaderSkyState)
+      );
       const godRaysLightInput =
         shaderSkyState !== null
           ? resolveDominantScreenSpaceGodRaysLightInput(
@@ -2360,7 +2371,8 @@ export class ViewportHost {
       this.perspectiveCamera,
       settings,
       this.worldBackgroundRenderer.scene,
-      this.godRaysLightSource
+      this.godRaysLightSource,
+      this.distanceFogSkyColorSource
     );
     this.currentAdvancedRenderingSettings =
       cloneAdvancedRenderingSettings(settings);