@needle-tools/engine 2.24.0-pre

package/src/engine/extensions/NEEDLE_animator_controller_model.ts

@@ -0,0 +1,185 @@
+import { Animator } from "../../engine-components/Animator";
+import { AnimationAction, AnimationClip, MathUtils, Object3D } from "three"
+import { Context } from "../engine_setup";
+import { InstantiateIdProvider } from "../../engine/engine_networking_instantiate";
+
+
+export declare type AnimatorControllerModel = {
+    name: string,
+    guid: string,
+    parameters: Parameter[],
+    layers: Layer[],
+}
+
+export declare type Parameter = {
+    name: string;
+    /** the animator string to hash result, test against this if a number is used to get a param value */
+    hash: number;
+    type: AnimatorControllerParameterType;
+    value: number | boolean | string;
+}
+
+export declare type Layer = {
+    name: string,
+    stateMachine: StateMachine
+}
+
+export declare type StateMachine = {
+    defaultState: number;
+    states: State[],
+}
+
+export declare type State = {
+    name: string,
+    hash: number;
+    motion: Motion,
+    transitions: Transition[],
+    behaviours: StateMachineBehaviourModel[],
+}
+
+export declare type StateMachineBehaviourModel = {
+    typeName: string;
+    properties: object;
+    instance?: StateMachineBehaviour;
+}
+
+export abstract class StateMachineBehaviour {
+    _context?: Context;
+    get context(): Context { return this._context ?? Context.Current; }
+    get isStateMachineBehaviour() { return true; }
+    onStateEnter?(animator: Animator, _animatorStateInfo: AnimatorStateInfo, layerIndex: number);
+    onStateUpdate?(animator: Animator, animatorStateInfo: AnimatorStateInfo, _layerIndex: number);
+    onStateExit?(animator: Animator, animatorStateInfo: AnimatorStateInfo, layerIndex: number);
+}
+
+export class AnimatorStateInfo {
+
+    private _name: string;
+    get name(): string { return this._name; }
+
+    private _nameHash: number;
+    get nameHash(): number { return this._nameHash; }
+
+    private _normalizedTime: number;
+    get normalizedTime(): number { return this._normalizedTime; }
+
+    private _length: number;
+    get length() {
+        return this._length;
+    }
+
+    private _speed: number;
+    get speed() {
+        return this._speed;
+    }
+
+    constructor(state: State, normalizedTime: number, length: number, speed: number) {
+        this._name = state.name;
+        this._nameHash = state.hash;
+        this._normalizedTime = normalizedTime;
+        this._length = length;
+        this._speed = speed;
+    }
+}
+
+export declare type Motion = {
+    name: string,
+    isLooping: boolean,
+    guid: string,
+    /** clip index in gltf animations array */
+    index: number,
+    /** the resolved clip */
+    clip?: AnimationClip,
+    /** the clip mapping -> which object has which animationclip */
+    clips?: ClipMapping[];
+    action?: AnimationAction,
+    /** used when a transition points to the same state we need another action to blend */
+    action_loopback?: AnimationAction,
+}
+
+export function createMotion(name:string, id? : InstantiateIdProvider): Motion {
+    return {
+        name: "",
+        isLooping: false,
+        guid: id?.generateUUID() ?? MathUtils.generateUUID(),
+        index: -1,
+        clip: new AnimationClip(name, 1, []),
+    }
+}
+
+export declare type ClipMapping = {
+    /** the object this clip is for */
+    node: Object3D;
+    /** the animationclip we resolve from a json ptr */
+    clip: AnimationClip;
+}
+
+export declare type Transition = {
+    isExit: boolean;
+    exitTime: number,
+    hasFixedDuration: boolean,
+    offset: number,
+    duration: number,
+    hasExitTime: number,
+    destinationState: number | State,
+    conditions: Condition[],
+}
+
+export declare type Condition = {
+    parameter: string,
+    mode: AnimatorConditionMode,
+    threshold: number,
+}
+
+
+/// <summary>
+///   <para>The mode of the condition.</para>
+/// </summary>
+export enum AnimatorConditionMode {
+    /// <summary>
+    ///   <para>The condition is true when the parameter value is true.</para>
+    /// </summary>
+    If = 1,
+    /// <summary>
+    ///   <para>The condition is true when the parameter value is false.</para>
+    /// </summary>
+    IfNot = 2,
+    /// <summary>
+    ///   <para>The condition is true when parameter value is greater than the threshold.</para>
+    /// </summary>
+    Greater = 3,
+    /// <summary>
+    ///   <para>The condition is true when the parameter value is less than the threshold.</para>
+    /// </summary>
+    Less = 4,
+    /// <summary>
+    ///   <para>The condition is true when parameter value is equal to the threshold.</para>
+    /// </summary>
+    Equals = 6,
+    /// <summary>
+    ///   <para>The condition is true when the parameter value is not equal to the threshold.</para>
+    /// </summary>
+    NotEqual = 7,
+}
+
+/// <summary>
+///   <para>The type of the parameter.</para>
+/// </summary>
+export enum AnimatorControllerParameterType {
+    /// <summary>
+    ///   <para>Float type parameter.</para>
+    /// </summary>
+    Float = 1,
+    /// <summary>
+    ///   <para>Int type parameter.</para>
+    /// </summary>
+    Int = 3,
+    /// <summary>
+    ///   <para>Boolean type parameter.</para>
+    /// </summary>
+    Bool = 4,
+    /// <summary>
+    ///   <para>Trigger type parameter.</para>
+    /// </summary>
+    Trigger = 9,
+}

