Integrate distance fog support into advanced rendering composer and world background rendering

src/rendering/advanced-rendering.ts

@@ -54,7 +54,8 @@ import {
 import {
   DistanceFogPass,
   resolveDistanceFogParameters,
-  shouldApplyDistanceFog
+  shouldApplyDistanceFog,
+  type DistanceFogSkyColorSource
 } from "./distance-fog-pass";
 import {
   ScreenSpaceGlobalIlluminationPass,
@@ -314,7 +315,8 @@ export function createAdvancedRenderingComposer(
   camera: PerspectiveCamera,
   settings: AdvancedRenderingSettings,
   backgroundScene: Scene | null = null,
-  godRaysLightSource: ScreenSpaceGodRaysLightSource | null = null
+  godRaysLightSource: ScreenSpaceGodRaysLightSource | null = null,
+  distanceFogSkyColorSource: DistanceFogSkyColorSource | null = null
 ): EffectComposer {
   // The scene is always rendered into the composer's offscreen targets first,
   // so those targets need depth for correct visibility even when no effect samples it.
@@ -429,7 +431,13 @@ export function createAdvancedRenderingComposer(
   }
 
   if (distanceFogEnabled) {
-    composer.addPass(new DistanceFogPass(camera, distanceFogParameters));
+    composer.addPass(
+      new DistanceFogPass(
+        camera,
+        distanceFogParameters,
+        distanceFogSkyColorSource
+      )
+    );
   }
 
   if (godRaysEnabled && godRaysLightSource !== null) {

src/rendering/world-background-renderer.ts

@@ -19,6 +19,7 @@ import type {
   WorldBackgroundSettings,
   WorldSunLightSettings
 } from "../document/world-settings";
+import type { DistanceFogSkyColorSource } from "./distance-fog-pass";
 import type { WorldShaderSkyRenderState } from "./world-shader-sky";
 
 const BACKGROUND_SPHERE_RADIUS = 320;
@@ -69,6 +70,25 @@ function resolveGradientColors(background: WorldBackgroundSettings) {
   };
 }
 
+export function resolveWorldBackgroundSkyColorState(
+  background: WorldBackgroundSettings,
+  shaderSkyState: WorldShaderSkyRenderState | null = null
+): DistanceFogSkyColorSource {
+  if (background.mode === "shader" && shaderSkyState !== null) {
+    return {
+      topColorHex: shaderSkyState.sky.topColorHex,
+      horizonColorHex: shaderSkyState.sky.bottomColorHex
+    };
+  }
+
+  const gradientColors = resolveGradientColors(background);
+
+  return {
+    topColorHex: gradientColors.topColorHex,
+    horizonColorHex: gradientColors.bottomColorHex
+  };
+}
+
 export interface WorldBackgroundOverlayState {
   texture: Texture | null;
   opacity: number;