fix scene metadata

packages/client-core/src/components/UserMediaWindow/index.tsx

@@ -21,7 +21,6 @@ import { useAuthState } from '@etherealengine/client-core/src/user/services/Auth
 import { useNetworkUserState } from '@etherealengine/client-core/src/user/services/NetworkUserService'
 import { PeerID } from '@etherealengine/common/src/interfaces/PeerID'
 import { AudioSettingAction, AudioState, useAudioState } from '@etherealengine/engine/src/audio/AudioState'
-import { getMediaSceneMetadataState } from '@etherealengine/engine/src/audio/systems/MediaSystem'
 import { isMobile } from '@etherealengine/engine/src/common/functions/isMobile'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'

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

@@ -456,8 +456,7 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
               <Grid item xs={12} sm={4}>
                 <InputCheck
                   label={t('user:usermenu.setting.lbl-pp')}
-                  checked={postprocessingSettings.value && rendererState.usePostProcessing.value}
-                  disabled={!postprocessingSettings.value}
+                  checked={rendererState.usePostProcessing.value}
                   onChange={handlePostProcessingCheckbox}
                 />
               </Grid>

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

@@ -5,9 +5,12 @@ import { Color } from 'three'
 
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { configureEffectComposer } from '@etherealengine/engine/src/renderer/functions/configureEffectComposer'
-import { getPostProcessingSceneMetadataState } from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
+import {
+  getPostProcessingSceneMetadataState,
+  PostProcessingSettingsState
+} from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
 import { Effects } from '@etherealengine/engine/src/scene/constants/PostProcessing'