package/src/engine/extensions/NEEDLE_components.ts

@@ -0,0 +1,234 @@
+import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+import { NodeToObjectMap, ObjectToNodeMap, SerializationContext } from "../engine_serialization_core";
+import { GLTFExporter } from 'three/examples/jsm/exporters/GLTFExporter.js';
+import { writeBuiltinComponentData } from "../engine_gltf_builtin_components";
+import { debugExtension } from "../engine_default_parameters";
+import { builtinComponentKeyName } from "../engine_constants";
+import { resolveReferences } from "./extension_utils";
+
+export const debug = debugExtension
+const componentsArrayExportKey = "$___Export_Components";
+
+export const EXTENSION_NAME = "NEEDLE_components";
+
+class ExtensionData {
+    [builtinComponentKeyName]?: Array<object | null>
+}
+
+class ExportData {
+    node: THREE.Object3D;
+    nodeIndex: number;
+    nodeDef: any;
+
+    constructor(node: THREE.Object3D, nodeIndex: number, nodeDef: any) {
+        this.node = node;
+        this.nodeIndex = nodeIndex;
+        this.nodeDef = nodeDef;
+    }
+}
+
+export class NEEDLE_components implements GLTFLoaderPlugin {
+
+    get name(): string {
+        return EXTENSION_NAME;
+    }
+
+    // import
+    parser?: GLTFParser;
+    nodeToObjectMap: NodeToObjectMap = {};
+
+    // export
+    exportContext!: { [nodeIndex: number]: ExportData };
+    objectToNodeMap: ObjectToNodeMap = {};
+    context!: SerializationContext;
+    writer?: any;
+
+    registerExport(exp: GLTFExporter) {
+        //@ts-ignore
+        exp.register(writer => {
+            // we want to hook into BEFORE user data is written
+            // because we want to remove the components list (circular references)
+            // and replace them with the serialized data
+            // the write node callback is called after user data is serialized
+            // we could also traverse everything before export and remove components
+            // but doing it like that we avoid traversing multiple times
+            const originalFunction = writer.serializeUserData.bind(writer);
+            this.writer = writer;
+            writer.serializeUserData = (o, def) => {
+                try {
+                    this.serializeUserData(o, def);
+                    originalFunction(o, def);
+                }
+                finally {
+                    this.afterSerializeUserData(o, def);
+                }
+            }
+            return this;
+        });
+    }
+
+    beforeParse() {
+        this.exportContext = {};
+        this.objectToNodeMap = {};
+    }
+
+    // https://github.com/mrdoob/three.js/blob/efbfc67edc7f65cfcc61a389ffc5fd43ea702bc6/examples/jsm/exporters/GLTFExporter.js#L532
+    serializeUserData(node: THREE.Object3D, _nodeDef: any) {
+        const components = node.userData?.components;
+        if (!components || components.length <= 0) return;
+        // delete components before serializing user data to avoid circular references
+        delete node.userData.components;
+        node[componentsArrayExportKey] = components;
+    }
+
+    afterSerializeUserData(node: THREE.Object3D, _nodeDef) {
+        if (node.type === "Scene") {
+            if (debug)
+                console.log("DONE", JSON.stringify(_nodeDef));
+        }
+        // reset userdata
+        if (node[componentsArrayExportKey] === undefined) return;
+        const components = node[componentsArrayExportKey];
+        delete node[componentsArrayExportKey];
+        if (components !== null) {
+            node.userData.components = components;
+        }
+
+        // console.log(_nodeDef, _nodeDef.mesh);
+    }
+
+    writeNode(node: THREE.Object3D, nodeDef) {
+        let nodeIndex = this.writer.json.nodes.length;
+        console.log(node.name, nodeIndex, node.uuid);
+        const context = new ExportData(node, nodeIndex, nodeDef);
+        this.exportContext[nodeIndex] = context;
+        this.objectToNodeMap[node.uuid] = nodeIndex;
+    };
+
+    afterParse(input) {
+        if (debug)
+            console.log("AFTER", input);
+        for (const i in this.exportContext) {
+            const context = this.exportContext[i];
+            const node = context.node;
+            const nodeDef = context.nodeDef;
+            const nodeIndex = context.nodeIndex;
+
+            const components = node.userData?.components;
+            if (!components || components.length <= 0) continue;
+            // create data container
+            const data: ExtensionData = new ExtensionData();
+            nodeDef.extensions = nodeDef.extensions || {};
+            nodeDef.extensions[this.name] = data;
+            this.context.object = node;
+            this.context.nodeId = nodeIndex;
+            this.context.objectToNode = this.objectToNodeMap;
+
+            const serializedComponentData: Array<object | null> = [];
+            for (const comp of components) {
+                this.context.target = comp;
+                const res = writeBuiltinComponentData(comp, this.context);
+                if (res !== null) {
+                    serializedComponentData.push(res);
+                    // (comp as unknown as ISerializationCallbackReceiver)?.onAfterSerialize?.call(comp);
+                }
+            }
+            if (serializedComponentData.length > 0) {
+                data[builtinComponentKeyName] = serializedComponentData;
+                if (debug)
+                    console.log("DID WRITE", node, "nodeIndex", nodeIndex, serializedComponentData);
+            }
+        }
+    }
+
+
+
+    // -------------------------------------
+    // LOADING 
+    // called by GLTFLoader
+    beforeRoot() {
+        if (debug)
+            console.log("BEGIN LOAD");
+        this.nodeToObjectMap = {};
+        return null;
+    }
+
+    // called by GLTFLoader
+    async afterRoot(result: GLTF): Promise<void> {
+        const parser = result.parser;
+        const ext = parser?.extensions;
+        if (!ext) return;
+        const hasExtension = ext[this.name];
+        if (debug)
+            console.log("After root", result, this.parser, ext);
+
+        const loadComponents: Array<Promise<void>> = [];
+        if (hasExtension === true) {
+            const nodes = parser.json.nodes;
+            for (let i = 0; i < nodes.length; i++) {
+                const obj = await parser.getDependency('node', i);
+                this.nodeToObjectMap[i] = obj;
+            }
+
+            for (let i = 0; i < nodes.length; i++) {
+                const node = nodes[i];
+                const index = i;// node.mesh;
+                const ext = node.extensions;
+                if (!ext) continue;
+                const data = ext[this.name];
+                if (!data) continue;
+                if (debug)
+                    console.log("NODE", node);
+                const obj = this.nodeToObjectMap[index];
+                if (!obj) {
+                    console.error("Could not find object for node index: " + index, node, parser);
+                    continue;
+                }
+
+                loadComponents.push(this.createComponents(obj, data));
+            }
+        }
+        await Promise.all(loadComponents);
+    }
+
+    private async createComponents(obj: THREE.Object3D, data: ExtensionData) {
+        if (!data) return;
+
+        const componentData = data[builtinComponentKeyName];
+        if (componentData) {
+            if (debug)
+                console.log(obj.name, componentData);
+            for (const i in componentData) {
+                const serializedData = componentData[i];
+                if (debug)
+                    console.log("Serialized data", JSON.parse(JSON.stringify(serializedData)));
+
+                if (serializedData && this.parser) {
+                    await resolveReferences(this.parser, serializedData);
+                }
+
+                obj.userData = obj.userData || {};
+                obj.userData[builtinComponentKeyName] = obj.userData[builtinComponentKeyName] || [];
+                obj.userData[builtinComponentKeyName].push(serializedData);
+            }
+        }
+    }
+
+    // parse function https://github.com/mrdoob/three.js/blob/efbfc67edc7f65cfcc61a389ffc5fd43ea702bc6/examples/jsm/loaders/GLTFLoader.js#L2290
+
+
+    // createNodeAttachment(nodeIndex: number): null {
+    //     // if(!this.parser){
+    //     //     console.error("Parser not set, call registerLoad with on this");
+    //     //     return null;
+    //     // }
+    //     // const node = this.parser.json.nodes[nodeIndex];
+    //     // const extenstions = node.extensions;
+    //     // const data = extenstions && extenstions[this.name];
+    //     // if (!data) return null;
+    //     // const components = data[builtinComponentKeyName];
+    //     // if (!components) return null;
+    //     // console.log(components);
+    //     return null;
+    // }
+}

