IR-2726 Material Component Breakup

packages/editor/src/components/assets/AssetPreviewPanels/MaterialPreviewPanel.tsx

@@ -35,7 +35,7 @@ import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/compone
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
+import { MaterialStateComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { getMaterial } from '@etherealengine/spatial/src/renderer/materials/materialFunctions'
 
 export const MaterialPreviewCanvas = () => {
@@ -58,8 +58,7 @@ export const MaterialPreviewCanvas = () => {
     orbitCamera.refocus.set(true)
   }, [
     selectedMaterial,
-    useComponent(UUIDComponent.getEntityByUUID(selectedMaterial.value!), MaterialComponent[MaterialComponents.State])
-      .material
+    useComponent(UUIDComponent.getEntityByUUID(selectedMaterial.value!), MaterialStateComponent).material
   ])
   return (
     <>

packages/editor/src/components/materials/MaterialEditor.tsx

@@ -37,16 +37,14 @@ import { setMaterialName } from '@etherealengine/engine/src/scene/materials/func
 import { NO_PROXY } from '@etherealengine/hyperflux'
 import createReadableTexture from '@etherealengine/spatial/src/renderer/functions/createReadableTexture'
 import {
-  MaterialComponent,
-  MaterialComponents,
-  prototypeByName
+  MaterialPrototypeComponent,
+  MaterialStateComponent
 } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { none, State, useHookstate } from '@hookstate/core'
 import { EditorControlFunctions } from '../../functions/EditorControlFunctions'
 import { Button } from '../inputs/Button'
 import { InputGroup } from '../inputs/InputGroup'
 import ParameterInput from '../inputs/ParameterInput'
-import SelectInput from '../inputs/SelectInput'
 import StringInput from '../inputs/StringInput'
 import { PanelDragContainer, PanelIcon, PanelTitle } from '../layout/Panel'
 import { InfoTooltip } from '../layout/Tooltip'
@@ -66,13 +64,13 @@ const toBlobs = (thumbnails: Record<string, ThumbnailData>): Record<string, stri
 
 export function MaterialEditor(props: { materialUUID: EntityUUID }) {
   const { t } = useTranslation()
-  const prototypes = Object.keys(prototypeByName).map((prototype) => ({
-    label: prototype,
-    value: prototype
-  }))
+  // const prototypes = Object.keys(prototypeByName).map((prototype) => ({
+  //   label: prototype,
+  //   value: prototype
+  // }))
 
   const entity = UUIDComponent.getEntityByUUID(props.materialUUID)
-  const materialComponent = useComponent(entity, MaterialComponent[MaterialComponents.State])
+  const materialComponent = useComponent(entity, MaterialStateComponent)
   const material = materialComponent.material.value!
   const thumbnails = useHookstate<Record<string, ThumbnailData>>({})
   const textureUnloadMap = useHookstate<Record<string, (() => void) | undefined>>({})
@@ -138,7 +136,7 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
   }, [materialName, prototypeName])
 
   const prototypeEntity = materialComponent.prototypeEntity.value!
-  const prototype = useComponent(prototypeEntity, MaterialComponent[MaterialComponents.Prototype])
+  const prototype = useComponent(prototypeEntity, MaterialPrototypeComponent)
 
   const shouldLoadTexture = async (value, key: string, parametersObject: State<any>) => {
     let prop
@@ -215,14 +213,14 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
       </InputGroup>
       <br />
       <InputGroup name="Prototype" label={t('editor:properties.mesh.material.prototype')}>
-        <SelectInput
+        {/* <SelectInput
           value={prototypeName.value}
           options={prototypes}
           onChange={(protoId) => {
             if (materialComponent.prototypeEntity.value) materialComponent.prototypeEntity.set(prototypeByName[protoId])
             prototypeName.set(protoId)
           }}
-        />
+        /> */}
       </InputGroup>
       <Divider className={styles.divider} />
       <ParameterInput
@@ -260,17 +258,17 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
           {t('editor:properties.mesh.material.addPlugin')}
         </Button>
       </div>
-      {!!materialComponent.pluginEntities.value?.length && (
+      {/* {!!materialComponent.pluginEntities.value?.length && (
         <div className={styles.contentContainer}>
           <ParameterInput
             entity={props.materialUUID}
             values={pluginValues.value}
             onChange={(key) => async (value) => {
-              // const property = await shouldLoadTexture(value, key, pluginParameters)
-              // getComponent(pluginEntity.value, MaterialComponent[MaterialComponents.Plugin]).parameters![
-              //   materialName.value
-              // ][key].value = property
-              // pluginValues[key].set(property)
+              const property = await shouldLoadTexture(value, key, pluginParameters)
+              getComponent(pluginEntity.value, MaterialComponent[MaterialComponents.Plugin]).parameters![
+                materialName.value
+              ][key].value = property
+              pluginValues[key].set(property)
             }}
             defaults={pluginParameters.value}
           />
@@ -280,15 +278,15 @@ export function MaterialEditor(props: { materialUUID: EntityUUID }) {
                 materialComponent.pluginEntities.set(
                   materialComponent.pluginEntities.value.filter((val) => val !== pluginEntity.value)
                 )
-              // if (pluginState && pluginState.parameters && pluginState.parameters[materialName.value])
-              //   pluginState.parameters[materialName.value].set(none)
+              if (pluginState && pluginState.parameters && pluginState.parameters[materialName.value])
+                pluginState.parameters[materialName.value].set(none)
               pluginEntity.set(UndefinedEntity)
             }}
           >
             Remove Plugin
           </Button>
         </div>
-      )}
+      )} */}
     </div>
   )
 }

packages/editor/src/components/materials/MaterialLibraryEntry.tsx

@@ -31,8 +31,8 @@ import { useDrag } from 'react-dnd'
 import { EntityUUID, getOptionalComponent, UUIDComponent } from '@etherealengine/ecs'
 import { MaterialSelectionState } from '@etherealengine/engine/src/scene/materials/MaterialLibraryState'
 import { getMutableState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 
+import { MaterialStateComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { ItemTypes } from '../../constants/AssetTypes'
 import { SelectionState } from '../../services/SelectionServices'
 import styles from '../hierarchy/styles.module.scss'
@@ -57,10 +57,8 @@ export type MaterialLibraryEntryProps = {
 
 const nodeDisplayName = (node: MaterialLibraryEntryType) => {
   return (
-    getOptionalComponent(
-      UUIDComponent.getEntityByUUID(node.uuid as EntityUUID),
-      MaterialComponent[MaterialComponents.State]
-    )?.material?.name ?? ''
+    getOptionalComponent(UUIDComponent.getEntityByUUID(node.uuid as EntityUUID), MaterialStateComponent)?.material
+      ?.name ?? ''
   )
 }
 

packages/editor/src/components/materials/MaterialLibraryPanelContainer.tsx

@@ -39,8 +39,8 @@ import {
 } from '@etherealengine/engine/src/scene/materials/functions/materialSourcingFunctions'
 import { MaterialSelectionState } from '@etherealengine/engine/src/scene/materials/MaterialLibraryState'
 import { getMutableState, getState, useHookstate, useState } from '@etherealengine/hyperflux'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 
+import { MaterialStateComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { uploadProjectFiles } from '../../functions/assetFunctions'
 import { EditorState } from '../../services/EditorServices'
 import { SelectionState } from '../../services/SelectionServices'
@@ -54,7 +54,7 @@ import MaterialLibraryEntry, { MaterialLibraryEntryType } from './MaterialLibrar
 export default function MaterialLibraryPanel() {
   const srcPath = useState('/mat/material-test')
 
-  const materialQuery = useQuery([MaterialComponent[MaterialComponents.State]])
+  const materialQuery = useQuery([MaterialStateComponent])
   const nodes = useHookstate([] as MaterialLibraryEntryType[])
   const selected = useHookstate(getMutableState(SelectionState).selectedEntities)
 

packages/editor/src/functions/addMediaNode.ts

@@ -47,7 +47,7 @@ import iterateObject3D from '@etherealengine/spatial/src/common/functions/iterat
 import { GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { ObjectLayerComponents } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
 import { ObjectLayers } from '@etherealengine/spatial/src/renderer/constants/ObjectLayers'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
+import { MaterialInstanceComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { getMaterial } from '@etherealengine/spatial/src/renderer/materials/materialFunctions'
 import { EditorControlFunctions } from './EditorControlFunctions'
 
@@ -98,17 +98,14 @@ export async function addMediaNode(
 
         const materialEntity = UUIDComponent.getEntityByUUID(material.uuid as EntityUUID)
         if (materialEntity) material = getMaterial(material.uuid as EntityUUID)!
-        const materialStateComponent = getMutableComponent(materialEntity, MaterialComponent[MaterialComponents.State])
 
         iterateObject3D(intersected.object, (mesh: Mesh) => {
           if (!mesh?.isMesh) return
-          const materialInstanceComponent = getMutableComponent(
-            mesh.entity,
-            MaterialComponent[MaterialComponents.Instance]
-          )
+          const materialInstanceComponent = getMutableComponent(mesh.entity, MaterialInstanceComponent)
           if (materialInstanceComponent.uuid.value) materialInstanceComponent.uuid.set([material.uuid as EntityUUID])
-          if (materialStateComponent.instances.value)
-            materialStateComponent.instances.set([...materialStateComponent.instances.value, mesh.entity])
+          /**this SHOULD be handled by library reactor */
+          // if (materialStateComponent.instances.value)
+          //   materialStateComponent.instances.set([...materialStateComponent.instances.value, mesh.entity])
         })
       })
     } else if (contentType.startsWith('model/lookdev')) {

packages/engine/src/assets/exporters/gltf/extensions/EEMaterialExporterExtension.ts

@@ -29,9 +29,9 @@ import matches from 'ts-matches'
 import { EntityUUID, getComponent, hasComponent, UUIDComponent } from '@etherealengine/ecs'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import {
-  MaterialComponent,
-  MaterialComponents,
-  MaterialPlugins
+  MaterialPlugins,
+  MaterialPrototypeComponent,
+  MaterialStateComponent
 } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 
 import { injectMaterialDefaults } from '../../../../scene/materials/functions/materialSourcingFunctions'
@@ -116,8 +116,8 @@ export default class EEMaterialExporterExtension extends ExporterExtension {
     delete materialDef.normalTexture
     delete materialDef.emissiveTexture
     delete materialDef.emissiveFactor
-    const materialComponent = getComponent(materialEntity, MaterialComponent[MaterialComponents.State])
-    const prototype = getComponent(materialComponent.prototypeEntity!, MaterialComponent[MaterialComponents.Prototype])
+    const materialComponent = getComponent(materialEntity, MaterialStateComponent)
+    const prototype = getComponent(materialComponent.prototypeEntity!, MaterialPrototypeComponent)
     const plugins = Object.keys(MaterialPlugins).map((plugin) => {
       if (!hasComponent(materialEntity, MaterialPlugins[plugin])) return
       const pluginComponent = getComponent(materialEntity, MaterialPlugins[plugin])

packages/engine/src/assets/functions/exportMaterialsGLTF.ts

@@ -26,7 +26,7 @@ Ethereal Engine. All Rights Reserved.
 import { BufferGeometry, Material, Mesh, Scene } from 'three'
 
 import { Entity, getComponent } from '@etherealengine/ecs'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
+import { MaterialStateComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 
 import { GLTFExporterOptions } from '../exporters/gltf/GLTFExporter'
 import createGLTFExporter from './createGLTFExporter'
@@ -40,9 +40,7 @@ export default async function exportMaterialsGLTF(
   scene.name = 'Root'
   const dudGeo = new BufferGeometry()
   dudGeo.groups = materialEntities.map((_, i) => ({ count: 0, start: 0, materialIndex: i }))
-  const materials = materialEntities.map(
-    (entity) => getComponent(entity, MaterialComponent[MaterialComponents.State]).material as Material
-  )
+  const materials = materialEntities.map((entity) => getComponent(entity, MaterialStateComponent).material as Material)
   const lib = new Mesh(dudGeo, materials)
   lib.name = 'Materials'
   scene.add(lib)

packages/engine/src/assets/loaders/gltf/extensions/EEMaterialImporterExtension.ts

@@ -28,14 +28,13 @@ import matches from 'ts-matches'
 
 import { getComponent, UUIDComponent } from '@etherealengine/ecs'
 import {
-  MaterialComponent,
-  MaterialComponents,
+  MaterialPrototypeComponent,
   MaterialPrototypeObjectConstructor,
-  prototypeByName
+  MaterialStateComponent
 } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 
 import {
-  getPrototypeConstructorFromName,
+  getPrototypeEntityFromName,
   injectMaterialDefaults,
   PrototypeNotFoundError
 } from '../../../../scene/materials/functions/materialSourcingFunctions'
@@ -57,7 +56,10 @@ export class EEMaterialImporterExtension extends ImporterExtension implements GL
     const eeMaterial: EEMaterialExtensionType = materialDef.extensions[this.name] as any
     let constructor: MaterialPrototypeObjectConstructor | null = null
     try {
-      constructor = getPrototypeConstructorFromName(eeMaterial.prototype)
+      constructor = getComponent(
+        getPrototypeEntityFromName(eeMaterial.prototype)!,
+        MaterialPrototypeComponent
+      ).prototypeConstructor
     } catch (e) {
       if (e instanceof PrototypeNotFoundError) {
         console.warn('prototype ' + eeMaterial.prototype + ' not found')
@@ -91,18 +93,14 @@ export class EEMaterialImporterExtension extends ImporterExtension implements GL
         }
       }
     }
-    const materialComponent = getComponent(
-      UUIDComponent.getEntityByUUID(extension.uuid),
-      MaterialComponent[MaterialComponents.State]
-    )
+    const materialComponent = getComponent(UUIDComponent.getEntityByUUID(extension.uuid), MaterialStateComponent)
     let foundPrototype = false
     if (materialComponent) {
-      foundPrototype = !!materialComponent.prototypeConstructor
+      foundPrototype = !!materialComponent.prototypeEntity
       injectMaterialDefaults(extension.uuid)
     } else {
       try {
-        getComponent(prototypeByName[extension.prototype], MaterialComponent[MaterialComponents.Prototype])
-          .prototypeArguments
+        getComponent(getPrototypeEntityFromName(extension.prototype)!, MaterialPrototypeComponent).prototypeArguments
         foundPrototype = true
       } catch (e) {
         if (e instanceof PrototypeNotFoundError) {

packages/engine/src/avatar/systems/AvatarTransparencySystem.tsx

@@ -40,7 +40,7 @@ import { TransformComponent } from '@etherealengine/spatial'
 import { FollowCameraComponent } from '@etherealengine/spatial/src/camera/components/FollowCameraComponent'
 import { XRControlsState } from '@etherealengine/spatial/src/xr/XRState'
 
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
+import { MaterialInstanceComponent } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import {
   TransparencyDitheringPlugin,
   TransparencyDitheringRoot,
@@ -119,7 +119,7 @@ export const AvatarTransparencySystem = defineSystem({
 
 const DitherChildReactor = (props: { entity: Entity; rootEntity: Entity }) => {
   const entity = props.entity
-  const materialComponentUUID = useOptionalComponent(entity, MaterialComponent[MaterialComponents.Instance])?.uuid
+  const materialComponentUUID = useOptionalComponent(entity, MaterialInstanceComponent)?.uuid
   useEffect(() => {
     if (!materialComponentUUID?.value) return
     for (const materialUUID of materialComponentUUID.value) {

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

@@ -56,9 +56,12 @@ import { Entity } from '@etherealengine/ecs/src/Entity'
 import { useEntityContext } from '@etherealengine/ecs/src/EntityFunctions'
 import { GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { MeshComponent } from '@etherealengine/spatial/src/renderer/components/MeshComponent'
-import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { createDisposable } from '@etherealengine/spatial/src/resources/resourceHooks'
 
+import {
+  MaterialInstanceComponent,
+  MaterialStateComponent
+} from '@etherealengine/spatial/src/renderer/materials/MaterialComponent'
 import { setPlugin } from '@etherealengine/spatial/src/renderer/materials/materialFunctions'
 import { useTexture } from '../../assets/functions/resourceLoaderHooks'
 import {
@@ -221,7 +224,7 @@ const EnvBakeComponentReactor = (props: { envmapEntity: Entity; bakeEntity: Enti
   const { envmapEntity, bakeEntity } = props
   const bakeComponent = useComponent(bakeEntity, EnvMapBakeComponent)
   const group = useComponent(envmapEntity, GroupComponent)
-  const uuid = useComponent(envmapEntity, MaterialComponent[MaterialComponents.Instance]).uuid
+  const uuid = useComponent(envmapEntity, MaterialInstanceComponent).uuid
   const [envMaptexture, error] = useTexture(bakeComponent.envMapOrigin.value, envmapEntity)
   useEffect(() => {
     const texture = envMaptexture
@@ -281,7 +284,7 @@ export const BoxProjectionPlugin = defineComponent({
     const entity = useEntityContext()
 
     useEffect(() => {
-      const materialComponent = getComponent(entity, MaterialComponent[MaterialComponents.State])
+      const materialComponent = getComponent(entity, MaterialStateComponent)
 
       const callback = (shader, renderer) => {
         const plugin = getComponent(entity, BoxProjectionPlugin)