@needle-tools/engine 2.57.0-pre → 2.58.0-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.57.0-pre",
+    "version": "2.58.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.js",
     "module": "src/needle-engine.ts",

package/src/engine/codegen/register_types.js

@@ -55,6 +55,7 @@ import { EventTrigger } from "../../engine-components/EventTrigger.ts";
 import { FieldWithDefault } from "../../engine-components/Renderer.ts";
 import { FixedJoint } from "../../engine-components/Joints.ts";
 import { FlyControls } from "../../engine-components/FlyControls.ts";
+import { Fog } from "../../engine-components/Fog.ts";
 import { GltfExport } from "../../engine-components/export/gltf/GltfExport.ts";
 import { GltfExportBox } from "../../engine-components/export/gltf/GltfExport.ts";
 import { Gradient } from "../../engine-components/ParticleSystemModules.ts";
@@ -225,6 +226,7 @@ TypeStore.add("EventTrigger", EventTrigger);
 TypeStore.add("FieldWithDefault", FieldWithDefault);
 TypeStore.add("FixedJoint", FixedJoint);
 TypeStore.add("FlyControls", FlyControls);
+TypeStore.add("Fog", Fog);
 TypeStore.add("GltfExport", GltfExport);
 TypeStore.add("GltfExportBox", GltfExportBox);
 TypeStore.add("Gradient", Gradient);

package/src/engine/engine.ts

@@ -1,3 +1,5 @@
+import "./engine_hot_reload"
+
 import * as layers from "./js-extensions/Layers";
 layers.patchLayers();
 

package/src/engine/engine_hot_reload.ts

