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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.60.4-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",
@@ -56,7 +56,7 @@
     "devDependencies": {
         "@babel/runtime": "^7.16.0",
         "@luncheon/esbuild-plugin-gzip": "^0.1.0",
-        "@needle-tools/gltf-transform-extensions": "^0.11.1-pre",
+        "@needle-tools/gltf-transform-extensions": "^0.11.2-pre",
         "@needle-tools/needle-component-compiler": "1.9.3",
         "@needle-tools/helper": "^0.2.1-pre",
         "@types/three": "0.146.0",

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/AnimatorController.ts

@@ -652,7 +652,7 @@ class RootMotionAction {
         // lastRotation.invert().premultiply(firstKeyframe).invert();
         RootMotionAction.spaceRotation[this.clip.uuid].copy(lastRotation);
 
-        // if (debugRootMotion) 
+        if (debugRootMotion) 
         {
             const euler = new THREE.Euler().setFromQuaternion(lastRotation);
             console.log("START", this.clip.name, Mathf.toDegrees(euler.y));

package/src/engine-components/Light.ts

@@ -131,7 +131,7 @@ export class Light extends Behaviour implements ILight {
         }
     }
     get shadowNormalBias(): number { return this._shadowNormalBias; }
-    private _shadowNormalBias: number = 1;
+    private _shadowNormalBias: number = 0;
 
     /** when enabled this will remove the multiplication when setting the shadow bias settings initially */
     private _overrideShadowBiasSettings: boolean = false;
@@ -242,6 +242,7 @@ export class Light extends Behaviour implements ILight {
 
     awake() {
         this.color = new THREE.Color(this.color ?? 0xffffff);
+        if(debug) console.log(this.name, this);
     }
 
     onEnable(): void {

package/src/engine-components/ParticleSystem.ts

@@ -10,15 +10,17 @@ import { serializable } from "../engine/engine_serialization";
 import { RGBAColor } from "./js-extensions/RGBAColor";
 import { AxesHelper, BufferGeometry, Color, Material, Matrix4, Mesh, MeshStandardMaterial, Object3D, OneMinusDstAlphaFactor, PlaneGeometry, Quaternion, Sprite, SpriteMaterial, Vector3, Vector4 } from "three";
 import { getWorldPosition, getWorldQuaternion, getWorldScale } from "../engine/engine_three_utils";
-import { assign, deserializeObject } from "../engine/engine_serialization_core";
+import { assign } from "../engine/engine_serialization_core";
 import { BatchedParticleRenderer, Behavior, BillBoardSettings, BurstParameters, ColorGenerator, ConstantColor, ConstantValue, EmissionState, EmitSubParticleSystem, EmitterShape, FunctionColorGenerator, FunctionJSON, FunctionValueGenerator, IntervalValue, MeshSettings, Particle, ParticleEmitter, ParticleSystem as _ParticleSystem, ParticleSystemParameters, PointEmitter, RecordState, RenderMode, RotationGenerator, SizeOverLife, TrailBatch, TrailParticle, TrailSettings, ValueGenerator } from "three.quarks";
 import { createFlatTexture } from "../engine/engine_shaders";
 import { Mathf } from "../engine/engine_math";
 import { Context } from "../engine/engine_setup";
 import { ParticleSubEmitter } from "./ParticleSystemSubEmitter";
-import { copyFile } from "fs";
+import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive";
 
 const debug = getParam("debugparticles");
+const suppressProgressiveLoading = getParam("noprogressive");
+const debugProgressiveLoading = getParam("debugprogressive");
 
 export enum SubEmitterType {
     Birth = 0,
@@ -46,8 +48,6 @@ export class SubEmitterSystem {
     }
 }
 
-
-
 export class ParticleSystemRenderer extends Behaviour {
 
     @serializable()
@@ -69,8 +69,19 @@ export class ParticleSystemRenderer extends Behaviour {
     }
 
     getMaterial(trailEnabled: boolean = false) {
-        if (trailEnabled === true && this.trailMaterial) return this.trailMaterial;
-        return this.particleMaterial;
+        const material = (trailEnabled === true && this.trailMaterial) ? this.trailMaterial : this.particleMaterial;
+        
+        // progressive load on start
+        // TODO: figure out how to do this before particle system rendering so we only load textures for visible materials
+        if (material && !suppressProgressiveLoading && material["_didRequestTextureLOD"] === undefined) {
+            material["_didRequestTextureLOD"] = 0;
+            if (debugProgressiveLoading) {
+                console.log("Load material LOD", material.name);
+            }
+            NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
+        }
+
+        return material;
     }
 
     getMesh(renderMode?: ParticleSystemRenderMode) {
@@ -830,7 +841,14 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
         if (this._time > this.duration) this._time = 0;
     }
 
+    private lastMaterialVersion: number = -1;
     private onUpdate() {
+        const mat = this.renderer.getMaterial(this.trails.enabled);
+        if (mat && mat.version != this.lastMaterialVersion && this._particleSystem) {
+            this.lastMaterialVersion = mat.version;
+            this._particleSystem.texture = this._interface.texture;
+        }
+
         if (this._bursts) {
             this.emission.bursts = this._bursts;
             delete this._bursts;

package/src/engine-components/Renderer.ts

@@ -285,7 +285,7 @@ export class Renderer extends Behaviour implements IRenderer {
         return lm !== null && lm !== undefined;
     }
 
-    allowProgressiveLoading: boolean = true;
+    public allowProgressiveLoading: boolean = true;
 
     registering() {
         if (!this.enabled) {
@@ -546,7 +546,6 @@ export class Renderer extends Behaviour implements IRenderer {
                 console.log("Load material LOD", material.name);
             }
             NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
-
         }
 
         if (material.envMapIntensity !== undefined) {

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/Canvas.ts

@@ -117,6 +117,9 @@ export class Canvas extends UIRootComponent {
         }
     }
 
+    applyRenderSettings(){
+        this.onRenderSettingsChanged();
+    }
 
     private _updateRenderSettingsRoutine?: Generator;
     private onRenderSettingsChanged() {

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 {