From f8b912bfce8217aeb54916ecb26a700d0c0a096e Mon Sep 17 00:00:00 2001
From: Victor Giers <mail@victorgiers.com>
Date: Thu, 2 Apr 2026 20:54:20 +0200
Subject: [PATCH] Add advanced rendering options to App component

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

diff --git a/src/app/App.tsx b/src/app/App.tsx
index b900fb2c..05db1b16 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -4276,6 +4276,294 @@ export function App({ store, initialStatusMessage }: AppProps) {
                 </label>
               </div>
             </div>
+
+            <div className="form-section">
+              <div className="label">Advanced Rendering</div>
+              <label className="form-field form-field--toggle">
+                <span className="label">Advanced Rendering</span>
+                <input
+                  type="checkbox"
+                  checked={advancedRendering.enabled}
+                  onChange={(event) => applyAdvancedRenderingEnabled(event.currentTarget.checked)}
+                />
+              </label>
+
+              {!advancedRendering.enabled ? null : (
+                <>
+                  <div className="form-section">
+                    <div className="label">Shadows</div>
+                    <label className="form-field form-field--toggle">
+                      <span className="label">Enabled</span>
+                      <input
+                        type="checkbox"
+                        checked={advancedRendering.shadows.enabled}
+                        onChange={(event) => applyAdvancedRenderingShadowsEnabled(event.currentTarget.checked)}
+                      />
+                    </label>
+                    <div className="vector-inputs vector-inputs--two">
+                      <label className="form-field">
+                        <span className="label">Shadow Map Size</span>
+                        <select
+                          className="select-input"
+                          value={advancedRendering.shadows.mapSize}
+                          onChange={(event) =>
+                            applyAdvancedRenderingShadowMapSize(Number(event.currentTarget.value) as AdvancedRenderingShadowMapSize)
+                          }
+                        >
+                          {ADVANCED_RENDERING_SHADOW_MAP_SIZES.map((size) => (
+                            <option key={size} value={size}>
+                              {size}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className="form-field">
+                        <span className="label">Shadow Type</span>
+                        <select
+                          className="select-input"
+                          value={advancedRendering.shadows.type}
+                          onChange={(event) => applyAdvancedRenderingShadowType(event.currentTarget.value as AdvancedRenderingShadowType)}
+                        >
+                          {ADVANCED_RENDERING_SHADOW_TYPES.map((shadowType) => (
+                            <option key={shadowType} value={shadowType}>
+                              {formatAdvancedRenderingShadowTypeLabel(shadowType)}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                    </div>
+                    <label className="form-field">
+                      <span className="label">Bias</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        step="0.0001"
+                        value={advancedRenderingShadowBiasDraft}
+                        onChange={(event) => setAdvancedRenderingShadowBiasDraft(event.currentTarget.value)}
+                        onBlur={applyAdvancedRenderingShadowBias}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingShadowBias)}
+                        onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingShadowBias)}
+                        onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingShadowBias)}
+                      />
+                    </label>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Ambient Occlusion</div>
+                    <label className="form-field form-field--toggle">
+                      <span className="label">Enabled</span>
+                      <input
+                        type="checkbox"
+                        checked={advancedRendering.ambientOcclusion.enabled}
+                        onChange={(event) => applyAdvancedRenderingAmbientOcclusionEnabled(event.currentTarget.checked)}
+                      />
+                    </label>
+                    <div className="vector-inputs vector-inputs--two">
+                      <label className="form-field">
+                        <span className="label">Intensity</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          value={advancedRenderingAmbientOcclusionIntensityDraft}
+                          onChange={(event) => setAdvancedRenderingAmbientOcclusionIntensityDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingAmbientOcclusionIntensity}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingAmbientOcclusionIntensity)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingAmbientOcclusionIntensity)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingAmbientOcclusionIntensity)}
+                        />
+                      </label>
+                      <label className="form-field">
+                        <span className="label">Radius</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          value={advancedRenderingAmbientOcclusionRadiusDraft}
+                          onChange={(event) => setAdvancedRenderingAmbientOcclusionRadiusDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingAmbientOcclusionRadius}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingAmbientOcclusionRadius)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingAmbientOcclusionRadius)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingAmbientOcclusionRadius)}
+                        />
+                      </label>
+                    </div>
+                    <label className="form-field">
+                      <span className="label">Samples</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min="1"
+                        step="1"
+                        value={advancedRenderingAmbientOcclusionSamplesDraft}
+                        onChange={(event) => setAdvancedRenderingAmbientOcclusionSamplesDraft(event.currentTarget.value)}
+                        onBlur={applyAdvancedRenderingAmbientOcclusionSamples}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingAmbientOcclusionSamples)}
+                        onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingAmbientOcclusionSamples)}
+                        onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingAmbientOcclusionSamples)}
+                      />
+                    </label>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Bloom</div>
+                    <label className="form-field form-field--toggle">
+                      <span className="label">Enabled</span>
+                      <input
+                        type="checkbox"
+                        checked={advancedRendering.bloom.enabled}
+                        onChange={(event) => applyAdvancedRenderingBloomEnabled(event.currentTarget.checked)}
+                      />
+                    </label>
+                    <div className="vector-inputs vector-inputs--two">
+                      <label className="form-field">
+                        <span className="label">Intensity</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          value={advancedRenderingBloomIntensityDraft}
+                          onChange={(event) => setAdvancedRenderingBloomIntensityDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingBloomIntensity}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingBloomIntensity)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingBloomIntensity)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingBloomIntensity)}
+                        />
+                      </label>
+                      <label className="form-field">
+                        <span className="label">Threshold</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0"
+                          step="0.05"
+                          value={advancedRenderingBloomThresholdDraft}
+                          onChange={(event) => setAdvancedRenderingBloomThresholdDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingBloomThreshold}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingBloomThreshold)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingBloomThreshold)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingBloomThreshold)}
+                        />
+                      </label>
+                    </div>
+                    <label className="form-field">
+                      <span className="label">Radius</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min="0"
+                        step="0.05"
+                        value={advancedRenderingBloomRadiusDraft}
+                        onChange={(event) => setAdvancedRenderingBloomRadiusDraft(event.currentTarget.value)}
+                        onBlur={applyAdvancedRenderingBloomRadius}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingBloomRadius)}
+                        onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingBloomRadius)}
+                        onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingBloomRadius)}
+                      />
+                    </label>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Tone Mapping</div>
+                    <div className="vector-inputs vector-inputs--two">
+                      <label className="form-field">
+                        <span className="label">Mode</span>
+                        <select
+                          className="select-input"
+                          value={advancedRendering.toneMapping.mode}
+                          onChange={(event) =>
+                            applyAdvancedRenderingToneMappingMode(event.currentTarget.value as AdvancedRenderingToneMappingMode)
+                          }
+                        >
+                          {ADVANCED_RENDERING_TONE_MAPPING_MODES.map((mode) => (
+                            <option key={mode} value={mode}>
+                              {formatAdvancedRenderingToneMappingLabel(mode)}
+                            </option>
+                          ))}
+                        </select>
+                      </label>
+                      <label className="form-field">
+                        <span className="label">Exposure</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0.001"
+                          step="0.1"
+                          value={advancedRenderingToneMappingExposureDraft}
+                          onChange={(event) => setAdvancedRenderingToneMappingExposureDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingToneMappingExposure}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingToneMappingExposure)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingToneMappingExposure)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingToneMappingExposure)}
+                        />
+                      </label>
+                    </div>
+                  </div>
+
+                  <div className="form-section">
+                    <div className="label">Depth of Field</div>
+                    <label className="form-field form-field--toggle">
+                      <span className="label">Enabled</span>
+                      <input
+                        type="checkbox"
+                        checked={advancedRendering.depthOfField.enabled}
+                        onChange={(event) => applyAdvancedRenderingDepthOfFieldEnabled(event.currentTarget.checked)}
+                      />
+                    </label>
+                    <div className="vector-inputs vector-inputs--two">
+                      <label className="form-field">
+                        <span className="label">Focus Distance</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0"
+                          step="0.1"
+                          value={advancedRenderingDepthOfFieldFocusDistanceDraft}
+                          onChange={(event) => setAdvancedRenderingDepthOfFieldFocusDistanceDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingDepthOfFieldFocusDistance}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingDepthOfFieldFocusDistance)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingDepthOfFieldFocusDistance)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingDepthOfFieldFocusDistance)}
+                        />
+                      </label>
+                      <label className="form-field">
+                        <span className="label">Focal Length</span>
+                        <input
+                          className="text-input"
+                          type="number"
+                          min="0.001"
+                          step="0.001"
+                          value={advancedRenderingDepthOfFieldFocalLengthDraft}
+                          onChange={(event) => setAdvancedRenderingDepthOfFieldFocalLengthDraft(event.currentTarget.value)}
+                          onBlur={applyAdvancedRenderingDepthOfFieldFocalLength}
+                          onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingDepthOfFieldFocalLength)}
+                          onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingDepthOfFieldFocalLength)}
+                          onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingDepthOfFieldFocalLength)}
+                        />
+                      </label>
+                    </div>
+                    <label className="form-field">
+                      <span className="label">Bokeh Scale</span>
+                      <input
+                        className="text-input"
+                        type="number"
+                        min="0.001"
+                        step="0.1"
+                        value={advancedRenderingDepthOfFieldBokehScaleDraft}
+                        onChange={(event) => setAdvancedRenderingDepthOfFieldBokehScaleDraft(event.currentTarget.value)}
+                        onBlur={applyAdvancedRenderingDepthOfFieldBokehScale}
+                        onKeyDown={(event) => handleDraftVectorKeyDown(event, applyAdvancedRenderingDepthOfFieldBokehScale)}
+                        onKeyUp={(event) => handleNumberInputKeyUp(event, applyAdvancedRenderingDepthOfFieldBokehScale)}
+                        onPointerUp={(event) => handleNumberInputPointerUp(event, applyAdvancedRenderingDepthOfFieldBokehScale)}
+                      />
+                    </label>
+                  </div>
+                </>
+              )}
+            </div>
           </Panel>
           ) : (
           <Panel title="Inspector">