package/src/engine/extensions/NEEDLE_deferred_texture.ts

@@ -0,0 +1,175 @@
+import { Material, Texture, TextureLoader } from "three";
+import { GLTF, GLTFLoader, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+import { SourceIdentifier } from "../engine_gltf";
+import { Context } from "../engine_setup";
+import { addDracoAndKTX2Loaders } from "../engine_loaders";
+import { getParam } from "../engine_utils";
+
+export const EXTENSION_NAME = "NEEDLE_deferred_texture";
+
+const debug = getParam("debugdeferredtextures")
+
+declare type DeferredTextureModel = {
+    uri: string;
+    guid?: string;
+    usage?: string,
+}
+
+export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
+
+    static assignTextureLOD(context: Context, material: Material, level: number = 0) {
+        if (!material) return;
+        for (const slot of Object.keys(material)) {
+            const val = material[slot];
+            if (val?.isTexture === true) {
+                if (debug)
+                    console.log("FIND", slot, val?.name, val?.userData, val);
+                NEEDLE_deferred_texture.getOrLoadTexture(context, material, slot, val, level).then(t => {
+                    if (t?.isTexture === true) {
+                        t.needsUpdate = true;
+                        material[slot] = t;
+                        material.needsUpdate = true;
+                    }
+                });
+            }
+        }
+    }
+
+
+    get name(): string {
+        return EXTENSION_NAME;
+    }
+
+    private parser: GLTFParser;
+    private sourceId: SourceIdentifier;
+    private context: Context;
+
+    constructor(parser: GLTFParser, sourceId: SourceIdentifier, context: Context) {
+        this.parser = parser;
+        this.sourceId = sourceId;
+        this.context = context;
+    }
+
+    private _loading: number[] = [];
+
+    // beforeRoot(): null {
+    //     console.log("BEFORE ROOT", this.parser);
+    //     return null;
+    // }
+
+    // loadTexture(index: number): Promise<Texture> | null {
+    //     console.log(index, this._loading);
+    //     if (this._loading.includes(index)) return null;
+    //     const textureInfo = this.parser.json.textures[index];
+    //     if (debug)
+    //         console.log(index, textureInfo);
+    //     return null;
+    // }
+
+    afterRoot(gltf: GLTF): null {
+
+        if (debug)
+            console.log("AFTER", gltf);
+        this.parser.json.textures?.forEach((textureInfo, index) => {
+            if (textureInfo?.extensions) {
+                const ext: DeferredTextureModel = textureInfo?.extensions[EXTENSION_NAME];
+                if (ext) {
+                    const prom = this.parser.getDependency("texture", index);
+                    this._loading.splice(this._loading.indexOf(index), 1);
+                    prom.then(t => {
+                        if (debug) console.log("register texture", t.name, t.uuid, ext);
+                        t.userData.deferred = ext;
+                        NEEDLE_deferred_texture.cache.set(t.uuid, ext);
+                    });
+                }
+            }
+        });
+
+        return null;
+    }
+
+    private static cache = new Map<string, DeferredTextureModel>();
+    private static resolved: { [key: string]: Texture } = {};
+
+    private static async getOrLoadTexture(context: Context, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
+
+        const key = current.uuid;
+        const ext: DeferredTextureModel = NEEDLE_deferred_texture.cache.get(key) || current.userData.deferred;
+        if (ext) {
+            if (debug)
+                console.log(key, ext.uri, ext.guid);
+            const uri = ext.uri;
+            if (uri.endsWith(".glb") || uri.endsWith(".gltf")) {
+                if (!ext.guid) {
+                    console.warn("missing pointer for glb/gltf texture", ext);
+                    return null;
+                }
+                const resolveKey = ext.uri + "_" + ext.guid;
+                if (this.resolved[resolveKey])
+                    return this.resolved[resolveKey];
+
+                const loader = new GLTFLoader();
+                addDracoAndKTX2Loaders(loader, context);
+                if (debug) console.log("Load " + uri, material.name, slot);
+                const gltf = await loader.loadAsync(uri);
+                const parser = gltf.parser;
+
+                let index = -1;
+                let found = false;
+                for (const tex of gltf.parser.json.textures) {
+                    index++;
+                    if (tex?.extensions) {
+                        const other: DeferredTextureModel = tex?.extensions[EXTENSION_NAME];
+                        if (other?.guid) {
+                            if (other.guid === ext.guid) {
+                                found = true;
+                                break;
+                                // if (debug)
+                                //     console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material);
+                                // this.resolved[resolveKey] = tex as Texture;
+                                // return tex;
+                            }
+                        }
+                    }
+                }
+                if (!found)
+                    return null;
+
+                // const index = Number.parseInt(ext.pointer.substring("textures/".length));
+                const tex = await parser.getDependency("texture", index);
+                this.resolved[resolveKey] = tex as Texture;
+
+                if (debug)
+                    console.log(material.name, slot, "change \"" + current.name + "\" → \"" + tex.name + "\"", uri, index, tex, material);
+                return tex;
+            }
+            else {
+
+                const loader = new TextureLoader();
+                const loaded = await loader.loadAsync(ext.uri);
+                if (loaded && debug) {
+                    console.log(ext, loaded);
+                }
+                else console.warn("failed loading", ext.uri);
+                return loaded;
+            }
+            // loader.then((h: Texture) => {
+            //     // console.log(t, h);
+            //     // t.image = h.image;
+            //     // // this.context.renderer.copyTextureToTexture(new Vector2(0, 0), h, t);
+            //     // // console.log(h);
+
+            //     // // t.source = h.source;
+            //     // // t.version++;
+            //     // t.width = h.width;
+            //     // t.height = h.height;
+            //     // t.needsUpdate = true;
+            // });
+        }
+        else {
+            if (debug)
+                console.warn("unknown uuid", current.name, current.uuid, current);
+        }
+        return null;
+    }
+}

