From 026dbe66d47687c2f60c770a79a592b070103d9a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Tue, 28 Apr 2026 04:53:37 +0200
Subject: [PATCH] Add controls and logic for advanced rendering distance fog
 settings

---
 src/app/App.tsx | 200 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 200 insertions(+)

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 54f75585..46cbfc8b 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -3184,6 +3184,28 @@ export function App({ store, initialStatusMessage }: AppProps) {
   ] = useState(
     String(editorState.document.world.advancedRendering.distanceFog.strength)
   );
+  const [
+    advancedRenderingDistanceFogSkyBlendDraft,
+    setAdvancedRenderingDistanceFogSkyBlendDraft
+  ] = useState(
+    String(editorState.document.world.advancedRendering.distanceFog.skyBlend)
+  );
+  const [
+    advancedRenderingDistanceFogHorizonStrengthDraft,
+    setAdvancedRenderingDistanceFogHorizonStrengthDraft
+  ] = useState(
+    String(
+      editorState.document.world.advancedRendering.distanceFog.horizonStrength
+    )
+  );
+  const [
+    advancedRenderingDistanceFogHeightFalloffDraft,
+    setAdvancedRenderingDistanceFogHeightFalloffDraft
+  ] = useState(
+    String(
+      editorState.document.world.advancedRendering.distanceFog.heightFalloff
+    )
+  );
   const [
     advancedRenderingDistanceFogRenderDistanceDraft,
     setAdvancedRenderingDistanceFogRenderDistanceDraft
@@ -4270,6 +4292,15 @@ export function App({ store, initialStatusMessage }: AppProps) {
     setAdvancedRenderingDistanceFogStrengthDraft(
       String(advancedRendering.distanceFog.strength)
     );
+    setAdvancedRenderingDistanceFogSkyBlendDraft(
+      String(advancedRendering.distanceFog.skyBlend)
+    );
+    setAdvancedRenderingDistanceFogHorizonStrengthDraft(
+      String(advancedRendering.distanceFog.horizonStrength)
+    );
+    setAdvancedRenderingDistanceFogHeightFalloffDraft(
+      String(advancedRendering.distanceFog.heightFalloff)
+    );
     setAdvancedRenderingDistanceFogRenderDistanceDraft(
       String(advancedRendering.distanceFog.renderDistance)
     );
@@ -12399,6 +12430,59 @@ export function App({ store, initialStatusMessage }: AppProps) {
     }
   };
 
+  const applyAdvancedRenderingDistanceFogSkyBlend = () => {
+    try {
+      applyAdvancedRenderingSettings(
+        "Set distance fog sky blend",
+        "Updated the distance fog sky blend.",
+        (advancedRendering) => {
+          advancedRendering.distanceFog.skyBlend = readUnitIntervalNumberDraft(
+            advancedRenderingDistanceFogSkyBlendDraft,
+            "Distance fog sky blend"
+          );
+        }
+      );
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
+  const applyAdvancedRenderingDistanceFogHorizonStrength = () => {
+    try {
+      applyAdvancedRenderingSettings(
+        "Set distance fog horizon strength",
+        "Updated the distance fog horizon strength.",
+        (advancedRendering) => {
+          advancedRendering.distanceFog.horizonStrength =
+            readUnitIntervalNumberDraft(
+              advancedRenderingDistanceFogHorizonStrengthDraft,
+              "Distance fog horizon strength"
+            );
+        }
+      );
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
+  const applyAdvancedRenderingDistanceFogHeightFalloff = () => {
+    try {
+      applyAdvancedRenderingSettings(
+        "Set distance fog height falloff",
+        "Updated the distance fog height falloff.",
+        (advancedRendering) => {
+          advancedRendering.distanceFog.heightFalloff =
+            readNonNegativeNumberDraft(
+              advancedRenderingDistanceFogHeightFalloffDraft,
+              "Distance fog height falloff"
+            );
+        }
+      );
+    } catch (error) {
+      setStatusMessage(getErrorMessage(error));
+    }
+  };
+
   const applyAdvancedRenderingDistanceFogRenderDistance = () => {
     try {
       applyAdvancedRenderingSettings(
@@ -18472,6 +18556,122 @@ export function App({ store, initialStatusMessage }: AppProps) {
                               />
                             </label>
                           </div>
+                          <div className="vector-inputs vector-inputs--two">
+                            <label className="form-field">
+                              <span className="label">Sky Blend</span>
+                              <input
+                                className="text-input"
+                                type="number"
+                                min="0"
+                                max="1"
+                                step="0.05"
+                                value={advancedRenderingDistanceFogSkyBlendDraft}
+                                onChange={(event) =>
+                                  setAdvancedRenderingDistanceFogSkyBlendDraft(
+                                    event.currentTarget.value
+                                  )
+                                }
+                                onBlur={
+                                  applyAdvancedRenderingDistanceFogSkyBlend
+                                }
+                                onKeyDown={(event) =>
+                                  handleDraftVectorKeyDown(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogSkyBlend
+                                  )
+                                }
+                                onKeyUp={(event) =>
+                                  handleNumberInputKeyUp(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogSkyBlend
+                                  )
+                                }
+                                onPointerUp={(event) =>
+                                  handleNumberInputPointerUp(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogSkyBlend
+                                  )
+                                }
+                              />
+                            </label>
+                            <label className="form-field">
+                              <span className="label">Horizon Haze</span>
+                              <input
+                                className="text-input"
+                                type="number"
+                                min="0"
+                                max="1"
+                                step="0.05"
+                                value={
+                                  advancedRenderingDistanceFogHorizonStrengthDraft
+                                }
+                                onChange={(event) =>
+                                  setAdvancedRenderingDistanceFogHorizonStrengthDraft(
+                                    event.currentTarget.value
+                                  )
+                                }
+                                onBlur={
+                                  applyAdvancedRenderingDistanceFogHorizonStrength
+                                }
+                                onKeyDown={(event) =>
+                                  handleDraftVectorKeyDown(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogHorizonStrength
+                                  )
+                                }
+                                onKeyUp={(event) =>
+                                  handleNumberInputKeyUp(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogHorizonStrength
+                                  )
+                                }
+                                onPointerUp={(event) =>
+                                  handleNumberInputPointerUp(
+                                    event,
+                                    applyAdvancedRenderingDistanceFogHorizonStrength
+                                  )
+                                }
+                              />
+                            </label>
+                          </div>
+                          <label className="form-field">
+                            <span className="label">Height Falloff</span>
+                            <input
+                              className="text-input"
+                              type="number"
+                              min="0"
+                              step="0.001"
+                              value={
+                                advancedRenderingDistanceFogHeightFalloffDraft
+                              }
+                              onChange={(event) =>
+                                setAdvancedRenderingDistanceFogHeightFalloffDraft(
+                                  event.currentTarget.value
+                                )
+                              }
+                              onBlur={
+                                applyAdvancedRenderingDistanceFogHeightFalloff
+                              }
+                              onKeyDown={(event) =>
+                                handleDraftVectorKeyDown(
+                                  event,
+                                  applyAdvancedRenderingDistanceFogHeightFalloff
+                                )
+                              }
+                              onKeyUp={(event) =>
+                                handleNumberInputKeyUp(
+                                  event,
+                                  applyAdvancedRenderingDistanceFogHeightFalloff
+                                )
+                              }
+                              onPointerUp={(event) =>
+                                handleNumberInputPointerUp(
+                                  event,
+                                  applyAdvancedRenderingDistanceFogHeightFalloff
+                                )
+                              }
+                            />
+                          </label>
                           <label className="form-field">
                             <span className="label">Render Distance</span>
                             <input