@needle-tools/engine 2.24.0-pre

package/src/engine/engine_element_loading.ts

@@ -0,0 +1,178 @@
+import { Mathf } from "./engine_math";
+import { LoadingProgressArgs } from "./engine_setup";
+import { getParam } from "./engine_utils";
+
+const debug = getParam("debugloadingbar");
+
+export class LoadingElementOptions {
+    className?: string;
+    additionalClasses?: string[];
+}
+
+export interface ILoadingViewHandler {
+    onLoadingBegin(message?: string);
+    onLoadingUpdate(progress: LoadingProgressArgs, message?: string);
+    onLoadingFinished(message?: string);
+}
+
+export function calculateProgress01(progress : LoadingProgressArgs){
+    return progress.index / progress.count + (progress.progress.loaded / progress.progress.total) / progress.count
+}
+
+export class EngineLoadingView implements ILoadingViewHandler {
+
+    // the raw progress
+    loadingProgress: number = 0;
+
+    private container: HTMLElement;
+    private _progress: number = 0;
+    private _allowCustomLoadingElement: boolean = false;
+    private _loadingElement?: HTMLElement;
+    private _loadingTextContainer: HTMLElement | null = null;
+    private _loadingBar: HTMLElement | null = null;
+    private _messageContainer: HTMLElement | null = null;
+    private _loadingElementOptions?: LoadingElementOptions;
+
+    constructor(container: HTMLElement, opts?: LoadingElementOptions) {
+        this.container = container;
+        this._loadingElementOptions = opts;
+    }
+
+    onLoadingBegin(message?: string) {
+        if (!this._loadingElement) {
+            for (let i = 0; i < this.container.children.length; i++) {
+                const el = this.container.children[i] as HTMLElement;
+                if (el.classList.contains("loading")) {
+                    if (!this._allowCustomLoadingElement) {
+                        this.container.removeChild(el);
+                        continue;
+                    }
+                    this._loadingElement = this.createLoadingElement();
+                    return;
+                }
+            }
+            this._loadingElement = this.createLoadingElement();
+        }
+        this._progress = 0;
+        this.loadingProgress = 0;
+        this._loadingElement.style.display = "";
+        this.container.appendChild(this._loadingElement);
+        this.smoothProgressLoop();
+        this.setMessage(message ?? "");
+    }
+
+    onLoadingUpdate(progress: LoadingProgressArgs | ProgressEvent | number, message?: string) {
+        // if the element has no parent we want to add it
+        if (!this._loadingElement?.parentElement) {
+            this.onLoadingBegin(message);
+        }
+        // console.log(callback.name, callback.progress.loaded / callback.progress.total, callback.index + "/" + callback.count);
+        let total01 = 0;
+        if (typeof progress === "number") {
+            total01 = progress;
+        }
+        else {
+            if ("index" in progress)
+                total01 = calculateProgress01(progress);
+            if (!message && "name" in progress)
+                this.setMessage(progress.name);
+        }
+        this.loadingProgress = total01;
+        if (message) this.setMessage(message);
+        this.updateDisplay();
+    }
+
+    onLoadingFinished(message?: string) {
+        this.loadingProgress = 1;
+        this.setMessage(message ?? "");
+    }
+
+    setMessage(message: string) {
+        if (this._messageContainer) {
+            this._messageContainer.innerText = message;
+        }
+    }
+
+    private _progressLoop: any;
+    private smoothProgressLoop() {
+        if (this._progressLoop) return;
+        let dt = 1 / 12;
+        if (debug) dt = .001;
+        const max = 1 - .05;
+        this._progressLoop = setInterval(() => {
+            if (this.loadingProgress >= 1 && this._progress >= max) {
+                if (this._loadingElement) {
+                    this._loadingElement.style.display = "none";
+                    this._loadingElement.remove();
+                }
+                clearInterval(this._progressLoop);
+                this._progressLoop = null;
+                return;
+            }
+            this._progress = Mathf.lerp(this._progress, this.loadingProgress, dt * this.loadingProgress);
+            this.updateDisplay();
+        }, dt);
+    }
+
+    private updateDisplay() {
+        const t = this._progress;
+        const percent = (t * 100).toFixed(0) + "%";
+        if (this._loadingBar) {
+            this._loadingBar.style.width = t * 100 + "%";
+        }
+
+        if (this._loadingTextContainer)
+            this._loadingTextContainer.textContent = percent;
+    }
+
+    private createLoadingElement(existing?: HTMLElement): HTMLElement {
+        this._loadingElement = existing || document.createElement("div");
+        const className = this._loadingElementOptions?.className ?? "loading";
+        this._loadingElement.classList.add(className);
+        if (this._loadingElementOptions?.additionalClasses) {
+            for (const c of this._loadingElementOptions.additionalClasses) {
+                this._loadingElement.classList.add(c);
+            }
+        }
+
+        if (!existing) {
+            this._loadingElement.style.color = "white";
+            this._loadingElement.style.display = "flex";
+        }
+
+        const loadingBarContainer = document.createElement("div");
+        const maxWidth = 20;
+        loadingBarContainer.style.display = "flex";
+        loadingBarContainer.style.width = maxWidth + "%";
+        loadingBarContainer.style.height = "2px";
+        loadingBarContainer.style.background = "rgba(255,255,255,.1)"
+        this._loadingElement.appendChild(loadingBarContainer);
+
+        this._loadingBar = document.createElement("div");
+        loadingBarContainer.appendChild(this._loadingBar);
+        const getGradientPos = function (t: number): string {
+            return Mathf.lerp(maxWidth * .5, 100 - maxWidth * .5, t) + "%";
+        }
+        this._loadingBar.style.background =
+            `linear-gradient(90deg, #02022B ${getGradientPos(0)}, #0BA398 ${getGradientPos(.4)}, #99CC33 ${getGradientPos(.5)}, #D7DB0A ${getGradientPos(1)})`;
+        this._loadingBar.style.backgroundAttachment = "fixed";
+        this._loadingBar.style.width = "0%";
+        this._loadingBar.style.height = "100%";
+
+        this._loadingTextContainer = document.createElement("div");
+        this._loadingTextContainer.style.display = "flex";
+        this._loadingTextContainer.style.justifyContent = "center";
+        this._loadingTextContainer.style.marginTop = ".9em";
+        this._loadingElement.appendChild(this._loadingTextContainer);
+
+        const messageContainer = document.createElement("div");
+        this._messageContainer = messageContainer;
+        messageContainer.style.display = "flex";
+        messageContainer.style.fontSize = ".8em";
+        messageContainer.style.paddingTop = ".5em";
+        messageContainer.style.color = "rgba(255,255,255,.5)";
+        this._loadingElement.appendChild(messageContainer);
+
+        return this._loadingElement;
+    }
+}

