From 6947f811e17b2c7d5973de5e9fe71e9f7cade6d6 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Tue, 30 Jul 2024 19:00:21 -0700
Subject: [PATCH 1/8] Added basic UI

---
 fission/src/Synthesis.tsx                     |  2 +
 .../ui/modals/configuring/SettingsModal.tsx   |  5 ++
 .../src/ui/panels/QualitySettingsPanel.tsx    | 50 +++++++++++++++++++
 3 files changed, 57 insertions(+)
 create mode 100644 fission/src/ui/panels/QualitySettingsPanel.tsx

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index e027a5e761..efe7ec11c8 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -66,6 +66,7 @@ import NewInputSchemeModal from "./ui/modals/configuring/theme-editor/NewInputSc
 import AssignNewSchemeModal from "./ui/modals/configuring/theme-editor/AssignNewSchemeModal.tsx"
 import AnalyticsConsent from "./ui/components/AnalyticsConsent.tsx"
 import PreferencesSystem from "./systems/preferences/PreferencesSystem.ts"
+import QualitySettingsPanel from "./ui/panels/QualitySettingsPanel.tsx"
 
 const worker = new Lazy<Worker>(() => new WPILibWSWorker())
 
@@ -253,6 +254,7 @@ const initialPanels: ReactElement[] = [
     <ChooseInputSchemePanel key="choose-scheme" panelId="choose-scheme" />,
     <WSViewPanel key="ws-view" panelId="ws-view" />,
     <DebugPanel key="debug" panelId="debug" />,
+    <QualitySettingsPanel key="quality-settings" panelId="quality-settings" openLocation="right" sidePadding={8} />,
 ]
 
 export default Synthesis
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 9e2ab7e340..5e3923b584 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react"
 import { useModalControlContext } from "@/ui/ModalContext"
+import { usePanelControlContext } from "@/ui/PanelContext"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
 import Label, { LabelSize } from "@/components/Label"
@@ -15,6 +16,7 @@ import { Spacer } from "@/ui/components/StyledComponents"
 
 const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     const { openModal } = useModalControlContext()
+    const { openPanel } = usePanelControlContext()
 
     const [qualitySettings, setQualitySettings] = useState<string>(
         PreferencesSystem.getGlobalPreference<string>("QualitySettings")
@@ -67,6 +69,9 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
         >
             <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2 min-w-[22vw]">
                 <Label size={LabelSize.Medium}>Screen Settings</Label>
+                <Box alignSelf={"center"}>
+                    <Button value="Configure Quality Settings" onClick={() => openPanel("quality-settings")} />
+                </Box>
                 <Dropdown
                     label="Quality Settings"
                     options={["Low", "Medium", "High"] as QualitySetting[]}
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
new file mode 100644
index 0000000000..d9ebf15e65
--- /dev/null
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -0,0 +1,50 @@
+import Box from "@mui/material/Box"
+import Panel, { PanelPropsImpl } from "../components/Panel"
+import { SynthesisIcons } from "../components/StyledComponents"
+import Checkbox from "@/components/Checkbox"
+import Dropdown from "@/components/Dropdown"
+const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
+    return (
+        <Panel
+            name={"Quality Settings"}
+            icon={SynthesisIcons.Gear}
+            panelId={panelId}
+            openLocation={openLocation}
+            sidePadding={sidePadding}
+        >
+            <Dropdown
+                label="Power Preference"
+                options={["High Performance", "Balanced", "Power Saver"]}
+                defaultValue="Balanced"
+                onSelect={value => {
+                    console.log("Power Preference", value)
+                }}
+            />
+            <Box display="flex" flexDirection={"column"}>
+                <Checkbox
+                    label="Fancy Shadows"
+                    defaultState={true}
+                    onClick={checked => {
+                        console.log("Fancy Shadows", checked)
+                    }}
+                />
+                <Checkbox
+                    label="Anti-Aliasing"
+                    defaultState={true}
+                    onClick={checked => {
+                        console.log("AntiAliasing", checked)
+                    }}
+                />
+                <Checkbox
+                    label="Post Processing"
+                    defaultState={true}
+                    onClick={checked => {
+                        console.log("Post Processing", checked)
+                    }}
+                />
+            </Box>
+        </Panel>
+    )
+}
+
+export default QualitySettingsPanel

From 79ac67541e2301d9c0baa82c1526015c3d06835e Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 31 Jul 2024 12:47:04 -0700
Subject: [PATCH 2/8] Power Preference Configuration

---
 .../systems/preferences/PreferenceTypes.ts    |  4 +++
 fission/src/systems/scene/SceneRenderer.ts    | 32 +++++++++++-------
 .../src/ui/panels/QualitySettingsPanel.tsx    | 33 +++++++++++++++++--
 3 files changed, 55 insertions(+), 14 deletions(-)

diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 37b04a83ce..8c0d2e31f6 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -3,6 +3,8 @@ import { Vector3Tuple } from "three"
 
 export type GlobalPreference =
     | "QualitySettings"
+    | "PowerPreference"
+    | "Antialiasing"
     | "ZoomSensitivity"
     | "PitchSensitivity"
     | "YawSensitivity"
@@ -18,6 +20,8 @@ export const FieldPreferencesKey: string = "Fields"
 
 export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     QualitySettings: "High" as QualitySetting,
