@needle-tools/engine 2.24.0-pre

package/src/engine-components/ui/Utils.ts

@@ -0,0 +1,105 @@
+
+import { FrontSide, DoubleSide, BackSide, TetrahedronGeometry } from "three"
+import { FrameEvent } from "../../engine/engine_setup";
+import { Behaviour, GameObject } from "../Component";
+
+// export function makeNonRaycastable(obj: THREE.Object3D | null | undefined, recursive: boolean = false) {
+//     if (!obj) return;
+//     obj.layers.mask = 2;
+//     if (recursive && obj.children) {
+//         for (const ch of obj.children) {
+//             if (recursive) makeNonRaycastable(ch, true);
+//         }
+//     }
+// }
+
+export function isUIObject(obj: THREE.Object3D) {
+    return obj["isUI"] === true || typeof obj["shadowComponentOwner"] === "object";
+}
+
+export type RenderSettings = {
+    renderOnTop?: boolean;
+    doubleSided?: boolean;
+    depthWrite?: boolean;
+    castShadows?: boolean;
+    receiveShadows?: boolean;
+}
+
+export function updateRenderSettings(shadowComponent: THREE.Object3D, settings: RenderSettings) {
+    if (!shadowComponent) return;
+    // const owner = shadowComponent["shadowComponentOwner"];
+    // if (!owner)
+    //     console.log(shadowComponent)
+    const mat = shadowComponent["material"];
+    if (mat?.isMaterial === true) {
+        // console.log(shadowComponent, shadowComponent.name);
+        // console.log(mat, component.renderOnTop, component.doubleSided, component.depthWrite);
+        mat.depthTest = !settings.renderOnTop ?? true;
+        mat.side = (settings.doubleSided ?? true) ? DoubleSide : FrontSide;
+        mat.depthWrite = settings.depthWrite ?? false;
+        mat.shadowSide = settings.doubleSided ? DoubleSide : FrontSide;
+        shadowComponent.castShadow = settings.castShadows ? settings.castShadows : false;
+        shadowComponent.receiveShadow = settings.receiveShadows ? settings.receiveShadows : false;
+    }
+    for (const ch of shadowComponent.children) {
+        updateRenderSettings(ch, settings);
+    }
+}
+
+export declare type RevocableProxy = {
+    proxy: any;
+    revoke: () => void;
+}
+
+// TODO: change to use utils Watch since a revocable proxy makes a object completely useless once it is revoked
+/** internal method to proxy a field to detect changes */
+export function onChange<T extends object>(caller: T, field: string, callback: (newValue: any, oldValue: any) => void): RevocableProxy {
+
+    if (caller[field] === undefined) {
+        console.warn("Field", field, "is undefined on", caller);
+    }
+    // create proxy that notifies on value change
+    const res = Proxy.revocable(caller[field], {
+        // get(target, prop, receiver) {
+        //     return Reflect.get(target, prop, receiver);
+        // },
+        set(target, prop, value, receiver) {
+            const currentValue = target[prop];
+            const res = Reflect.set(target, prop, value, receiver);
+            callback(value, currentValue);
+            return res;
+        }
+    });
+    // setup revokeable
+    const revoke = res.revoke;
+    const original = caller[field];
+    res.revoke = () => {
+        caller[field] = original;
+        revoke();
+    };
+    caller[field] = res.proxy;
+    return res;
+}
+
+
+declare type ScheduleCache = { [key: number]: { [key: string]: Generator | null } };
+
+// use to schedule a callback at a specific moment in the frame
+/** internal method to schedula a function at a specific moment in the update loop */
+export function scheduleAction(caller: Behaviour, action: Function, timing: FrameEvent = FrameEvent.OnBeforeRender) {
+    let cache: ScheduleCache = caller["__scheduledActions"];
+    if (!cache) cache = caller["__scheduledActions"] = {};
+
+    const key = action.name;
+    if (!cache[timing]) cache[timing] = {};
+    const actions = cache[timing];
+    const existing = actions[key];
+    if (existing) return;
+    function* gen() {
+        // yield;
+        action?.call(caller);
+        actions[key] = null;
+    }
+    const coroutine = caller.startCoroutine(gen(), timing);
+    actions[key] = coroutine;
+}

