New GLTF ECS Loader

packages/client-core/src/common/services/FileThumbnailJobState.tsx

@@ -42,7 +42,6 @@ import {
 import { useTexture } from '@etherealengine/engine/src/assets/functions/resourceLoaderHooks'
 import { GLTFDocumentState } from '@etherealengine/engine/src/gltf/GLTFDocumentState'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
-import { getModelSceneID } from '@etherealengine/engine/src/scene/functions/loaders/ModelFunctions'
 import { NO_PROXY, defineState, getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { DirectionalLightComponent, TransformComponent } from '@etherealengine/spatial'
 import { CameraComponent } from '@etherealengine/spatial/src/camera/components/CameraComponent'
@@ -66,6 +65,7 @@ import React, { useEffect } from 'react'
 import { Color, Euler, Material, MathUtils, Matrix4, Mesh, Quaternion, Sphere, SphereGeometry, Vector3 } from 'three'
 
 import config from '@etherealengine/common/src/config'
+import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { ErrorComponent } from '@etherealengine/engine/src/scene/components/ErrorComponent'
 import { ShadowComponent } from '@etherealengine/engine/src/scene/components/ShadowComponent'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
@@ -414,7 +414,7 @@ const ThumbnailJobReactor = () => {
     const modelEntity = state.modelEntity.value
     const lightEntity = state.lightEntity.value
 
-    const sceneID = getModelSceneID(modelEntity)
+    const sceneID = GLTFComponent.getInstanceID(modelEntity)
     if (!sceneState.value[sceneID]) return
 
     try {

packages/client-core/src/media/webcam/WebcamInput.ts

@@ -8,12 +8,12 @@ import { Entity } from '@etherealengine/ecs/src/Entity'
 import { defineQuery } from '@etherealengine/ecs/src/QueryFunctions'
 import { AvatarRigComponent } from '@etherealengine/engine/src/avatar/components/AvatarAnimationComponent'
 import { AvatarComponent } from '@etherealengine/engine/src/avatar/components/AvatarComponent'
-import { SkinnedMeshComponent } from '@etherealengine/engine/src/avatar/components/SkinnedMeshComponent'
 import { AvatarNetworkAction } from '@etherealengine/engine/src/avatar/state/AvatarNetworkActions'
 import { defineActionQueue, getMutableState } from '@etherealengine/hyperflux'
 import { GroupComponent } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
 import { iterateEntityNode } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
+import { SkinnedMeshComponent } from '@etherealengine/spatial/src/renderer/components/SkinnedMeshComponent'
 import { MediaStreamState } from '../../transports/MediaStreams'
 import { WebcamInputComponent } from './WebcamInputComponent'
 

packages/client-core/src/world/Location.tsx

@@ -71,7 +71,8 @@ const LocationPage = ({ online }: Props) => {
   useLoadEngineWithScene()
 
   useEffect(() => {
-    if (ready.value) logger.info({ event_name: 'enter_location' })
+    if (!ready.value) return
+    logger.info({ event_name: 'enter_location' })
     return () => logger.info({ event_name: 'exit_location' })
   }, [ready.value])
 

packages/editor/src/components/hierarchy/HierarchyTreeWalker.ts

@@ -31,9 +31,9 @@ import { getState } from '@etherealengine/hyperflux'
 import { EntityTreeComponent } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
 import { UUIDComponent } from '@etherealengine/ecs'
+import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { GLTFSnapshotState } from '@etherealengine/engine/src/gltf/GLTFState'
 import { ModelComponent } from '@etherealengine/engine/src/scene/components/ModelComponent'
-import { getModelSceneID } from '@etherealengine/engine/src/scene/functions/loaders/ModelFunctions'
 import { GLTF } from '@gltf-transform/core'
 import { EditorState } from '../../services/EditorServices'
 
@@ -84,7 +84,7 @@ function buildHierarchyTree(
   array.push(item)
 
   if (hasComponent(entity, ModelComponent) && showModelChildren) {
-    const modelSceneID = getModelSceneID(entity)
+    const modelSceneID = GLTFComponent.getInstanceID(entity)
     const snapshotState = getState(GLTFSnapshotState)
     const snapshots = snapshotState[modelSceneID]
     if (snapshots) {

packages/editor/src/functions/sceneFunctions.tsx

@@ -29,8 +29,8 @@ import config from '@etherealengine/common/src/config'
 import multiLogger from '@etherealengine/common/src/logger'
 import { StaticResourceType, fileBrowserPath, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { cleanString } from '@etherealengine/common/src/utils/cleanString'
-import { EntityUUID, UUIDComponent, UndefinedEntity } from '@etherealengine/ecs'
-import { getComponent, setComponent } from '@etherealengine/ecs/src/ComponentFunctions'
+import { EntityUUID, UndefinedEntity } from '@etherealengine/ecs'
+import { setComponent } from '@etherealengine/ecs/src/ComponentFunctions'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { GLTFComponent } from '@etherealengine/engine/src/gltf/GLTFComponent'
 import { GLTFDocumentState } from '@etherealengine/engine/src/gltf/GLTFDocumentState'
@@ -93,7 +93,7 @@ export const saveSceneGLTF = async (
   if (signal.aborted) throw new Error(i18n.t('editor:errors.saveProjectAborted'))
 
   const { rootEntity } = getState(EditorState)
-  const sourceID = `${getComponent(rootEntity, UUIDComponent)}-${getComponent(rootEntity, GLTFComponent).src}`
+  const sourceID = GLTFComponent.getInstanceID(rootEntity)
 
   const sceneName = cleanString(sceneFile!.replace('.scene.json', '').replace('.gltf', ''))
   const currentSceneDirectory = getState(EditorState).scenePath!.split('/').slice(0, -1).join('/')

packages/editor/src/systems/ClickPlacementSystem.tsx

@@ -47,7 +47,6 @@ import { ModelComponent } from '@etherealengine/engine/src/scene/components/Mode
 import { SourceComponent } from '@etherealengine/engine/src/scene/components/SourceComponent'
 import { entityJSONToGLTFNode } from '@etherealengine/engine/src/scene/functions/GLTFConversion'
 import { createSceneEntity } from '@etherealengine/engine/src/scene/functions/createSceneEntity'
-import { getModelSceneID } from '@etherealengine/engine/src/scene/functions/loaders/ModelFunctions'
 import { toEntityJson } from '@etherealengine/engine/src/scene/functions/serializeWorld'
 import {
   NO_PROXY,
@@ -173,7 +172,7 @@ const PlacementModelReactor = (props: { placementEntity: Entity }) => {
 
   useEffect(() => {
     if (!placementModel) return
-    const sceneID = getModelSceneID(props.placementEntity)
+    const sceneID = GLTFComponent.getInstanceID(props.placementEntity)
     if (!sceneState.scenes[sceneID]) return
     iterateEntityNode(props.placementEntity, (entity) => {
       const mesh = getOptionalComponent(entity, MeshComponent)

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

@@ -29,8 +29,8 @@ import { getComponent, setComponent } from '@etherealengine/ecs/src/ComponentFun
 import { Entity, UndefinedEntity } from '@etherealengine/ecs/src/Entity'
 import { EntityTreeComponent, iterateEntityNode } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
+import { GLTFComponent } from '../../../../gltf/GLTFComponent'
 import { SourceComponent } from '../../../../scene/components/SourceComponent'
-import { getModelSceneID } from '../../../../scene/functions/loaders/ModelFunctions'
 import { GLTFExporterPlugin, GLTFWriter } from '../GLTFExporter'
 import { ExporterExtension } from './ExporterExtension'
 
@@ -46,7 +46,7 @@ export default class SourceHandlerExtension extends ExporterExtension implements
     //we allow saving of any object that has a source equal to or parent of the root's source
     const validSrcs: Set<string> = new Set()
     if (!this.writer.options.srcEntity) return
-    validSrcs.add(getModelSceneID(this.writer.options.srcEntity!))
+    validSrcs.add(GLTFComponent.getInstanceID(this.writer.options.srcEntity!))
     const root = (Array.isArray(input) ? input[0] : input) as Object3D
     let walker: Entity | null = root.entity
     while (walker !== null) {

packages/engine/src/assets/loaders/gltf/GLTFExtensions.ts

@@ -53,28 +53,28 @@ import { assignExtrasToUserData } from './GLTFLoaderFunctions'
 import { GLTFParser } from './GLTFParser'
 
 export const EXTENSIONS = {
-  KHR_BINARY_GLTF: 'KHR_binary_glTF',
-  KHR_DRACO_MESH_COMPRESSION: 'KHR_draco_mesh_compression',
-  KHR_LIGHTS_PUNCTUAL: 'KHR_lights_punctual',
-  KHR_MATERIALS_CLEARCOAT: 'KHR_materials_clearcoat',
-  KHR_MATERIALS_IOR: 'KHR_materials_ior',
-  KHR_MATERIALS_SHEEN: 'KHR_materials_sheen',
-  KHR_MATERIALS_SPECULAR: 'KHR_materials_specular',
-  KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission',
-  KHR_MATERIALS_IRIDESCENCE: 'KHR_materials_iridescence',
-  KHR_MATERIALS_ANISOTROPY: 'KHR_materials_anisotropy',
-  KHR_MATERIALS_UNLIT: 'KHR_materials_unlit',
-  KHR_MATERIALS_VOLUME: 'KHR_materials_volume',
-  KHR_TEXTURE_BASISU: 'KHR_texture_basisu',
-  KHR_TEXTURE_TRANSFORM: 'KHR_texture_transform',
-  KHR_MESH_QUANTIZATION: 'KHR_mesh_quantization',
-  KHR_MATERIALS_EMISSIVE_STRENGTH: 'KHR_materials_emissive_strength',
-  EXT_MATERIALS_BUMP: 'EXT_materials_bump',
-  EXT_TEXTURE_WEBP: 'EXT_texture_webp',
-  EXT_TEXTURE_AVIF: 'EXT_texture_avif',
-  EXT_MESHOPT_COMPRESSION: 'EXT_meshopt_compression',
-  EXT_MESH_GPU_INSTANCING: 'EXT_mesh_gpu_instancing',
-  EE_MATERIAL: 'EE_material'
+  KHR_BINARY_GLTF: 'KHR_binary_glTF' as const,
+  KHR_DRACO_MESH_COMPRESSION: 'KHR_draco_mesh_compression' as const,
+  KHR_LIGHTS_PUNCTUAL: 'KHR_lights_punctual' as const,
+  KHR_MATERIALS_CLEARCOAT: 'KHR_materials_clearcoat' as const,
+  KHR_MATERIALS_IOR: 'KHR_materials_ior' as const,
+  KHR_MATERIALS_SHEEN: 'KHR_materials_sheen' as const,
+  KHR_MATERIALS_SPECULAR: 'KHR_materials_specular' as const,
+  KHR_MATERIALS_TRANSMISSION: 'KHR_materials_transmission' as const,
+  KHR_MATERIALS_IRIDESCENCE: 'KHR_materials_iridescence' as const,
+  KHR_MATERIALS_ANISOTROPY: 'KHR_materials_anisotropy' as const,
+  KHR_MATERIALS_UNLIT: 'KHR_materials_unlit' as const,
+  KHR_MATERIALS_VOLUME: 'KHR_materials_volume' as const,
+  KHR_TEXTURE_BASISU: 'KHR_texture_basisu' as const,
+  KHR_TEXTURE_TRANSFORM: 'KHR_texture_transform' as const,
+  KHR_MESH_QUANTIZATION: 'KHR_mesh_quantization' as const,
+  KHR_MATERIALS_EMISSIVE_STRENGTH: 'KHR_materials_emissive_strength' as const,
+  EXT_MATERIALS_BUMP: 'EXT_materials_bump' as const,
+  EXT_TEXTURE_WEBP: 'EXT_texture_webp' as const,
+  EXT_TEXTURE_AVIF: 'EXT_texture_avif' as const,
+  EXT_MESHOPT_COMPRESSION: 'EXT_meshopt_compression' as const,
+  EXT_MESH_GPU_INSTANCING: 'EXT_mesh_gpu_instancing' as const,
+  EE_MATERIAL: 'EE_material' as const
 }
 
 /**

packages/engine/src/assets/loaders/gltf/GLTFLoader.ts

@@ -69,11 +69,12 @@ import {
 } from './GLTFExtensions'
 import { GLTFParser } from './GLTFParser'
 import { KTX2Loader } from './KTX2Loader'
+import { MeshoptDecoder } from './meshopt_decoder'
 
 export class GLTFLoader extends Loader {
   dracoLoader = null as null | DRACOLoader
   ktx2Loader = null as null | KTX2Loader
-  meshoptDecoder = null
+  meshoptDecoder = null as null | MeshoptDecoder
 
   pluginCallbacks = [] as any[]
 

packages/engine/src/assets/loaders/gltf/GLTFParser.ts

@@ -98,7 +98,7 @@ import {
 } from './GLTFLoaderFunctions'
 import { KTX2Loader } from './KTX2Loader'
 
-function getImageURIMimeType(uri) {
+export function getImageURIMimeType(uri) {
   if (uri.search(/\.jpe?g($|\?)/i) > 0 || uri.search(/^data\:image\/jpeg/) === 0) return 'image/jpeg'
   if (uri.search(/\.webp($|\?)/i) > 0 || uri.search(/^data\:image\/webp/) === 0) return 'image/webp'
 
@@ -123,10 +123,13 @@ declare module '@gltf-transform/core/dist/types/gltf.d.ts' {
   }
 }
 
-type GLTFParserOptions = {
+export type GLTFParserOptions = {
+  body: null | ArrayBuffer
+  documentID: string
+  document: GLTF.IGLTF
   crossOrigin: 'anonymous' | string
   ktx2Loader: KTX2Loader
-  manager: LoadingManager | any
+  manager: LoadingManager
   meshoptDecoder: any
   path: string
   requestHeader: Record<string, any>
@@ -688,7 +691,7 @@ export class GLTFParser {
 
     if (sourceDef.uri) {
       const handler = options.manager.getHandler(sourceDef.uri)
-      if (handler !== null) loader = handler
+      if (handler !== null) loader = handler as any
     }
 
     return this.loadTextureImage(textureIndex, sourceIndex, loader)
@@ -1767,7 +1770,7 @@ export class GLTFParser {
 
 /* GLTFREGISTRY */
 
-class GLTFRegistry {
+export class GLTFRegistry {
   objects = {}
 
   get(key) {

packages/engine/src/assets/loaders/gltf/meshopt_decoder.d.ts

@@ -0,0 +1,36 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+
+export type MeshoptDecoder = {
+  supported: boolean;
+  ready: Promise<void>;
+  useWorkers: (numWorkers: number) => void;
+  decodeVertexBuffer: (buffer: ArrayBuffer, count: number, stride: number, filter: number) => ArrayBuffer;
+  decodeIndexBuffer: (buffer: ArrayBuffer, count: number, filter: number) => ArrayBuffer;
+  decodeIndexSequence: (buffer: ArrayBuffer, count: number, filter: number) => ArrayBuffer;
+  decodeGltfBuffer: (buffer: Uint8Array, count: number, stride: number, source: Uint8Array, mode: number, filter: number) => void;
+  decodeGltfBufferAsync?: (count: number, stride: number, source: Uint8Array, mode: number, filter: number) => Promise<{ buffer: ArrayBuffer }>;
+}