@needle-tools/engine 2.24.0-pre

package/src/engine-components/Light.ts

@@ -0,0 +1,418 @@
+import { Behaviour, GameObject } from "./Component";
+import * as THREE from "three";
+import { getParam } from "../engine/engine_utils";
+import { setWorldPositionXYZ } from "../engine/engine_three_utils";
+import { FrameEvent } from "../engine/engine_setup";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Color, DirectionalLight, OrthographicCamera } from "three";
+import { WebXR, WebXREvent } from "./WebXR";
+import { WebARSessionRoot } from "./WebARSessionRoot";
+
+// https://threejs.org/examples/webgl_shadowmap_csm.html
+
+
+function toDegrees(radians) {
+    return radians * 180 / Math.PI;
+}
+
+function toRadians(degrees) {
+    return degrees * Math.PI / 180;
+}
+
+const shadowMaxDistance = 300;
+const debug = getParam("debuglights");
+
+
+/// <summary>
+///   <para>The type of a Light.</para>
+/// </summary>
+export enum LightType {
+    /// <summary>
+    ///   <para>The light is a spot light.</para>
+    /// </summary>
+    Spot = 0,
+    /// <summary>
+    ///   <para>The light is a directional light.</para>
+    /// </summary>
+    Directional = 1,
+    /// <summary>
+    ///   <para>The light is a point light.</para>
+    /// </summary>
+    Point = 2,
+    Area = 3,
+    /// <summary>
+    ///   <para>The light is a rectangle shaped area light. It affects only baked lightmaps and lightprobes.</para>
+    /// </summary>
+    Rectangle = 3,
+    /// <summary>
+    ///   <para>The light is a disc shaped area light. It affects only baked lightmaps and lightprobes.</para>
+    /// </summary>
+    Disc = 4,
+}
+export enum LightmapBakeType {
+    /// <summary>
+    ///   <para>Realtime lights cast run time light and shadows. They can change position, orientation, color, brightness, and many other properties at run time. No lighting gets baked into lightmaps or light probes..</para>
+    /// </summary>
+    Realtime = 4,
+    /// <summary>
+    ///   <para>Baked lights cannot move or change in any way during run time. All lighting for static objects gets baked into lightmaps. Lighting and shadows for dynamic objects gets baked into Light Probes.</para>
+    /// </summary>
+    Baked = 2,
+    /// <summary>
+    ///   <para>Mixed lights allow a mix of realtime and baked lighting, based on the Mixed Lighting Mode used. These lights cannot move, but can change color and intensity at run time. Changes to color and intensity only affect direct lighting as indirect lighting gets baked. If using Subtractive mode, changes to color or intensity are not calculated at run time on static objects.</para>
+    /// </summary>
+    Mixed = 1,
+}
+
+/// <summary>
+///   <para>Shadow casting options for a Light.</para>
+/// </summary>
+enum LightShadows {
+    /// <summary>
+    ///   <para>Do not cast shadows (default).</para>
+    /// </summary>
+    None = 0,
+    /// <summary>
+    ///   <para>Cast "hard" shadows (with no shadow filtering).</para>
+    /// </summary>
+    Hard = 1,
+    /// <summary>
+    ///   <para>Cast "soft" shadows (with 4x PCF filtering).</para>
+    /// </summary>
+    Soft = 2,
+}
+
+export class Light extends Behaviour {
+
+    @serializeable()
+    private type: LightType = 0;
+    public range: number = 1;
+    public spotAngle: number = 1;
+    public innerSpotAngle: number = 1;
+
+    @serializeable(Color)
+    public color: THREE.Color = new THREE.Color(0xffffff);
+
+    @serializeable()
+    set shadowNearPlane(val: number) {
+        if (val === this._shadowNearPlane) return;
+        this._shadowNearPlane = val;
+        if (this.light?.shadow?.camera !== undefined) {
+            const cam = this.light.shadow.camera as THREE.OrthographicCamera;
+            cam.near = val;
+        }
+    }
+    get shadowNearPlane(): number { return this._shadowNearPlane; }
+    private _shadowNearPlane: number = .1;
+
+    @serializeable()
+    set shadowBias(val: number) {
+        if (val === this._shadowBias) return;
+        this._shadowBias = val;
+        if (this.light?.shadow?.bias !== undefined) {
+            this.light.shadow.bias = val;
+            this.light.shadow.needsUpdate = true;
+        }
+    }
+    get shadowBias(): number { return this._shadowBias; }
+    private _shadowBias: number = 0;
+
+    @serializeable()
+    set shadowNormalBias(val: number) {
+        if (val === this._shadowNormalBias) return;
+        this._shadowNormalBias = val;
+        if (this.light?.shadow?.normalBias !== undefined) {
+            this.light.shadow.normalBias = val;
+            this.light.shadow.needsUpdate = true;
+        }
+    }
+    get shadowNormalBias(): number { return this._shadowNormalBias; }
+    private _shadowNormalBias: number = 1;
+
+    @serializeable()
+    set shadows(val: LightShadows) {
+        this._shadows = val;
+        if (this.light) {
+            this.light.castShadow = val === LightShadows.Hard || val === LightShadows.Soft;
+        }
+    }
+    get shadows(): LightShadows { return this._shadows; }
+    private _shadows: LightShadows = 1;
+
+    @serializeable()
+    private lightmapBakeType: LightmapBakeType = LightmapBakeType.Realtime;
+
+    @serializeable()
+    set intensity(val: number) {
+        this._intensity = val;
+        if (this.light) {
+            let factor: number = 1;
+            if (this.context.isInXR && this._webARRoot) {
+                const scaleFactor = this._webARRoot?.arScale;
+                if (typeof scaleFactor === "number" && scaleFactor > 0) {
+                    factor /= scaleFactor;
+                }
+            }
+            this.light.intensity = val * factor;
+        }
+    }
+    get intensity(): number { return this._intensity; }
+    private _intensity: number = 1;
+
+    @serializeable()
+    get shadowDistance(): number {
+        const light = this.light;
+        if (light) {
+            const cam = light.shadow.camera as OrthographicCamera;
+            return cam.far;
+        }
+        return -1;
+    }
+    set shadowDistance(val: number) {
+        this._shadowDistance = val;
+        const light = this.light;
+        if (light) {
+            const cam = light.shadow.camera as OrthographicCamera;
+            cam.far = val;
+            cam.updateProjectionMatrix();
+        }
+    }
+    private _shadowDistance?: number;
+    // set from additional component
+    private shadowWidth?: number;
+    private shadowHeight?: number;
+
+    @serializeable()
+    get shadowResolution(): number {
+        const light = this.light;
+        if (light) {
+            return light.shadow.mapSize.x;
+        }
+        return -1;
+    }
+    set shadowResolution(val: number) {
+        if (val === this._shadowResolution) return;
+        this._shadowResolution = val;
+        const light = this.light;
+        if (light) {
+            light.shadow.mapSize.set(val, val);
+            light.shadow.needsUpdate = true;
+        }
+    }
+    private _shadowResolution?: number = undefined;
+
+    get isBaked() {
+        return this.lightmapBakeType === LightmapBakeType.Baked;
+    }
+
+    private get selfIsLight(): boolean {
+        if (this.gameObject["isLight"] === true) return true;
+        switch (this.gameObject.type) {
+            case "SpotLight":
+            case "PointLight":
+            case "DirectionalLight":
+                return true;
+        }
+        return false;
+    }
+
+    private light: THREE.Light | undefined = undefined;
+
+    public getWorldPosition(vec: THREE.Vector3): THREE.Vector3 {
+        if (this.light) {
+            if (this.type === LightType.Directional) {
+                return this.light.getWorldPosition(vec).multiplyScalar(1);
+            }
+            return this.light.getWorldPosition(vec);
+        }
+        return vec;
+    }
+
+    public updateIntensity() {
+        this.intensity = this._intensity;
+    }
+
+    awake() {
+        this.color = new THREE.Color(this.color ?? 0xffffff);
+    }
+
+    onEnable(): void {
+        this.createLight();
+        if (this.isBaked) return;
+        else if (this.light) {
+            if (this.selfIsLight) {
+                // nothing to do
+            }
+            else if (this.light.parent !== this.gameObject)
+                this.gameObject.add(this.light);
+        }
+        if (this.type === LightType.Directional)
+            this.startCoroutine(this.updateMainLightRoutine(), FrameEvent.LateUpdate);
+
+        this._webXRStartedListener = WebXR.addEventListener(WebXREvent.XRStarted, this.onWebXRStarted.bind(this));
+        this._webXREndedListener = WebXR.addEventListener(WebXREvent.XRStopped, this.onWebXREnded.bind(this));
+    }
+
+    onDisable() {
+        WebXR.removeEventListener(WebXREvent.XRStarted, this._webXRStartedListener);
+        WebXR.removeEventListener(WebXREvent.XRStopped, this._webXREndedListener);
+    }
+
+    private _webXRStartedListener?: Function;
+    private _webXREndedListener?: Function;
+    private _webARRoot?: WebARSessionRoot;
+
+    private onWebXRStarted() {
+        this._webARRoot = this.gameObject.getComponentInParent(WebARSessionRoot) ?? undefined;
+        this.startCoroutine(this._updateLightIntensityInARRoutine());
+    }
+
+    private *_updateLightIntensityInARRoutine() {
+        while (this.context.isInXR) {
+            yield;
+            this.updateIntensity();
+            for (let i = 0; i < 30; i++) yield;
+        }
+    }
+
+    private onWebXREnded() {
+        this.updateIntensity();
+    }
+
+    createLight() {
+        if (this.light) return;
+        let lightAlreadyCreated = this.selfIsLight;
+        if (lightAlreadyCreated) {
+            this.light = this.gameObject as unknown as THREE.Light;
+
+            switch (this.type) {
+                case LightType.Directional:
+                    this.setDirectionalLight(this.light as DirectionalLight);
+                    break;
+            }
+        }
+        else {
+            switch (this.type) {
+                case LightType.Directional:
+                    // console.log(this);
+                    const dirLight = new THREE.DirectionalLight(this.color, this.intensity * Math.PI);
+                    // directional light target is at 0 0 0 by default
+                    dirLight.position.set(0, 0, -shadowMaxDistance * .5).applyQuaternion(this.gameObject.quaternion);
+                    this.gameObject.add(dirLight.target);
+                    setWorldPositionXYZ(dirLight.target, 0, 0, 0);
+                    this.light = dirLight;
+                    this.gameObject.position.set(0, 0, 0);
+                    this.gameObject.rotation.set(0, 0, 0);
+
+                    if (debug) {
+                        const spotLightHelper = new THREE.DirectionalLightHelper(this.light as THREE.DirectionalLight, .2, this.color);
+                        this.context.scene.add(spotLightHelper);
+                        // const bh = new THREE.BoxHelper(this.context.scene, 0xfff0000);
+                        // this.context.scene.add(bh);
+                    }
+                    break;
+
+                case LightType.Spot:
+                    const spotLight = new THREE.SpotLight(this.color, this.intensity * Math.PI, this.range, toRadians(this.spotAngle / 2), 1 - toRadians(this.innerSpotAngle / 2) / toRadians(this.spotAngle / 2), 2);
+                    spotLight.position.set(0, 0, 0);
+                    spotLight.rotation.set(0, 0, 0);
+
+                    this.light = spotLight;
+                    const spotLightTarget = spotLight.target;
+                    spotLight.add(spotLightTarget);
+                    spotLightTarget.position.set(0, 0, this.range);
+                    spotLightTarget.rotation.set(0, 0, 0);
+                    break;
+
+                case LightType.Point:
+                    const pointLight = new THREE.PointLight(this.color, this.intensity * Math.PI, this.range);
+                    this.light = pointLight;
+
+                    // const pointHelper = new THREE.PointLightHelper(pointLight, this.range, this.color);
+                    // scene.add(pointHelper);
+                    break;
+            }
+        }
+
+        if (this.light !== undefined) {
+            if (this.shadows !== LightShadows.None) {
+                this.light.castShadow = true;
+            }
+            else this.light.castShadow = false;
+
+            // shadow intensity is currently not a thing: https://github.com/mrdoob/three.js/pull/14087
+            if (this._shadowResolution !== undefined && this._shadowResolution > 4) {
+                this.light.shadow.mapSize.width = this._shadowResolution;
+                this.light.shadow.mapSize.height = this._shadowResolution;
+            }
+            else {
+                this.light.shadow.mapSize.width = 2048;
+                this.light.shadow.mapSize.height = 2048;
+            }
+            this.light.shadow.bias = this.shadowBias * 0.00001;
+            this.light.shadow.normalBias = this.shadowNormalBias * .0001;
+
+            // console.log(this.light.shadow, this);
+            const cam = this.light.shadow.camera as THREE.OrthographicCamera;
+            cam.near = this.shadowNearPlane;
+            // use shadow distance that was set explictly (if any)
+            if (this._shadowDistance !== undefined && typeof this._shadowDistance === "number")
+                cam.far = this._shadowDistance;
+            else // otherwise fallback to object scale and max distance
+                cam.far = shadowMaxDistance * Math.abs(this.gameObject.scale.z);
+
+            // width and height
+            this.gameObject.scale.set(1, 1, 1);
+            if (this.shadowWidth !== undefined) {
+                cam.left = -this.shadowWidth / 2;
+                cam.right = this.shadowWidth / 2;
+            }
+            else {
+                const sx = this.gameObject.scale.x;
+                cam.left *= sx;
+                cam.right *= sx;
+            }
+            if (this.shadowHeight !== undefined) {
+                cam.top = this.shadowHeight / 2;
+                cam.bottom = -this.shadowHeight / 2;
+            }
+            else {
+                const sy = this.gameObject.scale.y;
+                cam.top *= sy;
+                cam.bottom *= sy;
+            }
+            this.light.shadow.needsUpdate = true;
+            if (debug)
+                this.context.scene.add(new THREE.CameraHelper(cam));
+
+
+            if (this.isBaked) {
+                this.light.removeFromParent();
+            }
+            else if (!lightAlreadyCreated)
+                this.gameObject.add(this.light);
+        }
+
+    }
+
+    *updateMainLightRoutine() {
+        while (true) {
+            if (this.type === LightType.Directional) {
+                if (!this.context.mainLight || this.intensity > this.context.mainLight.intensity) {
+                    this.context.mainLight = this;
+                }
+                yield;
+            }
+            break;
+        }
+    }
+
+    private setDirectionalLight(dirLight: DirectionalLight) {
+        dirLight.add(dirLight.target);
+        dirLight.target.position.set(0, 0, -1);
+        // dirLight.position.add(vec.set(0,0,1).multiplyScalar(shadowMaxDistance*.1).applyQuaternion(this.gameObject.quaternion));
+    }
+}
+
+const vec = new THREE.Vector3(0, 0, 0);
+

