From 620e73d3804a45911555afad468c45a96b9eb75a Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Mon, 6 Apr 2026 09:02:11 +0200
Subject: [PATCH] Add advanced rendering options for fog and water paths in
 App.tsx

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

diff --git a/src/app/App.tsx b/src/app/App.tsx
index 5ce0a571..10f585dd 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -5708,6 +5708,45 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 />
               </label>
 
+              <div className="form-section">
+                <div className="label">Volume Rendering Paths</div>
+                <div className="material-summary">
+                  {advancedRendering.enabled
+                    ? "Uses the authored path below."
+                    : "Advanced Rendering is off — both paths force to Performance."}
+                </div>
+                <div className="vector-inputs vector-inputs--two">
+                  <label className="form-field">
+                    <span className="label">Fog</span>
+                    <select
+                      className="select-input"
+                      value={advancedRendering.fogPath}
+                      onChange={(event) => applyAdvancedRenderingFogPath(event.currentTarget.value as BoxVolumeRenderPath)}
+                    >
+                      {BOX_VOLUME_RENDER_PATHS.map((path) => (
+                        <option key={path} value={path}>
+                          {formatBoxVolumeRenderPathLabel(path)}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                  <label className="form-field">
+                    <span className="label">Water</span>
+                    <select
+                      className="select-input"
+                      value={advancedRendering.waterPath}
+                      onChange={(event) => applyAdvancedRenderingWaterPath(event.currentTarget.value as BoxVolumeRenderPath)}
+                    >
+                      {BOX_VOLUME_RENDER_PATHS.map((path) => (
+                        <option key={path} value={path}>
+                          {formatBoxVolumeRenderPathLabel(path)}
+                        </option>
+                      ))}
+                    </select>
+                  </label>
+                </div>
+              </div>
+
               {!advancedRendering.enabled ? null : (
                 <>
                   <div className="form-section">