Add advanced rendering options to App component
This commit is contained in:
288
src/app/App.tsx
288
src/app/App.tsx
@@ -4276,6 +4276,294 @@ export function App({ store, initialStatusMessage }: AppProps) {
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</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>
|
||||||
) : (
|
) : (
|
||||||
<Panel title="Inspector">
|
<Panel title="Inspector">
|
||||||
|
|||||||
Reference in New Issue
Block a user