package/src/engine-components-experimental/Presentation.ts

@@ -0,0 +1,13 @@
+import { Behaviour } from "../engine-components/Component";
+import { KeyCode } from "../engine/engine_input";
+
+export class PresentationMode extends Behaviour {
+
+    toggleKey : KeyCode = KeyCode.KEY_P;
+
+    update(): void {
+        if (this.context.input.isKeyDown(KeyCode.KEY_P)) {
+            this.context.domElement.classList.toggle("presentation-mode");
+        }
+    }
+}

package/src/engine-components-experimental/annotation/LineDrawer.ts

@@ -0,0 +1,191 @@
+import { Behaviour, GameObject } from "../../engine-components/Component";
+import { OrbitControls } from "../../engine-components/OrbitControls";
+import * as THREE from 'three';
+import { Color, Ray, Raycaster, Vector3 } from "three";
+import { RaycastOptions } from "../../engine/engine_physics";
+import { LineHandle, LinesManager } from "./LinesManager";
+import { Mathf } from "../../engine/engine_math";
+import { getWorldPosition } from "../../engine/engine_three_utils";
+import { MeshLine, MeshLineMaterial } from 'three.meshline';
+import { KeyCode } from "../../engine/engine_input";
+import { PlayerColor } from "../../engine-components/PlayerColor";
+import { ControllerEvents, WebXRController } from "../../engine-components/WebXRController";
+
+class LineState {
+    isDrawing: boolean;
+    lastHit: Vector3;
+    currentHandle: LineHandle;
+    maxDistance: number;
+    prevDistance: number;
+    lastParent: THREE.Object3D | null;
+
+    constructor() {
+        this.isDrawing = false;
+        this.lastHit = new Vector3();
+        this.currentHandle = null;
+        this.maxDistance = 0;
+        this.prevDistance = 0;
+        this.lastParent = null;
+    }
+}
+
+export class LinesDrawer extends Behaviour {
+
+    lines: LinesManager;
+    colliders?: THREE.Object3D[];
+    alignToSurface: boolean = true;
+    addToPaintedObject: boolean = true;
+
+    private orbit?: OrbitControls;
+
+    start() {
+        if (!this.lines) {
+            this.lines = GameObject.getComponent(this.gameObject, LinesManager);
+            if (!this.lines)
+                this.lines = GameObject.addNewComponent(this.gameObject, LinesManager);
+        }
+        this.orbit = GameObject.findObjectOfType(OrbitControls, this.context) ?? undefined;
+        this._states["mouse"] = new LineState();
+
+
+        const xrControllerSelected: { [key: string]: boolean } = {};
+
+        WebXRController.addEventListener(ControllerEvents.SelectStart, (ctrl, _) => {
+            xrControllerSelected[ctrl.controller.uuid] = true;
+        });
+        WebXRController.addEventListener(ControllerEvents.Update, (ctrl, _) => {
+            if (xrControllerSelected[ctrl.controller.uuid] === true) {
+                const ray = ctrl.getRay();
+                this.updateLine(ctrl.controller.uuid, ray, true, false, false);
+            }
+        });
+        WebXRController.addEventListener(ControllerEvents.SelectEnd, (ctrl, _) => {
+            xrControllerSelected[ctrl.controller.uuid] = false;
+            const ray = ctrl.getRay();
+            this.updateLine(ctrl.controller.uuid, ray, true, true, false);
+        });
+    }
+
+    private _states: { [id: string]: LineState } = {};
+
+    update() {
+        if (this.orbit && this._states["mouse"]) {
+            if (this.orbit) this.orbit.enabled = !this._states["mouse"].isDrawing;
+        }
+
+        const multi = this.context.input.getPointerPressedCount() > 1;
+        const sp = this.context.input.getPointerPositionRC(0);
+        LinesDrawer._raycaster.setFromCamera(sp, this.context.mainCamera);
+        const ray = LinesDrawer._raycaster.ray;
+        this.updateLine("mouse", ray,
+            this.context.input.getPointerPressed(0),
+            this.context.input.getPointerUp(0), multi || this.context.input.isKeyPressed(KeyCode.ALT)
+        );
+    }
+
+    private updateLine(id: string, ray: THREE.Ray, active: boolean, finish: boolean, cancel: boolean = false): LineState {
+        let state = this._states[id];
+        if (!state) {
+            this._states[id] = new LineState();
+            state = this._states[id];
+        }
+
+        if (finish) {
+            state.isDrawing = false;
+            if (state.currentHandle) {
+                // this.sendLineUpdate();
+                this.lines.endLine(state.currentHandle);
+                state.currentHandle = null;
+            }
+        }
+        else if (active) {
+            if (cancel) {
+                return state;
+            }
+            const hit = this.getHit(ray);
+            let pt: THREE.Vector3 | null = null;
+            let prev = state.prevDistance;
+            if (hit) {
+                if (!state.currentHandle) {
+                    state.maxDistance = hit.distance;
+                }
+                pt = hit.point;
+                pt.add(hit.face.normal.multiplyScalar(0.01));
+                state.prevDistance = hit.distance;
+            }
+            else if (state.maxDistance > 0) {
+                let dist = state.maxDistance;
+                // if we start drawing in thin air:
+                if (!state.currentHandle && state.lastHit) {
+                    const wp = getWorldPosition(this.context.mainCamera);
+                    dist = state.lastHit.distanceTo(wp);
+                }
+                pt = ray.origin.add(ray.direction.multiplyScalar(state.maxDistance));
+                state.prevDistance = state.maxDistance;
+            }
+
+            if (pt) {
+                if (!state.currentHandle) {
+                    let parent = state.lastParent ?? this.gameObject as THREE.Object3D;
+                    if (this.addToPaintedObject && hit) parent = hit.object;
+                    state.lastParent = parent;
+                    state.currentHandle = this.lines.startLine(parent, { material: this.createRandomMaterial() });
+                }
+
+                if (this.alignToSurface) {
+                    if (state.prevDistance > state.maxDistance || Math.abs(prev - state.prevDistance) > 0.2) {
+                        const newDistance = state.maxDistance;
+                        // if (state.maxDistance === 0) state.maxDistance = newDistance;
+                        // const camPos = getWorldPosition(this.context.mainCamera);
+                        pt = ray.origin.add(ray.direction.multiplyScalar(newDistance));
+                        // pt = camPos.add(dir.multiplyScalar(newDistance));
+                        state.prevDistance = newDistance;
+                    }
+                }
+                if (state.lastHit && state.lastHit.distanceTo(pt) < state.prevDistance * .01) {
+                    return state;
+                }
+                this.lines.updateLine(state.currentHandle, { point: pt });
+                state.lastHit.copy(pt);
+            }
+
+            state.isDrawing = state.currentHandle !== null;
+        }
+        return state;
+    }
+
+    private _raycastOptions = new RaycastOptions();
+    private static _raycaster: Raycaster = new Raycaster();
+
+    private getHit(ray: THREE.Ray): THREE.Intersection | null {
+        if (!this.colliders || this.colliders.length === 0) {
+            this.colliders = [this.gameObject];
+        }
+        this._raycastOptions.targets = this.colliders;
+        this._raycastOptions.ray = ray;
+        const hits = this.context.physics.raycast(this._raycastOptions);
+        if (hits.length > 0) {
+            for(const hit of hits) {
+                if(!GameObject.isActiveInHierarchy(hit.object)) {
+                    continue;
+                }
+                return hit;
+            }
+        }
+        return null;
+    }
+
+    private createRandomMaterial() {
+        let col: Color;
+        if (this.context.connection.connectionId)
+            col = PlayerColor.colorFromHashCode(PlayerColor.hashCode(this.context.connection.connectionId));
+        else
+            col = new THREE.Color("hsl(" + (Math.random() * 100).toFixed(0) + ", 80%, 30%)");
+        // const col = new THREE.Color("hsl(0, 100%, 50%)");
+
+        return new MeshLineMaterial({
+            color: col,
+            lineWidth: Mathf.lerp(0.005, 0.01, Math.random()),
+        });
+    }
+}