@@ -0,0 +1,186 @@
+import { IComponent } from "./engine_types";
+import { TypeStore } from "./engine_typestore";
+import { addScriptToArrays, removeScriptFromContext } from "./engine_mainloop_utils"
+import { showBalloonWarning } from "./debug/debug";
+import { getParam } from "./engine_utils";
+
+const debug = getParam("debughotreload");
+
+declare type BeforeUpdateArgs = {
+    type: string,
+    updates: Array<{ path: string, timestamp: number, acceptedPath: string, explicitImportRequired: boolean, type: string }>,
+}
+
+//@ts-ignore
+if (import.meta.hot) {
+    //@ts-ignore
+    import.meta.hot.on('vite:beforeUpdate', (cb: BeforeUpdateArgs) => {
+        if (debug) console.log(cb);
+        for (const update of cb.updates) {
+            console.log("[Needle Engine] Hot reloading " + update.path);
+        }
+    });
+}
+
+
+let isApplyingChanges = false;
+
+const instances: Map<string, object[]> = new Map();
+
+export function register(instance: object) {
+    if (isApplyingChanges) return;
+    const type = instance.constructor;
+    const name = type.name;
+    if (!instances.has(name)) {
+        instances.set(name, [instance]);
+    }
+    else {
+        instances.get(name)?.push(instance);
+    }
+}
+
+export function unregister(instance: object) {
+    if (isApplyingChanges) return;
+    const type = instance.constructor;
+    const name = type.name;
+    const instancesOfType = instances.get(name);
+    if (!instancesOfType) return;
+    const idx = instancesOfType.indexOf(instance);
+    if (idx === -1) return;
+    instancesOfType.splice(idx, 1);
+}
+
+
+let didRegisterUnhandledExceptionListener = false;
+function reloadPageOnHotReloadError() {
+    if (debug) return;
+    if (didRegisterUnhandledExceptionListener) return;
+    didRegisterUnhandledExceptionListener = true;
+
+    const error = console.error;
+    console.error = (...args: any[]) => {
+        if (args.length) {
+            const arg: string = args[0];
+            // When making changes in e.g. the engine package and then making changes in project scripts again that import the engine package: hot reload fails and reports redefinitions of types, we just reload the page in those cases for now
+            // editing a script in one package seems to work for now so it should be good enough for a start
+            if (typeof arg === "string" && arg.includes("[hmr] Failed to reload ")) {
+                console.log("[Needle Engine] Hot reloading failed")
+                window.location.reload();
+                return;
+            }
+
+        }
+        error.apply(console, args);
+    };
+}
+
+
+export function applyChanges(newModule): boolean {
+
+    reloadPageOnHotReloadError();
+
+    // showBalloonMessage("Hot reloading");
+
+    // console.dir(newModule);
+
+    for (const key of Object.keys(newModule)) {
+        try {
+            isApplyingChanges = true;
+
+            const typeToUpdate = TypeStore.get(key);
+            if (!typeToUpdate) 
+            {
+                continue;
+            }
+            const newType = newModule[key];
+
+            console.log("[Needle Engine] Updating type: " + key);
+
+            // Update prototype (methods and properties)
+            const previousMethods = Object.getOwnPropertyNames(typeToUpdate.prototype);
+            const methodsAndProperties = Object.getOwnPropertyDescriptors(newType.prototype);
+            for (const typeKey in methodsAndProperties) {
+                const desc = methodsAndProperties[typeKey];
+                if (!desc.writable) continue;
+                typeToUpdate.prototype[typeKey] = newModule[key].prototype[typeKey];
+            }
+            // Remove methods that are no longer present
+            for (const typeKey of previousMethods) {
+                if (!methodsAndProperties[typeKey]) {
+                    delete typeToUpdate.prototype[typeKey];
+                }
+            }
+
+            // Update fields (we only add new fields if they are undefined)
+            // we create a instance to get access to the fields
+            const instancesOfType = instances.get(newType.name);
+            if (instancesOfType) {
+                const newTypeInstance = new newType();
+                const keys = Object.getOwnPropertyDescriptors(newTypeInstance);
+                for (const inst of instancesOfType) {
+                    const componentInstance = inst as unknown as IComponent;
+                    const isComponent = componentInstance.isComponent === true;
+                    const active = isComponent ? componentInstance.activeAndEnabled : true;
+                    const context = isComponent ? componentInstance.context : undefined;
+                    try {
+                        if (isComponent) {
+                            removeScriptFromContext(componentInstance, context);
+                        }
+                        if (isComponent && active) {
+                            componentInstance.enabled = false;
+                        }
+
+                        if (inst["onBeforeHotReloadFields"]) {
+                            const res = inst["onBeforeHotReloadFields"]();
+                            if (res === false) continue;
+                        }
+                        for (const key in keys) {
+                            const desc = keys[key];
+                            if (!desc.writable) continue;
+                            if (inst[key] === undefined) {
+                                inst[key] = newTypeInstance[key];
+                            }
+                            // if its a function but not on the prototype
+                            // then its a bound method that needs to be rebound
+                            else if (typeof inst[key] === "function" && !inst[key].prototype) {
+                                const boundMethod = inst[key];
+                                // try to get the target method name
+                                const targetMethodName = boundMethod.name;
+                                const prefix = "bound "; // < magic prefix
+                                if (targetMethodName === prefix) continue;
+                                const name = boundMethod.name.substring(prefix.length);
+                                // if the target method name still exists on the new prototype
+                                // we want to rebind it and assign it to the field
+                                // Beware that this will not work if the method is added to some event listener etc
+                                const newTarget = newType.prototype[name];
+                                if (newTarget)
+                                    inst[key] = newTarget.bind(inst);
+                            }
+                        }
+                        if (inst["onAfterHotReloadFields"]) inst["onAfterHotReloadFields"]();
+                    }
+                    finally {
+                        if (isComponent) {
+                            addScriptToArrays(componentInstance, context);
+                        }
+                        if (isComponent && active) {
+                            componentInstance.enabled = true;
+                        }
+                    }
+                }
+            }
+        }
+        catch (err) {
+            if (debug) console.error(err);
+            // we only want to invalidate changes if we debug hot reload
+            else return false;
+        }
+        finally {
+            isApplyingChanges = false;
+        }
+    }
+
+    return true;
+}
+
+

package/src/engine/engine_input.ts