package/src/engine/engine_element_overlay.ts

@@ -0,0 +1,108 @@
+
+export const arContainerClassName = "ar";
+export const quitARClassName = "quit-ar";
+
+// https://developers.google.com/web/fundamentals/web-components/customelements
+export class AROverlayHandler {
+
+    get ARContainer(): HTMLElement | null { return this.arContainer; }
+
+    constructor() {
+        this.closeARCallback = this.onRequestedEndAR.bind(this);
+    }
+
+    private arContainer: HTMLElement | null = null;
+    closeARCallback: any;
+    currentSession: THREE.XRSession | null = null;
+    registeredCloseEventElements: Element[] = [];
+
+    private _createdAROnlyElements: Array<any> = [];
+
+    requestEndAR() {
+        this.onRequestedEndAR();
+    }
+
+    onBegin(overlayContainer: HTMLElement, session: THREE.XRSession) {
+        this.currentSession = session;
+        this.arContainer = overlayContainer;
+        if (!this.arContainer) return;
+
+        const quit_Elements = overlayContainer.getElementsByClassName(quitARClassName);
+        if (!quit_Elements || quit_Elements.length <= 0) {
+            console.warn("Missing quit AR elements");
+            this.createFallbackCloseARButton(this.arContainer);
+        }
+        else {
+            for (let i = 0; i < quit_Elements.length; i++) {
+                const el = quit_Elements[i];
+                if (!el) continue;
+                el.addEventListener("click", this.closeARCallback);
+                this.registeredCloseEventElements.push(el);
+            }
+        }
+    }
+
+    onEnd() {
+        // if (this.arContainer)
+        // this.arContainer.classList.remove("ar-session-active");
+        for (const created of this._createdAROnlyElements) {
+            if (created.remove) {
+                created.remove();
+            }
+        }
+    }
+
+    findOrCreateARContainer(element: HTMLElement): HTMLElement {
+        if (element.classList.contains(arContainerClassName)) {
+            return element;
+        }
+        if (element.children) {
+            // @ts-ignore
+            for (const ch of element.children) {
+                if (!ch || !ch.classList) continue;
+                if (ch.classList.contains(arContainerClassName))
+                    return ch;
+            }
+        }
+
+        const el = document.createElement("div");
+        el.classList.add(arContainerClassName);
+        return element.appendChild(el);
+    }
+
+    private onRequestedEndAR() {
+        if (!this.currentSession) return;
+        this.currentSession.end();
+        this.currentSession = null;
+
+        for (const el of this.registeredCloseEventElements) {
+            el.removeEventListener("click", this.closeARCallback);
+        }
+        this.registeredCloseEventElements.length = 0;
+
+        // this.style.display = "none";
+        // this.style.pointerEvents = "none";
+    }
+
+    private createFallbackCloseARButton(element: HTMLElement) {
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        svg.setAttribute('width', "38px");
+        svg.setAttribute('height', "38px");
+        svg.style.position = 'absolute';
+        svg.style.right = '20px';
+        svg.style.top = '40px';
+        svg.style.zIndex = '9999';
+        svg.style.pointerEvents = 'auto';
+        svg.addEventListener('click', this.closeARCallback);
+        element.appendChild(svg);
+        this._createdAROnlyElements.push(svg);
+
+        var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+        path.setAttribute('d', 'M 12,12 L 28,28 M 28,12 12,28');
+        path.setAttribute('stroke', '#eee');
+        path.setAttribute('stroke-width', "2px");
+        svg.appendChild(path);
+        this._createdAROnlyElements.push(path);
+    }
+
+}

