@needle-tools/engine 2.24.0-pre

package/src/engine/engine_components.js

@@ -0,0 +1,202 @@
+import { activeInHierarchyFieldName } from './engine_constants';
+import { removeScriptFromContext } from './engine_mainloop_utils';
+import { Context } from './engine_setup';
+import * as main from "../engine/engine_mainloop_utils";
+import { getParam } from './engine_utils';
+
+const debug = getParam("debuggetcomponent");
+
+export function registerComponent(script, context) {
+    if (!script) return;
+    const new_scripts = context?.new_scripts ?? Context.Current.new_scripts;
+    if (!new_scripts.includes(script)) {
+        new_scripts.push(script);
+    }
+}
+
+export const removeComponent = function (go, componentInstance) {
+    if (!go) return;
+    if (!go.userData.components) return;
+    const index = go.userData.components.indexOf(componentInstance);
+    if (index < 0) return;
+    componentInstance.gameObject = null;
+    go.userData.components.splice(index, 1);
+}
+
+const addNewComponentInstance = function (componentInstance, obj, callAwake = true) {
+    if (!obj.userData) obj.userData = {};
+    if (!obj.userData.components) obj.userData.components = [];
+    obj.userData.components.push(componentInstance);
+    componentInstance.gameObject = obj;
+    // componentInstance.transform = obj;
+    registerComponent(componentInstance);
+    try {
+        if (componentInstance.__internalAwake && callAwake) {
+            main.updateActiveInHierarchyWithoutEventCall(obj);
+            componentInstance.__internalAwake();
+        }
+    }
+    catch (err) {
+        console.error(err);
+    }
+}
+
+const moveComponentInstance = function (componentInstance, obj) {
+    if (componentInstance.gameObject === obj) return;
+    // TODO: update raycast array
+    if (componentInstance.gameObject && componentInstance.gameObject.userData.components) {
+        const index = componentInstance.gameObject.userData.components.indexOf(componentInstance);
+        componentInstance.gameObject.userData.components.splice(index, 1);
+    }
+    if (!obj.userData.components) obj.userData.components = [];
+    else if (obj.userData.components.includes(componentInstance)) return;
+    obj.userData.components.push(componentInstance);
+    componentInstance.gameObject = obj;
+    // componentInstance.transform = obj;
+}
+
+
+const destroyComponentInstance = function (componentInstance) {
+    // console.log("destroy", componentInstance, componentInstance.onDestroy);
+    // TODO: update raycast array
+    if (componentInstance.gameObject && componentInstance.gameObject.userData.components) {
+        const index = componentInstance.gameObject.userData.components.indexOf(componentInstance);
+        componentInstance.gameObject.userData.components.splice(index, 1);
+    }
+    // should we call these methods frame delayed?
+    if (componentInstance.__internalDisable) componentInstance.__internalDisable();
+    if (componentInstance.onDestroy) componentInstance.onDestroy();
+    removeScriptFromContext(componentInstance, componentInstance.context ?? Context.Current);
+    componentInstance.__destroyed = true;
+    componentInstance.gameObject = null;
+    // console.log("destroyed", index, componentInstance);
+}
+
+const onGetComponent = function (componentType, obj, arr) {
+    if (!(obj?.userData?.components)) return null;
+    if (debug)
+        console.log("FIND", componentType);
+    for (let i = 0; i < obj.userData.components.length; i++) {
+        const component = obj.userData.components[i];
+        if (componentType === null || component.constructor.name === componentType.name || component.constructor.name === componentType) {
+            if (debug)
+                console.log("MATCH BY NAME", component)
+            if (arr) arr.push(component);
+            else return component;
+        }
+    }
+    // find in base classes
+    for (let i = 0; i < obj.userData.components.length; i++) {
+        const component = obj.userData.components[i];
+        let parent = Object.getPrototypeOf(component.constructor);
+        do {
+            if (parent === componentType) {
+                if (debug)
+                    console.log("MATCH BY PROTOYPE", parent);
+                if (arr) arr.push(component);
+                else return component;
+            }
+            parent = Object.getPrototypeOf(parent);
+        }
+        while (parent);
+    }
+    return arr;
+}
+
+const getComponent = function (componentType, obj) {
+    return onGetComponent(componentType, obj, null);
+}
+
+const getComponents = function (componentType, obj, arr) {
+    if (!arr) arr = [];
+    return onGetComponent(componentType, obj, arr);
+}
+
+const getComponentInChildren = function (componentType, obj, includeInactive) {
+    const res = getComponent(componentType, obj);
+    if (includeInactive === false && res.enabled === false) return null;
+    if (res) return res;
+    for (let i = 0; i < obj?.children?.length; i++) {
+        const res = getComponentInChildren(componentType, obj.children[i]);
+        if (res) return res;
+    }
+    return null;
+}
+
+const getComponentsInChildren = function (componentType, obj, arr) {
+    if (!arr) arr = [];
+    getComponents(componentType, obj, arr);
+    for (let i = 0; i < obj?.children?.length; i++) {
+        getComponentsInChildren(componentType, obj.children[i], arr);
+    }
+    return arr;
+}
+
+const getComponentInParent = function (componentType, obj) {
+    if (!obj) return null;
+    // console.log(obj);
+    const res = getComponent(componentType, obj);
+    if (res) return res;
+    return getComponentInParent(componentType, obj.parent);
+}
+
+const getComponentsInParent = function (componentType, obj, arr) {
+    if (!arr) arr = [];
+    if (!obj) return arr;
+    getComponents(componentType, obj, arr);
+    return getComponentsInParent(componentType, obj.parent, arr);
+}
+
+const findObjectOfType = function (type, contextOrScene, includeInactive) {
+    if (!type) return null;
+    if (!contextOrScene) {
+        contextOrScene = Context.Current;
+        if (!contextOrScene) {
+            console.error("Can not search object without any needle context or scene!!!");
+            return null;
+        }
+    }
+    const scene = contextOrScene.isScene === true || contextOrScene.isObject3D === true ? contextOrScene : contextOrScene?.scene;
+    for (const i in scene.children) {
+        const child = scene.children[i];
+        if (includeInactive === false && child[activeInHierarchyFieldName] === false) continue;
+        if (child.constructor == type) return child;
+        const res = getComponentInChildren(type, child);
+        if (res) return res;
+    }
+    return null;
+}
+
+const findObjectsOfType = function (type, array, contextOrScene) {
+    if (!type) return array;
+    if (!contextOrScene) {
+        contextOrScene = Context.Current;
+        if (!contextOrScene) {
+            console.error("Can not search object without any needle context or scene!!!");
+            return array;
+        }
+    }
+    const scene = contextOrScene.isScene === true || contextOrScene.isObject3D === true ? contextOrScene : contextOrScene?.scene;
+    if (!scene) return array;
+    for (const i in scene.children) {
+        const child = scene.children[i];
+        if (child.constructor == type) return child;
+        getComponentsInChildren(type, child, array);
+    }
+    return array;
+}
+
+
+export {
+    addNewComponentInstance,
+    moveComponentInstance,
+    destroyComponentInstance,
+    getComponent,
+    getComponents,
+    getComponentInChildren,
+    getComponentsInChildren,
+    getComponentInParent,
+    getComponentsInParent,
+    findObjectOfType,
+    findObjectsOfType,
+}

