@needle-tools/engine 2.24.0-pre

package/src/engine/engine_networking_auto.ts

@@ -0,0 +1,300 @@
+import { getParam } from "./engine_utils";
+import { Component } from "../engine-components/Component";
+import { RoomEvents } from "./engine_networking";
+
+const debug = getParam("debugautosync");
+
+class ComponentsSyncerManager {
+    private _syncers: { [key: string]: ComponentPropertiesSyncer } = {};
+
+    getOrCreateSyncer(comp: Component): ComponentPropertiesSyncer | null {
+        if (!comp.guid) return null;
+        if (this._syncers[comp.guid]) return this._syncers[comp.guid];
+        const syncer = new ComponentPropertiesSyncer(comp);
+        this._syncers[comp.guid] = syncer;
+        return syncer;
+    }
+}
+const syncerHandler = new ComponentsSyncerManager();
+
+/**
+ * Collects and bundles all changes in properties per component in a frame
+ */
+class ComponentPropertiesSyncer {
+
+    comp: Component;
+
+    constructor(comp: Component) {
+        // console.log("CREATE NEW SYNC", comp.name, comp.guid);
+        this.comp = comp;
+    }
+
+    // private getters: { [key: string]: Function } = {};
+    private hasChanges: boolean = false;
+    private changedProperties: { [key: string]: any } = {};
+    private data = {};
+
+    private _boundEvent?: Function;
+
+    get networkingKey(): string {
+        const obj = this.comp as object;
+        const key = obj.constructor.name;
+        return key;
+    }
+
+    /** is set to true in on receive call to avoid circular sending */
+    private _isReceiving: boolean = false;
+    private _isInit = false;
+
+    init(comp) {
+        if (this._isInit) return;
+        this._isInit = true;
+        this.comp = comp;
+        // console.log("INIT", this.comp.name, this.networkingKey);
+        this._boundEvent = this.onHandleSending.bind(this);
+        this.comp.context.post_render_callbacks.push(this._boundEvent);
+        this.comp.context.connection.beginListen(this.networkingKey, this.onHandleReceiving.bind(this));
+
+        const state = this.comp.context.connection.tryGetState(this.comp.guid);
+        if(state) this.onHandleReceiving(state);
+    }
+
+    notifyChanged(propertyName: string, value: any) {
+        if (this._isReceiving) return;
+        // console.log("Property changed: " + propertyName, value);
+        this.hasChanges = true;
+        this.changedProperties[propertyName] = value;
+    }
+
+    private onHandleSending() {
+        if (!this.hasChanges) return;
+        this.hasChanges = false;
+        // console.log(this.changedProperties);
+        const net = this.comp.context.connection;
+        if (!net || !net.isConnected) {
+            for (const key in this.changedProperties)
+                delete this.changedProperties[key];
+            return;
+        }
+        for (const key in this.data) {
+            delete this.data[key];
+        }
+        this.data["guid"] = this.comp.guid;
+        for (const name in this.changedProperties) {
+            const value = this.changedProperties[name];
+            // console.log(value);
+            delete this.changedProperties[name];
+            this.data[name] = value;
+        }
+        // console.log("SEND", this.comp.name, this.data, this.networkingKey);
+        net.send(this.networkingKey, this.data);
+    }
+
+    private onHandleReceiving(val) {
+        if (!this._isInit) return;
+        if (!this.comp) return;
+        const guid = val.guid;
+        if (guid && guid !== this.comp.guid) return;
+        if (debug)
+            console.log("RECEIVED", this.comp.name, this.comp.guid, val);
+        try {
+            this._isReceiving = true;
+            for (const key in val) {
+                if (key === "guid") continue;
+                const value = val[key];
+                // console.log("SET", key, value, this.comp.guid, this.comp);
+                this.comp[key] = value;
+            }
+        }
+        catch (err) {
+            console.error(err);
+        }
+        finally {
+            this._isReceiving = false;
+        }
+    }
+
+    // private _seen: Set<any> = new Set();
+    // private uniqBy(a, key) {
+    //     this._seen.clear();
+    //     return a.filter(item => {
+    //         let k = key(item);
+    //         return this._seen.has(k) ? false : this._seen.add(k);
+    //     });
+    // }
+}
+
+function testValueChanged(newValue, previousValue): boolean {
+    let valueChanged = previousValue !== newValue;
+    if (!valueChanged && newValue && previousValue) {
+        // TODO: array are reference types 
+        // so we need to copy the previous array if we really want to compare it
+        if (Array.isArray(newValue) && Array.isArray(previousValue)) {
+            valueChanged = true;
+            // if (value.length !== previousValue.length) {
+            //     shouldSend = true;
+            // }
+            // else {
+            //     for (let i = 0; i < value.length; i++) {
+            //         if (value[i] !== previousValue[i]) {
+            //             shouldSend = true;
+            //             break;
+            //         }
+            //     }
+            // }
+        }
+        else if (typeof newValue === "object" && typeof previousValue === "object") {
+            // do we want to traverse / recursively check if anything changed???
+            for (const key of Object.keys(newValue)) {
+                if (newValue[key] !== previousValue[key]) {
+                    valueChanged = true;
+                    break;
+                }
+            }
+        }
+    }
+    return valueChanged;
+}
+
+function getSyncer(instance): ComponentPropertiesSyncer | null {
+    if (instance["__autoPropertySyncHandler"]) {
+        return instance["__autoPropertySyncHandler"];
+    }
+    const syncer = syncerHandler.getOrCreateSyncer(instance);
+    syncer?.init(instance);
+    instance["__autoPropertySyncHandler"] = syncer;
+    return syncer;
+}
+
+export declare type SyncFieldOptions = {
+    onPropertyChanged: Function,
+};
+
+/**
+ * Decorate a field to be automatically networked synced
+ * @param onFieldChanged name of a callback function that will be called when the field is changed. 
+ * This function may return false to prevent notifyChanged from being called 
+ * (for example a networked color is sent as a number and may be converted to a color in the receiver again)
+ * 
+ * Parameters: (newValue, previousValue)
+ * @returns 
+ */
+export const syncField = function (onFieldChanged?: string) {
+
+    return function (target: any, propertyKey: string) {
+
+        let syncer: ComponentPropertiesSyncer | null = null;
+        const fn = onFieldChanged ? target[onFieldChanged] : undefined;
+
+        const t = target;
+        const internalAwake = t.__internalAwake;
+        if (debug)
+            console.log(propertyKey);
+        const backingFieldName = propertyKey + "k__BackingField";
+
+        t.__internalAwake = function () {
+            if (this[backingFieldName] !== undefined) {
+                return;
+            }
+            this[backingFieldName] = this[propertyKey];
+            internalAwake.call(this);
+
+            syncer = syncerHandler.getOrCreateSyncer(this);
+
+            const desc = Object.getOwnPropertyDescriptor(this, propertyKey);
+            if (desc?.set === undefined) {
+                Object.defineProperty(this, propertyKey, {
+                    set: function (value) {
+                        const oldValue = this[backingFieldName];
+                        this[backingFieldName] = value;
+                        if (testValueChanged(value, oldValue)) {
+                            if (fn?.call(this, value, oldValue) !== false)
+                                getSyncer(this)?.notifyChanged(propertyKey, value);
+                        }
+                    },
+                    get: function () {
+                        return this[backingFieldName];
+                    },
+                    configurable: true,
+                    enumerable: true,
+                });
+            }
+
+            syncer?.init(this);
+            
+        }
+
+    }
+}
+
+
+export declare type SyncOptions = {
+    key?: string,
+    fieldName?: string,
+};
+
+export const sync = function (_options?: SyncOptions) {
+
+    return function <T>(target: any, _propertyKey: string, descriptor: PropertyDescriptor) {
+        // override awake
+        const comp = target as Component;
+        let syncer: ComponentPropertiesSyncer | null;
+        const internalAwake = comp.__internalAwake.bind(comp);
+        comp.__internalAwake = function () {
+            if (!this.guid) {
+                internalAwake?.call(this);
+                return;
+            }
+            internalAwake();
+            syncer = syncerHandler.getOrCreateSyncer(this);
+            syncer?.init(this);
+        }
+
+        // inject getter and setter
+        if (!descriptor.get) {
+            const previousSetter = descriptor.set;
+            const backingFieldName = _propertyKey + "k__BackingField";
+            Object.defineProperty(target, _propertyKey, {
+                set: function (value) {
+                    this[backingFieldName] = value;
+                    previousSetter?.call(this, value);
+                },
+                get: function () {
+                    return this[backingFieldName];
+                }
+            });
+            const newDescriptor = Object.getOwnPropertyDescriptor(target, _propertyKey);
+            if (newDescriptor) {
+                descriptor.set = newDescriptor.set;
+                descriptor.get = newDescriptor.get;
+            }
+        }
+
+        const setter = descriptor.set;
+        const getter = descriptor.get;
+        let previousValue: T | undefined = undefined;
+
+        if (setter) {
+            descriptor.set = function (value: T) {
+                let valueChanged = false;
+
+                const syncer = getSyncer(this);
+
+                // test change
+                if (syncer && comp.context && comp.context.connection?.isConnected) {
+                    testValueChanged(value, previousValue);
+                }
+
+                if (valueChanged) {
+                    // set the value
+                    previousValue = value;
+                    setter.call(this, value);
+                    syncer?.notifyChanged(_propertyKey, value);
+                }
+            };
+        }
+    }
+
+};
+
+