package/src/engine/extensions/NEEDLE_gameobject_data.ts

@@ -0,0 +1,76 @@
+import { Object3D } from "three";
+import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
+
+export const EXTENSION_NAME = "NEEDLE_gameobject_data";
+
+declare type GameObjectData = {
+    layers: number,
+    visible: boolean,
+    tag: string,
+    hideFlags: number,
+    static: boolean,
+    activeSelf: boolean,
+    guid: string
+}
+
+export class NEEDLE_gameobject_data implements GLTFLoaderPlugin {
+
+    get name(): string {
+        return EXTENSION_NAME;
+    }
+
+    private parser: GLTFParser;
+
+    constructor(parser: GLTFParser) {
+        this.parser = parser;
+    }
+
+    // private _lastIndex: number = -1;
+    // createNodeAttachment(index): null {
+    //     if (index === this._lastIndex) return null;
+    //     this._lastIndex = index;
+    //     const node = this.parser.json.nodes[index];
+    //     if (node && node.extensions) {
+    //         const ext = node.extensions[EXTENSION_NAME];
+    //         if (ext)
+    //             this.findAndApplyExtensionData(index, ext);
+    //     }
+    //     return null;
+    // }
+
+    // private lastIndex: number = -1;
+    afterRoot(_result: GLTF): Promise<void> | null {
+        // console.log("AFTER ROOT", _result);
+        const promises: Promise<void>[] = [];
+        for (let index = 0; index < this.parser.json.nodes.length; index++) {
+            const node = this.parser.json.nodes[index];
+            if (node && node.extensions) {
+                const ext = node.extensions[EXTENSION_NAME];
+                if (ext)
+                {
+                    const p = this.findAndApplyExtensionData(index, ext);
+                    promises.push(p);
+                }
+            }
+        }
+        return Promise.all(promises).then(() => { });
+    }
+
+    private async findAndApplyExtensionData(nodeId: number, ext: GameObjectData) {
+        const obj = await this.parser.getDependency("node", nodeId);
+        if (obj) {
+            this.applyExtensionData(obj, ext);
+        }
+    }
+
+
+    private applyExtensionData(node: Object3D, ext: GameObjectData) {
+        node.userData.layer = ext.layers;
+        node.userData.tag = ext.tag;
+        node.userData.hideFlags = ext.hideFlags;
+        node.userData.static = ext.static;
+        node.visible = ext.activeSelf;
+        node["guid"] = ext.guid;
+        // console.log(node.name, ext.activeSelf, node);
+    }
+}