From ef849bfedcf3be1df899e121cbd9153f55664ab5 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Tue, 24 Jun 2025 10:50:01 -0700 Subject: [PATCH 01/10] Graphics presets and auto selection --- fission/src/Synthesis.tsx | 3 + .../systems/preferences/PreferenceTypes.ts | 2 + .../src/ui/panels/GraphicsSettingsPanel.tsx | 298 +++++++++++++++--- 3 files changed, 266 insertions(+), 37 deletions(-) diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx index 2ffda4fd99..aaef234c5e 100644 --- a/fission/src/Synthesis.tsx +++ b/fission/src/Synthesis.tsx @@ -69,6 +69,7 @@ import WPILibConnectionStatus from "./ui/components/WPILibConnectionStatus.tsx" import AutoTestPanel from "./ui/panels/simulation/AutoTestPanel.tsx" import GraphicsSettings from "./ui/panels/GraphicsSettingsPanel.tsx" import MainMenuModal from "@/modals/MainMenuModal" +import { applyInitialGraphicsSettings } from "./ui/panels/GraphicsSettingsPanel" function Synthesis() { const { openModal, closeModal, getActiveModalElement, registerModal } = useModalManager(initialModals) @@ -96,6 +97,8 @@ function Synthesis() { startSingleplayerCallback={() => { World.InitWorld() + applyInitialGraphicsSettings() + if (!PreferencesSystem.getGlobalPreference("ReportAnalytics") && !import.meta.env.DEV) { setConsentPopupDisable(false) } diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts index 664a7fe413..3ca893b8e5 100644 --- a/fission/src/systems/preferences/PreferenceTypes.ts +++ b/fission/src/systems/preferences/PreferenceTypes.ts @@ -17,6 +17,7 @@ export type GlobalPreference = | "SimAutoReconnect" | "MuteAllSound" | "SFXVolume" + | "GraphicsOptimizationApplied" export const RobotPreferencesKey: string = "Robots" export const FieldPreferencesKey: string = "Fields" @@ -40,6 +41,7 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = { SimAutoReconnect: false, MuteAllSound: false, SFXVolume: 25, + GraphicsOptimizationApplied: false, } export type GraphicsPreferences = { diff --git a/fission/src/ui/panels/GraphicsSettingsPanel.tsx b/fission/src/ui/panels/GraphicsSettingsPanel.tsx index dedda1751a..c141eb506b 100644 --- a/fission/src/ui/panels/GraphicsSettingsPanel.tsx +++ b/fission/src/ui/panels/GraphicsSettingsPanel.tsx @@ -1,13 +1,13 @@ import Panel, { PanelPropsImpl } from "../components/Panel" -import { SectionDivider, SectionLabel, Spacer, SynthesisIcons } from "../components/StyledComponents" +import { SectionDivider, SectionLabel, SynthesisIcons } from "../components/StyledComponents" import Checkbox from "@/components/Checkbox" import PreferencesSystem from "@/systems/preferences/PreferencesSystem" import { LabelSize } from "../components/Label" import World from "@/systems/World" import Slider from "@/ui/components/Slider" import { useState } from "react" -import Button from "../components/Button" -import { Box } from "@mui/material" +import Dropdown from "@/ui/components/Dropdown" +import { Global_AddToast } from "@/ui/components/GlobalUIControls" const MIN_LIGHT_INTENSITY = 1 const MAX_LIGHT_INTENSITY = 10 @@ -20,6 +20,127 @@ const MAX_CASCADES = 8 const MIN_SHADOW_MAP_SIZE = 1024 +type GraphicsPreset = "Fast" | "Balanced" | "Fancy" + +const GRAPHICS_PRESETS: Record< + GraphicsPreset, + { + lightIntensity: number + fancyShadows: boolean + maxFar: number + cascades: number + shadowMapSize: number + antiAliasing: boolean + } +> = { + Fast: { + lightIntensity: 3, + fancyShadows: false, + maxFar: 20, + cascades: 3, + shadowMapSize: 0, + antiAliasing: false, + }, + Balanced: { + lightIntensity: 5, + fancyShadows: true, + maxFar: 30, + cascades: 4, + shadowMapSize: 2048, + antiAliasing: false, + }, + Fancy: { + lightIntensity: 8, + fancyShadows: true, + maxFar: 40, + cascades: 6, + shadowMapSize: 8192, + antiAliasing: true, + }, +} + +const isMobileDevice = (): boolean => { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) +} + +const isLowEndDevice = (): boolean => { + if (isMobileDevice()) return true + + const memory = + typeof navigator !== "undefined" && "deviceMemory" in navigator + ? (navigator as Navigator & { deviceMemory?: number }).deviceMemory + : undefined + if (memory !== undefined && memory <= 4) return true // 4GB or less RAM + + const cores = navigator.hardwareConcurrency + if (cores && cores <= 2) return true // 2 cores or less + + const userAgent = navigator.userAgent.toLowerCase() + if (userAgent.includes("android") && (userAgent.includes("lite") || userAgent.includes("go"))) return true + + return false +} + +const shouldUseFastModeByDefault = (): boolean => { + return isLowEndDevice() +} + +const applyInitialGraphicsSettings = (): void => { + // Check if graphics optimization has already been applied + const optimizationApplied = PreferencesSystem.getGlobalPreference("GraphicsOptimizationApplied") + + // If optimization hasn't been applied yet and device should use fast mode, apply fast settings + if (!optimizationApplied && shouldUseFastModeByDefault()) { + const fastSettings = GRAPHICS_PRESETS.Fast + PreferencesSystem.getGraphicsPreferences().lightIntensity = fastSettings.lightIntensity + PreferencesSystem.getGraphicsPreferences().fancyShadows = fastSettings.fancyShadows + PreferencesSystem.getGraphicsPreferences().maxFar = fastSettings.maxFar + PreferencesSystem.getGraphicsPreferences().cascades = fastSettings.cascades + PreferencesSystem.getGraphicsPreferences().shadowMapSize = fastSettings.shadowMapSize + PreferencesSystem.getGraphicsPreferences().antiAliasing = fastSettings.antiAliasing + + // Mark that optimization has been applied + PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) + PreferencesSystem.savePreferences() + + // Show a toast to let user know we optimized for their device + Global_AddToast?.( + "info", + "Graphics Optimized", + "We've set your graphics to 'Fast' mode for optimal performance on your device. You can change this in Graphics Settings." + ) + } else if (!optimizationApplied) { + // Mark that optimization check has been completed (even if no changes were made) + PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) + PreferencesSystem.savePreferences() + } +} + +export { isMobileDevice, isLowEndDevice, shouldUseFastModeByDefault, applyInitialGraphicsSettings } + +const detectCurrentPreset = ( + lightIntensity: number, + fancyShadows: boolean, + maxFar: number, + cascades: number, + shadowMapSize: number, + antiAliasing: boolean +): string => { + for (const [presetName, presetSettings] of Object.entries(GRAPHICS_PRESETS)) { + if ( + presetSettings.lightIntensity === lightIntensity && + presetSettings.fancyShadows === fancyShadows && + presetSettings.maxFar === maxFar && + presetSettings.cascades === cascades && + presetSettings.shadowMapSize === shadowMapSize && + presetSettings.antiAliasing === antiAliasing + ) { + return presetName + } + } + return "Custom" +} + const GraphicsSettings: React.FC = ({ panelId, openLocation, sidePadding }) => { const [reload, setReload] = useState(false) @@ -32,6 +153,84 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid const [shadowMapSize, setShadowMapSize] = useState(PreferencesSystem.getGraphicsPreferences().shadowMapSize) const [antiAliasing, setAntiAliasing] = useState(PreferencesSystem.getGraphicsPreferences().antiAliasing) + const initialPreset = detectCurrentPreset( + PreferencesSystem.getGraphicsPreferences().lightIntensity, + PreferencesSystem.getGraphicsPreferences().fancyShadows, + PreferencesSystem.getGraphicsPreferences().maxFar, + PreferencesSystem.getGraphicsPreferences().cascades, + PreferencesSystem.getGraphicsPreferences().shadowMapSize, + PreferencesSystem.getGraphicsPreferences().antiAliasing + ) + + const [selectedPreset, setSelectedPreset] = useState(initialPreset) + const [dropdownKey, setDropdownKey] = useState(0) + + const updatePresetFromSettings = ( + newLightIntensity: number, + newFancyShadows: boolean, + newMaxFar: number, + newCascades: number, + newShadowMapSize: number, + newAntiAliasing: boolean + ) => { + const detectedPreset = detectCurrentPreset( + newLightIntensity, + newFancyShadows, + newMaxFar, + newCascades, + newShadowMapSize, + newAntiAliasing + ) + if (detectedPreset !== selectedPreset) { + setSelectedPreset(detectedPreset) + setDropdownKey(prev => prev + 1) + } + } + + const applyPreset = (preset: GraphicsPreset) => { + const settings = GRAPHICS_PRESETS[preset] + const previousAntiAliasing = antiAliasing + + setLightIntensity(settings.lightIntensity) + setFancyShadows(settings.fancyShadows) + setMaxFar(settings.maxFar) + setCascades(settings.cascades) + setShadowMapSize(settings.shadowMapSize) + setAntiAliasing(settings.antiAliasing) + setSelectedPreset(preset) + setDropdownKey(prev => prev + 1) + + World.SceneRenderer.setLightIntensity(settings.lightIntensity) + World.SceneRenderer.ChangeLighting(settings.fancyShadows) + + if (settings.fancyShadows) { + World.SceneRenderer.changeCSMSettings({ + lightIntensity: settings.lightIntensity, + fancyShadows: settings.fancyShadows, + maxFar: settings.maxFar, + cascades: settings.cascades, + shadowMapSize: settings.shadowMapSize, + antiAliasing: settings.antiAliasing, + }) + } + + if (previousAntiAliasing !== settings.antiAliasing) { + setReload(true) + Global_AddToast?.( + "info", + "Refresh Required", + "Anti-aliasing has been changed. Please refresh the page to see the effects." + ) + } + } + + const handleAntiAliasingChange = (checked: boolean) => { + setAntiAliasing(checked) + setReload(true) + updatePresetFromSettings(lightIntensity, fancyShadows, maxFar, cascades, shadowMapSize, checked) + Global_AddToast?.("info", "Refresh Required", "Please refresh the page to see the anti-aliasing changes.") + } + return ( = ({ panelId, openLocation, sid }} >
+
+ + Graphics Presets + +
+ { + if (value === "Fast" || value === "Balanced" || value === "Fancy") { + applyPreset(value as GraphicsPreset) + } else if (value === "Custom") { + setSelectedPreset("Custom") + } + }} + className="mb-2" + /> + = ({ panelId, openLocation, sid label="Light Intensity" format={{ maximumFractionDigits: 2 }} onChange={(_, value: number | number[]) => { - setLightIntensity(value as number) - World.SceneRenderer.setLightIntensity(value as number) + const newValue = value as number + setLightIntensity(newValue) + World.SceneRenderer.setLightIntensity(newValue) + updatePresetFromSettings(newValue, fancyShadows, maxFar, cascades, shadowMapSize, antiAliasing) }} step={0.25} /> @@ -74,6 +295,7 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid onClick={checked => { setFancyShadows(checked) World.SceneRenderer.ChangeLighting(checked) + updatePresetFromSettings(lightIntensity, checked, maxFar, cascades, shadowMapSize, antiAliasing) }} tooltipText="Cascading shadows implementation" /> @@ -85,9 +307,10 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid value={maxFar} label="Max Far" onChange={(_, value: number | number[]) => { - setMaxFar(value as number) + const newValue = value as number + setMaxFar(newValue) World.SceneRenderer.changeCSMSettings({ - maxFar: value as number, + maxFar: newValue, lightIntensity: lightIntensity, fancyShadows: fancyShadows, @@ -95,6 +318,14 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid shadowMapSize: shadowMapSize, antiAliasing: antiAliasing, }) + updatePresetFromSettings( + lightIntensity, + fancyShadows, + newValue, + cascades, + shadowMapSize, + antiAliasing + ) }} step={1} /> @@ -104,9 +335,10 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid value={cascades} label="Cascade Count" onChange={(_, value: number | number[]) => { - setCascades(value as number) + const newValue = value as number + setCascades(newValue) World.SceneRenderer.changeCSMSettings({ - cascades: value as number, + cascades: newValue, maxFar: maxFar, lightIntensity: lightIntensity, @@ -114,6 +346,14 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid shadowMapSize: shadowMapSize, antiAliasing: antiAliasing, }) + updatePresetFromSettings( + lightIntensity, + fancyShadows, + maxFar, + newValue, + shadowMapSize, + antiAliasing + ) }} step={1} /> @@ -123,39 +363,27 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid value={shadowMapSize} label="Shadow Map Size" onChange={(_, value: number | number[]) => { - setShadowMapSize(value as number) + const newValue = value as number + setShadowMapSize(newValue) World.SceneRenderer.changeCSMSettings({ - shadowMapSize: value as number, + shadowMapSize: newValue, maxFar: maxFar, lightIntensity: lightIntensity, fancyShadows: fancyShadows, cascades: cascades, antiAliasing: antiAliasing, }) + updatePresetFromSettings( + lightIntensity, + fancyShadows, + maxFar, + cascades, + newValue, + antiAliasing + ) }} step={1024} /> - {Spacer(10)} - -
From 8a7236b87376d261cad4ced201133cf31e2111c9 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Thu, 17 Jul 2025 10:06:06 -0700 Subject: [PATCH 02/10] fix: postc --- fission/src/systems/preferences/PreferenceTypes.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts index ce538405ac..5857613225 100644 --- a/fission/src/systems/preferences/PreferenceTypes.ts +++ b/fission/src/systems/preferences/PreferenceTypes.ts @@ -24,6 +24,7 @@ export type GlobalPreferences = { MuteAllSound: boolean SFXVolume: number ShowCenterOfMassIndicators: boolean + GraphicsOptimizationApplied: boolean } export type GlobalPreference = keyof GlobalPreferences @@ -64,6 +65,7 @@ export const defaultGlobalPreferences: GlobalPreferences = { MuteAllSound: false, SFXVolume: 25, ShowCenterOfMassIndicators: false, + GraphicsOptimizationApplied: false, } export type GraphicsPreferences = { From 06370ad34e2d712804725c45bc1e8eba75dd7db7 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Tue, 22 Jul 2025 09:33:24 -0700 Subject: [PATCH 03/10] cleanup with helper --- fission/src/Synthesis.tsx | 2 +- fission/src/ui/helpers/GraphicsSettings.ts | 98 ++++++++++++++++++ .../src/ui/panels/GraphicsSettingsPanel.tsx | 99 +------------------ 3 files changed, 100 insertions(+), 99 deletions(-) create mode 100644 fission/src/ui/helpers/GraphicsSettings.ts diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx index a38b96b7cf..bef70f74cc 100644 --- a/fission/src/Synthesis.tsx +++ b/fission/src/Synthesis.tsx @@ -14,7 +14,7 @@ import { TooltipType, useTooltipManager, } from "@/ui/TooltipContext" -import { applyInitialGraphicsSettings } from "@/ui/panels/GraphicsSettingsPanel" +import { applyInitialGraphicsSettings } from "@/ui/helpers/GraphicsSettings" import MainHUD from "@/components/MainHUD" import DownloadAssetsModal from "@/modals/DownloadAssetsModal" import ExitSynthesisModal from "@/modals/ExitSynthesisModal" diff --git a/fission/src/ui/helpers/GraphicsSettings.ts b/fission/src/ui/helpers/GraphicsSettings.ts new file mode 100644 index 0000000000..4a87a72d2e --- /dev/null +++ b/fission/src/ui/helpers/GraphicsSettings.ts @@ -0,0 +1,98 @@ +import PreferencesSystem from "@/systems/preferences/PreferencesSystem" +import { globalAddToast } from "@/ui/components/GlobalUIControls" + +export type GraphicsPreset = "Fast" | "Balanced" | "Fancy" + +export const GRAPHICS_PRESETS: Record< + GraphicsPreset, + { + lightIntensity: number + fancyShadows: boolean + maxFar: number + cascades: number + shadowMapSize: number + antiAliasing: boolean + } +> = { + Fast: { + lightIntensity: 3, + fancyShadows: false, + maxFar: 20, + cascades: 3, + shadowMapSize: 0, + antiAliasing: false, + }, + Balanced: { + lightIntensity: 5, + fancyShadows: true, + maxFar: 30, + cascades: 4, + shadowMapSize: 2048, + antiAliasing: false, + }, + Fancy: { + lightIntensity: 8, + fancyShadows: true, + maxFar: 40, + cascades: 6, + shadowMapSize: 8192, + antiAliasing: true, + }, +} + +export const isMobileDevice = (): boolean => { + return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) +} + +export const isLowEndDevice = (): boolean => { + if (isMobileDevice()) return true + + const memory = + typeof navigator !== "undefined" && "deviceMemory" in navigator + ? (navigator as Navigator & { deviceMemory?: number }).deviceMemory + : undefined + if (memory !== undefined && memory <= 4) return true // 4GB or less RAM + + const cores = navigator.hardwareConcurrency + if (cores && cores <= 2) return true // 2 cores or less + + const userAgent = navigator.userAgent.toLowerCase() + if (userAgent.includes("android") && (userAgent.includes("lite") || userAgent.includes("go"))) return true + + return false +} + +export const shouldUseFastModeByDefault = (): boolean => { + return isLowEndDevice() +} + +export const applyInitialGraphicsSettings = (): void => { + // Check if graphics optimization has already been applied + const optimizationApplied = PreferencesSystem.getGlobalPreference("GraphicsOptimizationApplied") + + // If optimization hasn't been applied yet and device should use fast mode, apply fast settings + if (!optimizationApplied && shouldUseFastModeByDefault()) { + const fastSettings = GRAPHICS_PRESETS.Fast + PreferencesSystem.getGraphicsPreferences().lightIntensity = fastSettings.lightIntensity + PreferencesSystem.getGraphicsPreferences().fancyShadows = fastSettings.fancyShadows + PreferencesSystem.getGraphicsPreferences().maxFar = fastSettings.maxFar + PreferencesSystem.getGraphicsPreferences().cascades = fastSettings.cascades + PreferencesSystem.getGraphicsPreferences().shadowMapSize = fastSettings.shadowMapSize + PreferencesSystem.getGraphicsPreferences().antiAliasing = fastSettings.antiAliasing + + // Mark that optimization has been applied + PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) + PreferencesSystem.savePreferences() + + // Show a toast to let user know we optimized for their device + globalAddToast?.( + "info", + "Graphics Optimized", + "We've set your graphics to 'Fast' mode for optimal performance on your device. You can change this in Graphics Settings." + ) + } else if (!optimizationApplied) { + // Mark that optimization check has been completed (even if no changes were made) + PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) + PreferencesSystem.savePreferences() + } +} diff --git a/fission/src/ui/panels/GraphicsSettingsPanel.tsx b/fission/src/ui/panels/GraphicsSettingsPanel.tsx index 39195b6cf3..92815a0fa0 100644 --- a/fission/src/ui/panels/GraphicsSettingsPanel.tsx +++ b/fission/src/ui/panels/GraphicsSettingsPanel.tsx @@ -8,6 +8,7 @@ import Slider from "@/ui/components/Slider" import { useState } from "react" import Dropdown from "@/ui/components/Dropdown" import { globalAddToast } from "@/ui/components/GlobalUIControls" +import { GRAPHICS_PRESETS, GraphicsPreset } from "../helpers/GraphicsSettings" const MIN_LIGHT_INTENSITY = 1 const MAX_LIGHT_INTENSITY = 10 @@ -20,104 +21,6 @@ const MAX_CASCADES = 8 const MIN_SHADOW_MAP_SIZE = 1024 -type GraphicsPreset = "Fast" | "Balanced" | "Fancy" - -const GRAPHICS_PRESETS: Record< - GraphicsPreset, - { - lightIntensity: number - fancyShadows: boolean - maxFar: number - cascades: number - shadowMapSize: number - antiAliasing: boolean - } -> = { - Fast: { - lightIntensity: 3, - fancyShadows: false, - maxFar: 20, - cascades: 3, - shadowMapSize: 0, - antiAliasing: false, - }, - Balanced: { - lightIntensity: 5, - fancyShadows: true, - maxFar: 30, - cascades: 4, - shadowMapSize: 2048, - antiAliasing: false, - }, - Fancy: { - lightIntensity: 8, - fancyShadows: true, - maxFar: 40, - cascades: 6, - shadowMapSize: 8192, - antiAliasing: true, - }, -} - -const isMobileDevice = (): boolean => { - return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) -} - -const isLowEndDevice = (): boolean => { - if (isMobileDevice()) return true - - const memory = - typeof navigator !== "undefined" && "deviceMemory" in navigator - ? (navigator as Navigator & { deviceMemory?: number }).deviceMemory - : undefined - if (memory !== undefined && memory <= 4) return true // 4GB or less RAM - - const cores = navigator.hardwareConcurrency - if (cores && cores <= 2) return true // 2 cores or less - - const userAgent = navigator.userAgent.toLowerCase() - if (userAgent.includes("android") && (userAgent.includes("lite") || userAgent.includes("go"))) return true - - return false -} - -const shouldUseFastModeByDefault = (): boolean => { - return isLowEndDevice() -} - -const applyInitialGraphicsSettings = (): void => { - // Check if graphics optimization has already been applied - const optimizationApplied = PreferencesSystem.getGlobalPreference("GraphicsOptimizationApplied") - - // If optimization hasn't been applied yet and device should use fast mode, apply fast settings - if (!optimizationApplied && shouldUseFastModeByDefault()) { - const fastSettings = GRAPHICS_PRESETS.Fast - PreferencesSystem.getGraphicsPreferences().lightIntensity = fastSettings.lightIntensity - PreferencesSystem.getGraphicsPreferences().fancyShadows = fastSettings.fancyShadows - PreferencesSystem.getGraphicsPreferences().maxFar = fastSettings.maxFar - PreferencesSystem.getGraphicsPreferences().cascades = fastSettings.cascades - PreferencesSystem.getGraphicsPreferences().shadowMapSize = fastSettings.shadowMapSize - PreferencesSystem.getGraphicsPreferences().antiAliasing = fastSettings.antiAliasing - - // Mark that optimization has been applied - PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) - PreferencesSystem.savePreferences() - - // Show a toast to let user know we optimized for their device - globalAddToast?.( - "info", - "Graphics Optimized", - "We've set your graphics to 'Fast' mode for optimal performance on your device. You can change this in Graphics Settings." - ) - } else if (!optimizationApplied) { - // Mark that optimization check has been completed (even if no changes were made) - PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) - PreferencesSystem.savePreferences() - } -} - -export { isMobileDevice, isLowEndDevice, shouldUseFastModeByDefault, applyInitialGraphicsSettings } - const detectCurrentPreset = ( lightIntensity: number, fancyShadows: boolean, From 0951bc99fd4e9b55c176ff1ea878c27c3a9a0804 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Tue, 22 Jul 2025 12:49:53 -0700 Subject: [PATCH 04/10] auto-optimize button --- fission/src/ui/helpers/GraphicsSettings.ts | 54 ++++++++++++------- .../src/ui/panels/GraphicsSettingsPanel.tsx | 11 +++- 2 files changed, 45 insertions(+), 20 deletions(-) diff --git a/fission/src/ui/helpers/GraphicsSettings.ts b/fission/src/ui/helpers/GraphicsSettings.ts index 4a87a72d2e..fb81e57bd6 100644 --- a/fission/src/ui/helpers/GraphicsSettings.ts +++ b/fission/src/ui/helpers/GraphicsSettings.ts @@ -66,33 +66,49 @@ export const shouldUseFastModeByDefault = (): boolean => { return isLowEndDevice() } +export const autoOptimizeGraphics = (toastType: "long" | "short" | "none" = "none"): GraphicsPreset => { + if (shouldUseFastModeByDefault()) { + if (toastType === "long") { + globalAddToast?.( + "info", + "Graphics Optimized", + "We've set your graphics to 'Fast' mode for optimal performance on your device. You can change this in Graphics Settings." + ) + } else if (toastType === "short") { + globalAddToast?.("info", "Success", "Auto-optimized graphics to 'Fast'.") + } + return "Fast" + } else { + if (toastType === "long") { + globalAddToast?.( + "info", + "Graphics Optimized", + "We've set your graphics to 'Balanced' mode for optimal performance on your device. You can change this in Graphics Settings." + ) + } else if (toastType === "short") { + globalAddToast?.("info", "Success", "Auto-optimized graphics to 'Balanced'.") + } + return "Balanced" + } +} + export const applyInitialGraphicsSettings = (): void => { // Check if graphics optimization has already been applied const optimizationApplied = PreferencesSystem.getGlobalPreference("GraphicsOptimizationApplied") // If optimization hasn't been applied yet and device should use fast mode, apply fast settings - if (!optimizationApplied && shouldUseFastModeByDefault()) { - const fastSettings = GRAPHICS_PRESETS.Fast - PreferencesSystem.getGraphicsPreferences().lightIntensity = fastSettings.lightIntensity - PreferencesSystem.getGraphicsPreferences().fancyShadows = fastSettings.fancyShadows - PreferencesSystem.getGraphicsPreferences().maxFar = fastSettings.maxFar - PreferencesSystem.getGraphicsPreferences().cascades = fastSettings.cascades - PreferencesSystem.getGraphicsPreferences().shadowMapSize = fastSettings.shadowMapSize - PreferencesSystem.getGraphicsPreferences().antiAliasing = fastSettings.antiAliasing + if (!optimizationApplied) { + const presetToApply = autoOptimizeGraphics("long") + const settings = GRAPHICS_PRESETS[presetToApply] + PreferencesSystem.getGraphicsPreferences().lightIntensity = settings.lightIntensity + PreferencesSystem.getGraphicsPreferences().fancyShadows = settings.fancyShadows + PreferencesSystem.getGraphicsPreferences().maxFar = settings.maxFar + PreferencesSystem.getGraphicsPreferences().cascades = settings.cascades + PreferencesSystem.getGraphicsPreferences().shadowMapSize = settings.shadowMapSize + PreferencesSystem.getGraphicsPreferences().antiAliasing = settings.antiAliasing // Mark that optimization has been applied PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) PreferencesSystem.savePreferences() - - // Show a toast to let user know we optimized for their device - globalAddToast?.( - "info", - "Graphics Optimized", - "We've set your graphics to 'Fast' mode for optimal performance on your device. You can change this in Graphics Settings." - ) - } else if (!optimizationApplied) { - // Mark that optimization check has been completed (even if no changes were made) - PreferencesSystem.setGlobalPreference("GraphicsOptimizationApplied", true) - PreferencesSystem.savePreferences() } } diff --git a/fission/src/ui/panels/GraphicsSettingsPanel.tsx b/fission/src/ui/panels/GraphicsSettingsPanel.tsx index 92815a0fa0..9e7d79a198 100644 --- a/fission/src/ui/panels/GraphicsSettingsPanel.tsx +++ b/fission/src/ui/panels/GraphicsSettingsPanel.tsx @@ -8,7 +8,8 @@ import Slider from "@/ui/components/Slider" import { useState } from "react" import Dropdown from "@/ui/components/Dropdown" import { globalAddToast } from "@/ui/components/GlobalUIControls" -import { GRAPHICS_PRESETS, GraphicsPreset } from "../helpers/GraphicsSettings" +import Button from "../components/Button" +import { autoOptimizeGraphics, GRAPHICS_PRESETS, GraphicsPreset } from "../helpers/GraphicsSettings" const MIN_LIGHT_INTENSITY = 1 const MAX_LIGHT_INTENSITY = 10 @@ -177,6 +178,14 @@ const GraphicsSettings: React.FC = ({ panelId, openLocation, sid }} className="mb-2" /> + - - + return ( + + + + + - {/* Disabled until these settings are implemented */} - {/* {Spacer(5)} + {/* Disabled until these settings are implemented */} + {/* {Spacer(5)} > = ({ modal }) => { onChange={(_, value) => setYawSensitivity(value as number)} tooltip="Moving the camera left and right." />*/} - {Spacer(5)} - - writePreference("SceneRotationSensitivity", value)} - step={0.1} - tooltip="Controls how fast the scene rotates when dragging with the mouse." - /> - {Spacer(5)} - - writePreference("ViewCubeRotationSensitivity", value) - } - step={0.06} - tooltip="Controls how fast the view changes when dragging on the view cube." - /> - { - writePreference("ShowViewCube", checked); - }} - tooltip="Show the view cube in the top-right corner for quick camera orientation changes." - /> - {Spacer(10)} - - - writePreference("ReportAnalytics", checked)} - tooltip="Record user data such as what robots are spawned and how they are configured. No personal data will be collected." - /> - writePreference("SubsystemGravity", checked)} - tooltip="Allows you to set a target torque or force for subsystems and joints. If not properly configured, joints may not be able to resist gravity or may not behave as intended." - /> - writePreference("RenderScoringZones", checked)} - tooltip="If disabled, scoring zones will not be visible but will continue to function the same." - /> - - writePreference("RenderProtectedZones", checked) - } - tooltip="If disabled, protected zones will not be visible but will continue to function the same." - /> - writePreference("RenderSceneTags", checked)} - tooltip="Name tags above robot." - /> - { - writePreference("RenderScoreboard", checked); - if (checked) { - // TODO: figure out scoreboard - I think it should be its own component and not a panel - // openPanel("scoreboard"); - } - }} - /> - { - writePreference("ShowCenterOfMassIndicators", checked); - }} - tooltip="Show a purple dot to indicate the center of mass of each robot in frame" - /> - writePreference("MuteAllSound", checked)} - /> - writePreference("SFXVolume", value)} - tooltip="Volume of sound effects (%)." - /> - {Spacer(8)} - - - ); -}; + {Spacer(5)} + + writePreference("SceneRotationSensitivity", value)} + step={0.1} + tooltip="Controls how fast the scene rotates when dragging with the mouse." + /> + {Spacer(5)} + writePreference("ViewCubeRotationSensitivity", value)} + step={0.06} + tooltip="Controls how fast the view changes when dragging on the view cube." + /> + { + writePreference("ShowViewCube", checked) + }} + tooltip="Show the view cube in the top-right corner for quick camera orientation changes." + /> + {Spacer(10)} + + + writePreference("ReportAnalytics", checked)} + tooltip="Record user data such as what robots are spawned and how they are configured. No personal data will be collected." + /> + writePreference("SubsystemGravity", checked)} + tooltip="Allows you to set a target torque or force for subsystems and joints. If not properly configured, joints may not be able to resist gravity or may not behave as intended." + /> + writePreference("RenderScoringZones", checked)} + tooltip="If disabled, scoring zones will not be visible but will continue to function the same." + /> + writePreference("RenderProtectedZones", checked)} + tooltip="If disabled, protected zones will not be visible but will continue to function the same." + /> + writePreference("RenderSceneTags", checked)} + tooltip="Name tags above robot." + /> + { + writePreference("RenderScoreboard", checked) + if (checked) { + // TODO: figure out scoreboard - I think it should be its own component and not a panel + // openPanel("scoreboard"); + } + }} + /> + { + writePreference("ShowCenterOfMassIndicators", checked) + }} + tooltip="Show a purple dot to indicate the center of mass of each robot in frame" + /> + writePreference("MuteAllSound", checked)} + /> + writePreference("SFXVolume", value)} + tooltip="Volume of sound effects (%)." + /> + {Spacer(8)} + + + ) +} -export default SettingsModal; +export default SettingsModal From 9ec68b7da54ed3455d28d9585c258eb4594d0113 Mon Sep 17 00:00:00 2001 From: Aries Powvalla Date: Tue, 5 Aug 2025 14:11:05 -0700 Subject: [PATCH 10/10] chore: format ig? --- .../src/ui/panels/GraphicsSettingsPanel.tsx | 686 ++++++++---------- 1 file changed, 311 insertions(+), 375 deletions(-) diff --git a/fission/src/ui/panels/GraphicsSettingsPanel.tsx b/fission/src/ui/panels/GraphicsSettingsPanel.tsx index f1700ca9cd..6be47cd955 100644 --- a/fission/src/ui/panels/GraphicsSettingsPanel.tsx +++ b/fission/src/ui/panels/GraphicsSettingsPanel.tsx @@ -1,401 +1,337 @@ -import { - Box, - Button, - FormControl, - InputLabel, - MenuItem, - Select, - Stack, -} from "@mui/material"; -import type React from "react"; -import { useEffect, useState } from "react"; -import PreferencesSystem from "@/systems/preferences/PreferencesSystem"; -import World from "@/systems/World"; -import Checkbox from "../components/Checkbox"; -import Label from "../components/Label"; -import type { PanelImplProps } from "../components/Panel"; -import StatefulSlider from "../components/StatefulSlider"; -import { - autoOptimizeGraphics, - GRAPHICS_PRESETS, - type GraphicsPreset, -} from "../helpers/GraphicsSettings"; -import { useUIContext } from "../helpers/UIProviderHelpers"; +import { Box, Button, FormControl, InputLabel, MenuItem, Select, Stack } from "@mui/material" +import type React from "react" +import { useEffect, useState } from "react" +import PreferencesSystem from "@/systems/preferences/PreferencesSystem" +import World from "@/systems/World" +import Checkbox from "../components/Checkbox" +import Label from "../components/Label" +import type { PanelImplProps } from "../components/Panel" +import StatefulSlider from "../components/StatefulSlider" +import { autoOptimizeGraphics, GRAPHICS_PRESETS, type GraphicsPreset } from "../helpers/GraphicsSettings" +import { useUIContext } from "../helpers/UIProviderHelpers" -const MIN_LIGHT_INTENSITY = 1; -const MAX_LIGHT_INTENSITY = 10; +const MIN_LIGHT_INTENSITY = 1 +const MAX_LIGHT_INTENSITY = 10 -const MIN_MAX_FAR = 10; -const MAX_MAX_FAR = 40; +const MIN_MAX_FAR = 10 +const MAX_MAX_FAR = 40 -const MIN_CASCADES = 3; -const MAX_CASCADES = 8; +const MIN_CASCADES = 3 +const MAX_CASCADES = 8 -const MIN_SHADOW_MAP_SIZE = 1024; +const MIN_SHADOW_MAP_SIZE = 1024 const detectCurrentPreset = ( - lightIntensity: number, - fancyShadows: boolean, - maxFar: number, - cascades: number, - shadowMapSize: number, - antiAliasing: boolean, + lightIntensity: number, + fancyShadows: boolean, + maxFar: number, + cascades: number, + shadowMapSize: number, + antiAliasing: boolean ): string => { - for (const [presetName, presetSettings] of Object.entries(GRAPHICS_PRESETS)) { - if ( - presetSettings.lightIntensity === lightIntensity && - presetSettings.fancyShadows === fancyShadows && - presetSettings.maxFar === maxFar && - presetSettings.cascades === cascades && - presetSettings.shadowMapSize === shadowMapSize && - presetSettings.antiAliasing === antiAliasing - ) { - return presetName; - } - } - return "Custom"; -}; + for (const [presetName, presetSettings] of Object.entries(GRAPHICS_PRESETS)) { + if ( + presetSettings.lightIntensity === lightIntensity && + presetSettings.fancyShadows === fancyShadows && + presetSettings.maxFar === maxFar && + presetSettings.cascades === cascades && + presetSettings.shadowMapSize === shadowMapSize && + presetSettings.antiAliasing === antiAliasing + ) { + return presetName + } + } + return "Custom" +} -const GraphicsSettingsPanel: React.FC> = ({ - panel, -}) => { - const { configureScreen } = useUIContext(); - const [reload, setReload] = useState(false); - const [lightIntensity, setLightIntensity] = useState( - PreferencesSystem.getGraphicsPreferences().lightIntensity, - ); - const [fancyShadows, setFancyShadows] = useState( - PreferencesSystem.getGraphicsPreferences().fancyShadows, - ); - const [maxFar, setMaxFar] = useState( - PreferencesSystem.getGraphicsPreferences().maxFar, - ); - const [cascades, setCascades] = useState( - PreferencesSystem.getGraphicsPreferences().cascades, - ); - const [shadowMapSize, setShadowMapSize] = useState( - PreferencesSystem.getGraphicsPreferences().shadowMapSize, - ); - const [antiAliasing, setAntiAliasing] = useState( - PreferencesSystem.getGraphicsPreferences().antiAliasing, - ); +const GraphicsSettingsPanel: React.FC> = ({ panel }) => { + const { configureScreen } = useUIContext() + const [reload, setReload] = useState(false) + const [lightIntensity, setLightIntensity] = useState( + PreferencesSystem.getGraphicsPreferences().lightIntensity + ) + const [fancyShadows, setFancyShadows] = useState(PreferencesSystem.getGraphicsPreferences().fancyShadows) + const [maxFar, setMaxFar] = useState(PreferencesSystem.getGraphicsPreferences().maxFar) + const [cascades, setCascades] = useState(PreferencesSystem.getGraphicsPreferences().cascades) + const [shadowMapSize, setShadowMapSize] = useState(PreferencesSystem.getGraphicsPreferences().shadowMapSize) + const [antiAliasing, setAntiAliasing] = useState(PreferencesSystem.getGraphicsPreferences().antiAliasing) - const initialPreset = detectCurrentPreset( - PreferencesSystem.getGraphicsPreferences().lightIntensity, - PreferencesSystem.getGraphicsPreferences().fancyShadows, - PreferencesSystem.getGraphicsPreferences().maxFar, - PreferencesSystem.getGraphicsPreferences().cascades, - PreferencesSystem.getGraphicsPreferences().shadowMapSize, - PreferencesSystem.getGraphicsPreferences().antiAliasing, - ); + const initialPreset = detectCurrentPreset( + PreferencesSystem.getGraphicsPreferences().lightIntensity, + PreferencesSystem.getGraphicsPreferences().fancyShadows, + PreferencesSystem.getGraphicsPreferences().maxFar, + PreferencesSystem.getGraphicsPreferences().cascades, + PreferencesSystem.getGraphicsPreferences().shadowMapSize, + PreferencesSystem.getGraphicsPreferences().antiAliasing + ) - const [selectedPreset, setSelectedPreset] = useState(initialPreset); + const [selectedPreset, setSelectedPreset] = useState(initialPreset) - const updatePresetFromSettings = ( - newLightIntensity: number, - newFancyShadows: boolean, - newMaxFar: number, - newCascades: number, - newShadowMapSize: number, - newAntiAliasing: boolean, - ) => { - const detectedPreset = detectCurrentPreset( - newLightIntensity, - newFancyShadows, - newMaxFar, - newCascades, - newShadowMapSize, - newAntiAliasing, - ); - if (detectedPreset !== selectedPreset) { - setSelectedPreset(detectedPreset); - } - }; + const updatePresetFromSettings = ( + newLightIntensity: number, + newFancyShadows: boolean, + newMaxFar: number, + newCascades: number, + newShadowMapSize: number, + newAntiAliasing: boolean + ) => { + const detectedPreset = detectCurrentPreset( + newLightIntensity, + newFancyShadows, + newMaxFar, + newCascades, + newShadowMapSize, + newAntiAliasing + ) + if (detectedPreset !== selectedPreset) { + setSelectedPreset(detectedPreset) + } + } - const updateCSMSettingsAndPreset = ( - newLightIntensity: number, - newFancyShadows: boolean, - newMaxFar: number, - newCascades: number, - newShadowMapSize: number, - newAntiAliasing: boolean, - ) => { - World.sceneRenderer.changeCSMSettings({ - lightIntensity: newLightIntensity, - fancyShadows: newFancyShadows, - maxFar: newMaxFar, - cascades: newCascades, - shadowMapSize: newShadowMapSize, - antiAliasing: newAntiAliasing, - }); - updatePresetFromSettings( - newLightIntensity, - newFancyShadows, - newMaxFar, - newCascades, - newShadowMapSize, - newAntiAliasing, - ); - }; + const updateCSMSettingsAndPreset = ( + newLightIntensity: number, + newFancyShadows: boolean, + newMaxFar: number, + newCascades: number, + newShadowMapSize: number, + newAntiAliasing: boolean + ) => { + World.sceneRenderer.changeCSMSettings({ + lightIntensity: newLightIntensity, + fancyShadows: newFancyShadows, + maxFar: newMaxFar, + cascades: newCascades, + shadowMapSize: newShadowMapSize, + antiAliasing: newAntiAliasing, + }) + updatePresetFromSettings( + newLightIntensity, + newFancyShadows, + newMaxFar, + newCascades, + newShadowMapSize, + newAntiAliasing + ) + } - const applyPreset = (preset: GraphicsPreset) => { - const settings = GRAPHICS_PRESETS[preset]; - const previousAntiAliasing = antiAliasing; + const applyPreset = (preset: GraphicsPreset) => { + const settings = GRAPHICS_PRESETS[preset] + const previousAntiAliasing = antiAliasing - setLightIntensity(settings.lightIntensity); - setFancyShadows(settings.fancyShadows); - setMaxFar(settings.maxFar); - setCascades(settings.cascades); - setShadowMapSize(settings.shadowMapSize); - setAntiAliasing(settings.antiAliasing); - setSelectedPreset(preset); + setLightIntensity(settings.lightIntensity) + setFancyShadows(settings.fancyShadows) + setMaxFar(settings.maxFar) + setCascades(settings.cascades) + setShadowMapSize(settings.shadowMapSize) + setAntiAliasing(settings.antiAliasing) + setSelectedPreset(preset) - // Apply settings to scene renderer immediately - World.sceneRenderer.changeLighting(settings.fancyShadows); - World.sceneRenderer.setLightIntensity(settings.lightIntensity); + // Apply settings to scene renderer immediately + World.sceneRenderer.changeLighting(settings.fancyShadows) + World.sceneRenderer.setLightIntensity(settings.lightIntensity) - World.sceneRenderer.changeCSMSettings({ - lightIntensity: settings.lightIntensity, - fancyShadows: settings.fancyShadows, - maxFar: settings.maxFar, - cascades: settings.cascades, - shadowMapSize: settings.shadowMapSize, - antiAliasing: settings.antiAliasing, - }); + World.sceneRenderer.changeCSMSettings({ + lightIntensity: settings.lightIntensity, + fancyShadows: settings.fancyShadows, + maxFar: settings.maxFar, + cascades: settings.cascades, + shadowMapSize: settings.shadowMapSize, + antiAliasing: settings.antiAliasing, + }) - if (previousAntiAliasing !== settings.antiAliasing) { - setReload(true); - } - }; + if (previousAntiAliasing !== settings.antiAliasing) { + setReload(true) + } + } - const handleAntiAliasingChange = (checked: boolean) => { - setAntiAliasing(checked); - setReload(true); - updatePresetFromSettings( - lightIntensity, - fancyShadows, - maxFar, - cascades, - shadowMapSize, - checked, - ); - }; + const handleAntiAliasingChange = (checked: boolean) => { + setAntiAliasing(checked) + setReload(true) + updatePresetFromSettings(lightIntensity, fancyShadows, maxFar, cascades, shadowMapSize, checked) + } - useEffect(() => { - const onBeforeAccept = () => { - PreferencesSystem.getGraphicsPreferences().fancyShadows = fancyShadows; - PreferencesSystem.getGraphicsPreferences().lightIntensity = - lightIntensity; - PreferencesSystem.getGraphicsPreferences().maxFar = maxFar; - PreferencesSystem.getGraphicsPreferences().cascades = cascades; - PreferencesSystem.getGraphicsPreferences().shadowMapSize = shadowMapSize; - PreferencesSystem.getGraphicsPreferences().antiAliasing = antiAliasing; + useEffect(() => { + const onBeforeAccept = () => { + PreferencesSystem.getGraphicsPreferences().fancyShadows = fancyShadows + PreferencesSystem.getGraphicsPreferences().lightIntensity = lightIntensity + PreferencesSystem.getGraphicsPreferences().maxFar = maxFar + PreferencesSystem.getGraphicsPreferences().cascades = cascades + PreferencesSystem.getGraphicsPreferences().shadowMapSize = shadowMapSize + PreferencesSystem.getGraphicsPreferences().antiAliasing = antiAliasing - PreferencesSystem.savePreferences(); + PreferencesSystem.savePreferences() - if (reload) window.location.reload(); - }; - const onCancel = () => { - // Revert all settings to original preferences - const originalPrefs = PreferencesSystem.getGraphicsPreferences(); - World.sceneRenderer.setLightIntensity(originalPrefs.lightIntensity); - World.sceneRenderer.changeLighting(originalPrefs.fancyShadows); - World.sceneRenderer.changeCSMSettings({ - lightIntensity: originalPrefs.lightIntensity, - fancyShadows: originalPrefs.fancyShadows, - maxFar: originalPrefs.maxFar, - cascades: originalPrefs.cascades, - shadowMapSize: originalPrefs.shadowMapSize, - antiAliasing: originalPrefs.antiAliasing, - }); - }; + if (reload) window.location.reload() + } + const onCancel = () => { + // Revert all settings to original preferences + const originalPrefs = PreferencesSystem.getGraphicsPreferences() + World.sceneRenderer.setLightIntensity(originalPrefs.lightIntensity) + World.sceneRenderer.changeLighting(originalPrefs.fancyShadows) + World.sceneRenderer.changeCSMSettings({ + lightIntensity: originalPrefs.lightIntensity, + fancyShadows: originalPrefs.fancyShadows, + maxFar: originalPrefs.maxFar, + cascades: originalPrefs.cascades, + shadowMapSize: originalPrefs.shadowMapSize, + antiAliasing: originalPrefs.antiAliasing, + }) + } - if (panel) { - configureScreen( - panel, - { title: "Graphics Settings", position: "center" }, - { onBeforeAccept, onCancel }, - ); - } - }, [ - fancyShadows, - lightIntensity, - maxFar, - cascades, - shadowMapSize, - antiAliasing, - reload, - panel, - configureScreen, - ]); + if (panel) { + configureScreen(panel, { title: "Graphics Settings", position: "center" }, { onBeforeAccept, onCancel }) + } + }, [fancyShadows, lightIntensity, maxFar, cascades, shadowMapSize, antiAliasing, reload, panel, configureScreen]) - return ( - - - - Preset - - - - - + return ( + + + + Preset + + + + + - val.toFixed(2)} - onChange={(value) => { - const newValue = value as number; - setLightIntensity(newValue); - World.sceneRenderer.setLightIntensity(newValue); - updatePresetFromSettings( - newValue, - fancyShadows, - maxFar, - cascades, - shadowMapSize, - antiAliasing, - ); - }} - step={0.25} - /> - { - setFancyShadows(checked); - World.sceneRenderer.changeLighting(checked); - World.sceneRenderer.setLightIntensity(lightIntensity); - updatePresetFromSettings( - lightIntensity, - checked, - maxFar, - cascades, - shadowMapSize, - antiAliasing, - ); - }} - /> - {fancyShadows && ( - <> - { - const newValue = value as number; - setMaxFar(newValue); - updateCSMSettingsAndPreset( - lightIntensity, - fancyShadows, - newValue, - cascades, - shadowMapSize, - antiAliasing, - ); - }} - step={1} - /> - { - const newValue = value as number; - setCascades(newValue); - updateCSMSettingsAndPreset( - lightIntensity, - fancyShadows, - maxFar, - newValue, - shadowMapSize, - antiAliasing, - ); - }} - step={1} - /> - { - const newValue = value as number; - setShadowMapSize(newValue); - updateCSMSettingsAndPreset( - lightIntensity, - fancyShadows, - maxFar, - cascades, - newValue, - antiAliasing, - ); - }} - step={1024} - /> - - - - - )} - - - - ); -}; + World.sceneRenderer.changeCSMSettings({ + shadowMapSize: 4096, + maxFar: 30, + lightIntensity: 5, + fancyShadows, + cascades: 4, + antiAliasing, + }) + }} + > + Reset Default + + + + )} + + + + ) +} -export default GraphicsSettingsPanel; +export default GraphicsSettingsPanel