package/src/engine/engine_networking_files.ts

@@ -0,0 +1,198 @@
+import { GameObject } from "../engine-components/Component";
+import { Context } from "../engine/engine_setup";
+import { loadSync, parseSync } from "../engine/engine_scenetools";
+import * as THREE from "three";
+import * as web from "../engine/engine_web_api";
+import { IModel, NetworkConnection } from "../engine/engine_networking";
+import { generateSeed, InstantiateIdProvider } from "../engine/engine_networking_instantiate";
+import * as def from "./engine_networking_files_default_components"
+import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader.js'
+
+export enum File_Event {
+    File_Spawned = "file-spawned",
+}
+
+export class FileSpawnModel implements IModel {
+    guid: string;
+    file_name: string;
+    file_hash: string;
+    file_size: number;
+    position: THREE.Vector3 | null;
+    seed: number;
+    sender: string;
+    serverUrl: string;
+    parentGuid?: string;
+
+    boundsSize?: THREE.Vector3;
+
+    constructor(connectionId: string, seed: number, guid: string, name: string, hash: string, size: number, position: THREE.Vector3 | null, serverUrl: string) {
+        this.seed = seed;
+        this.guid = guid;
+        this.file_name = name;
+        this.file_hash = hash;
+        this.file_size = size;
+        this.position = position;
+        this.sender = connectionId;
+        this.serverUrl = serverUrl;
+    }
+}
+
+
+export async function addFile(file: File, context: Context, backendUrl?: string): Promise<GLTF | null> {
+
+    const name = file.name;
+    if (name.endsWith(".gltf") || name.endsWith(".glb")) {
+        return new Promise((resolve, _reject) => {
+            const reader = new FileReader()
+            reader.readAsDataURL(file);
+            reader.onloadend = async (_ev: ProgressEvent<FileReader>) => {
+                const content = reader.result as string;
+                // first load it locally
+                const seed = generateSeed();
+                const prov = new InstantiateIdProvider(seed);
+                const gltf: GLTF = await loadSync(context, content, prov, true) as GLTF;
+                if (gltf && gltf.scene) {
+                    const obj = gltf.scene as unknown as GameObject;
+                    // if we dont have a guid yet (because components guids are actually created in a callback a bit later)
+                    // we just use the same seed and generate a guid for the root only
+                    // this should be the exact same guid the instantiate call will produce
+                    if (!obj.guid) {
+                        const prov = new InstantiateIdProvider(seed);
+                        obj.guid = prov.generateUUID();
+                    }
+                    if (backendUrl)
+                        handleUpload(context.connection, file, seed, obj, backendUrl);
+                    def.onDynamicObjectAdded(obj, prov, gltf);
+                    resolve(gltf);
+                }
+            };
+        });
+    }
+    else {
+        console.warn("Unsupported file type: " + name);
+        console.log(file);
+    }
+
+    return null;
+}
+
+export async function addFileFromUrl(url: URL, context: Context): Promise<GLTF | null> {
+
+    return new Promise(async (resolve, _reject) => {
+        const seed = generateSeed();
+        const prov = new InstantiateIdProvider(seed);
+        const gltf: GLTF = await loadSync(context, url.toString(), prov, true) as GLTF;
+        if (gltf && gltf.scene) {
+            const obj = gltf.scene as unknown as GameObject;
+            // handleUpload(context.connection, file, seed, obj); // TODO needs to upload the URL only and store that
+            def.onDynamicObjectAdded(obj, prov, gltf);
+            resolve(gltf);
+        }
+        else {
+            console.warn("Unsupported file type: " + url.toString());
+        }
+    });
+}
+
+export function beginListenFileSpawn(context: Context) {
+    context.connection.beginListen(File_Event.File_Spawned, async (evt: FileSpawnModel) => {
+        if (evt.sender !== context.connection.connectionId) {
+            console.log("received file event", evt);
+            addPreview(evt, context);
+            let bin: ArrayBuffer | null = null;
+            try {
+                bin = await web.download_file(evt.file_name, evt.file_hash, evt.file_size, evt.serverUrl);
+            }
+            finally {
+                removePreview(evt, context);
+            }
+            if (bin) {
+                const prov = new InstantiateIdProvider(evt.seed);
+                const gltf = await parseSync(context, bin, null!, prov);
+                if (gltf && gltf.scene) {
+                    const obj = gltf.scene;
+                    def.onDynamicObjectAdded(obj, prov, gltf);
+                    // if we process new scripts immediately references that rely on guids are not properly resolved
+                    // for example duplicatable "object" reference will not be found anymore because guid has changed
+                    // processNewScripts(context);
+
+                    // add object to proper parent
+                    if (evt.parentGuid) {
+                        const parent = GameObject.findByGuid(evt.parentGuid, context.scene) as THREE.Object3D;
+                        if ("add" in parent) parent.add(obj);
+                    }
+                    if (!obj.parent)
+                        context.scene.add(obj);
+
+                    if (evt.position !== null) {
+                        obj.position.copy(evt.position);
+                    }
+                }
+            }
+            else console.error("download didnt return file");
+        }
+    });
+}
+
+
+
+async function handleUpload(connection: NetworkConnection, file: File, seed: number, obj: GameObject, backendUrl: string) {
+    if (!connection.connectionId) {
+        console.error("Can not upload file - no connection id");
+        return;
+    }
+    if (!obj.guid) {
+        console.error("Can not upload file - no guid", obj, obj.guid);
+        return;
+    }
+    // then try uploading it
+    const upload_result = await web.upload_file(file, backendUrl);
+    if (!upload_result) {
+        return;
+    }
+    if (!upload_result.filename) {
+        console.error("Can not send upload event - no filename", file.name);
+        return;
+    }
+    if (!upload_result.hash) {
+        console.error("Can not send upload event - no hash", file.name);
+        return;
+    }
+    const model = new FileSpawnModel(connection.connectionId, seed,
+        obj.guid, upload_result.filename,
+        upload_result.hash,
+        file.size,
+        obj.position,
+        upload_result.url ?? backendUrl,
+    );
+    if (obj.parent)
+        model.parentGuid = obj.parent["guid"];
+    connection.send(File_Event.File_Spawned, model);
+}
+
+
+const previews: { [key: string]: THREE.Object3D } = {};
+
+function addPreview(evt: FileSpawnModel, context: Context) {
+    const sphere = new THREE.BoxGeometry();
+    const object = new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({ color: 0x00ff00 }));
+    const box = new THREE.BoxHelper(object, 0x555555);
+    previews[evt.guid] = box;
+    context.scene.add(box);
+    if (evt.parentGuid) {
+        const parent = GameObject.findByGuid(evt.parentGuid, context.scene) as THREE.Object3D;
+        if (parent)
+            parent.add(box);
+    }
+    if (evt.position)
+        box.position.copy(evt.position);
+}
+
+function removePreview(evt: FileSpawnModel, _context: Context) {
+    const guid = evt.guid;
+    const existing = previews[guid];
+    if (existing) {
+        delete previews[guid];
+        existing.removeFromParent();
+    }
+}