package/src/engine-components/LookAtConstraint.ts

@@ -0,0 +1,12 @@
+import { Behaviour, GameObject } from "./Component";
+import * as THREE from "three";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { Object3D } from "three";
+
+export class LookAtConstraint extends Behaviour {
+
+    constraintActive: boolean = true;
+    locked: boolean = false;
+    @serializeable(Object3D)
+    sources: THREE.Object3D[] = [];
+}

package/src/engine-components/MeshCollider.ts

@@ -0,0 +1,12 @@
+
+import { Behaviour } from "./Component";
+import { Physics } from '../engine/engine_physics'
+import * as THREE from 'three';
+
+export class MeshCollider extends Behaviour {
+
+    onEnable() {
+        if (this.enabled)
+            this.context.physics.addMeshCollider(this.gameObject);
+    }
+}

package/src/engine-components/NavMesh.ts

@@ -0,0 +1,118 @@
+
+import { Behaviour, GameObject } from "./Component";
+/*
+import { Pathfinding, PathfindingHelper } from 'three-pathfinding';
+import * as THREE from 'three';
+import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils'
+*/
+export class NavMesh extends Behaviour {
+/*
+    public meshes: THREE.Object3D[] = [];
+
+    private pathfinding: Pathfinding | null = null;
+    private zones: string[] = [];
+
+    onEnable(): void {
+
+        this.pathfinding = new Pathfinding();
+        const ZONE = 'zone';
+        const geometries : THREE.BufferGeometry[] = [];
+        if (this.meshes && this.meshes.length > 0) {
+            for (let i = 0; i < this.meshes.length; i++) {
+                const obj = this.meshes[i] as THREE.Mesh;
+                if (!obj) continue;
+                const geo = obj.geometry;
+                if (!geo) continue;
+                const copy : THREE.BufferGeometry = {...geo};
+                // const copy = geo;
+                const attributesCopy = {...copy.attributes};
+                copy.attributes = attributesCopy;
+                if(attributesCopy.uv2) delete attributesCopy.uv2;
+                // copy.applyMatrix4(obj.matrixWorld);
+                geometries.push(copy);
+                // obj.updateMatrixWorld();
+                // singleGeometry.merge(geo);
+                // console.log(singleGeometry, geo);
+            }
+        }
+        const mesh = mergeBufferGeometries(geometries);
+        const zone = Pathfinding.createZone(mesh);
+        const name = ZONE;
+        this.zones.push(name);
+        this.pathfinding.setZoneData(name, zone);
+
+        // const target = new THREE.Vector3(2, 0, 2);
+        // const groupID = this.pathfinding.getGroup(ZONE, target);
+        // const path = this.pathfinding.findPath(this.worldPosition, target, ZONE, groupID);
+        // console.log(path, this.pathfinding);
+    }
+
+    public tryFindPath(from: THREE.Vector3, to: THREE.Vector3): THREE.Vector3[] | null {
+        const zone = this.zones[0];
+        const groupId = this.pathfinding.getGroup(zone, to);
+        const path = this.pathfinding.findPath(from, to, zone, groupId);
+        return path;
+    }
+    */
+}
+
+// import { input } from "../engine/engine_input";
+import { Physics, RaycastOptions } from "../engine/engine_physics"
+// import { time } from "../engine/engine_time";
+// import { scene } from "../engine/engine_setup";
+import { Quaternion } from "math/Quaternion";
+import {SyncedTransform} from "./SyncedTransform";
+
+export class NavMeshAgent extends Behaviour {
+    /*
+    public navMesh: NavMesh | null = null;
+
+    private currentPath: THREE.Vector3[] | null = null;
+    private helper : PathfindingHelper | null = null;
+
+    onEnable(): void {
+        this.helper = new PathfindingHelper();
+        scene.add(this.helper);
+    }
+
+    update(): void {
+        if (input.mouseClick) {
+            if (this.navMesh) {
+                const from = this.worldPosition;
+                const opts = new RaycastOptions();
+                opts.setMask(RaycastOptions.AllLayers);
+                const hits = Physics.raycast(opts);
+                if (hits.length > 0) {
+                    const to = hits[0].point;
+                    this.helper.setPlayerPosition(from);
+                    this.helper.setTargetPosition(to);
+                    this.currentPath = this.navMesh.tryFindPath(from, to);
+                    this.helper.setPath(this.currentPath);
+                    // console.log(...this.currentPath);
+
+                    const sync = GameObject.getComponent(this.gameObject, SyncedTransform);
+                    if(sync) sync.requestOwnership();
+                }
+            }
+        }
+
+        if (this.currentPath && this.currentPath.length > 0) {
+
+            const wp = this.worldPosition;
+            const target = this.currentPath[0];
+            this.worldPosition = wp.lerp(target, time.deltaTime*2);
+
+            this.gameObject.lookAt(target);
+            // const vec = target.clone().sub(wp);
+            // const wr = this.worldQuaternion;
+            // wr.slerp(rot, time.deltaTime*5);
+            // this.worldQuaternion = wr;
+
+            if (wp.distanceTo(this.currentPath[0]) < 0.1)
+                this.currentPath.shift();
+
+            
+        }
+    }
+    */
+}

