@needle-tools/engine 4.8.6-next.f3ce848 → 4.8.7-next.1715881

package/plugins/vite/alias.js

@@ -26,9 +26,7 @@ const packages_to_resolve = {
     'three/nodes': (res, packageName, index, path) => {
         return "three/examples/jsm/nodes/Nodes.js";
     },
-    'three': (res, packageName, index, _path) => {
-        return path.resolve(projectDir, 'node_modules', 'three');
-    },
+    'three': "auto-resolve",
 
     // Handle all previous imports where users did import using @needle-engine/src
     '@needle-tools/engine/src': (res, packageName, index, path) => {
@@ -61,6 +59,9 @@ const packages_to_resolve = {
     'three-mesh-bvh': "auto-resolve",
     'postprocessing': "auto-resolve",
     '@dimforge/rapier3d-compat': "auto-resolve",
+
+    '@needle-tools/gltf-progressive': "auto-resolve",
+    '@needle-tools/materialx': "auto-resolve",
 }
 
 /**
@@ -76,10 +77,13 @@ export const needleViteAlias = (command, config, userSettings) => {
     let outputDebugFile = null;
     function log(...msg) {
         console.log(...msg);
-        if (debug && outputDebugFile) outputDebugFile.write(msg.join(" ") + "\n");
+        if (debug) logToFile(...msg);
+    }
+    function logToFile(...msg) {
+        outputDebugFile?.write(msg.join(" ") + "\n");
     }
     if (debug) {
-        const outputFilePath = path.resolve(projectDir, 'node_modules/.vite/needle.alias.log');
+        const outputFilePath = path.resolve(projectDir, 'node_modules/.needle/needle.alias.log');
         const outputDirectory = path.dirname(outputFilePath);
         if (!existsSync(outputDirectory)) mkdirSync(outputDirectory, { recursive: true });
         outputDebugFile = createWriteStream(outputFilePath, { flags: "a" });
@@ -105,6 +109,18 @@ export const needleViteAlias = (command, config, userSettings) => {
                 }
             }
 
+
+            // is needle engine a local package?
+            // This will cause local changes to not be reflected anymore...
+            const localEnginePath = path.resolve(projectDir, 'node_modules/', '@needle-tools/engine', 'node_modules');
+            if (existsSync(localEnginePath)) {
+                config.optimizeDeps ??= {};
+                config.optimizeDeps.exclude ??= [];
+                config.optimizeDeps.exclude.push('@needle-tools/engine');
+                log("[needle-alias] Detected local @needle-tools/engine package: will exclude it from optimization");
+            }
+
+
             if (debug) {
                 const testResults = [];
                 for (const name in aliasDict) {
@@ -118,6 +134,7 @@ export const needleViteAlias = (command, config, userSettings) => {
         },
     }
 
+    /** @type {string|undefined} */
     let lastImporter = "";
     /** This plugin logs all imports. This helps to find cases where incorrect folders are found/resolved. */
 
@@ -140,15 +157,16 @@ export const needleViteAlias = (command, config, userSettings) => {
             // verbose logging for all imports
             if (lastImporter !== importer) {
                 lastImporter = importer;
-                log(`[needle-alias] Resolving: ${importer} (file${options?.ssr ? ", SSR" : ""})`);
+                logToFile(`[needle-alias] Resolving: ${importer} (file${options?.ssr ? ", SSR" : ""})`);
             }
-            log(`[needle-alias]     → ${id}`);
+            logToFile(`[needle-alias]     → ${id}`);
             return;
         },
     }
     if (debug) return [debuggingPlugin, aliasPlugin];
     return [aliasPlugin];
 
+
     /**
      * Adds a path resolver to the alias dictionary.
      * @param {string} name - The name of the package to resolve.
@@ -163,25 +181,29 @@ export const needleViteAlias = (command, config, userSettings) => {
         const callback = typeof value === "function" ? value : null;
 
         let fullpath = path.resolve(projectDir, 'node_modules', name);
-        if (!existsSync(fullpath)) {
-            fullpath = path.resolve(projectDir, 'node_modules', "@needle-tools/engine", "node_modules", name);
+        // if (!existsSync(path.resolve(fullpath, "package.json"))) 
+        {
+            const pathInEngine = path.resolve(projectDir, 'node_modules', "@needle-tools/engine", "node_modules", name);
+            if (existsSync(pathInEngine)) {
+                fullpath = pathInEngine;
+            }
         }
 
-        if (existsSync(fullpath)) {
-            aliasDict[name] = (packageName, index, path) => {
-                if (callback !== null) {
-                    const overrideResult = callback(fullpath, packageName, index, path);
-                    if (typeof overrideResult === "string")
-                        if (existsSync(overrideResult)) {
-                            if (debug) console.warn(`[needle-alias] \"${path}\" was requested and resolved to \"${overrideResult}\"`);
-                            return overrideResult;
-                        }
-                }
-
-                if (debug && path != packageName) {
-                    console.warn(`[needle-alias] \"${path}\" was requested and resolved to \"${fullpath}\"`);
-                }
+        const workingDirectory = `${process.cwd()}/`;
+        const pathExists = existsSync(fullpath);
+
+        aliasDict[name] = (packageName, index, path) => {
+            if (callback !== null) {
+                const overrideResult = callback(fullpath, packageName, index, path);
+                if (typeof overrideResult === "string")
+                    if (existsSync(overrideResult)) {
+                        if (debug && overrideResult !== packageName) log(`[needle-alias] Resolved \"${path}\"   →   \"${overrideResult.substring(workingDirectory.length).replaceAll("\\", "/")}\"`);
+                        return overrideResult;
+                    }
+            }
 
+            if (pathExists) {
+                if (debug && path !== packageName) log(`[needle-alias] Resolved \"${path}\"   →   \"${fullpath.substring(workingDirectory.length).replaceAll("\\", "/")}\"`);
                 return fullpath;
             }
         }

package/src/engine/api.ts

@@ -33,6 +33,7 @@ export * from "./engine_context.js";
 export * from "./engine_context_registry.js";
 export * from "./engine_coroutine.js"
 export * from "./engine_create_objects.js";
+export * from "./engine_feature_flags.js"
 export * from "./engine_gameobject.js";
 export { Gizmos } from "./engine_gizmos.js"
 export * from "./engine_gltf.js";
@@ -42,7 +43,7 @@ export { InstancingUtil } from "./engine_instancing.js";
 export { hasCommercialLicense, hasIndieLicense, hasProLicense } from "./engine_license.js";
 export * from "./engine_lifecycle_api.js";
 export { NeedleEngineModelLoader } from "./engine_loaders.callbacks.js";
-export { loadAsset, loadSync,parseSync } from "./engine_loaders.js";
+export { loadAsset, loadSync, parseSync } from "./engine_loaders.js";
 export * from "./engine_math.js";
 export { MODULES as NEEDLE_ENGINE_MODULES } from "./engine_modules.js";
 export * from "./engine_networking.js";

package/src/engine/engine_addressables.ts

@@ -8,7 +8,7 @@ import { BlobStorage } from "./engine_networking_blob.js";
 import { registerPrefabProvider, syncInstantiate, SyncInstantiateOptions } from "./engine_networking_instantiate.js";
 import { SerializationContext, TypeSerializer } from "./engine_serialization_core.js";
 import { Context } from "./engine_setup.js";
-import type { GLTF, IComponent, IGameObject, SourceIdentifier } from "./engine_types.js";
+import type { GLTF, IComponent, IGameObject, Model, SourceIdentifier } from "./engine_types.js";
 
 const debug = getParam("debugaddressables");
 
@@ -138,21 +138,35 @@ export class AssetReference {
         return ref;
     }
 
-    private static currentlyInstantiating: Map<string, number> = new Map<string, number>();
 
-    /** @returns true if this is an AssetReference instance */
-    get isAssetReference() { return true; }
 
-    /** The loaded asset */
+
+
+
+    readonly isAssetReference = true;
+
+    /**  
+     * This is the loaded asset root object. If the asset is a glb/gltf file this will be the {@link three#Scene} object.
+     */
+    get rawAsset(): any { return this._rawAsset; }
+
+    /** The loaded asset root
+     */
     get asset(): Object3D | null {
-        return this._glbRoot ?? this._asset;
+        return this._glbRoot ?? (this._rawAsset?.scene || null);
     }
 
-    protected set asset(val: any) {
-        this._asset = val;
+    protected set asset(val: Object3D | null) {
+        if (val) {
+            this._rawAsset = {
+                animations: val.animations,
+                scene: val,
+                scenes: [val],
+            }
+        }
+        else this._rawAsset = null;
     }
 
-    private _loading?: PromiseLike<any>;
 
     /** The url of the loaded asset (or the asset to be loaded) 
      * @deprecated use url */
@@ -177,12 +191,7 @@ export class AssetReference {
             (this._url.startsWith("http") || this._url.startsWith("blob:") || this._url.startsWith("www.") || this._url.includes("/"));
     }
 
-    /**  
-     * This is the loaded asset root object. If the asset is a glb/gltf file this will be the {@link three#Scene} object.
-     */
-    get rawAsset(): any { return this._asset; }
-
-    private _asset: any;
+    private _rawAsset: Model | null = null;
     private _glbRoot?: Object3D | null;
     private _url: string;
     private _urlName: string;
@@ -207,7 +216,7 @@ export class AssetReference {
         else {
             this._urlName = uri;
         }
-        
+
         if (asset !== null) this.asset = asset;
         registerPrefabProvider(this._url, this.onResolvePrefab.bind(this));
     }
@@ -226,6 +235,8 @@ export class AssetReference {
         return !this.asset || (this.asset as any).__destroyed === true || isDestroyed(this.asset) === true;
     }
 
+    private _loadingPromise: Promise<Model | null | undefined> | null = null;
+
     /**
      * @returns `true` if the asset has been loaded (via preload) or if it exists already (assigned to `asset`) */
     isLoaded() { return this._rawBinary || this.asset !== undefined }
@@ -242,7 +253,7 @@ export class AssetReference {
         this.asset = null;
         this._rawBinary = undefined;
         this._glbRoot = null;
-        this._loading = undefined;
+        this._loadingPromise = null;
         if (Context.Current) {
             Context.Current.addressables.unregisterAssetReference(this);
         }
@@ -267,16 +278,14 @@ export class AssetReference {
     /** Loads the asset and creates one instance (assigned to `asset`)
      * @returns the loaded asset
      */
-    async loadAssetAsync(prog?: ProgressCallback | null) {
-        if (debug)
-            console.log("loadAssetAsync", this.url);
+    async loadAssetAsync(prog?: ProgressCallback | null): Promise<Object3D | null> {
+        if (debug) console.log("[AssetReference] loadAssetAsync", this.url);
         if (!this.mustLoad) return this.asset;
 
         if (prog) this._progressListeners.push(prog);
-        
-        if (this._loading !== undefined) {
-            // console.warn("Wait for other loading thiny");
-            return this._loading.then(_ => this.asset);
+
+        if (this._loadingPromise !== null) {
+            return this._loadingPromise.then(_ => this.asset);
         }
         const context = Context.Current;
         // TODO: technically we shouldnt call awake only when the object is added to a scene
@@ -285,31 +294,30 @@ export class AssetReference {
         // console.log("START LOADING");
         if (this._rawBinary) {
             if (!(this._rawBinary instanceof ArrayBuffer)) {
-                console.error("Failed loading: Invalid raw binary data. Must be of type ArrayBuffer. " + (typeof this._rawBinary));
+                console.error("[AssetReference] Failed loading – Invalid data. Must be of type ArrayBuffer. " + (typeof this._rawBinary));
                 return null;
             }
-            this._loading = getLoader().parseSync(context, this._rawBinary, this.url, null);
+            this._loadingPromise = getLoader().parseSync(context, this._rawBinary, this.url, null);
             this.raiseProgressEvent(new ProgressEvent("progress", { loaded: this._rawBinary.byteLength, total: this._rawBinary.byteLength }));
         }
         else {
             if (debug) console.log("Load async", this.url);
-            this._loading = getLoader().loadSync(context, this.url, this.url, null, prog => {
+            this._loadingPromise = getLoader().loadSync(context, this.url, this.url, null, prog => {
                 this.raiseProgressEvent(prog);
             });
         }
-        const res = await this._loading;
+        this._loadingPromise.finally(() => this._loadingPromise = null);
+        const res = await this._loadingPromise;
         // clear all progress listeners after download has finished
         this._progressListeners.length = 0;
         this._glbRoot = this.tryGetActualGameObjectRoot(res);
-        this._loading = undefined;
         if (res) {
             // Make sure the loaded roots all have a reference to this AssetReference
             // that was originally loading it.
             // We need this when the loaded asset is being disposed
             // TODO: we have to prevent disposing resources that are still in use
             res[$assetReference] = this;
-            if (this._glbRoot)
-                this._glbRoot[$assetReference] = this;
+            if (this._glbRoot) this._glbRoot[$assetReference] = this;
             if (this.asset) this.asset[$assetReference] = this;
 
             // we need to handle the pre_setup callsbacks before instantiating
@@ -317,7 +325,7 @@ export class AssetReference {
             processNewScripts(context);
 
             if (res.scene !== undefined) {
-                this.asset = res;
+                this._rawAsset = res;
             }
             return this.asset;
         }
@@ -352,6 +360,9 @@ export class AssetReference {
         }
     }
 
+
+    private static readonly currentlyInstantiating: Map<string, number> = new Map<string, number>();
+
     private async onInstantiate(opts?: Object3D | IInstantiateOptions | SyncInstantiateOptions | null, networked: boolean = false, saveOnServer?: boolean): Promise<Object3D | null> {
         const context = Context.Current;
 
@@ -544,7 +555,7 @@ export class ImageReference {
             console.error("Can not load texture without url");
             return failedTexturePromise;
         }
-        
+
         if (!this.loader) this.loader = new TextureLoader();
         this.loader.setCrossOrigin("anonymous");
         return this.loader.loadAsync(this.url).then(res => {

package/src/engine/engine_animation.ts

@@ -2,6 +2,7 @@ import { AnimationAction, AnimationClip, AnimationMixer, Object3D, PropertyBindi
 
 import type { Context } from "./engine_context.js";
 import { GLTF, IAnimationComponent, Model } from "./engine_types.js";
+import { TypeStore } from "./engine_typestore.js";
 
 /**
  * Registry for animation related data. Use {@link registerAnimationMixer} to register an animation mixer instance.  
@@ -88,12 +89,15 @@ export class AnimationUtils {
      * This method will look for objects in the scene that have animations and assign them to the correct objects.  
      * @param file The GLTF file to assign the animations from
      */
-    static assignAnimationsFromFile(file: Pick<Model, "animations" | "scene">, opts?: { createAnimationComponent(obj: Object3D, animation: AnimationClip): IAnimationComponent }) {
+    static autoplayAnimations(file: Object3D | Pick<Model, "animations" | "scene">): Array<IAnimationComponent> | null {
         if (!file || !file.animations) {
             console.debug("No animations found in file");
-            return;
+            return null;
         }
 
+        const scene = "scene" in file ? file.scene : file as Object3D;
+        const animationComponents = new Array<IAnimationComponent>();
+
         for (let i = 0; i < file.animations.length; i++) {
             const animation = file.animations[i];
             if (!animation.tracks || animation.tracks.length <= 0) {
@@ -103,12 +107,12 @@ export class AnimationUtils {
             for (const t in animation.tracks) {
                 const track = animation.tracks[t];
                 const parsedPath = PropertyBinding.parseTrackName(track.name);
-                let obj = PropertyBinding.findNode(file.scene, parsedPath.nodeName);
+                let obj = PropertyBinding.findNode(scene, parsedPath.nodeName);
                 if (!obj) {
                     const objectName = track["__objectName"] ?? track.name.substring(0, track.name.indexOf("."));
                     // let obj = gltf.scene.getObjectByName(objectName);
                     // this finds unnamed objects that still have tracks targeting them
-                    obj = file.scene.getObjectByProperty('uuid', objectName);
+                    obj = scene.getObjectByProperty('uuid', objectName);
 
                     if (!obj) {
                         // console.warn("could not find " + objectName, animation, gltf.scene);
@@ -116,19 +120,23 @@ export class AnimationUtils {
                     }
                 }
 
-                let animationComponent = findAnimationGameObjectInParent(obj);
+                let animationComponent = findAnimationGameObjectInParent(obj) || findAnimationGameObjectInParent(scene);
                 if (!animationComponent) {
-                    if (!opts?.createAnimationComponent) {
-                        console.warn("No AnimationComponent found in parent hierarchy of object and no 'createAnimationComponent' callback was provided in options.")
-                        continue;
+                    const anim = TypeStore.get("Animation");
+                    animationComponent = scene.addComponent(anim);
+                    if (!animationComponent) {
+                        console.error("Failed creating Animation component: No 'Animation' component found in TypeStore");
+                        break;
                     }
-                    animationComponent = opts.createAnimationComponent(file.scene, animation)
                 }
+                animationComponents.push(animationComponent);
                 if (animationComponent.addClip) {
                     animationComponent.addClip(animation);
                 }
             }
         }
+        return animationComponents;
+
         function findAnimationGameObjectInParent(obj): IAnimationComponent | null {
             if (!obj) return null;
             const components = obj.userData?.components;

package/src/engine/engine_feature_flags.ts

@@ -0,0 +1,8 @@
+
+
+export namespace NEEDLE_ENGINE_FEATURE_FLAGS {
+
+    // eslint-disable-next-line prefer-const
+    export let experimentalSmartHierarchyUpdate = false;
+
+}

package/src/engine/engine_loaders.ts

@@ -61,7 +61,7 @@ export async function onCreateLoader(url: string, context: Context): Promise<Cus
     switch (type) {
         case "unsupported":
             return null;
-            
+
         default:
         case "unknown":
             {
@@ -287,15 +287,6 @@ async function onAfterLoaded(loader: Loader | CustomLoader, context: Context, gl
         gltfId = gltfId.split("?")[0];
     }
 
-    // assign animations of loaded glTF to all scenes
-    if ("scenes" in model) {
-        for (const scene of model.scenes) {
-            if (scene && !scene.animations?.length) {
-                scene.animations = [...model.animations];
-            }
-        }
-    }
-
     // E.g. fbx material cleanup
     postprocessLoadedFile(loader, model);
 
@@ -357,13 +348,27 @@ function checkIfUserAttemptedToLoadALocalFile(url: string) {
 /**
  * Postprocess the loaded file. This is used to apply any custom postprocessing to the loaded file.
  */
-function postprocessLoadedFile(loader: object, result: Model) {
+function postprocessLoadedFile(loader: object, model: Model) {
+
+
+    // assign animations of loaded glTF to all scenes
+    if ("scenes" in model) {
+        for (const scene of model.scenes) {
+            if (scene && !scene.animations?.length) {
+                for (const anim of model.animations) {
+                    if (!scene.animations.includes(anim)) {
+                        scene.animations.push(anim);
+                    }
+                }
+            }
+        }
+    }
 
     if (loader instanceof FBXLoader || loader instanceof OBJLoader) {
 
-        let obj: Object3D | Model = result;
+        let obj: Object3D | Model = model;
         if (!(obj instanceof Object3D)) {
-            obj = (result as GLTF).scene;
+            obj = (model as GLTF).scene || model.scenes.find(s => s);
         }
 
         obj.traverse((child) => {

package/src/engine/engine_mainloop_utils.ts

@@ -3,6 +3,7 @@ import { CubeCamera, Object3D, Scene, WebGLCubeRenderTarget } from 'three';
 import { isDevEnvironment } from "./debug/index.js";
 import * as constants from "./engine_constants.js";
 import { ContextRegistry } from "./engine_context_registry.js";
+import { NEEDLE_ENGINE_FEATURE_FLAGS } from './engine_feature_flags.js';
 import { isActiveSelf } from './engine_gameobject.js';
 import { safeInvoke } from "./engine_generic_utils.js";
 import type { IComponent, IContext } from './engine_types.js';
@@ -31,7 +32,7 @@ export function processNewScripts(context: IContext) {
     if (debug)
         console.log("Register new components", context.new_scripts.length, [...context.new_scripts], context.alias ? ("element: " + context.alias) : context["hash"], context);
 
-    
+
     if (context.new_scripts_pre_setup_callbacks.length > 0) {
         for (const cb of context.new_scripts_pre_setup_callbacks) {
             if (!cb) continue;
@@ -39,7 +40,7 @@ export function processNewScripts(context: IContext) {
         }
         context.new_scripts_pre_setup_callbacks.length = 0;
     }
-    
+
     if (context.new_scripts.length <= 0) return;
 
     // TODO: update all the code from above to use this logic
@@ -269,8 +270,22 @@ export function isNeedleXRSessionEventReceiver(script: any, mode: XRSessionMode
 }
 
 
+let needsUpdate = true;
+export function markHierarchyDirty() {
+    needsUpdate = true;
+}
+
 /** @internal */
-export function updateIsActive(obj?: Object3D) {
+export function updateIsActive(obj?: Object3D, force: boolean = false) {
+
+    if (NEEDLE_ENGINE_FEATURE_FLAGS.experimentalSmartHierarchyUpdate) {
+
+        if (!force) {
+            if (!needsUpdate) return;
+        }
+        needsUpdate = false;
+    }
+
     if (!obj) obj = ContextRegistry.Current.scene;
     if (!obj) {
         console.trace("Invalid call - no current context.");
@@ -295,9 +310,9 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: Object3D, activeInHierarc
         return false;
     }
 
-    const isActive = isActiveSelf(go);
+    const activeSelf = isActiveSelf(go);
     if (activeInHierarchy) {
-        activeInHierarchy = isActive;
+        activeInHierarchy = activeSelf;
         // IF we update activeInHierarchy within a disabled hierarchy we need to check the parent
         if (activeInHierarchy && go.parent && level === 0) {
             const parent = go.parent;
@@ -321,7 +336,7 @@ function updateIsActiveInHierarchyRecursiveRuntime(go: Object3D, activeInHierarc
         go[constants.activeInHierarchyFieldName] = activeInHierarchy;
 
         if (debugHierarchy)
-            console.warn("ACTIVE CHANGE", go.name, isActive, go.visible, activeInHierarchy, "changed?" + changed, go);
+            console.warn("ACTIVE CHANGE", go.name, activeSelf, go.visible, activeInHierarchy, "changed?" + changed, go);
         if (allowEventCall) {
             perComponent(go, comp => {
                 if (activeInHierarchy) {

package/src/engine/extensions/extensions.ts

@@ -22,11 +22,11 @@ const debug = getParam("debugextensions");
 
 // lazily import the GLTFAnimationPointerExtension in case it doesnt exist (e.g. using vanilla three)
 let GLTFAnimationPointerExtension: any;
-const KHR_ANIMATIONPOINTER_IMPORT = import("three/examples/jsm/loaders/GLTFLoaderAnimationPointer.js").then(async mod => {
+const KHR_ANIMATIONPOINTER_IMPORT = import("@needle-tools/three-animation-pointer").then(async mod => {
     GLTFAnimationPointerExtension = mod.GLTFAnimationPointerExtension;
     return GLTFAnimationPointerExtension;
 }).catch(e => {
-    console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three for full KHR_animation support", e);
+    console.warn("Failed to import GLTFLoaderAnimationPointer. Please use @needle-tools/three-animationpointer for full KHR_animation support", e);
 });
 
 

package/src/engine/js-extensions/Object3D.ts

@@ -1,7 +1,7 @@
 import { Object3D, Quaternion, Vector3 } from "three";
 import { TransformControlsGizmo } from "three/examples/jsm/controls/TransformControls.js";
 
-import { addComponent, addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components.js";
+import { addComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components.js";
 import { destroy, isActiveSelf, setActive } from "../../engine/engine_gameobject.js";
 import {
     getTempVector,
@@ -15,7 +15,9 @@ import {
     setWorldScale
 }
     from "../../engine/engine_three_utils.js";
-import type { ComponentInit, Constructor, ConstructorConcrete, HideFlags,IComponent as Component, IComponent } from "../../engine/engine_types.js";
+import type { ComponentInit, Constructor, ConstructorConcrete, HideFlags, IComponent as Component, IComponent } from "../../engine/engine_types.js";
+import { NEEDLE_ENGINE_FEATURE_FLAGS } from "../engine_feature_flags.js";
+import { markHierarchyDirty } from "../engine_mainloop_utils.js";
 import { applyPrototypeExtensions, registerPrototypeExtensions } from "./ExtensionUtils.js";
 
 
@@ -150,6 +152,27 @@ export function apply(object: Object3D) {
     }
 }
 
+if (NEEDLE_ENGINE_FEATURE_FLAGS.experimentalSmartHierarchyUpdate) {
+
+    const addFn = Object3D.prototype.add;
+    Object3D.prototype.add = function (...args: any) {
+        markHierarchyDirty();
+        return addFn.apply(this, args);
+    }
+
+    const attachFn = Object3D.prototype.attach;
+    Object3D.prototype.attach = function (...args: any) {
+        markHierarchyDirty();
+        return attachFn.apply(this, args);
+    }
+
+    const removeFn = Object3D.prototype.remove;
+    Object3D.prototype.remove = function (...args: any) {
+        markHierarchyDirty();
+        return removeFn.apply(this, args);
+    }
+}
+
 
 Object3D.prototype["SetActive"] = function (active: boolean) {
     this.visible = active;

package/src/engine-components/Animation.ts

@@ -67,7 +67,7 @@ export class Animation extends Behaviour implements IAnimationComponent {
     get isAnimationComponent(): boolean { return true; }
     addClip(clip: AnimationClip) {
         if (!this.animations) this.animations = [];
-        this.animations.push(clip);
+        if (!this.animations.includes(clip)) this.animations.push(clip);
     }
 
     /**

package/src/engine-components/AnimationUtilsAutoplay.ts

@@ -1,7 +1,6 @@
 import type { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 
 import { AnimationUtils } from "../engine/engine_animation.js";
-import { addComponent } from "../engine/engine_components.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { Animation } from "./Animation.js";
 import { Animator } from "./Animator.js";
@@ -29,11 +28,7 @@ ContextRegistry.registerCallback(ContextEvent.ContextCreated, args => {
                     return undefined;
                 }, true);
                 if (hasAnimation !== true) {
-                    AnimationUtils.assignAnimationsFromFile(file.file as GLTF, {
-                        createAnimationComponent: (obj, _clip) => {
-                            return addComponent(obj, Animation);
-                        },
-                    });
+                    AnimationUtils.autoplayAnimations(file.file as GLTF);
                 }
             }
         }