IR-2365 Fix erroneous material updates and prototype switching errors (…

…#10287)

* Fix erroneous material updates and prototype switching errors

* get material previews updating

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

@@ -27,14 +27,15 @@ import React, { useEffect, useRef } from 'react'
 import { Mesh, SphereGeometry } from 'three'
 
 import { useRender3DPanelSystem } from '@etherealengine/client-core/src/user/components/Panel3D/useRender3DPanelSystem'
-import { generateEntityUUID, getMutableComponent, setComponent, UUIDComponent } from '@etherealengine/ecs'
+import { generateEntityUUID, getMutableComponent, setComponent, useComponent, UUIDComponent } from '@etherealengine/ecs'
 import { EnvmapComponent } from '@etherealengine/engine/src/scene/components/EnvmapComponent'
 import { MaterialSelectionState } from '@etherealengine/engine/src/scene/materials/MaterialLibraryState'
 import { getState, useMutableState } from '@etherealengine/hyperflux'
 import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/components/CameraOrbitComponent'
 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 { getMaterial } from '@etherealengine/spatial/src/renderer/materials/materialFunctions'
 
 export const MaterialPreviewCanvas = () => {
@@ -55,7 +56,11 @@ export const MaterialPreviewCanvas = () => {
     const orbitCamera = getMutableComponent(cameraEntity, CameraOrbitComponent)
     orbitCamera.focusedEntities.set([sceneEntity])
     orbitCamera.refocus.set(true)
-  }, [selectedMaterial])
+  }, [
+    selectedMaterial,
+    useComponent(UUIDComponent.getEntityByUUID(selectedMaterial.value!), MaterialComponent[MaterialComponents.State])
+      .material
+  ])
   return (
     <>
       <div id="materialPreview" style={{ minHeight: '250px', width: '100%', height: '100%' }}>

packages/spatial/src/renderer/materials/materialFunctions.ts

@@ -118,7 +118,7 @@ export const getPluginObject = (pluginId: string) => {
 
 export const applyMaterialPlugins = (materialEntity: Entity) => {
   const materialComponent = getComponent(materialEntity, MaterialComponent[MaterialComponents.State])
-  if (!materialComponent.pluginEntities || !materialComponent.material) return
+  if (!materialComponent.pluginEntities?.length || !materialComponent.material) return
   const material = materialComponent.material as Material
   material.plugins = []
   for (const pluginEntity of materialComponent.pluginEntities) {
@@ -170,21 +170,13 @@ export const updateMaterialPrototype = (materialEntity: Entity) => {
   if (!prototypeConstructor || !prototypeComponent.prototypeArguments) return
   const material = materialComponent.material
   if (!material || material.type === prototypeName) return
-  const matKeys = Object.keys(material)
-  const commonParameters = Object.fromEntries(
-    Object.keys(prototypeComponent.prototypeArguments)
-      .filter((key) => matKeys.includes(key))
-      .map((key) => [key, material[key]])
-  )
-  const fullParameters = { ...extractDefaults(prototypeComponent.prototypeArguments), ...commonParameters }
+  const fullParameters = { ...extractDefaults(prototypeComponent.prototypeArguments) }
   const newMaterial = new prototypeConstructor(fullParameters)
   if (newMaterial.plugins) {
     newMaterial.customProgramCacheKey = () =>
       newMaterial.plugins!.map((plugin) => plugin.toString()).reduce((x, y) => x + y, '')
   }
-  newMaterial.uuid = material.uuid
-  newMaterial.name = material.name
-  newMaterial.type = prototypeName
+
   if (material.defines?.['USE_COLOR']) {
     newMaterial.defines = newMaterial.defines ?? {}
     newMaterial.defines!['USE_COLOR'] = material.defines!['USE_COLOR']
@@ -197,5 +189,6 @@ export const updateMaterialPrototype = (materialEntity: Entity) => {
     material: newMaterial,
     parameters: fullParameters
   })
+
   return newMaterial
 }