package/src/engine/engine_fileloader.js

@@ -0,0 +1,9 @@
+import * as THREE from "three";
+
+export const loader = new THREE.FileLoader();
+
+export async function loadFileAsync(url) {
+  return new Promise((resolve, reject) => {
+    loader.load(url, resolve, undefined, reject);
+  });
+}

package/src/engine/engine_generic_utils.js

@@ -0,0 +1,14 @@
+
+
+export function safeInvoke(fun, args) {
+    try {
+        if (args)
+            fun(args);
+        else fun();
+    }
+    catch (err) {
+        console.error(err);
+        return false;
+    }
+    return true;
+}

package/src/engine/engine_gizmos.ts

@@ -0,0 +1,15 @@
+import * as THREE from 'three';
+
+const box: THREE.BoxGeometry = new THREE.BoxGeometry(1, 1, 1);
+
+export function CreateWireCube(col: THREE.ColorRepresentation | null = null) : THREE.LineSegments {
+    const color = new THREE.Color(col ?? 0xdddddd);
+    // const material = new THREE.MeshBasicMaterial();
+    // material.color = new THREE.Color(col ?? 0xdddddd);
+    // material.wireframe = true;
+    // const box = new THREE.Mesh(box, material);
+    // box.name = "BOX_GIZMO";
+    const edges = new THREE.EdgesGeometry(box);
+    const line = new THREE.LineSegments(edges, new THREE.LineBasicMaterial({ color: color }));
+    return line;
+}

package/src/engine/engine_gltf.ts

@@ -0,0 +1,4 @@
+
+
+/** used to find data registered via gltf files e.g. find lightmaps for a Renderer component that were shipped inside a gltf */
+export declare type SourceIdentifier = string;

package/src/engine/engine_gltf_builtin_components.ts

