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

package/package.json

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

@@ -2,7 +2,7 @@ import { Context } from './engine_setup';
 import * as utils from "./engine_generic_utils";
 import * as constants from "./engine_constants";
 import { getParam } from './engine_utils';
-import { Object3D } from 'three';
+import { CubeCamera, Object3D, WebGLCubeRenderTarget } from 'three';
 import { IComponent } from './engine_types';
 import { isActiveSelf, setActive } from './engine_gameobject';
 
@@ -83,6 +83,8 @@ export function processNewScripts(context: Context) {
                 updateActiveInHierarchyWithoutEventCall(script.gameObject);
                 if (script.activeAndEnabled)
                     utils.safeInvoke(script.__internalAwake.bind(script));
+
+                // registerPrewarmObject(script.gameObject, context);
             }
         }
         catch (err) {
@@ -320,4 +322,62 @@ function perComponent(go: THREE.Object3D, evt: (comp: IComponent) => void) {
             evt(comp);
         }
     }
+}
+
+
+const prewarmList: Map<Context, Object3D[]> = new Map();
+const $prewarmedFlag = Symbol("prewarmFlag");
+const $waitingForPrewarm = Symbol("waitingForPrewarm");
+const debugPrewarm = getParam("debugprewarm");
+
+export function registerPrewarmObject(obj: Object3D, context: Context) {
+    if (!obj) return;
+    // allow objects to be marked as prewarmed in which case we dont need to register them again
+    if (obj[$prewarmedFlag] === true) return;
+    if (obj[$waitingForPrewarm] === true) return;
+    if (!prewarmList.has(context)) {
+        prewarmList.set(context, []);
+    }
+    obj[$waitingForPrewarm] = true;
+    const list = prewarmList.get(context);
+    list!.push(obj);
+    if(debugPrewarm) console.debug("register prewarm", obj.name);
+}
+
+let prewarmTarget: WebGLCubeRenderTarget | null = null;
+let prewarmCamera: CubeCamera | null = null;
+
+// called by the engine to remove scroll or animation hiccup when objects are rendered/compiled for the first time
+export function runPrewarm(context: Context) {
+    if (!context) return;
+    const list = prewarmList.get(context);
+    if (!list?.length) return;
+
+    const cam = context.mainCamera;
+    if (cam) {
+        if(debugPrewarm) console.log("prewarm", list.length, "objects", [...list]);
+        const renderer = context.renderer;
+        const scene = context.scene;
+        renderer.compile(scene, cam!)
+        prewarmTarget ??= new WebGLCubeRenderTarget(64)
+        prewarmCamera ??= new CubeCamera(0.001, 9999999, prewarmTarget);
+        prewarmCamera.update(renderer, scene);
+        for (const obj of list) {
+            obj[$prewarmedFlag] = true;
+            obj[$waitingForPrewarm] = false;            
+        }
+        list.length = 0;
+        if(debugPrewarm) console.log("prewarm done");
+    }
+}
+
+export function clearPrewarmList(context: Context) {
+    const list = prewarmList.get(context);
+    if (list) {
+        for (const obj of list) {
+            obj[$waitingForPrewarm] = false;
+        }
+        list.length = 0;
+    }
+    prewarmList.delete(context);
 }

package/src/engine/engine_scenetools.ts

@@ -12,6 +12,7 @@ import { createBuiltinComponents, writeBuiltinComponentData } from "./engine_glt
 import { SerializationContext } from "./engine_serialization_core";
 import { NEEDLE_components } from "./extensions/NEEDLE_components";
 import { addNewComponent, getComponentInChildren } from "./engine_components";