package/src/engine/engine_networking_files_default_components.ts

@@ -0,0 +1,54 @@
+import { Behaviour, GameObject, UIDProvider } from "../engine-components/Component";
+import { SyncedTransform } from "../engine-components/SyncedTransform";
+import { DragControls } from "../engine-components/DragControls"
+import { ObjectRaycaster } from "../engine-components/ui/Raycaster";
+import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
+import { Animation } from "../engine-components/Animation";
+import { Mesh } from "three";
+
+
+export function onDynamicObjectAdded(obj: THREE.Object3D, idProv: UIDProvider, gltf?: GLTF) {
+
+    // this ensures we have a drag component
+    let drag = GameObject.getComponentInChildren(obj as GameObject, DragControls);
+    if (!drag) {
+        drag = GameObject.addNewComponent(obj as GameObject, DragControls, false);
+        drag.guid = idProv.generateUUID();
+    }
+
+    // if a drag component is found we add a syncedTransform if none exists
+    if (drag && !GameObject.getComponent(drag.gameObject, SyncedTransform)) {
+        const st = GameObject.addNewComponent(drag.gameObject, SyncedTransform, false);
+        st.guid = idProv.generateUUID();
+        // st.autoOwnership = true;
+
+        //drag.transformGroup = true;
+        //drag.targets = [obj];
+    }
+
+    // if a drag component is found we add a syncedTransform if none exists
+    if (drag && !GameObject.getComponentInParent(drag.gameObject, ObjectRaycaster)) {
+        const st = GameObject.addNewComponent(drag.gameObject, ObjectRaycaster, false);
+        st.guid = idProv.generateUUID();
+    }
+
+    if (gltf) {
+        if (gltf.animations?.length > 0) {
+            const firstAnimation = gltf.animations[0];
+            const anim = GameObject.addNewComponent(obj, Animation, false);
+            anim.animations = [firstAnimation];
+        }
+    }
+
+    let didDisablFrustumCulling = false;
+    obj.traverse(o => {
+        if (!o) return;
+
+        if (o["isSkinnedMesh"] === true) {
+            if (!didDisablFrustumCulling) console.log("Disabling frustum culling for skinned meshes", gltf);
+            didDisablFrustumCulling = true;
+            o.frustumCulled = false;
+        }
+
+    });
+}