@@ -0,0 +1,298 @@
+import "./codegen/register_types";
+import { addNewComponentInstance } from "./engine_components";
+import { TypeStore } from "./engine_typestore";
+import * as THREE from "three";
+import { Component, GameObject, UIDProvider } from "../engine-components/Component";
+import { InstantiateIdProvider } from "./engine_networking_instantiate"
+import { Context } from "./engine_setup";
+import { deserializeObject, serializeObject } from "./engine_serialization";
+import { assign, ISerializable, SerializationContext } from "./engine_serialization_core";
+import { NEEDLE_components } from "./extensions/NEEDLE_components";
+import { debugExtension } from "./engine_default_parameters";
+import { builtinComponentKeyName } from "./engine_constants";
+import { SourceIdentifier } from "./engine_gltf";
+
+const debug = debugExtension;
+
+export function writeBuiltinComponentData(comp: Component, context: SerializationContext): object | null {
+
+    // const fn = (comp as unknown as ISerializable)?.onBeforeSerialize;
+    // if (fn) {
+    //     const res = fn?.call(comp);
+    //     if (res !== undefined) {
+    //         res["name"] = comp.constructor.name;
+    //         return res;
+    //     }
+    // }
+    const serializable = comp as unknown as ISerializable;
+    const data = serializeObject(serializable, context);
+    // console.log(data);
+    if (data !== undefined) return data;
+    return null;
+}
+
+export async function createBuiltinComponents(context: Context, gltfId : SourceIdentifier, gltf, seed: number | null | UIDProvider = null, extension?: NEEDLE_components) {
+    if (!gltf) return;
+    const lateResolve: Array<(gltf: THREE.Object3D) => {}> = [];
+
+    let idProvider: UIDProvider | null = seed as UIDProvider;
+    if (typeof idProvider === "number") {
+        idProvider = new InstantiateIdProvider(seed as number);
+    }
+
+    const serializationContext = new SerializationContext(gltf.scene);
+    serializationContext.gltfId = gltfId;
+    serializationContext.context = context;
+    serializationContext.gltf = gltf;
+    serializationContext.nodeToObject = extension?.nodeToObjectMap;
+
+    const deserialize: DeserializeData[] = [];
+
+    if (gltf.scenes) {
+        for (const scene of gltf.scenes) {
+            await onCreateBuiltinComponents(serializationContext, scene, deserialize, lateResolve);
+        }
+    }
+    if (gltf.children) {
+        for (const ch of gltf.children) {
+            await onCreateBuiltinComponents(serializationContext, ch, deserialize, lateResolve);
+        }
+    }
+
+
+    context.new_scripts_pre_setup_callbacks.push(() => {
+
+        for (const des of deserialize) {
+            handleDeserialization(des, serializationContext);
+        }
+
+        // when dropping the same file multiple times we need to generate new guids
+        // e.g. SyncTransform sends its own guid to the server to know about ownership
+        // so it requires a unique guid for a new instance
+        // doing it here at the end of resolving of references should ensure that
+        // and this should run before awake and onenable of newly created components
+        if (idProvider) {
+            // TODO: should we do this after setup callbacks now?
+            recursiveCreateGuids(gltf, idProvider);
+            for (const scene of gltf.scenes)
+                recursiveCreateGuids(scene, idProvider);
+        }
+    });
+
+    // tools.findAnimationsLate(context, gltf, context.new_scripts_pre_setup_callbacks);
+
+    // console.log("finished creating builtin components", gltf.scene?.name, gltf);
+}
+
+function recursiveCreateGuids(obj: GameObject, idProvider: UIDProvider | null) {
+    if (idProvider === null) return;
+    if (!obj) return;
+    obj.guid = idProvider.generateUUID();
+    // console.log(obj);
+    if (obj && obj.userData && obj.userData.components) {
+        for (const comp of obj.userData.components) {
+            if (comp === null) continue;
+            comp.guid = idProvider.generateUUID();
+            // console.log(comp.guid)
+        }
+
+    }
+    if (obj.children) {
+        for (const child of obj.children) {
+            recursiveCreateGuids(child as GameObject, idProvider);
+        }
+    }
+}
+
+declare interface IGltfbuiltinComponent {
+    name: string;
+}
+
+declare interface IGltfBuiltinComponentData {
+    [builtinComponentKeyName]: IGltfbuiltinComponent[];
+}
+
+declare class DeserializeData {
+    instance: any;
+    compData: IGltfbuiltinComponent;
+    obj: THREE.Object3D;
+}
+
+declare type LateResolveCallback = (gltf: THREE.Object3D) => void;
+
+const unknownComponentsBuffer: Array<string> = [];
+
+async function onCreateBuiltinComponents(context: SerializationContext, obj: THREE.Object3D,
+    deserialize: DeserializeData[], lateResolve: LateResolveCallback[]) {
+    if (!obj) return;
+
+    // iterate injected data
+    const data = obj.userData as IGltfBuiltinComponentData;
+    if (data) {
+        const components = data.builtin_components;
+        if (components && components.length > 0) {
+            // console.log(obj);
+            for (const compData of components) {
+                try {
+                    if (compData === null) continue;
+                    const type = TypeStore.get(compData.name);
+                    // console.log(compData, compData.name, type, TypeStore);
+                    if (type !== undefined && type !== null) {
+                        const instance: Component = new type() as Component;
+                        instance.sourceId = context.gltfId;
+
+                        // assign basic fields
+                        assign(instance, compData);
+                        // Object.assign(instance, compData);
+                        // dont call awake here because some references might not be resolved yet and components that access those fields in awake will throw
+                        // for example Duplicatable reference to object might still be { node: id }
+                        const callAwake = false;
+                        addNewComponentInstance(instance, obj, callAwake);
+                        deserialize.push({ instance, compData, obj });
+                    }
+                    else {
+                        if (debug)
+                            console.debug("unknown component: " + compData.name);
+                        if (!unknownComponentsBuffer.includes(compData.name))
+                            unknownComponentsBuffer.push(compData.name);
+                    }
+                }
+                catch (err: any) {
+                    console.error(compData.name + " - " + err.message, err);
+                }
+            }
+            // console.debug("finished adding gltf builtin components", obj);
+        }
+        if(unknownComponentsBuffer.length > 0){
+            const unknown = unknownComponentsBuffer.join(", ");
+            console.warn("unknown components: " + unknown);
+            unknownComponentsBuffer.length = 0;
+        }
+    }
+
+    if (obj.children) {
+        for (const ch of obj.children) {
+            await onCreateBuiltinComponents(context, ch, deserialize, lateResolve);
+        }
+    }
+}
+
+function handleDeserialization(data: DeserializeData, context: SerializationContext) {
+    const { instance, compData, obj } = data;
+    context.object = obj;
+    context.target = instance;
+
+    // const beforeFn = (instance as ISerializationCallbackReceiver)?.onBeforeDeserialize;
+    // console.log(beforeFn, instance);
+    // if (beforeFn) beforeFn.call(instance, data.compData);
+
+    let deserialized: boolean = true;
+    // console.log(instance, compData);
+    // TODO: first build components and then deserialize data?
+    // currently a component referencing another component can not find it if the referenced component hasnt been added
+    // we should split this up in two steps then.
+    deserialized = deserializeObject(instance, compData, context) === true;
+
+    // if (!deserialized) {
+    //     // now loop through data again and search for special reference types
+    //     for (const key in compData) {
+    //         const entry = compData[key];
+    //         if (!entry) {
+    //             instance[key] = null;
+    //             continue;
+    //         }
+
+    //         const fn = (instance as ISerializationCallbackReceiver)?.onDeserialize;
+    //         if (fn) {
+    //             const res = fn.call(instance, key, entry);
+    //             if (res !== undefined) {
+    //                 instance[key] = res;
+    //                 continue;
+    //             }
+    //         }
+
+    //         // if (!resolve(instance, key, entry, lateResolve)) {
+    //         // }
+    //     }
+    // }
+
+    // console.log(instance);
+    // const afterFn = (instance as ISerializationCallbackReceiver)?.onAfterDeserialize;
+    // if (afterFn) afterFn.call(instance);
+    if (debug)
+        console.debug("add " + compData.name, compData, instance);
+}
+
+// // TODO: THIS should be legacy once we update unity builtin component exports
+// function resolve(instance, key: string, entry, lateResolve: LateResolveCallback[]): boolean {
+
+//     switch (entry["$type"]) {
+//         default:
+//             const type = entry["$type"];
+//             if (type !== undefined) {
+//                 const res = tryResolveType(type, entry);
+//                 if (res !== undefined)
+//                     instance[key] = res;
+//                 return res !== undefined;
+//             }
+//             break;
+//         // the thing is a reference
+//         case "reference":
+//             // we expect some identifier entry to use for finding the reference
+//             const guid = entry["guid"];
+//             lateResolve.push(async (gltf) => {
+//                 instance[key] = findInGltf(guid, gltf);
+//             });
+//             return true;
+//     }
+
+//     if (Array.isArray(entry)) {
+//         // the thing is an array
+//         const targetArray = instance[key];
+//         for (const index in entry) {
+//             const val = entry[index];
+//             if (val === null) {
+//                 targetArray[index] = null;
+//                 continue;
+//             }
+//             switch (val["$type"]) {
+//                 default:
+//                     const type = val["$type"];
+//                     if (type !== undefined) {
+//                         const res = tryResolveType(type, entry);
+//                         if (res !== undefined) targetArray[index] = res;
+//                     }
+//                     break;
+//                 case "reference":
+//                     // this entry is a reference
+//                     const guid = val["guid"];
+//                     lateResolve.push(async (gltf) => {
+//                         targetArray[index] = findInGltf(guid, gltf);
+//                     });
+//                     break;
+//             }
+//         }
+//         return true;
+//     }
+//     return false;
+// }
+
+// function findInGltf(guid: string, gltf) {
+//     let res = tools.tryFindScript(guid);
+//     if (!res) res = tools.tryFindObject(guid, gltf, true);
+//     return res;
+// }
+
+// function tryResolveType(type, entry): any | undefined {
+//     switch (type) {
+//         case "Vector2":
+//             return new THREE.Vector2(entry.x, entry.y);
+//         case "Vector3":
+//             return new THREE.Vector3(entry.x, entry.y, entry.z);
+//         case "Vector4":
+//             return new THREE.Vector4(entry.x, entry.y, entry.z, entry.w);
+//         case "Quaternion":
+//             return new THREE.Quaternion(entry.x, entry.y, entry.z, entry.w);
+//     }
+//     return undefined;
+// }