@needle-tools/engine 2.63.3-pre.1 → 2.64.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.63.3-pre.1",
+    "version": "2.64.0-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/engine_constants.ts

@@ -1,3 +1,3 @@
 
-export const activeInHierarchyFieldName = "__isActiveInHierarchy";
+export const activeInHierarchyFieldName = Symbol("isActiveInHierarchy");
 export const builtinComponentKeyName = "builtin_components";

package/src/engine/engine_gameobject.ts

@@ -6,7 +6,7 @@ import { logHierarchy, setWorldPosition, setWorldQuaternion } from "./engine_thr
 import { GuidsMap, IComponent as Component, IComponent, IGameObject as GameObject, UIDProvider } from "./engine_types";
 import { getParam, tryFindObject } from "./engine_utils";
 import { apply } from "../engine-components/js-extensions/Object3D";
-import { InstancingUtil } from "./engine_instancing";
+import { $isUsingInstancing, InstancingUtil } from "./engine_instancing";
 import { activeInHierarchyFieldName } from "./engine_constants";
 import { assign } from "./engine_serialization_core";
 
@@ -75,7 +75,7 @@ export function isActiveInHierarchy(go: Object3D): boolean {
 }
 
 export function markAsInstancedRendered(go: THREE.Object3D, instanced: boolean) {
-    go["__isUsingInstancing"] = instanced;
+    go[$isUsingInstancing] = instanced;
 }
 
 export function isUsingInstancing(instance: THREE.Object3D): boolean { return InstancingUtil.isUsingInstancing(instance); }

package/src/engine/engine_instancing.ts

@@ -1,17 +1,17 @@
 export const NEED_UPDATE_INSTANCE_KEY = Symbol("NEEDLE_NEED_UPDATE_INSTANCE");
 
