Resource State

packages/client-core/src/common/components/AvatarPreview/index.tsx

@@ -42,7 +42,7 @@ import { SxProps, Theme } from '@mui/material/styles'
 import styles from './index.module.scss'
 
 import { EntityUUID } from '@etherealengine/common/src/interfaces/EntityUUID'
-import { hasComponent, removeComponent, setComponent } from '@etherealengine/ecs'
+import { setComponent, UndefinedEntity } from '@etherealengine/ecs'
 import { defaultAnimationPath, preloadedAnimations } from '@etherealengine/engine/src/avatar/animation/Util'
 import { LoopAnimationComponent } from '@etherealengine/engine/src/avatar/components/LoopAnimationComponent'
 import { AssetPreviewCameraComponent } from '@etherealengine/engine/src/camera/components/AssetPreviewCameraComponent'
@@ -55,6 +55,7 @@ import { UUIDComponent } from '@etherealengine/spatial/src/common/UUIDComponent'
 import { ObjectLayerMaskComponent } from '@etherealengine/spatial/src/renderer/components/ObjectLayerComponent'
 import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent'
 import { ObjectLayers } from '@etherealengine/spatial/src/renderer/constants/ObjectLayers'
+import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 import { MathUtils } from 'three'
 
 interface Props {
@@ -68,16 +69,10 @@ interface Props {
 const AvatarPreview = ({ fill, avatarUrl, sx, onAvatarError, onAvatarLoaded }: Props) => {
   const { t } = useTranslation()
   const panelRef = useRef() as React.MutableRefObject<HTMLDivElement>
-
   useRender3DPanelSystem(panelRef)
-
-  useEffect(() => {
-    loadAvatarPreview()
-  }, [avatarUrl])
-
   const renderPanelState = getMutableState(PreviewPanelRendererState)
 
-  const loadAvatarPreview = () => {
+  useEffect(() => {
     if (!avatarUrl) return
 
     const renderPanelEntities = renderPanelState.entities[panelRef.current.id]
@@ -86,20 +81,19 @@ const AvatarPreview = ({ fill, avatarUrl, sx, onAvatarError, onAvatarLoaded }: P
     setComponent(entity, UUIDComponent, uuid)
     setComponent(entity, NameComponent, '3D Preview Entity')
 
-    if (hasComponent(entity, LoopAnimationComponent)) removeComponent(entity, LoopAnimationComponent)
-    if (hasComponent(entity, ModelComponent)) removeComponent(entity, ModelComponent)
-
-    setComponent(entity, VisibleComponent, true)
-    ObjectLayerMaskComponent.setLayer(entity, ObjectLayers.AssetPreview)
-    setComponent(entity, ModelComponent, { src: avatarUrl, convertToVRM: true })
     setComponent(entity, LoopAnimationComponent, {
       animationPack: defaultAnimationPath + preloadedAnimations.locomotion + '.glb',
       activeClipIndex: 5
     })
+    setComponent(entity, ModelComponent, { src: avatarUrl, convertToVRM: true })
+    setComponent(entity, EntityTreeComponent, { parentEntity: UndefinedEntity })
+
+    setComponent(entity, VisibleComponent, true)
+    ObjectLayerMaskComponent.setLayer(entity, ObjectLayers.AssetPreview)
     setComponent(entity, EnvmapComponent, { type: EnvMapSourceType.Skybox })
     const cameraEntity = renderPanelEntities[PanelEntities.camera].value
     setComponent(cameraEntity, AssetPreviewCameraComponent, { targetModelEntity: entity })
-  }
+  }, [avatarUrl])
 
   return (
     <Box className={`${commonStyles.preview} ${fill ? styles.fill : ''}`} sx={sx}>

packages/client-core/src/user/components/Panel3D/useRender3DPanelSystem.tsx

@@ -27,19 +27,19 @@ import React, { useEffect } from 'react'
 import { Euler, Quaternion, Vector3, WebGLRenderer } from 'three'
 
 import {
-  Engine,
   Entity,
   PresentationSystemGroup,
   UndefinedEntity,
   createEntity,
   defineQuery,
   defineSystem,
   getComponent,
+  getOptionalComponent,
   removeComponent,
   removeEntity,
   setComponent
 } from '@etherealengine/ecs'
-import { defineState, getMutableState, none } from '@etherealengine/hyperflux'
+import { NO_PROXY, defineState, getMutableState, none } from '@etherealengine/hyperflux'
 import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
 import {
@@ -49,6 +49,7 @@ import {
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { InputSourceComponent } from '@etherealengine/spatial/src/input/components/InputSourceComponent'
 import { addClientInputListeners } from '@etherealengine/spatial/src/input/systems/ClientInputSystem'
+import { GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import {
   ObjectLayerComponents,
   ObjectLayerMaskComponent
@@ -158,6 +159,7 @@ export function useRender3DPanelSystem(panel: React.MutableRefObject<HTMLDivElem
       getMutableState(ActiveOrbitCamera).set(UndefinedEntity)
       const thisIdIndex = rendererState.ids.value.findIndex((value) => value === id)
       rendererState.entities[id].set(none)
+      rendererState.renderers[id].get(NO_PROXY).dispose()
       rendererState.renderers[id].set(none)
       rendererState.ids[thisIdIndex].set(none)
     }
@@ -193,21 +195,20 @@ export const render3DPanelSystem = defineSystem({
         iterateEntityNode(previewEntity, (entity) => {
           setComponent(entity, ObjectLayerComponents[ObjectLayers.AssetPreview])
         })
-        const cameraComponent = getComponent(cameraEntity, CameraComponent)
-        // sync with view camera
-        const viewCamera = cameraComponent.cameras[0]
-        viewCamera.projectionMatrix.copy(cameraComponent.projectionMatrix)
-        viewCamera.quaternion.copy(cameraComponent.quaternion)
-        viewCamera.position.copy(cameraComponent.position)
-        viewCamera.layers.mask = getComponent(cameraEntity, ObjectLayerMaskComponent)
-        // hack to make the background transparent for the preview
-        const lastBackground = Engine.instance.scene.background
-        Engine.instance.scene.background = null
-        rendererState.renderers[id].value.render(Engine.instance.scene, viewCamera)
-        Engine.instance.scene.background = lastBackground
-        iterateEntityNode(previewEntity, (entity) => {
-          removeComponent(entity, ObjectLayerComponents[ObjectLayers.AssetPreview])
-        })
+        const group = getOptionalComponent(previewEntity, GroupComponent)
+        if (group && group[0]) {
+          const cameraComponent = getComponent(cameraEntity, CameraComponent)
+          // sync with view camera
+          const viewCamera = cameraComponent.cameras[0]
+          viewCamera.projectionMatrix.copy(cameraComponent.projectionMatrix)
+          viewCamera.quaternion.copy(cameraComponent.quaternion)
+          viewCamera.position.copy(cameraComponent.position)
+          viewCamera.layers.mask = getComponent(cameraEntity, ObjectLayerMaskComponent)
+          rendererState.renderers[id].value.render(group[0], viewCamera)
+          iterateEntityNode(previewEntity, (entity) => {
+            removeComponent(entity, ObjectLayerComponents[ObjectLayers.AssetPreview])
+          })
+        }
       }
     }
   }

packages/engine/package.json

@@ -69,7 +69,7 @@
     "sift": "^17.0.1",
     "simplex-noise": "^4.0.1",
     "three": "0.158.0",
-    "three-mesh-bvh": "^0.6.8",
+    "three-mesh-bvh": "^0.7.1",
     "three.quarks": "0.11.1",
     "troika-three-text": "^0.49.0",
     "ts-matches": "5.3.0",

packages/engine/src/assets/classes/AssetLoader.ts

@@ -28,7 +28,6 @@ import {
   AudioLoader,
   BufferAttribute,
   BufferGeometry,
-  FileLoader,
   Group,
   LOD,
   Material,
@@ -44,6 +43,8 @@ import {
   TextureLoader
 } from 'three'
 
+import { FileLoader } from '../loaders/base/FileLoader'
+
 import { getState } from '@etherealengine/hyperflux'
 
 import { isClient } from '@etherealengine/common/src/utils/getEnvironment'
@@ -87,14 +88,6 @@ const onUploadDropBuffer = () =>
     this.array = new this.array.constructor(1)
   }
 
-const onTextureUploadDropSource = () =>
-  function (this: Texture) {
-    // source.data can't be null because the WebGLRenderer checks for it
-    this.source.data = { width: this.source.data.width, height: this.source.data.height, __deleted: true }
-    this.mipmaps.map((b) => delete b.data)
-    this.mipmaps = []
-  }
-
 export const cleanupAllMeshData = (child: Mesh, args: LoadingArgs) => {
   if (getState(EngineState).isEditor || !child.isMesh) return
   const geo = child.geometry as BufferGeometry
@@ -104,9 +97,6 @@ export const cleanupAllMeshData = (child: Mesh, args: LoadingArgs) => {
     for (const name in attributes) (attributes[name] as BufferAttribute).onUploadCallback = onUploadDropBuffer()
     if (geo.index) geo.index.onUploadCallback = onUploadDropBuffer()
   }
-  Object.entries(mat)
-    .filter(([k, v]: [keyof typeof mat, Texture]) => v?.isTexture)
-    .map(([_, v]) => (v.onUpdate = onTextureUploadDropSource()))
 }
 
 const processModelAsset = (asset: Mesh, args: LoadingArgs): void => {
@@ -368,7 +358,7 @@ const assetLoadCallback =
 
 const getAbsolutePath = (url) => (isAbsolutePath(url) ? url : getState(EngineState).publicPath + url)
 
-type LoadingArgs = {
+export type LoadingArgs = {
   ignoreDisposeGeometry?: boolean
   forceAssetType?: AssetType
   assetRoot?: Entity
@@ -379,7 +369,8 @@ const load = async (
   args: LoadingArgs,
   onLoad = (response: any) => {},
   onProgress = (request: ProgressEvent) => {},
-  onError = (event: ErrorEvent | Error) => {}
+  onError = (event: ErrorEvent | Error) => {},
+  signal?: AbortSignal
 ) => {
   if (!_url) {
     onError(new Error('URL is empty'))
@@ -430,7 +421,7 @@ const load = async (
   const callback = assetLoadCallback(url, args, assetType, onLoad)
 
   try {
-    return loader.load(url, callback, onProgress, onError)
+    return loader.load(url, callback, onProgress, onError, signal)
   } catch (error) {
     onError(error)
   }

packages/engine/src/assets/compression/ModelTransformLoader.ts

@@ -42,7 +42,7 @@ import {
 import fetch from 'cross-fetch'
 import draco3d from 'draco3dgltf'
 import { MeshoptDecoder, MeshoptEncoder } from 'meshoptimizer'
-import { FileLoader } from 'three'
+import { FileLoader } from '../loaders/base/FileLoader'
 
 import { EEMaterialExtension } from './extensions/EE_MaterialTransformer'
 import { EEResourceIDExtension } from './extensions/EE_ResourceIDTransformer'

packages/engine/src/assets/font/FontLoader.ts

@@ -23,8 +23,10 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { FileLoader, Loader, LoadingManager, ShapePath } from 'three'
+import { LoadingManager, ShapePath } from 'three'
 
+import { FileLoader } from '../loaders/base/FileLoader'
+import { Loader } from '../loaders/base/Loader'
 export class FontLoader extends Loader {
   constructor(manager?: LoadingManager) {
     super(manager)