@needle-tools/engine 2.61.0-pre → 2.62.1-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.61.0-pre",
+    "version": "2.62.1-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "dist/needle-engine.js",

package/src/engine/debug/debug_overlay.ts

@@ -115,39 +115,37 @@ const logsContainerStyles = `
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-
-div {
+div[data-needle_engine_debug_overlay] {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
 }
 
-strong {
+div[data-needle_engine_debug_overlay] strong {
     font-weight: 700;
 }
 
-a {
+div[data-needle_engine_debug_overlay] a {
     color: white;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-a:hover {
+div[data-needle_engine_debug_overlay] a:hover {
     text-decoration: none;
     border: none;
 }
 
-.log strong {
+div[data-needle_engine_debug_overlay] .log strong {
     color: rgba(200,200,200,.9);
 }
 
-.warn strong {
+div[data-needle_engine_debug_overlay] .warn strong {
     color: rgba(255,255,230, 1);
 }
 
-.error strong {
+div[data-needle_engine_debug_overlay] .error strong {
     color: rgba(255,100,120, 1);
 }
-
 `;
 
 function getLogsContainer(domElement: HTMLElement): HTMLElement {
@@ -155,6 +153,7 @@ function getLogsContainer(domElement: HTMLElement): HTMLElement {
         return errorContainer.get(domElement)!;
     } else {
         const container = document.createElement("div");
+        container.setAttribute("data-needle_engine_debug_overlay", "");
         container.classList.add(arContainerClassName);
         container.classList.add("desktop");
         container.classList.add("debug-container");
@@ -206,6 +205,7 @@ function getMessageContainer(type: LogType, msg: string): HTMLElement {
         }
     }
     const element = document.createElement("div");
+    element.setAttribute("data-id", "__needle_engine_debug_overlay");
     element.style.marginRight = "5px";
     element.style.padding = ".5em";
     element.style.backgroundColor = "rgba(0,0,0,.9)";

package/src/engine/engine_addressables.ts

@@ -60,7 +60,7 @@ export class AssetReference {
         return ref;
     }
 
-    private static currentlyInstantiating: string[] = [];
+    private static currentlyInstantiating: Map<string, number> = new Map<string, number>();
 
     get asset(): any {
         return this._glbRoot ?? this._asset;
@@ -236,12 +236,16 @@ export class AssetReference {
                 }
             }
 
-            if (AssetReference.currentlyInstantiating.indexOf(this.uri) >= 0) {
-                console.error("Recursive instantiation of", this.uri);
+            let count = AssetReference.currentlyInstantiating.get(this.uri);
+            // allow up to 100 instantiations of the same prefab in the same frame
+            if (count !== undefined && count >= 100) {
+                console.error("Recursive or too many instantiations of " + this.uri + " in the same frame (" + count + ")");
                 return null;
             }
             try {
-                AssetReference.currentlyInstantiating.push(this.uri);
+                if (count === undefined) count = 0;
+                count += 1;
+                AssetReference.currentlyInstantiating.set(this.uri, count);
                 if (networked) {
                     options.context = context;
                     const prefab = this.asset;
@@ -259,7 +263,11 @@ export class AssetReference {
                 }
             }
             finally {
-                context.post_render_callbacks.push(() => AssetReference.currentlyInstantiating.pop());
+                context.post_render_callbacks.push(() => {
+                    if (count === undefined || count < 0) count = 0;
+                    else count -= 1;
+                    AssetReference.currentlyInstantiating.set(this.uri, count)
+                });
             }
 
         }

package/src/engine/engine_loaders.ts

@@ -3,6 +3,8 @@ import { Context } from "./engine_setup"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+
 import { getParam } from "./engine_utils";
 
 const debug = getParam("debugdecoders");
@@ -11,6 +13,7 @@ const DEFAULT_DRACO_DECODER_LOCATION ='https://www.gstatic.com/draco/versioned/d
 const DEFAULT_KTX2_TRANSCODER_LOCATION ='https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
 
 let dracoLoader: DRACOLoader;
+let meshoptDecoder: MeshoptDecoder;
 let ktx2Loader: KTX2Loader;
 
 export function setDracoDecoderPath(path: string | undefined) {
@@ -40,6 +43,11 @@ export function setKtx2TranscoderPath(path: string) {
     }
 }
 
+export function setMeshoptDecoder(_meshoptDecoder: any) {
+    if (_meshoptDecoder !== undefined)
+        meshoptDecoder = _meshoptDecoder;
+}
+
 export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Context) {
     if (!dracoLoader) {
         dracoLoader = new DRACOLoader();
@@ -54,7 +62,12 @@ export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Context) {
         if (context.renderer)
             ktx2Loader.detectSupport(context.renderer);
     }
+    if (!meshoptDecoder) {
+        meshoptDecoder = MeshoptDecoder;
+        if (debug) console.log("Using the default meshopt decoder");
+    }
 
     loader.setDRACOLoader(dracoLoader);
     loader.setKTX2Loader(ktx2Loader);
+    loader.setMeshoptDecoder(meshoptDecoder);
 }

package/src/engine-components/Animation.ts

@@ -145,12 +145,19 @@ export class Animation extends Behaviour {
     }
 
     play(clipOrNumber: AnimationClip | number | string | undefined, options?: PlayOptions): Promise<AnimationAction> | void {
+        if (debug) console.log("PLAY", clipOrNumber)
         this.init();
-        if (!this.mixer) return;
+        if (!this.mixer) {
+            if (debug) console.warn("Missing mixer", this);
+            return;
+        }
         if (clipOrNumber === undefined) clipOrNumber = 0;
         let clip: AnimationClip | undefined = clipOrNumber as AnimationClip;
         if (typeof clipOrNumber === 'number') {
-            if (clipOrNumber >= this.animations.length) return;
+            if (clipOrNumber >= this.animations.length) {
+                if (debug) console.log("No animation at index", clipOrNumber)
+                return;
+            }
             clip = this.animations[clipOrNumber];
         }
         else if (typeof clipOrNumber === "string") {
@@ -205,7 +212,8 @@ export class Animation extends Behaviour {
             action.loop = options.loop ? THREE.LoopRepeat : THREE.LoopOnce;
         else action.loop = THREE.LoopOnce;
         action.play();
-        // console.log("PLAY", action.getClip().name, action)
+        if (debug)
+            console.log("PLAY", action.getClip().name, action)
 
         const handle = new AnimationHandle(action, this.mixer!, options, _ => {
             this._handles.splice(this._handles.indexOf(handle), 1);

package/src/engine-components/timeline/PlayableDirector.ts

@@ -149,7 +149,11 @@ export class PlayableDirector extends Behaviour {
     }
 
     pause() {
+        if (!this.isValid()) return;
+        this._isPlaying = false;
+        if (this._isPaused) return;
         this._isPaused = true;
+        this.evaluate();
     }
 
     stop() {
@@ -267,8 +271,10 @@ export class PlayableDirector extends Behaviour {
         for (const handler of this._animationTracks) {
             handler.evaluate(time);
         }
-        for (const handler of this._audioTracks) {
-            handler.evaluate(time);
+        if (AudioSource.userInteractionRegistered) {
+            for (const handler of this._audioTracks) {
+                handler.evaluate(time);
+            }
         }
         for (const sig of this._signalTracks) {
             sig.evaluate(time);
@@ -279,7 +285,6 @@ export class PlayableDirector extends Behaviour {
         for (const cust of this._customTracks) {
             cust.evaluate(time);
         }
-
     }
 
     private resolveBindings() {
@@ -358,6 +363,7 @@ export class PlayableDirector extends Behaviour {
 
         if (!this.playableAsset) return;
         const audioTracks: Array<Models.TrackModel> = [];
+        const audioAllowedCallbacks : any = [];
         for (const track of this.playableAsset!.tracks) {
             const type = track.type;
             const registered = PlayableDirector.createTrackFunctions[type];
@@ -425,7 +431,20 @@ export class PlayableDirector extends Behaviour {
             }
             else if (track.type === Models.TrackType.Audio) {
                 if (track.clips.length <= 0) continue;
-                audioTracks.push(track);
+                const audio = new Tracks.AudioTrackHandler();
+                audio.director = this;
+                audio.track = track;
+                this._audioTracks.push(audio);
+
+                audioAllowedCallbacks.push(() => {
+                    const listener = GameObject.findObjectOfType(AudioListener, this.context) as AudioListener;
+                    if (!listener) return;
+                    audio.listener = listener.listener;
+                    for (let i = 0; i < track.clips.length; i++) {
+                        const clipModel = track.clips[i];
+                        audio.addModel(clipModel);
+                    }
+                });
             }
             else if (track.type === Models.TrackType.Marker) {
                 const signalHandler: Tracks.SignalTrackHandler = new Tracks.SignalTrackHandler();
@@ -473,19 +492,8 @@ export class PlayableDirector extends Behaviour {
         }
 
         AudioSource.registerWaitForAllowAudio(() => {
-            const listener = GameObject.findObjectOfType(AudioListener, this.context) as AudioListener;
-            if (!listener) return;
-            for (const track of audioTracks) {
-                const audio = new Tracks.AudioTrackHandler();
-                audio.director = this;
-                audio.track = track;
-                audio.listener = listener.listener;
-                for (let i = 0; i < track.clips.length; i++) {
-                    const clipModel = track.clips[i];
-                    audio.addModel(clipModel);
-                }
-                this._audioTracks.push(audio);
-            }
+            audioAllowedCallbacks.forEach((cb: any) => cb());
+            audioAllowedCallbacks.length = 0;
         });
     }
 

package/src/engine-components/ui/EventSystem.ts

@@ -500,7 +500,9 @@ class MeshUIHelper {
             if (lu.context === context) {
                 if (context.time.frameCount === lu.frame) return;
                 lu.frame = context.time.frameCount;
-                if (this.needsUpdate || context.time.frameCount < 30) {
+                if (this.needsUpdate || context.time.frameCount < 1) {
+                    if (debug)
+                        console.log("Update threemeshui");
                     this.needsUpdate = false;
                     threeMeshUI.update();
                 }

package/src/engine-components/ui/Text.ts

@@ -187,6 +187,8 @@ export class Text extends Graphic {
             // @ts-ignore
             this.uiObject.onAfterUpdate = this.updateWidth.bind(this);
         }
+
+        setTimeout(()=> this.markDirty(), 10);
     }
 
     private createBlock(rt: RectTransform, hideOverflow: boolean, content: THREE.Object3D | Array<THREE.Object3D> | null, isTextIntermediate: boolean = false): ThreeMeshUI.Block | null {