package/src/engine-components/NestedGltf.ts

@@ -0,0 +1,56 @@
+import { getParam } from "../engine/engine_utils";
+import { Behaviour, InstantiateOptions } from "../engine-components/Component";
+import { AssetReference, ProgressCallback } from "../engine/engine_addressables";
+import { serializeable } from "../engine/engine_serialization_decorator";
+import { InstantiateIdProvider } from "../engine/engine_networking_instantiate";
+
+const debug = getParam("debugnestedgltf");
+
+export class NestedGltf extends Behaviour {
+    @serializeable(AssetReference)
+    filePath?: AssetReference;
+
+    private _isLoadingOrDoneLoading: boolean = false;
+
+    listenToProgress(evt: ProgressCallback) {
+        this.filePath?.beginListenDownload(evt)
+    }
+
+    preload() {
+        this.filePath?.preload();
+    }
+
+    async start() {
+        if (this._isLoadingOrDoneLoading) return;
+        if (debug) console.log(this, this.guid);
+
+        const parent = this.gameObject.parent;
+        if (parent) {
+            this._isLoadingOrDoneLoading = true;
+            const opts = new InstantiateOptions();
+            // we need to provide stable guids for creating nested gltfs
+            opts.idProvider = new InstantiateIdProvider(this.hash(this.guid));
+            opts.parent = parent;
+            this.gameObject.updateMatrix();
+            const matrix = this.gameObject.matrix;
+            if (debug) console.log("Load nested:", this.filePath?.uri ?? this.filePath, this.gameObject.position)
+            const res = await this.filePath?.instantiate?.call(this.filePath, opts);
+            if (res) {
+                res.matrixAutoUpdate = false;
+                res.matrix.identity();
+                res.applyMatrix4(matrix);
+                res.matrixAutoUpdate = true;
+            }
+            this.destroy();
+            if (debug) console.log("Nested loading done:", this.filePath?.uri ?? this.filePath, res);
+        }
+    }
+
+    hash(str: string): number {
+        let hash = 0;
+        for (let i = 0; i < str.length; i++) {
+            hash = str.charCodeAt(i) + ((hash << 5) - hash);
+        }
+        return hash;
+    }
+}

