IR-1439-Scene-Render-Quality-Dropping-Unexpectedly-with-Automatic-Ren…

…der-Settings (#10246)

* Start of reworking render quality change parameters

* wip

* Smoothing fix

* Single source of truth for quality tier, csm update frustrum quality flag

* Override performance tier with user settings, render scale as performance setting

* Store any value that can be serialized

* Accumulator instead of timeout

* Reactive cameraOcclusion in model component

* Measure logic behind automatic flag

* Better tracking of GPU status

* enabled flag

* remove unused variables

* remove unused variable

---------

Co-authored-by: HexaField <[email protected]>

packages/client-core/i18n/en/user.json

@@ -163,7 +163,7 @@
       "lbl-left-control-scheme": "Left Control Scheme",
       "lbl-right-control-scheme": "Right Control Scheme",
       "lbl-preferred-hand": "Preferred Hand",
-      "lbl-resolution": "Resolution",
+      "lbl-quality": "Quality Preset",
       "lbl-shadow": "Shadows",
       "lbl-pp": "Post Processing",
       "lbl-pbr": "Full PBR",

packages/client-core/src/user/components/UserMenu/menus/SettingMenu.tsx

@@ -455,9 +455,9 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
           <>
             <InputSlider
               icon={<Icon type="BlurLinear" sx={{ ml: '-3px' }} />}
-              label={t('user:usermenu.setting.lbl-resolution')}
+              label={t('user:usermenu.setting.lbl-quality')}
               max={5}
-              min={1}
+              min={0}
               step={1}
               value={rendererState.qualityLevel.value}
               sx={{ mt: 4 }}

packages/engine/src/scene/components/ModelComponent.tsx

@@ -41,10 +41,7 @@ import { CameraComponent } from '@etherealengine/spatial/src/camera/components/C
 import { RendererComponent } from '@etherealengine/spatial/src/renderer/WebGLRendererSystem'
 import { GroupComponent, addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { MeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
-import {
-  ObjectLayerComponents,
-  ObjectLayerMaskComponent
-} from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
+import { ObjectLayerMaskComponent } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
 import { ObjectLayers } from '@etherealengine/spatial/src/renderer/constants/ObjectLayers'
 import {
   EntityTreeComponent,
@@ -118,14 +115,10 @@ function ModelReactor() {
   const [gltf, error] = useGLTF(modelComponent.src.value, entity)
 
   useEffect(() => {
-    const occlusion =
-      !!modelComponent?.cameraOcclusion?.value || hasComponent(entity, ObjectLayerComponents[ObjectLayers.Camera])
-    if (!occlusion) return
-    ObjectLayerMaskComponent.enableLayer(entity, ObjectLayers.Camera)
-    return () => {
-      ObjectLayerMaskComponent.disableLayer(entity, ObjectLayers.Camera)
-    }
-  }, [modelComponent?.cameraOcclusion?.value])
+    const occlusion = modelComponent.cameraOcclusion.value
+    if (!occlusion) ObjectLayerMaskComponent.disableLayer(entity, ObjectLayers.Camera)
+    else ObjectLayerMaskComponent.enableLayer(entity, ObjectLayers.Camera)
+  }, [modelComponent.cameraOcclusion])
 
   useEffect(() => {
     if (!error) return

packages/hyperflux/functions/StateFunctions.ts

@@ -147,8 +147,10 @@ export function syncStateWithLocalStorage<S, E extends Identifiable>(
       onSet: (state, desc) => {
         for (const key of keys) {
           const storageKey = `${stateNamespaceKey}.${rootState.identifier}.${key}`
-          if (!rootState[key] || !rootState[key].get(NO_PROXY)) localStorage.removeItem(storageKey)
-          else localStorage.setItem(storageKey, JSON.stringify(rootState[key].get(NO_PROXY)))
+          const value = rootState[key]?.get(NO_PROXY)
+          // We should still store flags that have been set to false or null
+          if (value === undefined) localStorage.removeItem(storageKey)
+          else localStorage.setItem(storageKey, JSON.stringify(value))
         }
       }
     } as any

packages/spatial/src/renderer/PerformanceState.test.tsx

@@ -83,12 +83,11 @@ describe('PerformanceState', () => {
       mockRenderer,
       () => {
         const performanceState = getState(PerformanceState)
-        const budgets = performanceState.budgets
-        assert(budgets.max3DTextureSize === 1000)
-        assert(budgets.maxBufferSize === 54000000000)
-        assert(budgets.maxIndices === 8000)
-        assert(budgets.maxTextureSize === 2000)
-        assert(budgets.maxVerticies === 10000)
+        assert(performanceState.max3DTextureSize === 1000)
+        assert(performanceState.maxBufferSize === 54000000000)
+        assert(performanceState.maxIndices === 8000)
+        assert(performanceState.maxTextureSize === 2000)
+        assert(performanceState.maxVerticies === 10000)
         done()
       },
       { renderer: 'nvidia corporation, nvidia geforce rtx 3070/pcie/sse2, ' }
@@ -176,8 +175,9 @@ describe('PerformanceState', () => {
     const { rerender, unmount } = render(<Reactor />)
     const clock = sinon.useFakeTimers()
     act(async () => {
+      // Decrementing performance state twice consecutively should only have one reactive change with the value off by 1 instead of 2
+      PerformanceManager.decrementGPUPerformance()
       PerformanceManager.decrementGPUPerformance()
-      PerformanceManager.incrementGPUPerformance()
       clock.tick(3000)
       rerender(<Reactor />)
       clock.restore()