package/src/engine/engine_constants.ts

@@ -0,0 +1,3 @@
+
+export const activeInHierarchyFieldName = "__isActiveInHierarchy";
+export const builtinComponentKeyName = "builtin_components";

package/src/engine/engine_coroutine.ts

@@ -0,0 +1,16 @@
+import { Context } from "./engine_setup";
+
+
+export function* WaitForSeconds(seconds: number, context: Context | null = null) {
+    const time = context ? context.time : Context.Current.time;
+    const start = time.time;
+    while(time.time - start < seconds) {
+        yield;
+    }
+}
+
+export function* WaitForFrames(frames: number) {
+    for(let i = 0; i < frames; i++) {
+        yield;
+    }
+}

package/src/engine/engine_default_parameters.ts

@@ -0,0 +1,4 @@
+import { getParam } from "./engine_utils";
+
+export const showGizmos = getParam("gizmos");
+export const debugExtension = getParam("debugextension");

package/src/engine/engine_element.ts

@@ -0,0 +1,380 @@
+import { Context, build_scene_functions, LoadingOptions, LoadingProgressArgs } from "./engine_setup";
+import { AROverlayHandler, arContainerClassName } from "./engine_element_overlay";
+import { GameObject } from "../engine-components/Component";
+import { loadSync } from "./engine_scenetools";
+import { processNewScripts } from "./engine_mainloop_utils";
+import { calculateProgress01, EngineLoadingView, ILoadingViewHandler } from "./engine_element_loading";
+import { delay } from "./engine_utils";
+
+class EngineElementSourceFileWatcher {
+
+    private id: string;
+    private context: Context;
+    private previouslyAdded: any;
+    private previousSource?: string;
+    private networkEvent: string;
+
+    constructor(id: string, context: Context) {
+        this.id = id;
+        this.context = context;
+        this.networkEvent = "needle-engine-source-changed";
+        if (this.id) this.networkEvent += "-" + this.id;
+        this.context.connection.beginListen(this.networkEvent, fn => {
+            this.onSourceChanged(fn, true);
+        });
+    }
+
+    async onSourceChanged(newSource: string, dontSend: boolean = false, isStartup: boolean = false) {
+        if (this.previouslyAdded) {
+            // if event was from remote and source didnt change do nothing
+            if (dontSend && newSource === this.previousSource) { }
+            else
+                GameObject.destroySynced(this.previouslyAdded);
+        }
+        this.previouslyAdded = null;
+
+        if (!dontSend) {
+            this.context.connection.send(this.networkEvent, newSource);
+        }
+
+        this.previousSource = newSource;
+        Context.Current = this.context;
+        const res = await loadSync(this.context, newSource, this.getHashFromString(newSource));
+        if (!isStartup)
+            processNewScripts(this.context);
+        const obj = res?.scene;
+        if (obj) {
+            this.previouslyAdded = obj;
+            this.context.scene.add(obj);
+        }
+    }
+
+    private getHashFromString(str: string) {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return hash;
+    }
+}
+
+
+
+const htmlTagName = "needle-engine";
+const vrContainerClassName = "vr";
+const desktopContainerClassname = "desktop";
+const knownClasses = [arContainerClassName, vrContainerClassName, desktopContainerClassname];
+
+// https://developers.google.com/web/fundamentals/web-components/customelements
+export class EngineElement extends HTMLElement {
+
+    public get loadingProgress01(): number { return this._loadingProgress01; }
+    public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
+
+    public getContext(): Promise<Context> {
+        return new Promise((res, _rej) => {
+            if (this.context && this.loadingFinished) {
+                res(this.context);
+            }
+            else {
+                const cb = () => {
+                    this.removeEventListener("loadfinished", cb);
+                    if (this.context && this.loadingFinished) {
+                        res(this.context);
+                    }
+                };
+                this.addEventListener("loadfinished", cb);
+            }
+        });
+    }
+
+    /**@obsolete use GameObject */
+    private gameObject = GameObject; // used to access static methods from regular js
+    private GameObject = GameObject;
+
+    private context: Context | null = null;
+    private overlay_ar: AROverlayHandler;
+    private _loadingProgress01: number = 0;
+
+    private _watcher?: EngineElementSourceFileWatcher;
+    private _loadingView?: ILoadingViewHandler;
+
+    constructor() {
+        super();
+        this.overlay_ar = new AROverlayHandler();
+    }
+
+    async connectedCallback() {
+        this.onSetupDesktop();
+
+        var observer = new MutationObserver(this.onElementsChanged.bind(this));
+        observer.observe(this, { childList: true })
+
+        // user can set a function name or a path to a gltf or glb to be loaded
+        const srcFile = () => {
+            const srcVal = this.getAttribute("src");
+            if (srcVal?.endsWith(".glb") || srcVal?.endsWith(".gltf")) {
+                return srcVal;
+            }
+            return null;
+        };
+        let src: string | null = "loadScene";
+        const srcAttributeValue = srcFile();
+        if (srcAttributeValue) src = srcAttributeValue;
+
+        const alias = this.getAttribute("alias");
+        this.context = new Context({ name: src, domElement: this, alias: alias });
+        this._watcher = new EngineElementSourceFileWatcher(this.getAttribute("id") ?? alias ?? "", this.context);
+
+        if (src && src.length > 0) {
+            // try to get the load function
+
+            // HACK: if no explicit glb is assigned we have to wait for the codegen function to be available
+            // it happened in one case during local development where the function was not yet registered
+            // but this component was connected already
+            if (!srcAttributeValue) {
+                while (Object.keys(build_scene_functions).length <= 0) {
+                    if (!this.isConnected) return;
+                    await delay(10);
+                }
+            }
+
+            let fn: (context: Context) => Promise<void> = build_scene_functions[src] ?? window[src];
+            // if no load function is found (e.g. when generated code was deleted or import removed) then just load the glb
+            // or if an explicit src file is provided
+            let previousFileLoaded: string | null = null;
+            if (!fn || srcAttributeValue) {
+                if (srcAttributeValue)
+                    src = srcAttributeValue;
+                fn = async _ => {
+                    const file = srcFile();
+                    if (file && this._watcher) {
+                        previousFileLoaded = file;
+                        await this._watcher.onSourceChanged(file, true, true);
+                    }
+                }
+            }
+            if (fn) {
+                this.classList.add("loading");
+                console.log("Needle Engine: Begin loading", alias ?? "");
+                // default loading can be overriden by calling preventDefault in the onload start event
+                const useDefaultLoading = this.dispatchEvent(new CustomEvent("loadstart", {
+                    detail: {
+                        context: this.context,
+                        alias: alias
+                    },
+                    cancelable: true
+                }));
+                if (!this._loadingView && useDefaultLoading)
+                    this._loadingView = new EngineLoadingView(this);
+                if (useDefaultLoading)
+                    this._loadingView?.onLoadingBegin("begin load");
+                // setup the loading callback for the default loading handler and the user defined one
+                const loadingCallback = (progress: LoadingProgressArgs, message?: string) => {
+                    this._loadingProgress01 = calculateProgress01(progress);
+                    if (useDefaultLoading)
+                        this._loadingView?.onLoadingUpdate(progress, message);
+                    this.dispatchEvent(new CustomEvent("progress", {
+                        detail: {
+                            context: this.context,
+                            name: progress.name,
+                            progress: progress.progress,
+                            index: progress.index,
+                            count: progress.count,
+                            totalProgress01: this._loadingProgress01
+                        }
+                    }));
+                }
+                await this.context.onCreate(fn, { progress: loadingCallback });
+                const file = srcFile();
+                if (file) {
+                    // only if we didnt load this file here already
+                    if (file !== previousFileLoaded)
+                        await this._watcher.onSourceChanged(file, true, true);
+                }
+                this._loadingProgress01 = 1;
+                if (useDefaultLoading)
+                    this._loadingView?.onLoadingFinished("create scene");
+                this.classList.remove("loading");
+                this.classList.add("loading-finished");
+                console.log("Needle Engine: finished loading", alias ?? "");
+                this.dispatchEvent(new CustomEvent("loadfinished", {
+                    detail: {
+                        context: this.context,
+                        src: alias ?? src
+                    }
+                }));
+                this.onSetupDesktop();
+            }
+            else {
+                console.error("Could not find scene function named \"" + src + "\", it must be either in global scope " +
+                    "or added to build_scene_functions", build_scene_functions);
+            }
+        } else {
+            console.error("Missing src attribute - please provide a function name", this);
+        }
+    }
+
+    disconnectedCallback() {
+        if (this.context) {
+            this.context.onDestroy();
+        }
+    }
+
+    static get observedAttributes() {
+        return ["src", "loadfinished"];
+    }
+
+    attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
+        // console.log(name, oldValue, newValue);
+        switch (name) {
+            case "src":
+                this._watcher?.onSourceChanged(newValue);
+                break;
+            case "loadfinished":
+                if (typeof newValue === "string" && newValue.length > 0) {
+                    this.registerEventFromAttribute("loadfinished", newValue);
+                }
+                break;
+        }
+    }
+
+    private registerEventFromAttribute(eventName: string, code: string) {
+        if (typeof code === "string" && code.length > 0) {
+            // indirect eval https://esbuild.github.io/content-types/#direct-eval
+            const fn = (0, eval)(code);
+            // const fn = new Function(newValue);
+            if (typeof fn === "function") {
+                this.addEventListener(eventName, evt => fn?.call(globalThis, this.context, evt));
+            }
+        }
+    }
+
+    getAROverlayContainer(): HTMLElement {
+        return this.overlay_ar.findOrCreateARContainer(this);;
+    }
+
+    getVROverlayContainer(): HTMLElement | null {
+        for (let i = 0; i < this.children.length; i++) {
+            const ch = this.children[i] as HTMLElement;
+            if (ch.classList.contains("vr"))
+                return ch;
+        }
+        return null;
+    }
+
+    onEnterAR(session: THREE.XRSession, overlayContainer: HTMLElement) {
+        this.onSetupAR();
+        this.overlay_ar.onBegin(overlayContainer, session);
+        this.dispatchEvent(new CustomEvent("enter-ar", { detail: { session: session, context: this.context, htmlContainer: this.overlay_ar?.ARContainer } }));
+    }
+
+    onExitAR(session: THREE.XRSession) {
+        this.overlay_ar.onEnd();
+        this.onSetupDesktop();
+        this.dispatchEvent(new CustomEvent("exit-ar", { detail: { session: session, context: this.context, htmlContainer: this.overlay_ar?.ARContainer } }));
+    }
+
+    onEnterVR(session: THREE.XRSession) {
+        this.onSetupVR();
+        this.dispatchEvent(new CustomEvent("enter-vr", { detail: { session: session, context: this.context } }));
+    }
+
+    onExitVR(session: THREE.XRSession) {
+        this.onSetupDesktop();
+        this.dispatchEvent(new CustomEvent("exit-vr", { detail: { session: session, context: this.context } }));
+    }
+
+    // private _loadingElement: HTMLElement | null = null;
+    // private onLoadingBegin() {
+    //     for (let i = 0; i < this.children.length; i++) {
+    //         const el = this.children[i] as HTMLElement;
+    //         if (el.classList.contains("loading")) {
+    //             this._loadingElement = el;
+    //             this._loadingElement.style.display = "flex";
+    //             return;
+    //         }
+    //     }
+    //     this._loadingElement = document.createElement("div");
+    //     this._loadingElement.classList.add("loading");
+    //     this._loadingElement.style.color = "white";
+    //     this.appendChild(this._loadingElement);
+    // }
+
+    // private onLoadingCallback(callback: LoadingProgressArgs) {
+    //     // console.log(callback.name, callback.progress.loaded / callback.progress.total, callback.index + "/" + callback.count);
+    //     const total = callback.index / callback.count + (callback.progress.loaded / callback.progress.total) / callback.count;
+    //     this.loadingProgress = total;
+    //     const percent = (total * 100).toFixed(0) + "%";
+    //     if (this._loadingElement)
+    //         this._loadingElement.textContent = percent;
+    // }
+
+    // private onLoadingFinished() {
+    //     if (this._loadingElement) {
+    //         this._loadingElement.style.display = "none";
+    //     }
+    //     this.dispatchEvent(new Event("loading-finished"));
+    // }
+
+    private onElementsChanged() {
+
+    }
+
+    private onSetupAR() {
+        this.classList.add("ar-session-active");
+        this.classList.remove("desktop-session-active");
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, arContainerClassName));
+    }
+
+    private onSetupVR() {
+        this.classList.remove("ar-session-active");
+        this.classList.remove("desktop-session-active");
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, "vr"));
+    }
+
+    private onSetupDesktop() {
+        this.classList.remove("ar-session-active");
+        this.classList.add("desktop-session-active");
+        this.foreachHtmlElement(ch => this.setupElementsForMode(ch, "desktop"));
+    }
+
+    private setupElementsForMode(el: HTMLElement, currentSessionType: string, _session: THREE.XRSession | null = null) {
+        if (el === this.context?.renderer.domElement) return;
+        if (el.id === "VRButton" || el.id === "ARButton") return;
+        el.style.position = "absolute";
+        // el.style.zIndex = "100";
+        // ch.style.width = "100hv";
+        // ch.style.height = "100hv";
+        // set pointer events to none by default (if not explicitly declared)
+        // if (!el.style.pointerEvents)
+        //     el.style.pointerEvents = "none";
+
+        const classList = el.classList;
+        if (classList.contains(currentSessionType)) {
+            el.style.visibility = "visible";
+            el.style.display = "block";
+        }
+        else {
+            // only modify style for elements that have a known class (e.g. marked as vr ar desktop)
+            for (const known of knownClasses) {
+                if (el.classList.contains(known)) {
+                    el.style.visibility = "hidden";
+                    el.style.display = "none";
+                }
+            }
+        }
+    }
+
+    private foreachHtmlElement(cb: (HTMLElement) => void) {
+        for (let i = 0; i < this.children.length; i++) {
+            const ch = this.children[i] as HTMLElement;
+            if (ch.style) cb(ch);
+        }
+    }
+}
+
+window.customElements.define(htmlTagName, EngineElement);
+
+
+