feat(graphic user settings): move shadow map resolution to graphic settings

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

@@ -35,6 +35,8 @@ import Text from '@etherealengine/client-core/src/common/components/Text'
 import { AuthService, AuthState } from '@etherealengine/client-core/src/user/services/AuthService'
 import { defaultThemeModes, defaultThemeSettings } from '@etherealengine/common/src/constants/DefaultThemeSettings'
 import capitalizeFirstLetter from '@etherealengine/common/src/utils/capitalizeFirstLetter'
+import InputGroup from '@etherealengine/editor/src/components/inputs/InputGroup'
+import SelectInput from '@etherealengine/editor/src/components/inputs/SelectInput'
 import { AudioSettingAction, AudioState } from '@etherealengine/engine/src/audio/AudioState'
 import {
   AvatarAxesControlScheme,
@@ -58,6 +60,29 @@ import { UserMenus } from '../../../UserUISystem'
 import styles from '../index.module.scss'
 import { PopupMenuServices } from '../PopupMenuService'
 
+const ShadowMapResolutionOptions = [
+  {
+    label: '256px',
+    value: 256
+  },
+  {
+    label: '512px',
+    value: 512
+  },
+  {
+    label: '1024px',
+    value: 1024
+  },
+  {
+    label: '2048px',
+    value: 2048
+  },
+  {
+    label: '4096px (not recommended)',
+    value: 4096
+  }
+]
+
 const chromeDesktop = !isMobile && /chrome/i.test(navigator.userAgent)
 
 type Props = {
@@ -458,6 +483,17 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
               onChange={handleQualityLevelChange}
             />
 
+            <InputGroup
+              name="Shadow Map Resolution"
+              label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}
+            >
+              <SelectInput
+                options={ShadowMapResolutionOptions}
+                value={rendererState.shadowMapResolution.value}
+                onChange={(resolution: number) => rendererState.shadowMapResolution.set(resolution)}
+              />
+            </InputGroup>
+
             <Grid container spacing={{ xs: 0, sm: 2 }}>
               <Grid item xs={12} sm={4}>
                 <InputCheck

packages/editor/src/components/properties/LightShadowProperties.tsx

@@ -32,36 +32,9 @@ import { Component, useComponent } from '@etherealengine/engine/src/ecs/function
 import BooleanInput from '../inputs/BooleanInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'
-import SelectInput from '../inputs/SelectInput'
-import { updateProperties, updateProperty } from './Util'
+import { updateProperty } from './Util'
 
-/**
- *  Array containing options for shadow resolution
- */
-const ShadowMapResolutionOptions = [
-  {
-    label: '256px',
-    value: 256
-  },
-  {
-    label: '512px',
-    value: 512
-  },
-  {
-    label: '1024px',
-    value: 1024
-  },
-  {
-    label: '2048px',
-    value: 2048
-  },
-  {
-    label: '4096px (not recommended)',
-    value: 4096
-  }
-]
-
-//creating properties for LightShadowProperties component
+/**creating properties for LightShadowProperties component */
 type LightShadowPropertiesProps = {
   entity: Entity
   comp: Component<any, any>
@@ -70,31 +43,17 @@ type LightShadowPropertiesProps = {
 /**
  * OnChangeShadowMapResolution used to customize properties of LightShadowProperties
  * Used with LightNodeEditors.
- *
- * @type {[class component]}
  */
 export const LightShadowProperties = (props: LightShadowPropertiesProps) => {
   const { t } = useTranslation()
 
-  const changeShadowMapResolution = (resolution) => {
-    updateProperties(props.comp, { shadowMapResolution: resolution })
-  }
-
   const lightComponent = useComponent(props.entity, props.comp).value as any
 
   return (
     <>
       <InputGroup name="Cast Shadows" label={t('editor:properties.directionalLight.lbl-castShadows')}>
         <BooleanInput value={lightComponent.castShadow} onChange={updateProperty(props.comp, 'castShadow')} />
       </InputGroup>
-      <InputGroup name="Shadow Map Resolution" label={t('editor:properties.directionalLight.lbl-shadowmapResolution')}>
-        <SelectInput
-          key={props.entity}
-          options={ShadowMapResolutionOptions}
-          value={lightComponent.shadowMapResolution?.x}
-          onChange={changeShadowMapResolution}
-        />
-      </InputGroup>
       <NumericInputGroup
         name="Shadow Bias"
         label={t('editor:properties.directionalLight.lbl-shadowBias')}

packages/engine/src/renderer/RendererState.ts

@@ -43,7 +43,8 @@ export const RendererState = defineState({
     nodeHelperVisibility: false,
     gridVisibility: false,
     gridHeight: 0,
-    forceBasicMaterials: false
+    forceBasicMaterials: false,
+    shadowMapResolution: 256
   }),
   onCreate: (store, state) => {
     syncStateWithLocalStorage(RendererState, [

packages/engine/src/scene/components/DirectionalLightComponent.ts

@@ -52,7 +52,6 @@ export const DirectionalLightComponent = defineComponent({
       color: new Color(),
       intensity: 1,
       castShadow: false,
-      shadowMapResolution: 512,
       shadowBias: -0.00001,
       shadowRadius: 1,
       cameraFar: 2000,
@@ -69,9 +68,6 @@ export const DirectionalLightComponent = defineComponent({
     if (matches.number.test(json.cameraFar)) component.cameraFar.set(json.cameraFar)
     if (matches.boolean.test(json.castShadow)) component.castShadow.set(json.castShadow)
     /** backwards compat */
-    if (matches.array.test(json.shadowMapResolution))
-      component.shadowMapResolution.set((json.shadowMapResolution as any)[0])
-    if (matches.number.test(json.shadowMapResolution)) component.shadowMapResolution.set(json.shadowMapResolution)
     if (matches.number.test(json.shadowBias)) component.shadowBias.set(json.shadowBias)
     if (matches.number.test(json.shadowRadius)) component.shadowRadius.set(json.shadowRadius)
     if (matches.number.test(json.useInCSM)) component.useInCSM.set(json.useInCSM)
@@ -86,7 +82,6 @@ export const DirectionalLightComponent = defineComponent({
     component.light.value.shadow.camera.far = component.cameraFar.value
     component.light.value.shadow.bias = component.shadowBias.value
     component.light.value.shadow.radius = component.shadowRadius.value
-    component.light.value.shadow.mapSize.set(component.shadowMapResolution.value, component.shadowMapResolution.value)
   },
 
   toJSON: (entity, component) => {
@@ -95,7 +90,6 @@ export const DirectionalLightComponent = defineComponent({
       intensity: component.intensity.value,
       cameraFar: component.cameraFar.value,
       castShadow: component.castShadow.value,
-      shadowMapResolution: component.shadowMapResolution.value,
       shadowBias: component.shadowBias.value,
       shadowRadius: component.shadowRadius.value,
       useInCSM: component.useInCSM.value
@@ -109,7 +103,8 @@ export const DirectionalLightComponent = defineComponent({
 
   reactor: function () {
     const entity = useEntityContext()
-    const debugEnabled = useHookstate(getMutableState(RendererState).nodeHelperVisibility)
+    const renderState = useHookstate(getMutableState(RendererState))
+    const debugEnabled = renderState.nodeHelperVisibility
     const light = useComponent(entity, DirectionalLightComponent)
 
     useEffect(() => {
@@ -137,14 +132,17 @@ export const DirectionalLightComponent = defineComponent({
     }, [light.shadowRadius])
 
     useEffect(() => {
-      if (light.light.value.shadow.mapSize.x !== light.shadowMapResolution.value) {
-        light.light.value.shadow.mapSize.set(light.shadowMapResolution.value, light.shadowMapResolution.value)
+      if (light.light.value.shadow.mapSize.x !== renderState.shadowMapResolution.value) {
+        light.light.value.shadow.mapSize.set(
+          renderState.shadowMapResolution.value,
+          renderState.shadowMapResolution.value
+        )
         light.light.value.shadow.map?.dispose()
         light.light.value.shadow.map = null as any
         light.light.value.shadow.camera.updateProjectionMatrix()
         light.light.value.shadow.needsUpdate = true
       }
-    }, [light.shadowMapResolution])
+    }, [renderState.shadowMapResolution])
 
     useEffect(() => {
       if (debugEnabled.value && !light.helper.value) {

packages/engine/src/scene/components/PointLightComponent.ts

@@ -50,7 +50,6 @@ export const PointLightComponent = defineComponent({
       range: 0,
       decay: 2,
       castShadow: false,
-      shadowMapResolution: 256,
       shadowBias: 0.5,
       shadowRadius: 1,
       light,
@@ -67,9 +66,6 @@ export const PointLightComponent = defineComponent({
     if (matches.number.test(json.decay)) component.decay.set(json.decay)
     if (matches.boolean.test(json.castShadow)) component.castShadow.set(json.castShadow)
     /** backwards compat */
-    if (matches.array.test(json.shadowMapResolution))
-      component.shadowMapResolution.set((json.shadowMapResolution as any)[0])
-    if (matches.number.test(json.shadowMapResolution)) component.shadowMapResolution.set(json.shadowMapResolution)
     if (matches.number.test(json.shadowBias)) component.shadowBias.set(json.shadowBias)
     if (matches.number.test(json.shadowRadius)) component.shadowRadius.set(json.shadowRadius)
   },
@@ -81,7 +77,6 @@ export const PointLightComponent = defineComponent({
       range: component.range.value,
       decay: component.decay.value,
       castShadow: component.castShadow.value,
-      shadowMapResolution: component.shadowMapResolution.value,
       shadowBias: component.shadowBias.value,
       shadowRadius: component.shadowRadius.value
     }
@@ -94,7 +89,8 @@ export const PointLightComponent = defineComponent({
 
   reactor: function () {
     const entity = useEntityContext()
-    const debugEnabled = useHookstate(getMutableState(RendererState).nodeHelperVisibility)
+    const renderState = useHookstate(getMutableState(RendererState))
+    const debugEnabled = renderState.nodeHelperVisibility
     const light = useComponent(entity, PointLightComponent)
 
     useEffect(() => {
@@ -126,14 +122,17 @@ export const PointLightComponent = defineComponent({
     }, [light.shadowRadius])
 
     useEffect(() => {
-      if (light.light.value.shadow.mapSize.x !== light.shadowMapResolution.value) {
-        light.light.value.shadow.mapSize.set(light.shadowMapResolution.value, light.shadowMapResolution.value)
+      if (light.light.value.shadow.mapSize.x !== renderState.shadowMapResolution.value) {
+        light.light.value.shadow.mapSize.set(
+          renderState.shadowMapResolution.value,
+          renderState.shadowMapResolution.value
+        )
         light.light.value.shadow.map?.dispose()
         light.light.value.shadow.map = null as any
         light.light.value.shadow.camera.updateProjectionMatrix()
         light.light.value.shadow.needsUpdate = true
       }
-    }, [light.shadowMapResolution])
+    }, [renderState.shadowMapResolution])
 
     useEffect(() => {
       if (debugEnabled.value && !light.helper.value) {

packages/engine/src/scene/components/SpotLightComponent.ts

@@ -55,7 +55,6 @@ export const SpotLightComponent = defineComponent({
       angle: Math.PI / 3,
       penumbra: 1,
       castShadow: false,
-      shadowMapResolution: 256,
       shadowBias: 0.00001,
       shadowRadius: 1,
       light,
@@ -76,9 +75,6 @@ export const SpotLightComponent = defineComponent({
     if (matches.number.test(json.penumbra)) component.angle.set(json.penumbra)
     if (matches.boolean.test(json.castShadow)) component.castShadow.set(json.castShadow)
     /** backwards compat */
-    if (matches.array.test(json.shadowMapResolution))
-      component.shadowMapResolution.set((json.shadowMapResolution as any)[0])
-    if (matches.number.test(json.shadowMapResolution)) component.shadowMapResolution.set(json.shadowMapResolution)
     if (matches.number.test(json.shadowBias)) component.shadowBias.set(json.shadowBias)
     if (matches.number.test(json.shadowRadius)) component.shadowRadius.set(json.shadowRadius)
   },
@@ -92,7 +88,6 @@ export const SpotLightComponent = defineComponent({
       angle: component.angle.value,
       penumbra: component.penumbra.value,
       castShadow: component.castShadow.value,
-      shadowMapResolution: component.shadowMapResolution.value,
       shadowBias: component.shadowBias.value,
       shadowRadius: component.shadowRadius.value
     }
@@ -105,7 +100,8 @@ export const SpotLightComponent = defineComponent({
 
   reactor: function () {
     const entity = useEntityContext()
-    const debugEnabled = useHookstate(getMutableState(RendererState).nodeHelperVisibility)
+    const renderState = useHookstate(getMutableState(RendererState))
+    const debugEnabled = renderState.nodeHelperVisibility
     const light = useComponent(entity, SpotLightComponent)
 
     useEffect(() => {
@@ -147,14 +143,17 @@ export const SpotLightComponent = defineComponent({
     }, [light.castShadow])
 
     useEffect(() => {
-      if (light.light.value.shadow.mapSize.x !== light.shadowMapResolution.value) {
-        light.light.value.shadow.mapSize.set(light.shadowMapResolution.value, light.shadowMapResolution.value)
+      if (light.light.value.shadow.mapSize.x !== renderState.shadowMapResolution.value) {
+        light.light.value.shadow.mapSize.set(
+          renderState.shadowMapResolution.value,
+          renderState.shadowMapResolution.value
+        )
         light.light.value.shadow.map?.dispose()
         light.light.value.shadow.map = null as any
         light.light.value.shadow.camera.updateProjectionMatrix()
         light.light.value.shadow.needsUpdate = true
       }
-    }, [light.shadowMapResolution])
+    }, [renderState.shadowMapResolution])
 
     useEffect(() => {
       if (debugEnabled.value && !light.helper.value) {