-
+export const $isUsingInstancing = Symbol("isUsingInstancing");
 
 export class InstancingUtil {
     
-    static isUsingInstancing(instance: THREE.Object3D): boolean { return instance["__isUsingInstancing"] === true; }
+    static isUsingInstancing(instance: THREE.Object3D): boolean { return instance[$isUsingInstancing] === true; }
 
     // TODO: change this so it does not set matrix world directly but some flag that is only used by instancing
     static markDirty(go: THREE.Object3D | null, recursive: boolean = true) {
         if (!go) return;
         // potential optimization:
         // if(go.matrixWorldNeedsUpdate) return;
-        // console.trace(go, GameObject.isUsingInstancing(go));
+        // console.warn("UPDATE", go);
         if (this.isUsingInstancing(go)) {
             go[NEED_UPDATE_INSTANCE_KEY] = true;
             go.matrixWorldNeedsUpdate = true;

package/src/engine/engine_license.ts

@@ -42,7 +42,7 @@ async function showLicenseInfo(ctx: IContext) {
 
 
 const _licenseText = "🌵 <span class=\"text\">Made with <a href=\"https://needle.tools\" target=\"_blank\">Needle</a></span>";
-const licenseElementClass = "needle-license-element";
+const licenseElementIdentifier = "needle-license-element";
 const licenseDuration = 30000;
 const licenseDelay = 600;
 
@@ -78,6 +78,7 @@ function insertNonCommercialUseHint(ctx: IContext) {
     setTimeout(() => {
         clearInterval(interval);
         licenseElement?.remove();
+        style?.remove();
     }, removeDelay);
 
 }
@@ -97,8 +98,7 @@ async function logNonCommercialUse(_logo?: string) {
 
 function createLicenseElement() {
     const licenseElement = document.createElement("div");
-    licenseElement.classList.add(licenseElementClass);
-    licenseElement.setAttribute("data-needle_engine_license_element", "");
+    licenseElement.setAttribute(licenseElementIdentifier, "");
     licenseElement.style.position = "fixed";
     licenseElement.style.bottom = "12px";
     licenseElement.style.right = "15px";
@@ -112,10 +112,8 @@ function createLicenseElement() {
 // TODO: would be better to put this into a web element and use shadow dom
 function createLicenseStyle() {
     const licenseStyle = document.createElement("style");
-    const selector = "." + licenseElementClass;
+    const selector = `div[${licenseElementIdentifier}]`;
     licenseStyle.innerHTML = `
-    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;500&display=swap');
-
     ${selector} {
         font-family: 'Roboto', sans-serif !important;
         font-weight: 300;
@@ -145,23 +143,26 @@ function createLicenseStyle() {
             opacity: .9;
         }
         2% {
-            transform: translate(0, 3px);
+            transform: translate(0, 2.5px);
         }
-        6% {
+        3% {
             transform: translate(0, 0px);
             pointer-events: all;
             opacity: 1;
         }
-        50% {
+        4% {
             transform: scale(1)
         }
-        51% {
-            transform: scale(1.2)
+        4.5% {
+            transform: scale(1.3)
+        }
+        6% {
+            transform: scale(1.32)
         }
-        53% {
+        7% {
             transform: scale(1)
         }
-        90% {
+        98% {
             opacity: 1;
             pointer-events: all;
             transform: scale(1)

package/src/engine/engine_mainloop_utils.ts

@@ -7,6 +7,7 @@ import { isActiveSelf } from './engine_gameobject';
 import { ContextRegistry } from "./engine_context_registry";
 
 const debug = getParam("debugnewscripts");
+const debugHierarchy = getParam("debughierarchy");
 
 // if some other script adds new scripts in onEnable or awake 
 // the original array should be cleared before processing it
@@ -214,8 +215,6 @@ function removeFromArray(script: any, array: any[]) {
     if (index >= 0) array.splice(index, 1);
 }
 
-const previousActiveMap: { [key: string]: boolean } = {};
-const previousActiveInHierarchyMap: { [key: string]: boolean } = {};
 
 export function updateIsActive(obj?: Object3D) {
     if (!obj) obj = ContextRegistry.Current.scene;
@@ -226,67 +225,43 @@ export function updateIsActive(obj?: Object3D) {
     updateIsActiveInHierarchyRecursiveRuntime(obj, isActiveSelf(obj), true);
 }
 
-// const $wasSetVisibleBefore = Symbol("wasSetVisibleBefore");
 
 function updateIsActiveInHierarchyRecursiveRuntime(go: THREE.Object3D, activeInHierarchy: boolean, allowEventCall: boolean) {
-    let activeStateChanged: boolean = false;
-
-    const active = isActiveSelf(go);
-
-    // this is a test if we dont control active state from visibility and set
-    // active to true by default (even if the object is invisible) in engine_gameobjects:isActiveSelf
-    // then we need to check if the object is set to visible for the first time
-    // const visible = go.visible;
-    // if (!active && visible) {
-    //     if (!go[$wasSetVisibleBefore]) {
-    //         go[$wasSetVisibleBefore] = true;
-    //         setActive(go, true);
-    //     }
-    // }
-
-    // if (activeInHierarchy) {
-    //     const prevActive = previousActiveMap[go.uuid];
-    //     if (prevActive !== undefined) {
-    //         if (prevActive !== active) {
-    //             activeStateChanged = true;
-    //             if (allowEventCall) {
-    //                 perComponent(go, comp => {
-    //                     if (active) {
-    //                         utils.safeInvoke(comp.__internalAwake.bind(comp));
-    //                         comp.onEnable();
-    //                     }
-    //                     else comp.onDisable();
-    //                 });
-    //             }
-    //         }
-    //     }
-    // }
-    previousActiveMap[go.uuid] = active;
 
+    if (activeInHierarchy) {
+        activeInHierarchy = isActiveSelf(go);
+        // IF we update activeInHierarchy within a disabled hierarchy we need to check the parent
+        if (activeInHierarchy && go.parent) {
+            activeInHierarchy = go.parent[constants.activeInHierarchyFieldName]
+        }
+    }
 
-    if (activeInHierarchy) activeInHierarchy = isActiveSelf(go);
+    const prevActive = go[constants.activeInHierarchyFieldName];
+    const changed = prevActive !== activeInHierarchy;
     go[constants.activeInHierarchyFieldName] = activeInHierarchy;
 
     // only raise events here if we didnt call enable etc already
-    if (!activeStateChanged) {
-        const prevActiveInHierarchy = previousActiveInHierarchyMap[go.uuid];
-        if (prevActiveInHierarchy !== undefined) {
-            if (prevActiveInHierarchy !== activeInHierarchy) {
-                // console.log("CHANGE", go.name, activeInHierarchy);
-                if (allowEventCall) {
-                    perComponent(go, comp => {
-                        if (activeInHierarchy) {
-                            utils.safeInvoke(comp.__internalAwake.bind(comp));
-                            comp.enabled = true;
-                            // comp.onEnable();
-                        }
-                        else comp.enabled = false;
-                    });
+    if (changed) {
+        if (debugHierarchy)
+            console.warn("ACTIVE CHANGE", go.name, activeInHierarchy, "changed?" + changed, go.userData.components, go.children, go);
+        if (allowEventCall) {
+            perComponent(go, comp => {
+                if (activeInHierarchy) {
+                    if (comp.enabled) {
+                        utils.safeInvoke(comp.__internalAwake.bind(comp));
+                        comp["__didEnable"] = true;
+                        comp.onEnable();
+                    }
                 }
-            }
+                else {
+                    if (comp["__didAwake"]) {
+                        comp["__didEnable"] = false;
+                        comp.onDisable();
+                    }
+                }
+            });
         }
     }
-    previousActiveInHierarchyMap[go.uuid] = activeInHierarchy;
 
     if (go.children) {
         for (const ch of go.children) {
@@ -312,7 +287,6 @@ export function updateActiveInHierarchyWithoutEventCall(go: THREE.Object3D) {
         console.error("GO is null");
         return;
     }
-    previousActiveInHierarchyMap[go.uuid] = activeInHierarchy;
     go[constants.activeInHierarchyFieldName] = activeInHierarchy && foundScene;
 }
 
@@ -341,7 +315,7 @@ export function registerPrewarmObject(obj: Object3D, context: IContext) {
     obj[$waitingForPrewarm] = true;
     const list = prewarmList.get(context);
     list!.push(obj);
-    if(debugPrewarm) console.debug("register prewarm", obj.name);
+    if (debugPrewarm) console.debug("register prewarm", obj.name);
 }
 
 let prewarmTarget: WebGLCubeRenderTarget | null = null;
@@ -355,7 +329,7 @@ export function runPrewarm(context: IContext) {
 
     const cam = context.mainCamera;
     if (cam) {
-        if(debugPrewarm) console.log("prewarm", list.length, "objects", [...list]);
+        if (debugPrewarm) console.log("prewarm", list.length, "objects", [...list]);
         const renderer = context.renderer;
         const scene = context.scene;
         renderer.compile(scene, cam!)
@@ -364,10 +338,10 @@ export function runPrewarm(context: IContext) {
         prewarmCamera.update(renderer, scene);
         for (const obj of list) {
             obj[$prewarmedFlag] = true;
-            obj[$waitingForPrewarm] = false;            
+            obj[$waitingForPrewarm] = false;
         }
         list.length = 0;
-        if(debugPrewarm) console.log("prewarm done");
+        if (debugPrewarm) console.log("prewarm done");
     }
 }
 

package/src/engine/engine_physics.ts

@@ -26,6 +26,7 @@ const debugPhysics = getParam("debugphysics");
 const debugColliderPlacement = getParam("debugphysicscolliders");
 const debugCollisions = getParam("debugcollisions");
 const showColliders = getParam("showcolliders");
+const noPhysics = getParam("nophysics");
 
 
 declare type PhysicsBody = {
@@ -286,6 +287,8 @@ export class Physics {
 
     // physics simulation
 
+    enabled: boolean = true;
+
     private _tempPosition: Vector3 = new Vector3();
     private _tempQuaternion: Quaternion = new Quaternion();
     private _tempScale: Vector3 = new Vector3();
@@ -325,6 +328,7 @@ export class Physics {
             Physics._didLoadPhysicsEngine = true;
         }
         this.world = new World(this._gravity);
+        if (noPhysics) this.enabled = false;
     }
 
     private _gravity = { x: 0.0, y: -9.81, z: 0.0 };
@@ -347,6 +351,10 @@ export class Physics {
     }
 
     addBoxCollider(collider: ICollider, center: Vector3, size: Vector3) {
+        if (!this.enabled) {
+            if(debugPhysics) console.warn("Physics is disabled");
+            return;
+        }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition).multiply(size);
         scale.multiplyScalar(0.5);
@@ -355,6 +363,10 @@ export class Physics {
     }
 
     addSphereCollider(collider: ICollider, center: Vector3, radius: number) {
+        if (!this.enabled) {
+            if(debugPhysics) console.warn("Physics is disabled");
+            return;
+        }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition).multiplyScalar(radius);
         const desc = ColliderDesc.ball(scale.x);
@@ -362,6 +374,10 @@ export class Physics {
     }
 
     addCapsuleCollider(collider: ICollider, center: Vector3, height: number, radius: number) {
+        if (!this.enabled) {
+            if(debugPhysics) console.warn("Physics is disabled");
+            return;
+        }
         const obj = collider.gameObject;
         const scale = getWorldScale(obj, this._tempPosition);
         if (debugPhysics) console.log("capsule scale", scale, height, radius);
@@ -370,6 +386,10 @@ export class Physics {
     }
 
     addMeshCollider(collider: ICollider, mesh: Mesh, convex: boolean, scale: Vector3) {
+        if (!this.enabled) {
+            if(debugPhysics) console.warn("Physics is disabled");
+            return;
+        }
         const geo = mesh.geometry;
         if (!geo) {
             if (debugPhysics) console.warn("Missing mesh geometry", mesh.name);
@@ -575,6 +595,7 @@ export class Physics {
     }
 
     updateBody(comp: ICollider | IRigidbody, translation: boolean, rotation: boolean) {
+        if (!this.enabled) return;
         if (comp.destroyed || !comp.gameObject) return;
         if (!translation && !rotation) return;
 
@@ -637,6 +658,7 @@ export class Physics {
 
     public step(dt?: number) {
         if (!this.world) return;
+        if (!this.enabled) return;
         this._isUpdatingPhysicsWorld = true;
         if (!this.eventQueue) {
             this.eventQueue = new EventQueue(false);
@@ -670,6 +692,7 @@ export class Physics {
 
     public postStep() {
         if (!this.world) return;
+        if (!this.enabled) return;
         this._isUpdatingPhysicsWorld = true;
         this.syncObjects();
         this._isUpdatingPhysicsWorld = false;

package/src/engine/engine_setup.ts

@@ -233,7 +233,7 @@ export class Context implements IContext {
 
 	private _stats: Stats.default | null = stats ? Stats.default() : null;
 
-	constructor(args: ContextArgs | undefined) {
+	constructor(args?: ContextArgs) {
 		this.name = args?.name || "";
 		this.alias = args?.alias;
 		this.domElement = args?.domElement || document.body;

package/src/engine/engine_time.ts

@@ -3,7 +3,7 @@ import { getParam } from './engine_utils';
 
 const timescaleUrl = getParam("timescale");
 let timeScale = 1;
-if(typeof timescaleUrl === "number") timeScale = timescaleUrl;
+if (typeof timescaleUrl === "number") timeScale = timescaleUrl;
 
 export class Time {
 
@@ -28,12 +28,17 @@ export class Time {
     private _fpsSamples: number[] = [];
     private _fpsSampleIndex: number = 0;
 
+    constructor() {
+        if (typeof timeScale === "number")
+            this.timeScale = timeScale;
+    }
+
     update() {
         this.deltaTime = this.clock.getDelta();
         // clamp delta time because if tab is not active clock.getDelta can get pretty big
         this.deltaTime = Math.min(.1, this.deltaTime);
-        this.deltaTime *= timeScale * this.timeScale;
-        if(this.deltaTime <= 0) this.deltaTime = 0.000000000001;
+        this.deltaTime *= this.timeScale;
+        if (this.deltaTime <= 0) this.deltaTime = 0.000000000001;
         this.frame += 1;
         this.time += this.deltaTime;
 
@@ -42,6 +47,6 @@ export class Time {
         let sum = 0;
         for (let i = 0; i < this._fpsSamples.length; i++)
             sum += this._fpsSamples[i];
-        this._smoothedFps = 1/(sum / this._fpsSamples.length);
+        this._smoothedFps = 1 / (sum / this._fpsSamples.length);
     }
 }

package/src/engine/engine_types.ts

@@ -21,9 +21,9 @@ export interface UIDProvider {
 
 
 export declare type CoroutineData = {
-	comp: IComponent,
-	main: Generator,
-	chained?: Array<Generator>
+    comp: IComponent,
+    main: Generator,
+    chained?: Array<Generator>
 }
 
 
@@ -37,25 +37,25 @@ export interface IContext {
     domElement: HTMLElement;
 
     scripts: IComponent[];
-	scripts_pausedChanged: IComponent[];
-	// scripts with update event
-	scripts_earlyUpdate: IComponent[];
-	scripts_update: IComponent[];
-	scripts_lateUpdate: IComponent[];
-	scripts_onBeforeRender: IComponent[];
-	scripts_onAfterRender: IComponent[];
-	scripts_WithCorroutines: IComponent[];
-	coroutines: { [FrameEvent: number]: Array<CoroutineData> };
-    
-	post_setup_callbacks: Function[];
-	pre_update_callbacks: Function[];
-	pre_render_callbacks: Function[];
-	post_render_callbacks: Function[];
-
-	new_scripts: IComponent[];
-	new_script_start: IComponent[];
-	new_scripts_pre_setup_callbacks: Function[];
-	new_scripts_post_setup_callbacks: Function[];
+    scripts_pausedChanged: IComponent[];
+    // scripts with update event
+    scripts_earlyUpdate: IComponent[];
+    scripts_update: IComponent[];
+    scripts_lateUpdate: IComponent[];
+    scripts_onBeforeRender: IComponent[];
+    scripts_onAfterRender: IComponent[];
+    scripts_WithCorroutines: IComponent[];
+    coroutines: { [FrameEvent: number]: Array<CoroutineData> };
+
+    post_setup_callbacks: Function[];
+    pre_update_callbacks: Function[];
+    pre_render_callbacks: Function[];
+    post_render_callbacks: Function[];
+
+    new_scripts: IComponent[];
+    new_script_start: IComponent[];
+    new_scripts_pre_setup_callbacks: Function[];
+    new_scripts_post_setup_callbacks: Function[];
 
     stopAllCoroutinesFrom(script: IComponent);
 }
@@ -71,6 +71,13 @@ export declare interface IGameObject extends Object3D {
     guid: string | undefined;
 
     activeSelf: boolean;
+
+    /** NOTE: this is just a wrapper for devs coming from Unity. Please use this.gameObject instead. In Needle Engine this.gameObject is the same as this.gameObject.transform. See the tutorial link below for more information
+     * @augments Object3D
+     * @tutorial https://fwd.needle.tools/needle-engine/docs/transform
+     * */
+    get transform(): Object3D;
+    
     addNewComponent<T>(type: Constructor<T>): T | null;
     removeComponent(comp: IComponent): IComponent;
     getOrAddComponent<T>(typeName: Constructor<T> | null): T;
@@ -100,12 +107,19 @@ export interface IComponent {
 
     get activeAndEnabled(): boolean;
 
+    /** @internal */
     __internalNewInstanceCreated();
+    /** @internal */
     __internalAwake();
+    /** @internal */
     __internalStart();
+    /** @internal */
     __internalEnable();
+    /** @internal */
     __internalDisable();
+    /** @internal */
     __internalDestroy();
+    /** @internal */
     resolveGuids?(guidsMap: GuidsMap): void;
 
     /** experimental, called when the script is registered for the first time, this is called even if the component is not enabled. */

package/src/engine-components/Animation.ts

@@ -125,11 +125,12 @@ export class Animation extends Behaviour {
     update() {
         if (!this.mixer) return;
         this.mixer.update(this.context.time.deltaTime);
-        for (const handle of this._handles) {
-            handle._update();
-        }
-        if (this._handles?.length > 0)
-            InstancingUtil.markDirty(this.gameObject);
+        // this is now handled via matrix auto update
+        // for (const handle of this._handles) {
+        //     handle._update();
+        // }
+        // if (this._handles?.length > 0)
+        //     InstancingUtil.markDirty(this.gameObject);
     }
 
     getAction(name: string): THREE.AnimationAction | undefined | null {

package/src/engine-components/AnimatorController.ts

@@ -146,6 +146,7 @@ export class AnimatorController {
         if (!this.animator) return;
         this.evaluateTransitions();
         this.updateActiveStates();
+        if(!this._activeState) return;
         const dt = this.animator.context.time.deltaTime;
         if (this.animator.applyRootMotion) {
             this.rootMotionHandler?.onBeforeUpdate();

package/src/engine-components/AudioSource.ts

@@ -75,7 +75,7 @@ export class AudioSource extends Behaviour {
             }
             this.callbacks.length = 0;
         };
-        let fn = callback.bind(this);
+        const fn = callback.bind(this);
         document.addEventListener('pointerdown', fn);
         document.addEventListener('click', fn);
         document.addEventListener('dragstart', fn);

package/src/engine-components/Component.ts

@@ -23,6 +23,9 @@ abstract class GameObject extends THREE.Object3D implements THREE.Object3D, IGam
 
     guid: string | undefined;
 
+    // The actual implementation / prototype of threejs is modified in js-extensions/Object3D
+    abstract get transform(): THREE.Object3D;
+
     public static isDestroyed(go: THREE.Object3D): boolean {
         return isDestroyed(go);
     }

package/src/engine-components/ParticleSystem.ts

@@ -70,7 +70,7 @@ export class ParticleSystemRenderer extends Behaviour {
 
     getMaterial(trailEnabled: boolean = false) {
         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) {
@@ -836,7 +836,20 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
     onBeforeRender() {
         this.onUpdate();
         const dt = this.deltaTime;
-        this._batchSystem?.update(dt);
+
+        if (this._batchSystem) {
+            // Updating layers on batches
+            // TODO: figure out a better way to do this
+            // Issue: https://github.com/Alchemist0823/three.quarks/issues/49
+            if (this.context.time.frameCount % 60 === 0) {
+                for (let i = 0; i < this._batchSystem.batches.length; i++) {
+                    const batch = this._batchSystem.batches[i];
+                    batch.layers.disableAll();
+                    batch.layers.set(2);
+                }
+            }
+            this._batchSystem.update(dt);
+        }
         this._time += dt;
         if (this._time > this.duration) this._time = 0;
     }