-import { useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
@@ -235,8 +238,7 @@ export const PostProcessingSettingsEditor = () => {
   const { t } = useTranslation()
 
   const [openSettings, setOpenSettings] = useState(false)
-  const postprocessing = useHookstate(getPostProcessingSceneMetadataState())
-  if (!postprocessing.value) return null
+  const postprocessing = useHookstate(getMutableState(PostProcessingSettingsState))
 
   const getPropertyValue = (keys: string[]): any => {
     if (keys.length < 1) return null
@@ -377,7 +379,7 @@ export const PostProcessingSettingsEditor = () => {
             checked={postprocessing.effects[effect]?.isActive?.value}
           />
           <span style={{ color: 'var(--textColor)' }}>{effect}</span>
-          {postprocessing.effects[effect].isActive.value && <div>{renderEffectsTypes(effect)}</div>}
+          {postprocessing.effects[effect]?.isActive?.value && <div>{renderEffectsTypes(effect)}</div>}
         </div>
       )
     })

packages/engine/src/audio/systems/MediaSystem.ts

@@ -141,6 +141,7 @@ const reactor = () => {
     getMutableState(SceneState).sceneMetadataRegistry.merge({
       [MediaSceneMetadataLabel]: {
         data: () => getState(MediaSettingsState),
+        dataState: () => getMutableState(MediaSettingsState),
         default: DefaultMediaState
       }
     })

packages/engine/src/camera/systems/CameraSystem.tsx

@@ -339,6 +339,7 @@ const reactor = () => {
     getMutableState(SceneState).sceneMetadataRegistry.merge({
       [CameraSceneMetadataLabel]: {
         data: () => getState(CameraSettingsState),
+        dataState: () => getMutableState(CameraSettingsState),
         default: DefaultCameraState
       }
     })

packages/engine/src/ecs/classes/EngineState.ts

@@ -34,7 +34,8 @@ export const EngineState = defineState({
     publicPath: '',
     transformsNeedSorting: true,
     isBot: false,
-    isEditor: false
+    isEditor: false,
+    systemPerformanceProfilingEnabled: false
   }
 })
 

packages/engine/src/ecs/classes/Scene.ts

@@ -1,14 +1,15 @@
 import { Color, Texture } from 'three'
 
 import { SceneData } from '@etherealengine/common/src/interfaces/SceneInterface'
-import { defineState } from '@etherealengine/hyperflux'
+import { defineState, State } from '@etherealengine/hyperflux'
 
 import { UndefinedEntity } from './Entity'
 
 /** @todo support multiple scenes */
 
 export type SceneMetadata<T> = {
   data: () => T
+  dataState: () => State<T>
   default: any
 }
 

packages/engine/src/renderer/WebGLRendererSystem.ts

@@ -250,12 +250,7 @@ export class EngineRenderer {
        * Editor should always use post processing, even if no postprocessing schema is in the scene,
        *   it still uses post processing for effects such as outline.
        */
-      if (state.usePostProcessing || engineState.isEditor) {
-        this.effectComposer.render(delta)
-      } else {
-        this.renderer.autoClear = true
-        this.renderer.render(Engine.instance.scene, Engine.instance.camera)
-      }
+      this.effectComposer.render(delta)
     }
   }
 
@@ -307,7 +302,7 @@ export const RenderSettingsState = defineState({
 })
 
 export const PostProcessingSettingsState = defineState({
-  name: 'RenderSettingsState',
+  name: 'PostProcessingSettingsState',
   initial: DefaultPostProcessingState
 })
 
@@ -333,10 +328,12 @@ const reactor = () => {
     getMutableState(SceneState).sceneMetadataRegistry.merge({
       [RendererSceneMetadataLabel]: {
         data: () => getState(RenderSettingsState),
+        dataState: () => getMutableState(RenderSettingsState),
         default: DefaultRenderSettingsState
       },
       [PostProcessingSceneMetadataLabel]: {
         data: () => getState(PostProcessingSettingsState),
+        dataState: () => getMutableState(PostProcessingSettingsState),
         default: DefaultPostProcessingState
       }
     })

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

@@ -1,6 +1,5 @@
 import { defineComponent } from '../../ecs/functions/ComponentFunctions'
 
 export const SceneTagComponent = defineComponent({
-  name: 'SceneTagComponent',
-  jsonID: 'scene-tag'
+  name: 'SceneTagComponent'
 })

packages/engine/src/scene/systems/FogSystem.tsx

@@ -171,6 +171,7 @@ const reactor = ({ root }: ReactorProps) => {
     getMutableState(SceneState).sceneMetadataRegistry.merge({
       [FogSceneMetadataLabel]: {
         data: () => getState(FogSettingState),
+        dataState: () => getMutableState(FogSettingState),
         default: DefaultFogState
       }
     })

packages/engine/src/scene/systems/SceneLoadingSystem.tsx

@@ -275,7 +275,7 @@ export const updateSceneFromJSON = async () => {
     for (const [key, val] of Object.entries(sceneData.scene.metadata)) {
       const metadata = sceneState.sceneMetadataRegistry[key] as SceneMetadata<any>
       if (!metadata) continue
-      // metadata.data.set(merge({}, metadata.data.value, val))
+      metadata.dataState().set(merge({}, metadata.data().value, val))
     }
   }
 
@@ -340,7 +340,6 @@ export const deserializeSceneEntity = (entity: Entity, sceneEntity: EntityJson):
   for (const C of componentsToRemove) {
     if (entity === getState(SceneState).sceneEntity) if (C === VisibleComponent) continue
     if (C === GroupComponent || C === TransformComponent) continue
-    console.log('removing component', C.name, C, entity)
     removeComponent(entity, C)
   }
   for (const component of sceneEntity.components) {

packages/hyperflux/functions/StateFunctions.ts

@@ -18,17 +18,17 @@ export type StateDefinition<S> = {
   onCreate?: (store: HyperStore, state: State<S>) => void
 }
 
+const StateDefinitions = new Set<string>()
+
 export function defineState<S>(definition: StateDefinition<S>) {
+  if (StateDefinitions.has(definition.name)) throw new Error(`State ${definition.name} already defined`)
+  StateDefinitions.add(definition.name)
   return definition as StateDefinition<S> & { _TYPE: S }
 }
 
 export function registerState<S>(StateDefinition: StateDefinition<S>, store = HyperFlux.store) {
   logger.info(`registerState ${StateDefinition.name}`)
-  if (StateDefinition.name in store.stateMap) {
-    const err = new Error(`State ${StateDefinition.name} has already been registered in Store`)
-    logger.error(err)
-    throw err
-  }
+
   const initial =
     typeof StateDefinition.initial === 'function'
       ? (StateDefinition.initial as Function)()

packages/hyperflux/tests/hyperflux.test.ts

@@ -413,20 +413,20 @@ describe('Hyperflux Unit Tests', () => {
 
   it('should be able to define state and register it to a store', () => {
     const HospitalityState = defineState({
-      name: 'hospitality',
+      name: 'test.hospitality.0',
       initial: () => ({
         greetingCount: 0,
         lastGreeting: null as string | null
       })
     })
     const store = createHyperStore({ getDispatchId: () => 'id', getDispatchTime: () => Date.now() })
     registerState(HospitalityState, store)
-    assert(store.stateMap.hospitality)
+    assert(store.stateMap['test.hospitality.0'])
   })
 
   it('should be able to optionally have an onCreate callback', () => {
     const HospitalityState = defineState({
-      name: 'hospitality',
+      name: 'test.hospitality.1',
       initial: () => ({
         create: false
       }),
@@ -443,22 +443,22 @@ describe('Hyperflux Unit Tests', () => {
 
   it('should be able to get immutable registered state', () => {
     const HospitalityState = defineState({
-      name: 'hospitality',
+      name: 'test.hospitality.2',
       initial: () => ({
         greetingCount: 0,
         lastGreeting: null as string | null
       })
     })
     const store = createHyperStore({ getDispatchId: () => 'id', getDispatchTime: () => Date.now() })
     registerState(HospitalityState, store)
-    assert(store.stateMap.hospitality)
+    assert(store.stateMap['test.hospitality.2'])
     const hospitality = getMutableState(HospitalityState, store).value
     assert.equal(hospitality.greetingCount, 0)
   })
 
   it('should be able to mutate registered state inside a receptor', () => {
     const HospitalityState = defineState({
-      name: 'hospitality',
+      name: 'test.hospitality.3',
       initial: () => ({
         greetingCount: 0,
         lastGreeting: null as string | null
@@ -472,7 +472,7 @@ describe('Hyperflux Unit Tests', () => {
 
     const store = createHyperStore({ getDispatchId: () => 'id', getDispatchTime: () => Date.now() })
     registerState(HospitalityState, store)
-    assert(store.stateMap.hospitality)
+    assert(store.stateMap['test.hospitality.3'])
 
     addActionReceptor((action) => {
       matches(action).when(greet.matches, () => {})