package/src/engine-components-experimental/annotation/LinesManager.ts

@@ -0,0 +1,218 @@
+import { Behaviour, GameObject } from "../../engine-components/Component";
+import * as THREE from 'three';
+import { Color, Material } from "three";
+import { MeshLine, MeshLineMaterial } from 'three.meshline';
+
+
+
+export declare type LineOptions = {
+    material?: Material;
+    options?: LineMaterialOptions;
+}
+
+export declare type LineMaterialOptions = {
+    map?: THREE.Texture;
+    useMap?: number;
+    alphaMap?: THREE.Texture;
+    color?: Color;
+    opacity?: number;
+    lineWidth?: number;
+}
+
+export class LineInstanceHandler {
+    id: number = 0;
+    points: Array<any> = [];
+    line: MeshLine = new MeshLine();
+    material?: MeshLineMaterial;
+    mesh?: THREE.Mesh;
+
+    constructor(owner: THREE.Object3D, options?: LineOptions) {
+        if (options) {
+            this.material = options.material;
+        }
+
+        if (!this.material)
+            this.material = this.defaultLineMaterial;
+        if (options) {
+            const opts = options.options;
+            if (opts) {
+                Object.assign(this.material, opts);
+            }
+        }
+        this.mesh = new THREE.Mesh(this.line, this.material);
+        owner.add(this.mesh);
+    }
+
+    private static wp: THREE.Vector3 = new THREE.Vector3();
+
+    appendPoint(vec: Vec3): Vec3 {
+        let localPoint = LineInstanceHandler.wp;
+        localPoint.set(vec.x, vec.y, vec.z);
+        const parent = this.mesh?.parent;
+        if (parent) {
+            localPoint = parent.worldToLocal(localPoint);
+            vec.x = localPoint.x;
+            vec.y = localPoint.y;
+            vec.z = localPoint.z;
+        }
+
+        this.points.push(vec.x, vec.y, vec.z);
+        this.line.setPoints(this.points);
+        return vec;
+    }
+
+    private defaultLineMaterial = new MeshLineMaterial({ color: 0x999999, lineWidth: 0.01 });
+}
+
+declare type Vec3 = {
+    x: number;
+    y: number;
+    z: number;
+}
+
+declare type StartLineModel = {
+    id: number;
+    parentGuid: string;
+}
+
+declare type LineModel = {
+    parentGuid: string;
+    guid: number; // it must be named guid
+    points: Array<Vec3>;
+    width: number;
+    color: Vec3;
+    startIndex: number;
+    finished: boolean;
+}
+
+export declare type LineHandle = {
+    id: number;
+}
+
+declare type UpdateLineArgs = {
+    point: Vec3;
+}
+
+
+export class LinesManager extends Behaviour {
+
+    public startLine(parent?: THREE.Object3D, options?: LineOptions): LineHandle {
+        const id = Math.random() * Number.MAX_SAFE_INTEGER;
+        return this.internalStartLine(parent, id, true, options);
+    }
+
+    public updateLine(handle: LineHandle, args: UpdateLineArgs) {
+        const line = this.inFlight[handle.id];
+        if (!line) return;
+        if (args.point) {
+            args.point = line.appendPoint(args.point);
+        }
+        const buf = this.buffer[handle.id];
+        if (buf) {
+            if (args.point)
+                buf.push(args.point.x, args.point.y, args.point.z);
+            if (buf.length > 5) {
+                this.sendLineUpdate(line, false, undefined, buf);
+                buf.length = 0;
+            }
+        }
+    }
+
+    public endLine(handle: LineHandle, send: boolean = true): LineInstanceHandler | undefined {
+        const line = this.inFlight[handle.id];
+        if (!line) return;
+        this.finished.push(line);
+        delete this.inFlight[handle.id];
+
+        if (send)
+            this.sendLineUpdate(line, true, 0);
+
+        const buf = this.buffer[handle.id];
+        if (buf) {
+            delete this.buffer[handle.id];
+            const arr = buf;
+            arr.length = 0;
+            this.freeBuffer.push(arr);
+        }
+
+        return line;
+    }
+
+    public getLine(handle: LineHandle): LineInstanceHandler | undefined {
+        return this.inFlight[handle.id];
+    }
+
+    private finished: Array<LineInstanceHandler> = [];
+    private inFlight: { [key: number]: LineInstanceHandler } = [];
+    private buffer: { [key: number]: any[] } = {};
+    private freeBuffer = new Array<Vec3[]>();
+
+    awake(): void {
+
+        this.context.connection.beginListen("line-start", (i: StartLineModel) => {
+            this.onEnsureLine(i.id, i.parentGuid);
+        });
+        this.context.connection.beginListen("line-update", (evt: LineModel) => {
+            let line = this.onEnsureLine(evt.guid, evt.parentGuid);
+            if (line && evt.points) {
+                if (evt.startIndex <= 0) {
+                    line.points = evt.points;
+                }
+                else {
+                    if (evt.startIndex >= line.points.length) {
+                        line.points.push(...evt.points);
+                    }
+                }
+                line.line.setPoints(line.points);
+                line.material!.lineWidth = evt.width;
+                line.material!.color.fromArray(evt.color);
+                if (evt.finished === true) {
+                    this.endLine({ id: line.id }, false);
+                }
+            }
+        });
+    }
+
+    private onEnsureLine(lineId: number, parentGuid: string): LineInstanceHandler {
+        if (this.inFlight[lineId]) return this.inFlight[lineId];
+        let obj = GameObject.findByGuid(parentGuid, this.context.scene);
+        if (!obj) {
+            return;
+        }
+        this.internalStartLine(obj as THREE.Object3D, lineId, false);
+        return this.inFlight[lineId];
+    }
+    private internalStartLine(parent: THREE.Object3D, id: number, send: boolean = true, options?: LineOptions): LineHandle {
+        const line = new LineInstanceHandler(parent ?? this.context.scene, options);
+        line.id = id;
+        this.inFlight[id] = line;
+        if (send)
+            this.sendLineStart(line);
+
+        let buf;
+        if (this.freeBuffer.length <= 0) buf = new Array<Vec3>();
+        else buf = this.freeBuffer.pop();
+        this.buffer[id] = buf;
+        return { id: id };
+    }
+
+    private sendLineStart(instance: LineInstanceHandler) {
+        const parent = instance.mesh.parent;
+        this.context.connection.send("line-start", { id: instance.id, parentGuid: parent ? parent["guid"] : undefined })
+    }
+
+    private sendLineUpdate(instance: LineInstanceHandler, finished: boolean, startIndex?: number, points?: Array<any>) {
+        if (instance) {
+            const model: LineModel = {
+                parentGuid: instance.mesh.parent["guid"],
+                guid: instance.id,
+                points: points ? [...points] : instance.points,
+                width: instance.material!.lineWidth,
+                color: instance.material!.color.toArray(),
+                startIndex: startIndex !== undefined ? startIndex : instance.points.length,
+                finished: finished,
+            };
+            this.context.connection.send("line-update", model)
+        }
+    }
+}