package/src/engine-components/Networking.ts

@@ -0,0 +1,58 @@
+import { isLocalNetwork } from "../engine/engine_networking_utils";
+import { getParam } from "../engine/engine_utils";
+import { Behaviour } from "./Component";
+
+export class Networking extends Behaviour {
+
+    url: string | null = null;
+    urlParameterName: string | null = null;
+
+    // used when local host is detected
+    localhost: string | null = null;
+
+    getWebsocketUrl(): string | null {
+
+        let socketurl = this.url ? Networking.GetUrl(this.url, this.localhost) : null;
+
+        if (this.urlParameterName) {
+            const res = getParam(this.urlParameterName);
+            if (res && typeof res === "string") {
+                socketurl = res;
+            }
+        }
+
+        if (!socketurl) return null;
+
+        // regex https://regex101.com/r/JQ5WqB/1
+        const regex = new RegExp("(((https?)|(?<socket_prefix>wss?)):\/\/)?(www\.)?(?<url>.+)", "gm");
+        const match = regex.exec(socketurl);
+        if (!match?.groups) return null;
+        // if the url has a ws or wss prefix already assume the whole url is in the correct format
+        const socketPrefix = match?.groups["socket_prefix"];
+        if (socketPrefix) return socketurl;
+        // otherwise add the ws prefix
+        return "wss://" + match?.groups["url"];
+    }
+
+
+    public static GetUrl(url: string, localhostFallback?: string | null): string {
+
+        let result = url;
+
+        const useLocalHostUrl = Networking.IsLocalNetwork() && localhostFallback;
+        if (useLocalHostUrl) {
+            result = localhostFallback;
+        }
+
+        if (url?.startsWith("/")) {
+            const base = useLocalHostUrl ? result : window.location.origin;
+            result = base + url;
+        }
+
+        return result;
+    }
+
+    public static IsLocalNetwork(hostname = window.location.hostname) {
+        return isLocalNetwork(hostname);
+    }
+}