Convert Scene Metadata To Components (#7916)

* add script to migrate scenes, convert scene metadata to components

* refactor editors and cleanup

* fix fixed pipeline

* update test

package.json

@@ -81,6 +81,7 @@
     "delete-old-s3-files": "cross-env APP_ENV=production ts-node --swc scripts/delete-old-s3-files.ts",
     "push-client-dist-to-s3": "cross-env APP_ENV=production ts-node --swc scripts/push-client-to-s3.ts",
     "copy-client-to-localstorage": "cross-env APP_ENV=production ts-node --swc scripts/copy-client-to-localstorage.ts",
+    "resave-all-scenes": "ts-node --swc scripts/resave-all-scenes.ts",
     "start": "npm run dev",
     "test": "cross-env TEST=true lerna run test",
     "test-e2e": "ts-node --swc scripts/run_e2e_tests.ts",

packages/client-core/src/admin/common/variables/scene.ts

@@ -1,5 +1,3 @@
-import { SceneData, SceneMetadata } from '@etherealengine/common/src/interfaces/SceneInterface'
-
 export interface SceneColumn {
   id: 'name' | 'description' | 'type' | 'entity' | 'version' | 'action'
   label: string

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

@@ -21,11 +21,6 @@ import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { EngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene'
 import { RendererState } from '@etherealengine/engine/src/renderer/RendererState'
-import {
-  getPostProcessingSceneMetadataState,
-  PostProcessingSceneMetadataLabel,
-  PostProcessingSettingsState
-} from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
 import { XRState } from '@etherealengine/engine/src/xr/XRState'
 import { dispatchAction, getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
 import Box from '@etherealengine/ui/src/Box'
@@ -63,11 +58,6 @@ const SettingMenu = ({ isPopover }: Props): JSX.Element => {
   const selectedTab = useHookstate('general')
   const engineState = useHookstate(getMutableState(EngineState))
 
-  const postProcessingSceneMetadataState = getMutableState(PostProcessingSettingsState)
-  const postprocessingSettings = postProcessingSceneMetadataState?.enabled
-    ? useHookstate(postProcessingSceneMetadataState.enabled)
-    : { value: undefined }
-
   const clientSettingState = useHookstate(getMutableState(AdminClientSettingsState))
   const [clientSetting] = clientSettingState?.client?.value || []
   const userSettings = selfUser.user_setting.value

packages/common/src/interfaces/SceneInterface.ts

@@ -14,7 +14,6 @@ export interface EntityJson {
 }
 
 export interface SceneJson {
-  metadata: { [uuid: string]: any }
   entities: { [uuid: EntityUUID]: EntityJson }
   root: EntityUUID
   version: number

packages/editor/src/components/hierarchy/HierarchyTreeNode.tsx

@@ -6,6 +6,7 @@ import { Object3D } from 'three'
 import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
 import { useEngineState } from '@etherealengine/engine/src/ecs/classes/EngineState'
 import { Entity } from '@etherealengine/engine/src/ecs/classes/Entity'
+import { SceneState } from '@etherealengine/engine/src/ecs/classes/Scene'
 import {
   getAllComponents,
   getComponent,
@@ -20,6 +21,7 @@ import {
 } from '@etherealengine/engine/src/ecs/functions/EntityTree'
 import { ErrorComponent, ErrorComponentType } from '@etherealengine/engine/src/scene/components/ErrorComponent'
 import { NameComponent } from '@etherealengine/engine/src/scene/components/NameComponent'
+import { getMutableState } from '@etherealengine/hyperflux'
 
 import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import ArrowRightIcon from '@mui/icons-material/ArrowRight'
@@ -73,8 +75,8 @@ export type HierarchyTreeNodeProps = {
 export const HierarchyTreeNode = (props: HierarchyTreeNodeProps) => {
   const node = props.data.nodes[props.index]
   const data = props.data
-  const engineState = useEngineState()
   const selectionState = useSelectionState()
+  useComponent(getMutableState(SceneState).sceneEntity.value, EntityTreeComponent)
 
   const nodeName = node.obj3d
     ? node.obj3d.name ?? node.obj3d.uuid

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

@@ -1,18 +1,16 @@
 import { t } from 'i18next'
 import React from 'react'
 
-import { getCameraSceneMetadataState } from '@etherealengine/engine/src/camera/CameraSceneMetadata'
 import { CameraMode } from '@etherealengine/engine/src/camera/types/CameraMode'
 import { ProjectionType } from '@etherealengine/engine/src/camera/types/ProjectionType'
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
-import { useHookstate } from '@etherealengine/hyperflux'
-
-import CameraAltIcon from '@mui/icons-material/CameraAlt'
+import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { CameraSettingsComponent } from '@etherealengine/engine/src/scene/components/CameraSettingsComponent'
 
 import { InputGroup } from '../inputs/InputGroup'
 import { NumericInputGroup } from '../inputs/NumericInputGroup'
 import SelectInput from '../inputs/SelectInput'
 import PropertyGroup from './PropertyGroup'
+import { EditorComponentType } from './Util'
 
 /** Types copied from Camera Modes of engine. */
 const cameraModeSelect = [
@@ -54,10 +52,8 @@ const projectionTypeSelect = [
   }
 ]
 
-export const CameraPropertiesNodeEditor = () => {
-  const cameraSettings = useHookstate(getCameraSceneMetadataState())
-  if (!cameraSettings.value) return null
-
+export const CameraPropertiesNodeEditor: EditorComponentType = (props) => {
+  const cameraSettings = useComponent(props.entity, CameraSettingsComponent)
   return (
     <PropertyGroup
       name={t('editor:properties.cameraSettings.name')}

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

@@ -1,17 +1,17 @@
-import { useHookstate } from '@hookstate/core'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { Color } from 'three'
 
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
+import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { FogSettingsComponent } from '@etherealengine/engine/src/scene/components/FogSettingsComponent'
 import { FogType } from '@etherealengine/engine/src/scene/constants/FogType'
-import { getFogSceneMetadataState } from '@etherealengine/engine/src/scene/systems/FogSystem'
 
 import ColorInput from '../inputs/ColorInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'
 import SelectInput from '../inputs/SelectInput'
 import PropertyGroup from './PropertyGroup'
+import { EditorComponentType } from './Util'
 
 const FogTypeOptions = [
   {
@@ -36,26 +36,29 @@ const FogTypeOptions = [
   }
 ]
 
-export const FogSettingsEditor = () => {
+export const FogSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
-  const fogState = useHookstate(getFogSceneMetadataState())
-  const fog = fogState.get({ noproxy: true })
+  const fogState = useComponent(props.entity, FogSettingsComponent)
 
   return (
     <PropertyGroup name={t('editor:properties.fog.name')} description={t('editor:properties.fog.description')}>
       <InputGroup name="Fog Type" label={t('editor:properties.fog.lbl-fogType')}>
-        <SelectInput options={FogTypeOptions} value={fog.type} onChange={(val: FogType) => fogState.type.set(val)} />
+        <SelectInput
+          options={FogTypeOptions}
+          value={fogState.type.value}
+          onChange={(val: FogType) => fogState.type.set(val)}
+        />
       </InputGroup>
-      {fog.type !== FogType.Disabled && (
+      {fogState.type.value !== FogType.Disabled && (
         <>
           <InputGroup name="Fog Color" label={t('editor:properties.fog.lbl-fogColor')}>
             <ColorInput
-              value={new Color(fog.color)}
+              value={new Color(fogState.color.value)}
               onSelect={(val: Color) => fogState.color.set('#' + val.getHexString())}
             />
           </InputGroup>
-          {fog.type === FogType.Linear ? (
+          {fogState.type.value === FogType.Linear ? (
             <>
               <NumericInputGroup
                 name="Fog Near Distance"
@@ -64,7 +67,7 @@ export const FogSettingsEditor = () => {
                 mediumStep={1}
                 largeStep={10}
                 min={0}
-                value={fog.near}
+                value={fogState.near.value}
                 onChange={(val) => fogState.near.set(val)}
               />
               <NumericInputGroup
@@ -74,7 +77,7 @@ export const FogSettingsEditor = () => {
                 mediumStep={100}
                 largeStep={1000}
                 min={0}
-                value={fog.far}
+                value={fogState.far.value}
                 onChange={(val) => fogState.far.set(val)}
               />
             </>
@@ -87,30 +90,30 @@ export const FogSettingsEditor = () => {
                 mediumStep={0.1}
                 largeStep={0.25}
                 min={0}
-                value={fog.density}
+                value={fogState.density.value}
                 onChange={(val) => fogState.density.set(val)}
               />
-              {fog.type !== FogType.Exponential && (
+              {fogState.type.value !== FogType.Exponential && (
                 <NumericInputGroup
                   name="Fog Height"
                   label={t('editor:properties.fog.lbl-fogHeight')}
                   smallStep={0.01}
                   mediumStep={0.1}
                   largeStep={0.25}
                   min={0}
-                  value={fog.height}
+                  value={fogState.height.value}
                   onChange={(val) => fogState.height.set(val)}
                 />
               )}
-              {fog.type === FogType.Brownian && (
+              {fogState.type.value === FogType.Brownian && (
                 <NumericInputGroup
                   name="Fog Time Scale"
                   label={t('editor:properties.fog.lbl-fogTimeScale')}
                   smallStep={0.01}
                   mediumStep={0.1}
                   largeStep={0.25}
                   min={0.001}
-                  value={fog.timeScale}
+                  value={fogState.timeScale.value}
                   onChange={(val) => fogState.timeScale.set(val)}
                 />
               )}

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

@@ -2,21 +2,21 @@ import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { DistanceModel, DistanceModelOptions } from '@etherealengine/engine/src/audio/constants/AudioConstants'
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
-import { MediaSettingsState } from '@etherealengine/engine/src/networking/MediaSettingsState'
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
+import { MediaSettingsComponent } from '@etherealengine/engine/src/scene/components/MediaSettingsComponent'
 
 import BooleanInput from '../inputs/BooleanInput'
 import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import NumericInputGroup from '../inputs/NumericInputGroup'
 import SelectInput from '../inputs/SelectInput'
 import PropertyGroup from './PropertyGroup'
+import { EditorComponentType } from './Util'
 
-export const MediaSettingsEditor = () => {
+export const MediaSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
-  const mediaState = useHookstate(getMutableState(MediaSettingsState))
-  const media = mediaState.get({ noproxy: true })
+
+  const mediaState = useComponent(props.entity, MediaSettingsComponent)
 
   return (
     <PropertyGroup
@@ -30,7 +30,7 @@ export const MediaSettingsEditor = () => {
       >
         <SelectInput
           options={DistanceModelOptions}
-          value={media.distanceModel}
+          value={mediaState.distanceModel.value}
           onChange={(val: DistanceModelType) => mediaState.distanceModel.set(val)}
         />
       </InputGroup>
@@ -39,10 +39,10 @@ export const MediaSettingsEditor = () => {
         label={t('editor:properties.mediaSettings.lbl-immersiveMedia')}
         info={t('editor:properties.mediaSettings.info-immersiveMedia')}
       >
-        <BooleanInput value={media.immersiveMedia} onChange={(val) => mediaState.immersiveMedia.set(val)} />
+        <BooleanInput value={mediaState.immersiveMedia.value} onChange={(val) => mediaState.immersiveMedia.set(val)} />
       </InputGroup>
 
-      {media.distanceModel === DistanceModel.Linear ? (
+      {mediaState.distanceModel.value === DistanceModel.Linear ? (
         <InputGroup
           name="Media Rolloff Factor"
           label={t('editor:properties.mediaSettings.lbl-mediaRolloffFactor')}
@@ -54,7 +54,7 @@ export const MediaSettingsEditor = () => {
             smallStep={0.001}
             mediumStep={0.01}
             largeStep={0.1}
-            value={media.rolloffFactor}
+            value={mediaState.rolloffFactor.value}
             onChange={(val) => mediaState.rolloffFactor.set(val)}
           />
         </InputGroup>
@@ -67,7 +67,7 @@ export const MediaSettingsEditor = () => {
           smallStep={0.1}
           mediumStep={1}
           largeStep={10}
-          value={media.rolloffFactor}
+          value={mediaState.rolloffFactor.value}
           onChange={(val) => mediaState.rolloffFactor.set(val)}
         />
       )}
@@ -79,7 +79,7 @@ export const MediaSettingsEditor = () => {
         smallStep={0.1}
         mediumStep={1}
         largeStep={10}
-        value={media.refDistance}
+        value={mediaState.refDistance.value}
         onChange={(val) => mediaState.refDistance.set(val)}
         unit="m"
       />
@@ -91,7 +91,7 @@ export const MediaSettingsEditor = () => {
         smallStep={0.1}
         mediumStep={1}
         largeStep={10}
-        value={media.maxDistance}
+        value={mediaState.maxDistance.value}
         onChange={(val) => mediaState.maxDistance.set(val)}
         unit="m"
       />
@@ -104,7 +104,7 @@ export const MediaSettingsEditor = () => {
         smallStep={0.1}
         mediumStep={1}
         largeStep={10}
-        value={media.coneInnerAngle}
+        value={mediaState.coneInnerAngle.value}
         onChange={(val) => mediaState.coneInnerAngle.set(val)}
         unit="°"
       />
@@ -117,7 +117,7 @@ export const MediaSettingsEditor = () => {
         smallStep={0.1}
         mediumStep={1}
         largeStep={10}
-        value={media.coneOuterAngle}
+        value={mediaState.coneOuterAngle.value}
         onChange={(val) => mediaState.coneOuterAngle.set(val)}
         unit="°"
       />
@@ -130,7 +130,7 @@ export const MediaSettingsEditor = () => {
           min={0}
           max={1}
           step={0.01}
-          value={media.coneOuterGain}
+          value={mediaState.coneOuterGain.value}
           onChange={(val) => mediaState.coneOuterGain.set(val)}
         />
       </InputGroup>

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

@@ -3,14 +3,10 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Color } from 'three'
 
-import { Engine } from '@etherealengine/engine/src/ecs/classes/Engine'
+import { useComponent } from '@etherealengine/engine/src/ecs/functions/ComponentFunctions'
 import { configureEffectComposer } from '@etherealengine/engine/src/renderer/functions/configureEffectComposer'
-import {
-  getPostProcessingSceneMetadataState,
-  PostProcessingSettingsState
-} from '@etherealengine/engine/src/renderer/WebGLRendererSystem'
+import { PostProcessingComponent } from '@etherealengine/engine/src/scene/components/PostProcessingComponent'
 import { Effects } from '@etherealengine/engine/src/scene/constants/PostProcessing'
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'
 import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'
@@ -24,8 +20,8 @@ import CompoundNumericInput from '../inputs/CompoundNumericInput'
 import InputGroup from '../inputs/InputGroup'
 import SelectInput from '../inputs/SelectInput'
 import styles from '../styles.module.scss'
-import NodeEditor from './NodeEditor'
 import PropertyGroup from './PropertyGroup'
+import { EditorComponentType } from './Util'
 
 enum PropertyTypes {
   BlendFunction,
@@ -234,11 +230,11 @@ const PredicationMode = [
   { label: 'CUSTOM', value: 2 }
 ]
 
-export const PostProcessingSettingsEditor = () => {
+export const PostProcessingSettingsEditor: EditorComponentType = (props) => {
   const { t } = useTranslation()
 
   const [openSettings, setOpenSettings] = useState(false)
-  const postprocessing = useHookstate(getMutableState(PostProcessingSettingsState))
+  const postprocessing = useComponent(props.entity, PostProcessingComponent)
 
   const getPropertyValue = (keys: string[]): any => {
     if (keys.length < 1) return null