+    PowerPreference: "default" as WebGLPowerPreference,
+    Antialiasing: false,
     ZoomSensitivity: 15,
     PitchSensitivity: 10,
     YawSensitivity: 3,
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 34e1f19e04..d95f68b374 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -50,6 +50,10 @@ class SceneRenderer extends WorldSystem {
     public get renderer(): THREE.WebGLRenderer {
         return this._renderer
     }
+    
+    public set renderer(renderer: THREE.WebGLRenderer) {
+        this._renderer = renderer
+    }
 
     public constructor() {
         super()
@@ -62,18 +66,7 @@ class SceneRenderer extends WorldSystem {
 
         this._scene = new THREE.Scene()
 
-        this._renderer = new THREE.WebGLRenderer({
-            // Following parameters are used to optimize post-processing
-            powerPreference: "high-performance",
-            antialias: false,
-            stencil: false,
-            depth: false,
-        })
-        this._renderer.setClearColor(CLEAR_COLOR)
-        this._renderer.setPixelRatio(window.devicePixelRatio)
-        this._renderer.shadowMap.enabled = true
-        this._renderer.shadowMap.type = THREE.PCFSoftShadowMap
-        this._renderer.setSize(window.innerWidth, window.innerHeight)
+        this._renderer = this.CreateRenderer(PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"), PreferencesSystem.getGlobalPreference<boolean>("Antialiasing"))
 
         const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
         directionalLight.position.set(-1.0, 3.0, 2.0)
@@ -140,6 +133,21 @@ class SceneRenderer extends WorldSystem {
         this._mainCamera.updateProjectionMatrix()
     }
 
+    public CreateRenderer(powerPreference: WebGLPowerPreference, antialias: boolean): THREE.WebGLRenderer {
+        const renderer = new THREE.WebGLRenderer({
+            powerPreference: powerPreference,
+            antialias: antialias,
+            stencil: false,
+            depth: false,
+        })
+        renderer.setClearColor(CLEAR_COLOR)
+        renderer.setPixelRatio(window.devicePixelRatio)
+        renderer.shadowMap.enabled = true
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap
+        renderer.setSize(window.innerWidth, window.innerHeight)
+        return renderer
+    }
+
     public Update(deltaT: number): void {
         this._sceneObjects.forEach(obj => {
             obj.Update()
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index d9ebf15e65..1e21283101 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -3,6 +3,25 @@ import Panel, { PanelPropsImpl } from "../components/Panel"
 import { SynthesisIcons } from "../components/StyledComponents"
 import Checkbox from "@/components/Checkbox"
 import Dropdown from "@/components/Dropdown"
+import World from "@/systems/World"
+import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
+
+function OptionsToPowerPreference(): { [key: string]: WebGLPowerPreference } {
+    return {
+        "High Performance": "high-performance",
+        "Balanced": "default",
+        "Power Saver": "low-power",
+    }
+}
+
+function PowerPreferenceToOptions(): { [key: string]: string } {
+    return { 
+        "high-performance": "High Performance", 
+        "default": "Balanced", 
+        "low-power": "Power Saver" 
+    }
+}
+
 const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     return (
         <Panel
@@ -15,9 +34,19 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
             <Dropdown
                 label="Power Preference"
                 options={["High Performance", "Balanced", "Power Saver"]}
-                defaultValue="Balanced"
+                defaultValue={PowerPreferenceToOptions()[PreferencesSystem.getGlobalPreference<string>("PowerPreference")]}
                 onSelect={value => {
-                    console.log("Power Preference", value)
+                    // converting the options into WebGLPowerPreference values
+                    value = OptionsToPowerPreference()[value as string]
+
+                    // recreating the renderer with new preferences
+                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(
+                        value as WebGLPowerPreference,
+                        PreferencesSystem.getGlobalPreference<boolean>("Antialiasing")
+                    )
+
+                    // saving the new preference
+                    PreferencesSystem.setGlobalPreference("PowerPreference", value)
                 }}
             />
             <Box display="flex" flexDirection={"column"}>

From caa1191539380596a6e7757cfa077137a71a2313 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 31 Jul 2024 18:27:38 -0700
Subject: [PATCH 3/8] Changing Anti-aliasing implementation however it doesn't
 work

---
 .../systems/preferences/PreferenceTypes.ts    |  4 +--
 fission/src/systems/scene/SceneRenderer.ts    | 23 ++++++++++-----
 .../src/ui/panels/QualitySettingsPanel.tsx    | 28 +++++++++++--------
 3 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 8c0d2e31f6..6367785be3 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -4,7 +4,7 @@ import { Vector3Tuple } from "three"
 export type GlobalPreference =
     | "QualitySettings"
     | "PowerPreference"
-    | "Antialiasing"
+    | "AntiAliasing"
     | "ZoomSensitivity"
     | "PitchSensitivity"
     | "YawSensitivity"
@@ -21,7 +21,7 @@ export const FieldPreferencesKey: string = "Fields"
 export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     QualitySettings: "High" as QualitySetting,
     PowerPreference: "default" as WebGLPowerPreference,
-    Antialiasing: false,
+    AntiAliasing: false,
     ZoomSensitivity: 15,
     PitchSensitivity: 10,
     YawSensitivity: 3,
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index d95f68b374..6bbfe62aae 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -13,7 +13,6 @@ import InputSystem from "../input/InputSystem"
 import Jolt from "@barclah/jolt-physics"
 
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
-import {} from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 
 const CLEAR_COLOR = 0x121212
@@ -50,7 +49,7 @@ class SceneRenderer extends WorldSystem {
     public get renderer(): THREE.WebGLRenderer {
         return this._renderer
     }
-    
+
     public set renderer(renderer: THREE.WebGLRenderer) {
         this._renderer = renderer
     }
@@ -66,7 +65,9 @@ class SceneRenderer extends WorldSystem {
 
         this._scene = new THREE.Scene()
 
-        this._renderer = this.CreateRenderer(PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"), PreferencesSystem.getGlobalPreference<boolean>("Antialiasing"))
+        this._renderer = this.CreateRenderer(
+            PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference")
+        )
 
         const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
         directionalLight.position.set(-1.0, 3.0, 2.0)
@@ -119,7 +120,7 @@ class SceneRenderer extends WorldSystem {
 
         const antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR })
         this._antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect)
-        this._composer.addPass(this._antiAliasPass)
+        this.SetAntiAliasing(PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing"))
 
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
@@ -133,10 +134,10 @@ class SceneRenderer extends WorldSystem {
         this._mainCamera.updateProjectionMatrix()
     }
 
-    public CreateRenderer(powerPreference: WebGLPowerPreference, antialias: boolean): THREE.WebGLRenderer {
+    public CreateRenderer(powerPreference: WebGLPowerPreference): THREE.WebGLRenderer {
         const renderer = new THREE.WebGLRenderer({
             powerPreference: powerPreference,
-            antialias: antialias,
+            antialias: false,
             stencil: false,
             depth: false,
         })
@@ -148,6 +149,14 @@ class SceneRenderer extends WorldSystem {
         return renderer
     }
 
+    public SetAntiAliasing(antiAliasPass: boolean): void {
+        if (antiAliasPass) {
+            this._composer.addPass(this._antiAliasPass)
+        } else if (this._composer.passes.includes(this._antiAliasPass)) {
+            this._composer.removePass(this._antiAliasPass)
+        }
+    }
+
     public Update(deltaT: number): void {
         this._sceneObjects.forEach(obj => {
             obj.Update()
@@ -257,7 +266,7 @@ class SceneRenderer extends WorldSystem {
         return [(window.innerWidth * (screenSpace.x + 1.0)) / 2.0, (window.innerHeight * (1.0 - screenSpace.y)) / 2.0]
     }
 
-    /** 
+    /**
      * Updates the skybox colors based on the current theme
 
      * @param currentTheme: current theme from ThemeContext.useTheme()
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index 1e21283101..41150c7409 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -15,10 +15,10 @@ function OptionsToPowerPreference(): { [key: string]: WebGLPowerPreference } {
 }
 
 function PowerPreferenceToOptions(): { [key: string]: string } {
-    return { 
-        "high-performance": "High Performance", 
-        "default": "Balanced", 
-        "low-power": "Power Saver" 
+    return {
+        "high-performance": "High Performance",
+        "default": "Balanced",
+        "low-power": "Power Saver",
     }
 }
 
@@ -30,20 +30,22 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
             panelId={panelId}
             openLocation={openLocation}
             sidePadding={sidePadding}
+            onAccept={() => {
+                PreferencesSystem.savePreferences()
+            }}
         >
             <Dropdown
                 label="Power Preference"
                 options={["High Performance", "Balanced", "Power Saver"]}
-                defaultValue={PowerPreferenceToOptions()[PreferencesSystem.getGlobalPreference<string>("PowerPreference")]}
+                defaultValue={
+                    PowerPreferenceToOptions()[PreferencesSystem.getGlobalPreference<string>("PowerPreference")]
+                }
                 onSelect={value => {
                     // converting the options into WebGLPowerPreference values
                     value = OptionsToPowerPreference()[value as string]
 
                     // recreating the renderer with new preferences
-                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(
-                        value as WebGLPowerPreference,
-                        PreferencesSystem.getGlobalPreference<boolean>("Antialiasing")
-                    )
+                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(value as WebGLPowerPreference)
 
                     // saving the new preference
                     PreferencesSystem.setGlobalPreference("PowerPreference", value)
@@ -59,9 +61,13 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
                 />
                 <Checkbox
                     label="Anti-Aliasing"
-                    defaultState={true}
+                    defaultState={PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")}
                     onClick={checked => {
-                        console.log("AntiAliasing", checked)
+                        // rupdating anti-aliasing
+                        World.SceneRenderer.SetAntiAliasing(checked)
+
+                        // saving the new preference
+                        PreferencesSystem.setGlobalPreference("AntiAliasing", checked)
                     }}
                 />
                 <Checkbox

From c986640f6da95c839c825d45d1e1932c7c5cb490 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Mon, 5 Aug 2024 10:55:54 -0700
Subject: [PATCH 4/8] Working antialias switch switch

---
 fission/src/systems/scene/SceneRenderer.ts    | 32 ++++++++++++++++---
 .../src/ui/panels/QualitySettingsPanel.tsx    |  7 +++-
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 6bbfe62aae..a8304dd644 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -66,7 +66,8 @@ class SceneRenderer extends WorldSystem {
         this._scene = new THREE.Scene()
 
         this._renderer = this.CreateRenderer(
-            PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference")
+            PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
+            PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")
         )
 
         const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
@@ -134,12 +135,13 @@ class SceneRenderer extends WorldSystem {
         this._mainCamera.updateProjectionMatrix()
     }
 
-    public CreateRenderer(powerPreference: WebGLPowerPreference): THREE.WebGLRenderer {
+    public CreateRenderer(powerPreference: WebGLPowerPreference, antiAliasing: boolean): THREE.WebGLRenderer {
+        console.log(antiAliasing)
         const renderer = new THREE.WebGLRenderer({
             powerPreference: powerPreference,
             antialias: false,
             stencil: false,
-            depth: false,
+            // depth: !antiAliasing,
         })
         renderer.setClearColor(CLEAR_COLOR)
         renderer.setPixelRatio(window.devicePixelRatio)
@@ -149,11 +151,31 @@ class SceneRenderer extends WorldSystem {
         return renderer
     }
 
+    /** Function to disable or enable the antiAliasingPass */
     public SetAntiAliasing(antiAliasPass: boolean): void {
         if (antiAliasPass) {
             this._composer.addPass(this._antiAliasPass)
-        } else if (this._composer.passes.includes(this._antiAliasPass)) {
-            this._composer.removePass(this._antiAliasPass)
+        } else {
+            // console.log("here")
+            // this._renderer = this.CreateRenderer(
+            //     PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
+            //     antiAliasPass
+            // )
+            this._renderer = new THREE.WebGLRenderer({
+                powerPreference: PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
+                antialias: false,
+                stencil: false,
+                depth: true,
+            })
+            this._renderer.setClearColor(CLEAR_COLOR)
+            this._renderer.setPixelRatio(window.devicePixelRatio)
+            this._renderer.shadowMap.enabled = true
+            this._renderer.shadowMap.type = THREE.PCFSoftShadowMap
+            this._renderer.setSize(window.innerWidth, window.innerHeight)
+
+            if (this._composer.passes.includes(this._antiAliasPass)) {
+                this._composer.removePass(this._antiAliasPass)
+            }
         }
     }
 
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index 41150c7409..fbd2635556 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -6,6 +6,7 @@ import Dropdown from "@/components/Dropdown"
 import World from "@/systems/World"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 
+/** converts the easily-readable options to PowerPreference type strings */
 function OptionsToPowerPreference(): { [key: string]: WebGLPowerPreference } {
     return {
         "High Performance": "high-performance",
@@ -14,6 +15,7 @@ function OptionsToPowerPreference(): { [key: string]: WebGLPowerPreference } {
     }
 }
 
+/** recieves the PowerPreference formatted string and converts it into a readable format for users to select */
 function PowerPreferenceToOptions(): { [key: string]: string } {
     return {
         "high-performance": "High Performance",
@@ -45,7 +47,10 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
                     value = OptionsToPowerPreference()[value as string]
 
                     // recreating the renderer with new preferences
-                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(value as WebGLPowerPreference)
+                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(
+                        value as WebGLPowerPreference,
+                        PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")
+                    )
 
                     // saving the new preference
                     PreferencesSystem.setGlobalPreference("PowerPreference", value)

From d38353e09e52c23c4a13bdbf7b266cc54d8f5e46 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Mon, 5 Aug 2024 20:23:18 -0700
Subject: [PATCH 5/8] Fixed preference system implementation and created
 working anti-aliasing customization

---
 .../systems/preferences/PreferenceTypes.ts    | 17 ++++-
 .../systems/preferences/PreferencesSystem.ts  | 15 ++++
 fission/src/systems/scene/SceneRenderer.ts    | 76 +++++--------------
 .../src/ui/panels/QualitySettingsPanel.tsx    | 68 ++++-------------
 4 files changed, 62 insertions(+), 114 deletions(-)

diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 6367785be3..e71bd0fefa 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -3,8 +3,6 @@ import { Vector3Tuple } from "three"
 
 export type GlobalPreference =
     | "QualitySettings"
-    | "PowerPreference"
-    | "AntiAliasing"
     | "ZoomSensitivity"
     | "PitchSensitivity"
     | "YawSensitivity"
@@ -17,11 +15,10 @@ export type GlobalPreference =
 
 export const RobotPreferencesKey: string = "Robots"
 export const FieldPreferencesKey: string = "Fields"
+export const QualityPreferencesKey: string = "Quality"
 
 export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     QualitySettings: "High" as QualitySetting,
-    PowerPreference: "default" as WebGLPowerPreference,
-    AntiAliasing: false,
     ZoomSensitivity: 15,
     PitchSensitivity: 10,
     YawSensitivity: 3,
@@ -35,6 +32,18 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
 
 export type QualitySetting = "Low" | "Medium" | "High"
 
+export type QualityPreferences = {
+    fancyShadows: boolean
+    antiAliasing: boolean
+}
+
+export function DefaultQualityPreferences(): QualityPreferences {
+    return {
+        fancyShadows: false,
+        antiAliasing: false,
+    }
+}
+
 export type IntakePreferences = {
     deltaTransformation: number[]
     zoneDiameter: number
diff --git a/fission/src/systems/preferences/PreferencesSystem.ts b/fission/src/systems/preferences/PreferencesSystem.ts
index 8933a44bd6..499895a823 100644
--- a/fission/src/systems/preferences/PreferencesSystem.ts
+++ b/fission/src/systems/preferences/PreferencesSystem.ts
@@ -2,11 +2,14 @@ import {
     DefaultFieldPreferences,
     DefaultGlobalPreferences,
     DefaultRobotPreferences,
+    DefaultQualityPreferences,
     FieldPreferences,
     FieldPreferencesKey,
     GlobalPreference,
     RobotPreferences,
     RobotPreferencesKey,
+    QualityPreferences,
+    QualityPreferencesKey,
 } from "./PreferenceTypes"
 
 export class PreferenceEvent extends Event {
@@ -105,6 +108,18 @@ class PreferencesSystem {
         return allFieldPrefs
     }
 
+    /** Gets simulation quality preferences */
+    public static getQualityPreferences(): QualityPreferences {
+        let qualityPrefs = this.getPreference<QualityPreferences>(QualityPreferencesKey)
+
+        if (qualityPrefs == undefined) {
+            qualityPrefs = DefaultQualityPreferences()
+            this._preferences[QualityPreferencesKey] = qualityPrefs
+        }
+
+        return qualityPrefs
+    }
+
     /** Load all preferences from local storage */
     public static loadPreferences() {
         const loadedPrefs = window.localStorage.getItem(this._localStorageKey)
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index a8304dd644..6f9c7c21cf 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -27,8 +27,6 @@ class SceneRenderer extends WorldSystem {
     private _skybox: THREE.Mesh
     private _composer: EffectComposer
 
-    private _antiAliasPass: EffectPass
-
     private _sceneObjects: Map<number, SceneObject>
 
     private _orbitControls: OrbitControls
@@ -50,10 +48,6 @@ class SceneRenderer extends WorldSystem {
         return this._renderer
     }
 
-    public set renderer(renderer: THREE.WebGLRenderer) {
-        this._renderer = renderer
-    }
-
     public constructor() {
         super()
 
@@ -65,10 +59,19 @@ class SceneRenderer extends WorldSystem {
 
         this._scene = new THREE.Scene()
 
-        this._renderer = this.CreateRenderer(
-            PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
-            PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")
-        )
+        console.log(PreferencesSystem.getQualityPreferences())
+        this._renderer = new THREE.WebGLRenderer({
+            powerPreference: "high-performance",
+            antialias: false,
+            stencil: false,
+            depth: !PreferencesSystem.getQualityPreferences().antiAliasing,
+            // logarithmicDepthBuffer: true,
+        })
+        this._renderer.setClearColor(CLEAR_COLOR)
+        this._renderer.setPixelRatio(window.devicePixelRatio)
+        this._renderer.shadowMap.enabled = true
+        this._renderer.shadowMap.type = THREE.PCFSoftShadowMap
+        this._renderer.setSize(window.innerWidth, window.innerHeight)
 
         const directionalLight = new THREE.DirectionalLight(0xffffff, 3.0)
         directionalLight.position.set(-1.0, 3.0, 2.0)
@@ -119,13 +122,17 @@ class SceneRenderer extends WorldSystem {
         this._composer = new EffectComposer(this._renderer)
         this._composer.addPass(new RenderPass(this._scene, this._mainCamera))
 
-        const antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR })
-        this._antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect)
-        this.SetAntiAliasing(PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing"))
+        if (PreferencesSystem.getQualityPreferences().antiAliasing) {
+            const antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR })
+            const antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect)
+            this._composer.addPass(antiAliasPass)
+        }
 
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
+
+        console.log(window.outerHeight, window.innerHeight)
     }
 
     public UpdateCanvasSize() {
@@ -135,50 +142,7 @@ class SceneRenderer extends WorldSystem {
         this._mainCamera.updateProjectionMatrix()
     }
 
-    public CreateRenderer(powerPreference: WebGLPowerPreference, antiAliasing: boolean): THREE.WebGLRenderer {
-        console.log(antiAliasing)
-        const renderer = new THREE.WebGLRenderer({
-            powerPreference: powerPreference,
-            antialias: false,
-            stencil: false,
-            // depth: !antiAliasing,
-        })
-        renderer.setClearColor(CLEAR_COLOR)
-        renderer.setPixelRatio(window.devicePixelRatio)
-        renderer.shadowMap.enabled = true
-        renderer.shadowMap.type = THREE.PCFSoftShadowMap
-        renderer.setSize(window.innerWidth, window.innerHeight)
-        return renderer
-    }
-
     /** Function to disable or enable the antiAliasingPass */
-    public SetAntiAliasing(antiAliasPass: boolean): void {
-        if (antiAliasPass) {
-            this._composer.addPass(this._antiAliasPass)
-        } else {
-            // console.log("here")
-            // this._renderer = this.CreateRenderer(
-            //     PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
-            //     antiAliasPass
-            // )
-            this._renderer = new THREE.WebGLRenderer({
-                powerPreference: PreferencesSystem.getGlobalPreference<WebGLPowerPreference>("PowerPreference"),
-                antialias: false,
-                stencil: false,
-                depth: true,
-            })
-            this._renderer.setClearColor(CLEAR_COLOR)
-            this._renderer.setPixelRatio(window.devicePixelRatio)
-            this._renderer.shadowMap.enabled = true
-            this._renderer.shadowMap.type = THREE.PCFSoftShadowMap
-            this._renderer.setSize(window.innerWidth, window.innerHeight)
-
-            if (this._composer.passes.includes(this._antiAliasPass)) {
-                this._composer.removePass(this._antiAliasPass)
-            }
-        }
-    }
-
     public Update(deltaT: number): void {
         this._sceneObjects.forEach(obj => {
             obj.Update()
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index fbd2635556..f1f2ce3c23 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -1,28 +1,9 @@
 import Box from "@mui/material/Box"
 import Panel, { PanelPropsImpl } from "../components/Panel"
-import { SynthesisIcons } from "../components/StyledComponents"
+import { SectionDivider, SectionLabel, Spacer, SynthesisIcons } from "../components/StyledComponents"
 import Checkbox from "@/components/Checkbox"
-import Dropdown from "@/components/Dropdown"
-import World from "@/systems/World"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
-
-/** converts the easily-readable options to PowerPreference type strings */
-function OptionsToPowerPreference(): { [key: string]: WebGLPowerPreference } {
-    return {
-        "High Performance": "high-performance",
-        "Balanced": "default",
-        "Power Saver": "low-power",
-    }
-}
-
-/** recieves the PowerPreference formatted string and converts it into a readable format for users to select */
-function PowerPreferenceToOptions(): { [key: string]: string } {
-    return {
-        "high-performance": "High Performance",
-        "default": "Balanced",
-        "low-power": "Power Saver",
-    }
-}
+import { LabelSize } from "../components/Label"
 
 const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
     return (
@@ -34,52 +15,31 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
             sidePadding={sidePadding}
             onAccept={() => {
                 PreferencesSystem.savePreferences()
+
+                window.location.reload()
             }}
         >
-            <Dropdown
-                label="Power Preference"
-                options={["High Performance", "Balanced", "Power Saver"]}
-                defaultValue={
-                    PowerPreferenceToOptions()[PreferencesSystem.getGlobalPreference<string>("PowerPreference")]
-                }
-                onSelect={value => {
-                    // converting the options into WebGLPowerPreference values
-                    value = OptionsToPowerPreference()[value as string]
-
-                    // recreating the renderer with new preferences
-                    World.SceneRenderer.renderer = World.SceneRenderer.CreateRenderer(
-                        value as WebGLPowerPreference,
-                        PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")
-                    )
-
-                    // saving the new preference
-                    PreferencesSystem.setGlobalPreference("PowerPreference", value)
-                }}
-            />
             <Box display="flex" flexDirection={"column"}>
                 <Checkbox
                     label="Fancy Shadows"
-                    defaultState={true}
+                    defaultState={PreferencesSystem.getQualityPreferences().fancyShadows}
                     onClick={checked => {
                         console.log("Fancy Shadows", checked)
                     }}
                 />
+                {Spacer(5)}
+                <SectionLabel size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
+                    Hot-reload Settings
+                </SectionLabel>
+                {Spacer(5)}
+                <SectionDivider />
+                {Spacer(5)}
                 <Checkbox
                     label="Anti-Aliasing"
-                    defaultState={PreferencesSystem.getGlobalPreference<boolean>("AntiAliasing")}
+                    defaultState={PreferencesSystem.getQualityPreferences().antiAliasing}
                     onClick={checked => {
-                        // rupdating anti-aliasing
-                        World.SceneRenderer.SetAntiAliasing(checked)
-
                         // saving the new preference
-                        PreferencesSystem.setGlobalPreference("AntiAliasing", checked)
-                    }}
-                />
-                <Checkbox
-                    label="Post Processing"
-                    defaultState={true}
-                    onClick={checked => {
-                        console.log("Post Processing", checked)
+                        PreferencesSystem.getQualityPreferences().antiAliasing = checked
                     }}
                 />
             </Box>

From 1ce3b747a5ed0143bc40ccb0ec8fcad3fd5099dd Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Mon, 5 Aug 2024 20:40:33 -0700
Subject: [PATCH 6/8] Added little info bubble

---
 .../src/ui/components/StyledComponents.tsx    |  3 +-
 .../src/ui/panels/QualitySettingsPanel.tsx    | 33 +++++++++++++++++--
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/fission/src/ui/components/StyledComponents.tsx b/fission/src/ui/components/StyledComponents.tsx
index b91922abc6..6d584899be 100644
--- a/fission/src/ui/components/StyledComponents.tsx
+++ b/fission/src/ui/components/StyledComponents.tsx
@@ -3,7 +3,7 @@ import Label from "./Label"
 import Button, { ButtonProps, ButtonSize } from "./Button"
 import { IoCheckmark, IoPencil, IoPeople, IoTrashBin } from "react-icons/io5"
 import { HiDownload } from "react-icons/hi"
-import { AiOutlinePlus } from "react-icons/ai"
+import { AiOutlineInfoCircle, AiOutlinePlus } from "react-icons/ai"
 import { BiRefresh } from "react-icons/bi"
 import { AiFillWarning } from "react-icons/ai"
 import { BsCodeSquare } from "react-icons/bs"
@@ -46,6 +46,7 @@ export class SynthesisIcons {
     public static SteeringWheel = (<GiSteeringWheel />)
     public static OutlineDoubleRight = (<AiOutlineDoubleRight />)
     public static Connect = (<GrConnect />)
+    public static Info = (<AiOutlineInfoCircle />)
 
     /** Large icons: used for icon buttons */
     public static DeleteLarge = (<IoTrashBin size={"1.25rem"} />)
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index f1f2ce3c23..924b4e4c09 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react"
 import Box from "@mui/material/Box"
 import Panel, { PanelPropsImpl } from "../components/Panel"
 import { SectionDivider, SectionLabel, Spacer, SynthesisIcons } from "../components/StyledComponents"
@@ -6,6 +7,16 @@ import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { LabelSize } from "../components/Label"
 
 const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false)
+
+    const handleMouseEnter = () => {
+        setIsTooltipVisible(true)
+    }
+
+    const handleMouseLeave = () => {
+        setIsTooltipVisible(false)
+    }
+
     return (
         <Panel
             name={"Quality Settings"}
@@ -28,9 +39,25 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
                     }}
                 />
                 {Spacer(5)}
-                <SectionLabel size={LabelSize.Medium} className="text-center mt-[4pt] mb-[2pt] mx-[5%]">
-                    Hot-reload Settings
-                </SectionLabel>
+                <div className="flex items-center justify-center mt-1 mb-0.5 mx-[5%]">
+                    <SectionLabel size={LabelSize.Medium} className="text-center">
+                        Hot-reload Settings
+                    </SectionLabel>
+                    <div
+                        className="relative inline-block ml-2"
+                        onMouseEnter={handleMouseEnter}
+                        onMouseLeave={handleMouseLeave}
+                    >
+                        {SynthesisIcons.Info}
+                        {/* <span className="cursor-pointer">ℹ️</span> */}
+                        {isTooltipVisible && (
+                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-gray-600 bg-opacity-100 text-white text-center rounded-md p-9 px-3 py-2 opacity-90 z-10">
+                                If these settings are changed then the game will reload to apply the changes, removing
+                                all of your robots and fields from the scene.
+                            </div>
+                        )}
+                    </div>
+                </div>
                 {Spacer(5)}
                 <SectionDivider />
                 {Spacer(5)}

From e593d8a17c775233cecdcfdee5db1faee43ba30d Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Mon, 5 Aug 2024 20:44:24 -0700
Subject: [PATCH 7/8] Added unsaved deletion

---
 fission/src/ui/panels/QualitySettingsPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
index 924b4e4c09..9be6738f2c 100644
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ b/fission/src/ui/panels/QualitySettingsPanel.tsx
@@ -51,7 +51,7 @@ const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation,
                         {SynthesisIcons.Info}
                         {/* <span className="cursor-pointer">ℹ️</span> */}
                         {isTooltipVisible && (
-                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-gray-600 bg-opacity-100 text-white text-center rounded-md p-9 px-3 py-2 opacity-90 z-10">
+                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-gray-600 bg-opacity-100 text-white text-center rounded-md px-3 py-2 opacity-90 z-10">
                                 If these settings are changed then the game will reload to apply the changes, removing
                                 all of your robots and fields from the scene.
                             </div>

From 0c33d9a7c3100a5d1556fb1c8d088d58297cfee3 Mon Sep 17 00:00:00 2001
From: Dhruv Arora <dhruv.arora1@autodesk.com>
Date: Wed, 14 Aug 2024 16:59:45 -0700
Subject: [PATCH 8/8] Updated the UI and functionality. Need to iron out bugs

---
 fission/src/Synthesis.tsx                     |   4 +-
 .../systems/preferences/PreferenceTypes.ts    |  18 +-
 .../systems/preferences/PreferencesSystem.ts  |  18 +-
 fission/src/systems/scene/SceneRenderer.ts    | 120 ++++++++-----
 .../ui/modals/configuring/SettingsModal.tsx   |  26 +--
 .../src/ui/panels/GraphicsSettingsPanel.tsx   | 159 ++++++++++++++++++
 .../src/ui/panels/QualitySettingsPanel.tsx    |  77 ---------
 7 files changed, 267 insertions(+), 155 deletions(-)
 create mode 100644 fission/src/ui/panels/GraphicsSettingsPanel.tsx
 delete mode 100644 fission/src/ui/panels/QualitySettingsPanel.tsx

diff --git a/fission/src/Synthesis.tsx b/fission/src/Synthesis.tsx
index f0cc84f3ca..ea520b6abc 100644
--- a/fission/src/Synthesis.tsx
+++ b/fission/src/Synthesis.tsx
@@ -63,7 +63,7 @@ import PreferencesSystem from "./systems/preferences/PreferencesSystem.ts"
 import ResetAllInputsModal from "./ui/modals/configuring/inputs/ResetAllInputsModal.tsx"
 import APSManagementModal from "./ui/modals/APSManagementModal.tsx"
 import ConfigurePanel from "./ui/panels/configuring/assembly-config/ConfigurePanel.tsx"
-import QualitySettingsPanel from "./ui/panels/QualitySettingsPanel.tsx"
+import GraphicsSettings from "./ui/panels/GraphicsSettingsPanel.tsx"
 
 const worker = new Lazy<Worker>(() => new WPILibWSWorker())
 
@@ -242,7 +242,7 @@ const initialPanels: ReactElement[] = [
     <WSViewPanel key="ws-view" panelId="ws-view" />,
     <DebugPanel key="debug" panelId="debug" />,
     <ConfigurePanel key="configure" panelId="configure" />,
-    <QualitySettingsPanel key="quality-settings" panelId="quality-settings" openLocation="right" sidePadding={8} />,
+    <GraphicsSettings key="graphics-settings" panelId="graphics-settings" openLocation="right" sidePadding={8} />,
 ]
 
 export default Synthesis
diff --git a/fission/src/systems/preferences/PreferenceTypes.ts b/fission/src/systems/preferences/PreferenceTypes.ts
index 0f3956011e..aef9cef639 100644
--- a/fission/src/systems/preferences/PreferenceTypes.ts
+++ b/fission/src/systems/preferences/PreferenceTypes.ts
@@ -2,7 +2,6 @@ import { InputScheme } from "../input/InputSchemeManager"
 import { Vector3Tuple } from "three"
 
 export type GlobalPreference =
-    | "QualitySettings"
     | "ZoomSensitivity"
     | "PitchSensitivity"
     | "YawSensitivity"
@@ -15,10 +14,9 @@ export type GlobalPreference =
 
 export const RobotPreferencesKey: string = "Robots"
 export const FieldPreferencesKey: string = "Fields"
-export const QualityPreferencesKey: string = "Quality"
+export const GraphicsPreferenceKey: string = "Quality"
 
 export const DefaultGlobalPreferences: { [key: string]: unknown } = {
-    QualitySettings: "High" as QualitySetting,
     ZoomSensitivity: 15,
     PitchSensitivity: 10,
     YawSensitivity: 3,
@@ -30,16 +28,22 @@ export const DefaultGlobalPreferences: { [key: string]: unknown } = {
     RenderScoreboard: true,
 }
 
-export type QualitySetting = "Low" | "Medium" | "High"
-
-export type QualityPreferences = {
+export type GraphicsPreferences = {
+    lightIntensity: number
     fancyShadows: boolean
+    maxFar: number
+    cascades: number
+    shadowMapSize: number
     antiAliasing: boolean
 }
 
-export function DefaultQualityPreferences(): QualityPreferences {
+export function DefaultGraphicsPreferences(): GraphicsPreferences {
     return {
+        lightIntensity: 5,
         fancyShadows: false,
+        maxFar: 30,
+        cascades: 4,
+        shadowMapSize: 4096,
         antiAliasing: false,
     }
 }
diff --git a/fission/src/systems/preferences/PreferencesSystem.ts b/fission/src/systems/preferences/PreferencesSystem.ts
index 499895a823..736b17e6cd 100644
--- a/fission/src/systems/preferences/PreferencesSystem.ts
+++ b/fission/src/systems/preferences/PreferencesSystem.ts
@@ -2,14 +2,14 @@ import {
     DefaultFieldPreferences,
     DefaultGlobalPreferences,
     DefaultRobotPreferences,
-    DefaultQualityPreferences,
+    DefaultGraphicsPreferences,
     FieldPreferences,
     FieldPreferencesKey,
     GlobalPreference,
     RobotPreferences,
     RobotPreferencesKey,
-    QualityPreferences,
-    QualityPreferencesKey,
+    GraphicsPreferences,
+    GraphicsPreferenceKey,
 } from "./PreferenceTypes"
 
 export class PreferenceEvent extends Event {
@@ -109,15 +109,15 @@ class PreferencesSystem {
     }
 
     /** Gets simulation quality preferences */
-    public static getQualityPreferences(): QualityPreferences {
-        let qualityPrefs = this.getPreference<QualityPreferences>(QualityPreferencesKey)
+    public static getGraphicsPreferences(): GraphicsPreferences {
+        let graphicsPrefs = this.getPreference<GraphicsPreferences>(GraphicsPreferenceKey)
 
-        if (qualityPrefs == undefined) {
-            qualityPrefs = DefaultQualityPreferences()
-            this._preferences[QualityPreferencesKey] = qualityPrefs
+        if (graphicsPrefs == undefined) {
+            graphicsPrefs = DefaultGraphicsPreferences()
+            this._preferences[GraphicsPreferenceKey] = graphicsPrefs
         }
 
-        return qualityPrefs
+        return graphicsPrefs
     }
 
     /** Load all preferences from local storage */
diff --git a/fission/src/systems/scene/SceneRenderer.ts b/fission/src/systems/scene/SceneRenderer.ts
index 602353c810..4442e83843 100644
--- a/fission/src/systems/scene/SceneRenderer.ts
+++ b/fission/src/systems/scene/SceneRenderer.ts
@@ -15,6 +15,7 @@ import Jolt from "@barclah/jolt-physics"
 import { PixelSpaceCoord, SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
 import PreferencesSystem from "../preferences/PreferencesSystem"
 import { CSM } from "three/examples/jsm/csm/CSM.js"
+import { GraphicsPreferences } from "../preferences/PreferenceTypes"
 
 const CLEAR_COLOR = 0x121212
 const GROUND_COLOR = 0x4066c7
@@ -62,12 +63,11 @@ class SceneRenderer extends WorldSystem {
 
         this._scene = new THREE.Scene()
 
-        console.log(PreferencesSystem.getQualityPreferences())
         this._renderer = new THREE.WebGLRenderer({
             powerPreference: "high-performance",
             antialias: false,
             stencil: false,
-            depth: !PreferencesSystem.getQualityPreferences().antiAliasing,
+            depth: !PreferencesSystem.getGraphicsPreferences().antiAliasing,
             // logarithmicDepthBuffer: true,
         })
         this._renderer.setClearColor(CLEAR_COLOR)
@@ -77,7 +77,7 @@ class SceneRenderer extends WorldSystem {
         this._renderer.setSize(window.innerWidth, window.innerHeight)
 
         // Adding the lighting uisng quality preferences
-        this.ChangeLighting(PreferencesSystem.getGlobalPreference<string>("QualitySettings"))
+        this.ChangeLighting(PreferencesSystem.getGraphicsPreferences().fancyShadows)
 
         const ambientLight = new THREE.AmbientLight(0xffffff, 0.3)
         this._scene.add(ambientLight)
@@ -110,7 +110,7 @@ class SceneRenderer extends WorldSystem {
         this._composer = new EffectComposer(this._renderer)
         this._composer.addPass(new RenderPass(this._scene, this._mainCamera))
 
-        if (PreferencesSystem.getQualityPreferences().antiAliasing) {
+        if (PreferencesSystem.getGraphicsPreferences().antiAliasing) {
             const antiAliasEffect = new SMAAEffect({ edgeDetectionMode: EdgeDetectionMode.COLOR })
             const antiAliasPass = new EffectPass(this._mainCamera, antiAliasEffect)
             this._composer.addPass(antiAliasPass)
@@ -119,8 +119,6 @@ class SceneRenderer extends WorldSystem {
         // Orbit controls
         this._orbitControls = new OrbitControls(this._mainCamera, this._renderer.domElement)
         this._orbitControls.update()
-
-        console.log(window.outerHeight, window.innerHeight)
     }
 
     public UpdateCanvasSize() {
@@ -168,7 +166,7 @@ class SceneRenderer extends WorldSystem {
      *
      * @param quality: string representing the quality of lighting - "Low", "Medium", "High"
      */
-    public ChangeLighting(quality: string): void {
+    public ChangeLighting(fancyShadows: boolean): void {
         // removing the previous lighting method
         if (this._light instanceof THREE.DirectionalLight) {
             this._scene.remove(this._light)
@@ -178,13 +176,14 @@ class SceneRenderer extends WorldSystem {
         }
 
         // setting the shadow map size
-        const shadowMapSize = Math.min(4096, this._renderer.capabilities.maxTextureSize)
+        const graphicsSettings = PreferencesSystem.getGraphicsPreferences()
+        const shadowMapSize = Math.min(graphicsSettings.shadowMapSize, this._renderer.capabilities.maxTextureSize)
 
         // setting the light to a basic directional light
-        if (quality === "Low" || quality === "Medium") {
+        if (!fancyShadows) {
             const shadowCamSize = 15
 
-            this._light = new THREE.DirectionalLight(0xffffff, 5.0)
+            this._light = new THREE.DirectionalLight(0xffffff, graphicsSettings.lightIntensity)
             this._light.position.set(-1.0, 3.0, 2.0)
             this._light.castShadow = true
             this._light.shadow.camera.top = shadowCamSize
@@ -196,42 +195,79 @@ class SceneRenderer extends WorldSystem {
             this._light.shadow.bias = 0.0
             this._light.shadow.normalBias = 0.01
             this._scene.add(this._light)
-        } else if (quality === "High") {
-            // setting light to cascading shadows
-            this._light = new CSM({
-                parent: this._scene,
-                camera: this._mainCamera,
-                cascades: 4,
-                lightDirection: new THREE.Vector3(1.0, -3.0, -2.0).normalize(),
-                lightIntensity: 5,
-                shadowMapSize: shadowMapSize,
-                mode: "custom",
-                maxFar: 30,
-                shadowBias: -0.00001,
-                customSplitsCallback: (cascades: number, near: number, far: number, breaks: number[]) => {
-                    const blend = 0.7
-                    for (let i = 1; i < cascades; i++) {
-                        const uniformFactor = (near + ((far - near) * i) / cascades) / far
-                        const logarithmicFactor = (near * (far / near) ** (i / cascades)) / far
-                        const combinedFactor = uniformFactor * (1 - blend) + logarithmicFactor * blend
-
-                        breaks.push(combinedFactor)
-                    }
-
-                    breaks.push(1)
-                },
-            })
-
-            // setting up the materials for all objects in the scene
-            this._light.fade = true
-            this._scene.children.forEach(child => {
-                if (child instanceof THREE.Mesh) {
-                    if (this._light instanceof CSM) this._light.setupMaterial(child.material)
+        } else {
+            // setting the light to a cascading shadow map
+            this.CreateCSM(graphicsSettings)
+
+            // setting up all the materials
+            this.SetupCSMMaterials()
+        }
+    }
+
+    public CreateCSM(settings: GraphicsPreferences) {
+        this._light = new CSM({
+            parent: this._scene,
+            camera: this._mainCamera,
+            cascades: settings.cascades,
+            lightDirection: new THREE.Vector3(1.0, -3.0, -2.0).normalize(),
+            lightIntensity: settings.lightIntensity,
+            shadowMapSize: settings.shadowMapSize,
+            mode: "custom",
+            maxFar: settings.maxFar,
+            shadowBias: -0.00001,
+            customSplitsCallback: (cascades: number, near: number, far: number, breaks: number[]) => {
+                const blend = 0.7
+                for (let i = 1; i < cascades; i++) {
+                    const uniformFactor = (near + ((far - near) * i) / cascades) / far
+                    const logarithmicFactor = (near * (far / near) ** (i / cascades)) / far
+                    const combinedFactor = uniformFactor * (1 - blend) + logarithmicFactor * blend
+
+                    breaks.push(combinedFactor)
                 }
-            })
+
+                breaks.push(1)
+            },
+        })
+        this._light.fade = true
+    }
+
+    private SetupCSMMaterials() {
+        this._scene.children.forEach(child => {
+            if (child instanceof THREE.Mesh) {
+                if (this._light instanceof CSM) this._light.setupMaterial(child.material)
+            }
+        })
+    }
+
+    /** Sets the light intensity for both directional light and csm */
+    public setLightIntensity(intensity: number) {
+        if (this._light instanceof THREE.DirectionalLight) {
+            this._light.intensity = intensity
+        } else if (this._light instanceof CSM) {
+            this._light.lightIntensity = intensity
+
+            this._light.createLights()
+            this._light.injectInclude()
+            this._light.updateFrustums()
+            this._light.update()
+            console.log(this._light.lightIntensity)
         }
     }
 
+    /** Changes the settings of the cascading shadows from the Quality Settings Panel */
+    public changeCSMSettings(settings: GraphicsPreferences) {
+        if (!(this._light instanceof CSM)) return
+
+        this._light.maxFar = settings.maxFar
+        this._light.shadowMapSize = Math.min(settings.shadowMapSize, this._renderer.capabilities.maxTextureSize)
+        this._light.cascades = settings.cascades
+
+        this._light.createLights()
+        this._light.injectInclude()
+        this._light.updateFrustums()
+        this._light.update()
+    }
+
     public RegisterSceneObject<T extends SceneObject>(obj: T): number {
         const id = nextSceneObjectId++
         obj.id = id
diff --git a/fission/src/ui/modals/configuring/SettingsModal.tsx b/fission/src/ui/modals/configuring/SettingsModal.tsx
index 0fd1c34c6b..d274b06db0 100644
--- a/fission/src/ui/modals/configuring/SettingsModal.tsx
+++ b/fission/src/ui/modals/configuring/SettingsModal.tsx
@@ -4,24 +4,18 @@ import { usePanelControlContext } from "@/ui/PanelContext"
 import Modal, { ModalPropsImpl } from "@/components/Modal"
 import { FaGear } from "react-icons/fa6"
 import Label, { LabelSize } from "@/components/Label"
-import Dropdown from "@/components/Dropdown"
 import Button from "@/components/Button"
 import Slider from "@/components/Slider"
 import Checkbox from "@/components/Checkbox"
 import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
 import { SceneOverlayEvent, SceneOverlayEventKey } from "@/ui/components/SceneOverlayEvents"
-import { QualitySetting } from "@/systems/preferences/PreferenceTypes"
 import { Box } from "@mui/material"
 import { Spacer } from "@/ui/components/StyledComponents"
-import World from "@/systems/World"
 
 const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
-    const { openModal } = useModalControlContext()
+    const { openModal, closeModal } = useModalControlContext()
     const { openPanel } = usePanelControlContext()
 
-    const [qualitySettings, setQualitySettings] = useState<string>(
-        PreferencesSystem.getGlobalPreference<string>("QualitySettings")
-    )
     const [zoomSensitivity, setZoomSensitivity] = useState<number>(
         PreferencesSystem.getGlobalPreference<number>("ZoomSensitivity")
     )
@@ -46,7 +40,6 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
     )
 
     const saveSettings = () => {
-        PreferencesSystem.setGlobalPreference<string>("QualitySettings", qualitySettings)
         PreferencesSystem.setGlobalPreference<number>("ZoomSensitivity", zoomSensitivity)
         PreferencesSystem.setGlobalPreference<number>("PitchSensitivity", pitchSensitivity)
         PreferencesSystem.setGlobalPreference<number>("YawSensitivity", yawSensitivity)
@@ -71,17 +64,14 @@ const SettingsModal: React.FC<ModalPropsImpl> = ({ modalId }) => {
             <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2 min-w-[22vw]">
                 <Label size={LabelSize.Medium}>Screen Settings</Label>
                 <Box alignSelf={"center"}>
-                    <Button value="Configure Quality Settings" onClick={() => openPanel("quality-settings")} />
+                    <Button
+                        value="Graphics Settings"
+                        onClick={() => {
+                            openPanel("graphics-settings")
+                            closeModal()
+                        }}
+                    />
                 </Box>
-                <Dropdown
-                    label="Quality Settings"
-                    options={["Low", "Medium", "High"] as QualitySetting[]}
-                    defaultValue={PreferencesSystem.getGlobalPreference<QualitySetting>("QualitySettings")}
-                    onSelect={selected => {
-                        setQualitySettings(selected)
-                        World.SceneRenderer.ChangeLighting(selected)
-                    }}
-                />
                 {Spacer(5)}
                 <Box alignSelf={"center"}>
                     <Button value="Theme Editor" onClick={() => openModal("theme-editor")} />
diff --git a/fission/src/ui/panels/GraphicsSettingsPanel.tsx b/fission/src/ui/panels/GraphicsSettingsPanel.tsx
new file mode 100644
index 0000000000..e40a0aaa9d
--- /dev/null
+++ b/fission/src/ui/panels/GraphicsSettingsPanel.tsx
@@ -0,0 +1,159 @@
+import Panel, { PanelPropsImpl } from "../components/Panel"
+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"
+
+const MIN_LIGHT_INTENSITY = 1
+const MAX_LIGHT_INTENSITY = 10
+
+const MIN_MAX_FAR = 10
+const MAX_MAX_FAR = 100
+
+const MIN_CASCADES = 3
+const MAX_CASCADES = 8
+
+const MIN_SHADOW_MAP_SIZE = 1024
+
+const GraphicsSettings: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
+    const [reload, setReload] = useState<boolean>(false)
+
+    const [lightIntensity, setLightIntensity] = useState<number>(
+        PreferencesSystem.getGraphicsPreferences().lightIntensity
+    )
+    const [fancyShadows, setFancyShadows] = useState<boolean>(PreferencesSystem.getGraphicsPreferences().fancyShadows)
+    const [maxFar, setMaxFar] = useState<number>(PreferencesSystem.getGraphicsPreferences().maxFar)
+    const [cascades, setCascades] = useState<number>(PreferencesSystem.getGraphicsPreferences().cascades)
+    const [shadowMapSize, setShadowMapSize] = useState<number>(PreferencesSystem.getGraphicsPreferences().shadowMapSize)
+    const [antiAliasing, setAntiAliasing] = useState<boolean>(PreferencesSystem.getGraphicsPreferences().antiAliasing)
+
+    return (
+        <Panel
+            name={"Graphics Settings"}
+            icon={SynthesisIcons.Gear}
+            panelId={panelId}
+            openLocation={openLocation}
+            sidePadding={sidePadding}
+            onAccept={() => {
+                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()
+
+                if (reload) window.location.reload()
+            }}
+            onCancel={() => {
+                World.SceneRenderer.ChangeLighting(PreferencesSystem.getGraphicsPreferences().fancyShadows)
+            }}
+        >
+            <div className="flex overflow-y-auto flex-col gap-2 bg-background-secondary rounded-md p-2 min-w-[22vw]">
+                <Slider
+                    min={MIN_LIGHT_INTENSITY}
+                    max={MAX_LIGHT_INTENSITY}
+                    value={lightIntensity}
+                    label="Light Intensity"
+                    format={{ maximumFractionDigits: 2 }}
+                    onChange={(_, value: number | number[]) => {
+                        setLightIntensity(value as number)
+                        World.SceneRenderer.setLightIntensity(value as number)
+                    }}
+                    step={0.25}
+                />
+                <Checkbox
+                    label="Fancy Shadows"
+                    defaultState={fancyShadows}
+                    onClick={checked => {
+                        setFancyShadows(checked)
+                        World.SceneRenderer.ChangeLighting(checked)
+                    }}
+                />
+                {fancyShadows ? (
+                    <>
+                        <Slider
+                            min={MIN_MAX_FAR}
+                            max={MAX_MAX_FAR}
+                            value={maxFar}
+                            label="Max Far"
+                            onChange={(_, value: number | number[]) => {
+                                setMaxFar(value as number)
+                                World.SceneRenderer.changeCSMSettings({
+                                    maxFar: value as number,
+
+                                    lightIntensity: lightIntensity,
+                                    fancyShadows: fancyShadows,
+                                    cascades: cascades,
+                                    shadowMapSize: shadowMapSize,
+                                    antiAliasing: antiAliasing,
+                                })
+                            }}
+                            step={1}
+                        />
+                        <Slider
+                            min={MIN_CASCADES}
+                            max={MAX_CASCADES}
+                            value={cascades}
+                            label="Cascade Count"
+                            onChange={(_, value: number | number[]) => {
+                                setCascades(value as number)
+                                World.SceneRenderer.changeCSMSettings({
+                                    cascades: value as number,
+
+                                    maxFar: maxFar,
+                                    lightIntensity: lightIntensity,
+                                    fancyShadows: fancyShadows,
+                                    shadowMapSize: shadowMapSize,
+                                    antiAliasing: antiAliasing,
+                                })
+                            }}
+                            step={1}
+                        />
+                        <Slider
+                            min={MIN_SHADOW_MAP_SIZE}
+                            max={World.SceneRenderer.renderer.capabilities.maxTextureSize}
+                            value={shadowMapSize}
+                            label="Shadow Map Size"
+                            onChange={(_, value: number | number[]) => {
+                                setShadowMapSize(value as number)
+                                World.SceneRenderer.changeCSMSettings({
+                                    shadowMapSize: value as number,
+                                    maxFar: maxFar,
+                                    lightIntensity: lightIntensity,
+                                    fancyShadows: fancyShadows,
+                                    cascades: cascades,
+                                    antiAliasing: antiAliasing,
+                                })
+                            }}
+                            step={1024}
+                        />
+                    </>
+                ) : (
+                    <></>
+                )}
+                <div className="flex items-center justify-center mt-1 mb-0.5 mx-[5%]">
+                    <SectionLabel size={LabelSize.Medium} className="text-center">
+                        Hot-reload Settings
+                    </SectionLabel>
+                </div>
+                <SectionDivider />
+                <Checkbox
+                    label="Anti-Aliasing"
+                    defaultState={antiAliasing}
+                    onClick={checked => {
+                        // saving the new preference
+                        setAntiAliasing(checked)
+                        setReload(true)
+                    }}
+                />
+            </div>
+        </Panel>
+    )
+}
+
+export default GraphicsSettings
diff --git a/fission/src/ui/panels/QualitySettingsPanel.tsx b/fission/src/ui/panels/QualitySettingsPanel.tsx
deleted file mode 100644
index 9be6738f2c..0000000000
--- a/fission/src/ui/panels/QualitySettingsPanel.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { useState } from "react"
-import Box from "@mui/material/Box"
-import Panel, { PanelPropsImpl } from "../components/Panel"
-import { SectionDivider, SectionLabel, Spacer, SynthesisIcons } from "../components/StyledComponents"
-import Checkbox from "@/components/Checkbox"
-import PreferencesSystem from "@/systems/preferences/PreferencesSystem"
-import { LabelSize } from "../components/Label"
-
-const QualitySettingsPanel: React.FC<PanelPropsImpl> = ({ panelId, openLocation, sidePadding }) => {
-    const [isTooltipVisible, setIsTooltipVisible] = useState(false)
-
-    const handleMouseEnter = () => {
-        setIsTooltipVisible(true)
-    }
-
-    const handleMouseLeave = () => {
-        setIsTooltipVisible(false)
-    }
-
-    return (
-        <Panel
-            name={"Quality Settings"}
-            icon={SynthesisIcons.Gear}
-            panelId={panelId}
-            openLocation={openLocation}
-            sidePadding={sidePadding}
-            onAccept={() => {
-                PreferencesSystem.savePreferences()
-
-                window.location.reload()
-            }}
-        >
-            <Box display="flex" flexDirection={"column"}>
-                <Checkbox
-                    label="Fancy Shadows"
-                    defaultState={PreferencesSystem.getQualityPreferences().fancyShadows}
-                    onClick={checked => {
-                        console.log("Fancy Shadows", checked)
-                    }}
-                />
-                {Spacer(5)}
-                <div className="flex items-center justify-center mt-1 mb-0.5 mx-[5%]">
-                    <SectionLabel size={LabelSize.Medium} className="text-center">
-                        Hot-reload Settings
-                    </SectionLabel>
-                    <div
-                        className="relative inline-block ml-2"
-                        onMouseEnter={handleMouseEnter}
-                        onMouseLeave={handleMouseLeave}
-                    >
-                        {SynthesisIcons.Info}
-                        {/* <span className="cursor-pointer">ℹ️</span> */}
-                        {isTooltipVisible && (
-                            <div className="absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 w-48 bg-gray-600 bg-opacity-100 text-white text-center rounded-md px-3 py-2 opacity-90 z-10">
-                                If these settings are changed then the game will reload to apply the changes, removing
-                                all of your robots and fields from the scene.
-                            </div>
-                        )}
-                    </div>
-                </div>
-                {Spacer(5)}
-                <SectionDivider />
-                {Spacer(5)}
-                <Checkbox
-                    label="Anti-Aliasing"
-                    defaultState={PreferencesSystem.getQualityPreferences().antiAliasing}
-                    onClick={checked => {
-                        // saving the new preference
-                        PreferencesSystem.getQualityPreferences().antiAliasing = checked
-                    }}
-                />
-            </Box>
-        </Panel>
-    )
-}
-
-export default QualitySettingsPanel