@@ -170,7 +170,7 @@ export class Input extends EventTarget {
     *foreachPointerId(pointerType?: string | PointerType | string[] | PointerType[]): Generator<number> {
         for (let i = 0; i < this._pointerTypes.length; i++) {
             // check if the pointer is active
-            if (this._pointerIsActive[i]) {
+            if (this._pointerIsActive(i)) {
                 // if specific pointer types are requested
                 if (pointerType !== undefined) {
                     const type = this._pointerTypes[i];

package/src/engine/engine_setup.ts

@@ -809,47 +809,50 @@ export class Context {
 		if (this.coroutines[evt]) {
 			const evts = this.coroutines[evt];
 			for (let i = 0; i < evts.length; i++) {
-				const evt = evts[i];
-				// TODO we might want to keep coroutines playing even if the component is disabled or inactive
-				const remove = !evt.comp || evt.comp.destroyed || !evt.main || evt.comp["enabled"] === false;
-				if (remove) {
-					evts.splice(i, 1);
-					--i;
-					continue;
-				}
-				const iter = evt.chained;
-				if (iter && iter.length > 0) {
-					const last: Generator = iter[iter.length - 1];
-					const res = last.next();
-					if (res.done) {
-						iter.pop();
+				try {
+					const evt = evts[i];
+					// TODO we might want to keep coroutines playing even if the component is disabled or inactive
+					const remove = !evt.comp || evt.comp.destroyed || !evt.main || evt.comp["enabled"] === false;
+					if (remove) {
+						evts.splice(i, 1);
+						--i;
+						continue;
 					}
-					if (isGenerator(res)) {
-						if (!evt.chained) evt.chained = [];
-						evt.chained.push(res.value);
+					const iter = evt.chained;
+					if (iter && iter.length > 0) {
+						const last: Generator = iter[iter.length - 1];
+						const res = last.next();
+						if (res.done) {
+							iter.pop();
+						}
+						if (isGenerator(res)) {
+							if (!evt.chained) evt.chained = [];
+							evt.chained.push(res.value);
+						}
+						if (!res.done) continue;
 					}
-					if (!res.done) continue;
-				}
 
-				const res = evt.main.next();
-				if (res.done === true) {
-					evts.splice(i, 1);
-					--i;
-					continue;
+					const res = evt.main.next();
+					if (res.done === true) {
+						evts.splice(i, 1);
+						--i;
+						continue;
+					}
+					const val = res.value;
+					if (isGenerator(val)) {
+						// invoke once if its a generator
+						// this means e.g. WaitForFrame(1) works and will capture
+						// the frame it was created
+						const gen = val as Generator;
+						const res = gen.next();
+						if (res.done) continue;
+						if (!evt.chained) evt.chained = [];
+						evt.chained.push(val as Generator);
+					}
 				}
-				const val = res.value;
-				if (isGenerator(val)) {
-					// invoke once if its a generator
-					// this means e.g. WaitForFrame(1) works and will capture
-					// the frame it was created
-					const gen = val as Generator;
-					const res = gen.next();
-					if (res.done) continue;
-					if (!evt.chained) evt.chained = [];
-					evt.chained.push(val as Generator);
+				catch (e) {
+					console.error(e);
 				}
-
-
 			}
 		}
 

package/src/engine-components/Fog.ts

@@ -0,0 +1,60 @@
+import { Behaviour } from "./Component";
+import { Color, Fog as Fog3 } from "three";
+import { serializable } from "../engine/engine_serialization";
+
+
+export enum FogMode {
+
+    Linear = 1,
+    Exponential = 2,
+    ExponentialSquared = 3,
+}
+
+export class Fog extends Behaviour {
+
+    get fog() {
+        if (!this._fog) this._fog = new Fog3(0x000000, 0, 50);
+        return this._fog;
+    }
+
+    get mode() {
+        return FogMode.Linear;
+    }
+
+    @serializable()
+    set near(value: number) {
+        this.fog.near = value;
+    }
+    get near() {
+        return this.fog.near;
+    }
+
+    @serializable()
+    set far(value: number) {
+        this.fog.far = value;
+    }
+    get far() {
+        return this.fog.far;
+    }
+
+    @serializable(Color)
+    set color(value: Color) {
+        this.fog.color.copy(value);
+    }
+    get color() {
+        return this.fog.color;
+    }
+
+    private _fog?: Fog3;
+
+    onEnable() {
+        this.scene.fog = this.fog;
+    }
+
+    onDisable() {
+        if (this.scene.fog === this._fog)
+            this.scene.fog = null;
+    }
+
+
+}

package/src/engine-components/codegen/components.ts

@@ -53,6 +53,7 @@ export { EventTrigger } from "../EventTrigger";
 export { FieldWithDefault } from "../Renderer";
 export { FixedJoint } from "../Joints";
 export { FlyControls } from "../FlyControls";
+export { Fog } from "../Fog";
 export { GltfExport } from "../export/gltf/GltfExport";
 export { GltfExportBox } from "../export/gltf/GltfExport";
 export { Gradient } from "../ParticleSystemModules";

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

@@ -36,13 +36,12 @@ export class EventSystem extends Behaviour {
         GameObject.addNewComponent(go, EventSystem);
         context.scene.add(go);
     }
-    
-    static get systems(): EventSystem[] 
-    {
+
+    static get systems(): EventSystem[] {
         const context = Context.Current;
         if (!this._eventSystemMap.has(context)) {
             this._eventSystemMap.set(context, []);
-        }  
+        }
         return this._eventSystemMap.get(context)!;
     }
 
@@ -91,6 +90,7 @@ export class EventSystem extends Behaviour {
     private _selectStartFn?: any;
     private _selectEndFn?: any;
     private _selectUpdateFn?: any;
+    private _onBeforeUpdateFn?: any;
 
     onEnable(): void {
 
@@ -118,7 +118,7 @@ export class EventSystem extends Behaviour {
             opts.isPressed = ctrl.selectionPressed;
             opts.isClicked = ctrl.selectionClick;
             this.handleEvents(args.grab, opts);
-            
+
             const prevGrabbed = grabbed.get(ctrl);
             grabbed.set(ctrl, null);
             if (prevGrabbed) {
@@ -149,20 +149,22 @@ export class EventSystem extends Behaviour {
         WebXRController.addEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
         WebXRController.addEventListener(ControllerEvents.Update, this._selectUpdateFn);
 
-        this.context.pre_update_callbacks.push(this.onBeforeUpdate.bind(this));
-        this.context.input.addEventListener(InputEvents.PointerDown, this.onPointerDown.bind(this));
+        // TODO: unregister
+        this._onBeforeUpdateFn ??= this.onBeforeUpdate.bind(this);
+        this.context.pre_update_callbacks.push(this._onBeforeUpdateFn);
+        this.context.input.addEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
     }
 
     onDisable(): void {
         WebXRController.removeEventListener(ControllerEvents.SelectStart, this._selectStartFn);
         WebXRController.removeEventListener(ControllerEvents.SelectEnd, this._selectEndFn);
         WebXRController.removeEventListener(ControllerEvents.Update, this._selectUpdateFn);
-    }
 
-    onPointerDown() {
-        this.onBeforeUpdate();
+        this.context.pre_update_callbacks.splice(this.context.pre_update_callbacks.indexOf(this._onBeforeUpdateFn), 1);
+        this.context.input.removeEventListener(InputEvents.PointerDown, this._onBeforeUpdateFn);
     }
 
+
     // doesnt work in dist
     // onBeforeRender() {
     //     MeshUIHelper.update(this.context);
@@ -195,12 +197,25 @@ export class EventSystem extends Behaviour {
         }
 
         const hits = this.performRaycast(null);
-        const args: PointerEventData = new PointerEventData(this.context.input.getPointerEvent(0));
+        let pointerId = 0;
+        for (const i of this.context.input.foreachPointerId()) {
+            const isDown = this.context.input.getPointerDown(i);
+            const isUp = this.context.input.getPointerUp(i);
+            if (isDown || isUp) {
+                pointerId = i;
+                break;
+            }
+        }
+        const ptr = this.context.input.getPointerEvent(pointerId);
+        // console.log(ptr);
+        const args: PointerEventData = new PointerEventData(ptr);
         args.inputSource = this.context.input;
-        args.isClicked = this.context.input.mouseClick;
-        args.isDown = this.context.input.mouseDown;
-        args.isUp = this.context.input.mouseUp;
-        args.isPressed = this.context.input.mousePressed;
+        args.pointerId = pointerId;
+        args.isClicked = this.context.input.getPointerClicked(pointerId)
+        args.isDown = this.context.input.getPointerDown(pointerId);
+        args.isUp = this.context.input.getPointerUp(pointerId);
+        args.isPressed = this.context.input.getPointerPressed(pointerId);
+        // if(args.isClicked || args.isUp) console.log("clicked", args);
         this.lastPointerEvent = args;
         if (!hits) return;
 

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

@@ -1,3 +1,5 @@
+import { Input } from "../../engine/engine_input";
+
 export interface IInputEventArgs {
     get used(): boolean;
     Use(): void;
@@ -5,7 +7,7 @@ export interface IInputEventArgs {
 }
 
 export class PointerEventData implements IInputEventArgs {
-    used: boolean = false; 
+    used: boolean = false;
 
     Use() {
         this.used = true;
@@ -15,17 +17,18 @@ export class PointerEventData implements IInputEventArgs {
         this.event?.stopImmediatePropagation();
     }
 
-    inputSource: any;
+    inputSource: Input | any;
     object!: THREE.Object3D;
 
+    pointerId: number | undefined;
     isDown: boolean | undefined;
     isUp: boolean | undefined;
     isPressed: boolean | undefined;
     isClicked: boolean | undefined;
 
-    private event?:Event;
+    private event?: Event;
 
-    constructor(events?:Event){
+    constructor(events?: Event) {
         this.event = events;
     }
 }

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

@@ -1,8 +1,8 @@
-import { Camera } from "three";
 import { RaycastOptions } from "../../engine/engine_physics";
-import { Behaviour } from "../Component";
+import { Behaviour, Component } from "../Component";
 import { EventSystem } from "./EventSystem";
 
+
 export class Raycaster extends Behaviour {
     awake(): void {
         EventSystem.createIfNoneExists(this.context);
@@ -21,6 +21,7 @@ export class Raycaster extends Behaviour {
     }
 }
 
+
 export class ObjectRaycaster extends Raycaster {
     private targets: THREE.Object3D[] | null = null;
     private raycastHits: THREE.Intersection[] = [];
@@ -44,4 +45,6 @@ export class GraphicRaycaster extends ObjectRaycaster {
     // eventCamera: Camera | null = null;
     // ignoreReversedGraphics: boolean = false;
     // rootRaycaster: GraphicRaycaster | null = null;
-}
+}
+
+