package/src/engine-components-experimental/networking/PlayerSync.ts

@@ -0,0 +1,131 @@
+import { Behaviour, Component, GameObject } from "../../engine-components/Component";
+import { AssetReference } from "../../engine/engine_addressables";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { syncField } from "../../engine/engine_networking_auto"
+import { RoomEvents } from "../../engine/engine_networking";
+import { Object3D } from "three";
+import { syncDestroy } from "../../engine/engine_networking_instantiate";
+import { Vector3 } from "three";
+
+
+
+export class PlayerSync extends Behaviour {
+    @serializeable(AssetReference)
+    asset?: AssetReference;
+
+    private joinedRoomFunction?: Function;
+
+    awake(): void {
+        this.watchTabVisible();
+        this.joinedRoomFunction = this.onUserJoined.bind(this);
+    }
+
+    onEnable(): void {
+        this.context.connection.beginListen(RoomEvents.JoinedRoom, this.joinedRoomFunction!)
+    }
+    onDisable(): void {
+        this.context.connection.stopListening(RoomEvents.JoinedRoom, this.joinedRoomFunction!)
+    }
+
+    private async onUserJoined(_model) {
+        const instance = await this.asset?.instantiateSynced({parent:this.gameObject}, true);
+        if (instance) {
+            let pl = GameObject.getComponent(instance as Object3D, PlayerState);
+            if (pl) {
+                pl.owner = this.context.connection.connectionId!;
+            }
+        }
+
+        // TODO: previously created instances are not re-created when re-joining room
+        // const inRoom = this.context.connection.usersInRoom();
+        // console.log(inRoom);
+        // for (const user of inRoom) {
+        //     if(user !== this.context.connection.connectionId) {
+        //         console.log(this.context.connection.tryGetState(this.asset.uri))
+        //     }
+        // }
+    }
+
+    private watchTabVisible() {
+        window.addEventListener("visibilitychange", s => {
+            if (document.visibilityState === "visible") {
+                for (let i = PlayerState.all.length - 1; i >= 0; i--) {
+                    const pl = PlayerState.all[i];
+                    if (!pl.owner || !this.context.connection.userIsInRoom(pl.owner)) {
+                        pl.doDestroy();
+                    }
+                }
+            }
+        });
+    }
+}
+
+
+export class PlayerState extends Behaviour {
+
+    private static _all: PlayerState[] = [];
+    /** all instances for all players */
+    static get all(): PlayerState[] {
+        return PlayerState._all;
+    };
+
+    private static _local: PlayerState[] = [];
+    /** all instances for the local player */
+    static get local(): PlayerState[] {
+        return PlayerState._local;
+    }
+
+    //** use to check if a component or gameobject is part of a instance owned by the local player */
+    static isLocalPlayer(obj: THREE.Object3D | Component): boolean {
+        if (obj instanceof Object3D) {
+            return GameObject.getComponentInParent(obj, PlayerState)?.isLocalPlayer ?? false;
+        }
+        else if (obj instanceof Component) {
+            return GameObject.getComponentInParent(obj.gameObject, PlayerState)?.isLocalPlayer ?? false;
+        }
+        return false;
+    }
+
+    @syncField()
+    @serializeable()
+    owner?: string;
+
+    get isLocalPlayer(): boolean {
+        return this.owner === this.context.connection.connectionId;
+    }
+
+    awake(): void {
+        if (this.isLocalPlayer) PlayerState.local.push(this);
+        PlayerState.all.push(this);
+
+        this.context.connection.beginListen(RoomEvents.UserLeftRoom, (model: { userId: string }) => {
+            // console.log("USER LEFT", model.userId)
+            if (model.userId === this.owner) {
+                // console.log("LEFT", this.owner)
+                this.doDestroy();
+                return;
+            }
+        });
+    }
+
+    start() {
+        if (!this.owner || !this.context.connection.userIsInRoom(this.owner)) {
+            this.doDestroy();
+            return;
+        }
+    }
+
+    doDestroy() {
+        syncDestroy(this.gameObject, this.context.connection);
+    }
+
+    onDestroy() {
+        PlayerState.all.splice(PlayerState.all.indexOf(this), 1);
+
+        if (this.isLocalPlayer) {
+            const index = PlayerState._local.indexOf(this);
+            if (index >= 0)
+                PlayerState._local.splice(index, 1);
+        }
+    }
+}

package/src/engine-schemes/COMPILE_SCHEMES.bat

@@ -0,0 +1,4 @@
+@echo off
+for /r %%i in (*.fbs) do (
+    flatc --ts %%i
+)

package/src/engine-schemes/COMPILE_TS.bat

@@ -0,0 +1,12 @@
+@echo off
+
+md dist
+
+@REM set ALL=
+for /r %%i in (*.ts) do (
+    @REM call set ALL=%%ALL%%%%i 
+    @REM set ALL_TS_FILES = "%ALL_TS_FILES: %i"
+    tsc %%i --outDir dist
+)
+@REM echo %ALL%
+@REM tsc %ALL% --target esnext --moduleResolution node --module amd --outfile schemes.js