+import { registerPrewarmObject } from "./engine_mainloop_utils";
 
 
 export class NeedleGltfLoader implements INeedleGltfLoader {
@@ -116,6 +117,7 @@ export function parseSync(context: Context, data, path: string, seed: number | U
                 invokeEvents(GltfLoadEventType.AfterLoaded, new GltfLoadEvent(context, path, loader, data));
                 await handleLoadedGltf(context, path, data, seed, componentsExtension);
                 invokeEvents(GltfLoadEventType.FinishedSetup, new GltfLoadEvent(context, path, loader, data));
+                registerPrewarmObject(data.scene, context);
                 resolve(data);
 
             }, err => {
@@ -146,6 +148,7 @@ export function loadSync(context: Context, url: string, seed: number | UIDProvid
                 invokeEvents(GltfLoadEventType.AfterLoaded, new GltfLoadEvent(context, url, loader, data));
                 await handleLoadedGltf(context, url, data, seed, componentsExtension);
                 invokeEvents(GltfLoadEventType.FinishedSetup, new GltfLoadEvent(context, url, loader, data));
+                registerPrewarmObject(data.scene, context);
                 resolve(data);
 
             }, evt => {

package/src/engine/engine_setup.ts

@@ -701,6 +701,7 @@ export class Context {
 
 
 			if (!this.isManagedExternally) {
+				looputils.runPrewarm(this);
 				this._currentFrameEvent = -10;
 				this.renderNow();
 				this._currentFrameEvent = FrameEvent.OnAfterRender;
@@ -809,47 +810,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/Renderer.ts

@@ -12,6 +12,8 @@ import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
 import { IRenderer, ISharedMaterials } from "../engine/engine_types";
 import { debug, ReflectionProbe } from "./ReflectionProbe";
 import { setCustomVisibility } from "../engine/js-extensions/Layers";
+import { isLocalNetwork } from "../engine/engine_networking_utils";
+import { showBalloonWarning } from "../engine/debug/debug";
 
 // for staying compatible with old code
 export { InstancingUtil } from "../engine/engine_instancing";
@@ -53,12 +55,14 @@ class SharedMaterialArray implements ISharedMaterials {
     private _renderer: Renderer;
     private _targets: THREE.Object3D[] = [];
 
+    private _indexMapMaxIndex?: number;
+    private _indexMap?: Map<number, number>;
 
     is(renderer: Renderer) {
         return this._renderer === renderer;
     }
 
-    constructor(renderer: Renderer) {
+    constructor(renderer: Renderer, originalMaterials: Material[]) {
         this._renderer = renderer;
         const setMaterial = this.setMaterial.bind(this);
         const getMaterial = this.getMaterial.bind(this);
@@ -76,6 +80,38 @@ class SharedMaterialArray implements ISharedMaterials {
             }
         }
 
+        // this is useful to have an index map when e.g. materials are trying to be assigned by index
+        let hasMissingMaterials = false;
+        let indexMap: Map<number, number> | undefined = undefined;
+        let maxIndex: number = 0;
+        for (let i = 0; i < this._targets.length; i++) {
+            const target = this._targets[i] as Mesh;
+            if (!target) continue;
+            const mat = target.material as Material;
+            if (!mat) continue;
+            for (let k = 0; k < originalMaterials.length; k++) {
+                const orig = originalMaterials[k];
+                if (!orig) {
+                    hasMissingMaterials = true;
+                    continue;
+                }
+                if (mat.name === orig.name) {
+                    if (indexMap === undefined) indexMap = new Map();
+                    indexMap.set(k, i);
+                    maxIndex = Math.max(maxIndex, k);
+                    // console.log(`Material ${mat.name} at ${k} was found at index ${i} in renderer ${renderer.name}.`)
+                    break;
+                }
+            }
+        }
+        if (hasMissingMaterials) {
+            this._indexMapMaxIndex = maxIndex;
+            this._indexMap = indexMap;
+            const warningMessage = `Renderer ${renderer.name} was initialized with missing materials - this may lead to unexpected behaviour when trying to access sharedMaterials by index.`;
+            console.warn(warningMessage);
+            if(isLocalNetwork()) showBalloonWarning("Found renderer with missing materials: please check the console for details.");
+        }
+
         // this lets us override the javascript indexer, only works in ES6 tho
         // but like that we can use sharedMaterials[index] and it will be assigned to the object directly
         return new Proxy(this, {
@@ -98,10 +134,22 @@ class SharedMaterialArray implements ISharedMaterials {
     }
 
     get length(): number {
+        if (this._indexMapMaxIndex !== undefined) return this._indexMapMaxIndex + 1;
         return this._targets.length;
     }
 
+    private resolveIndex(index: number): number {
+        const map = this._indexMap;
+        // if we have a index map it means that some materials were missing
+        if (map) {
+            if (map.has(index)) return map.get(index) as number;
+            // return -1;
+        }
+        return index;
+    }
+
     private setMaterial(mat: Material, index: number) {
+        index = this.resolveIndex(index);
         if (index < 0 || index >= this._targets.length) return;
         const target = this._targets[index];
         if (!target || target["material"] === undefined) return;
@@ -109,6 +157,7 @@ class SharedMaterialArray implements ISharedMaterials {
     }
 
     private getMaterial(index: number) {
+        index = this.resolveIndex(index);
         if (index < 0) return null;
         const obj = this._targets;
         if (index >= obj.length) return null;
@@ -193,10 +242,18 @@ export class Renderer extends Behaviour implements IRenderer {
     }
 
     private _sharedMaterials!: SharedMaterialArray;
+    private _originalMaterials: Material[] = [];
+
+    // this is just available during deserialization
+    private set sharedMaterials(_val: Array<Material | null>) {
+        // TODO: elements in the array might be missing at the moment which leads to problems if an index is serialized
+        this._originalMaterials = _val as Material[];
+    }
 
+    //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
         if (!this._sharedMaterials || !this._sharedMaterials.is(this))
-            this._sharedMaterials = new SharedMaterialArray(this);
+            this._sharedMaterials = new SharedMaterialArray(this, this._originalMaterials);
         return this._sharedMaterials!;
     }
 

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";