Needle Engine 3.29.0

Files changed (14) hide show

plugins/vite/meta.js +3 -1
src/engine-components/Collider.ts +1 -16
src/engine/engine_addressables.ts +16 -0
src/engine/engine_gizmos.ts +326 -321
src/engine/engine_gltf_builtin_components.ts +18 -5
src/engine/engine_networking_instantiate.ts +1 -1
src/engine/engine_physics_rapier.ts +24 -10
src/engine/engine_physics.ts +2 -1
src/engine/engine_scenelighting.ts +3 -28
src/engine/engine_types.ts +15 -4
src/engine/engine_utils.ts +8 -0
src/engine/extensions/NEEDLE_lighting_settings.ts +0 -20
src/engine/extensions/NEEDLE_techniques_webgl.ts +3 -1
src/engine/codegen/register_types.ts +2 -2

plugins/vite/meta.js CHANGED Viewed

@@ -117,7 +117,9 @@
 function updateUrlMetaTag(html, url) {
-    html = html.replace(`<meta name="url" content="http://needle.tools">`, `<meta name="url" content="${url}">`);
+    const result = `<meta name="url" content="${url}">`;
+    html = html.replace(`<meta name="url" content="https://needle.tools">`, result);
+    html = html.replace(`<meta name="url" content="http://needle.tools">`, result);
     return html;
 }

src/engine-components/Collider.ts CHANGED Viewed

@@ -19,31 +19,16 @@
     @serializable(Rigidbody)
     attachedRigidbody: Rigidbody | null = null;
-    /**
-     * Note: Make sure to call updatePhysicsMaterial after having changed this property
-     */
     @serializable()
     isTrigger: boolean = false;
-    /**
-     * The physics material determines how the collider interacts with other colliders (e.g. bouncyness)
-     * Note: Make sure to call updatePhysicsMaterial after having changed this property
-     */
     @serializable()
     sharedMaterial?: PhysicsMaterial;
-    /** The collider membership indicates what groups the collider is part of (e.g. group 2 and 3)
-     * An empty array indicates that the collider is part of all groups
-     * Note: Make sure to call updateProperties after having changed this property
-    */
     @serializable()
     membership: number[] = [0];
-    /** The collider filter indicates what groups the collider can interact with (e.g. group 3 and 4)
-     * An empty array indicates that the collider can interact with all groups
-     * Note: Make sure to call updateProperties after having changed this property
-    */
     @serializable()
-    filter: number[] = [0];
+    filter?: number[];
     awake() {
         super.awake();

src/engine/engine_addressables.ts CHANGED Viewed

@@ -60,6 +60,14 @@
 const $assetReference = Symbol("assetReference");
+/** ### AssetReferences can be used to easily load glTF or GLB assets
+ * You can use `AssetReference.getOrCreate` to get an AssetReference for a URL to be easily loaded.
+ * When using the same URL multiple times the same AssetReference will be returned, this avoids loading or creating the same asset multiple times.
+ * - `myAssetReference.preload()` to load the asset binary without creating an instance yet.
+ * - `myAssetReference.loadAssetAsync()` to load the asset and create an instance.
+ * - `myAssetReference.instantiate()` to load the asset and create a new instance.
+ * - `myAssetReference.unload()` to dispose allocated memory and destroy the asset instance.
+ */
 export class AssetReference {
     /**
@@ -144,8 +152,10 @@
         return !this.asset || this.asset.__destroyed === true || isDestroyed(this.asset) === true;
     }
+    /** has the asset been loaded (via preload) or does it exist already (assigned to `asset`) */
     isLoaded() { return this._rawBinary || this.asset !== undefined }
+    /** frees previously allocated memory and destroys the current `asset` instance (if any) */
     unload() {
         if (this.asset) {
             if (debug) console.log("Unload", this.asset);
@@ -163,6 +173,7 @@
         }
     }
+    /** loads the asset binary without creating an instance */
     async preload(): Promise<ArrayBuffer | null> {
         if (!this.mustLoad) return null;
         if (this._isLoadingRawBinary) return null;
@@ -178,6 +189,9 @@
     }
     // TODO: we need a way to abort loading a resource
+    /** Loads the asset and creates one instance (assigned to `asset`)
+     * @returns the loaded asset
+     */
     async loadAssetAsync(prog?: ProgressCallback | null) {
         if (debug)
             console.log("loadAssetAsync", this.uri);
@@ -230,10 +244,12 @@
         }
     }
+    /** loads and returns a new instance of `asset` */
     async instantiate(parent?: Object3D | InstantiateOptions) {
         return this.onInstantiate(parent, false);
     }
+    /** loads and returns a new instance of `asset` - this call is networked so an instance will be created on all connected users */
     async instantiateSynced(parent?: Object3D | InstantiateOptions, saveOnServer: boolean = true) {
         return this.onInstantiate(parent, true, saveOnServer);
     }

src/engine/engine_gizmos.ts CHANGED Viewed

@@ -1,322 +1,327 @@
-import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, type ColorRepresentation, Vector3, Box3, Quaternion, CylinderGeometry, AxesHelper } from 'three';
-import { Context } from './engine_setup.js';
-import { getWorldPosition, lookAtObject, setWorldPositionXYZ } from './engine_three_utils.js';
-import type { Vec3, Vec4 } from './engine_types.js';
-import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
-import { getParam } from './engine_utils.js';
-import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
-const _tmp = new Vector3();
-const _tmp2 = new Vector3();
-const _quat = new Quaternion();
-const debug = getParam("debuggizmos");
-const defaultColor: ColorRepresentation = 0x888888;
-export type LabelHandle = {
-    setText(str: string);
-}
-declare type ColorWithAlpha = Color & { a: number };
-export class Gizmos {
-    /**
-     * Draw a label in the scene or attached to an object (if a parent is provided)
-     * @returns a handle to the label that can be used to change the text
-     */
-    static DrawLabel(position: Vec3, text: string, size: number = .1, duration: number = 9999, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha, parent?: Object3D,) {
-        if (!color) color = defaultColor;
-        const element = Internal.getTextLabel(duration, text, size, color, backgroundColor);
-        if (parent instanceof Object3D) parent.add(element);
-        element.position.x = position.x;
-        element.position.y = position.y;
-        element.position.z = position.z;
-        return element as LabelHandle;
-    }
-    static DrawRay(origin: Vec3, dir: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getLine(duration);
-        const positions = obj.geometry.getAttribute("position");
-        positions.setXYZ(0, origin.x, origin.y, origin.z);
-        _tmp.set(dir.x, dir.y, dir.z).multiplyScalar(999999999);
-        positions.setXYZ(1, origin.x + _tmp.x, origin.y + _tmp.y, origin.z + _tmp.z);
-        positions.needsUpdate = true;
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
-        const obj = Internal.getLine(duration);
-        const positions = obj.geometry.getAttribute("position");
-        positions.setXYZ(0, pt.x, pt.y, pt.z);
-        if (direction["w"] !== undefined) {
-            _tmp.set(0, 0, -lengthFactor);
-            _quat.set(direction["x"], direction["y"], direction["z"], direction["w"]);
-            _tmp.applyQuaternion(_quat);
-        }
-        else {
-            _tmp.set(direction.x, direction.y, direction.z);
-            _tmp.multiplyScalar(lengthFactor);
-        }
-        positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
-        positions.needsUpdate = true;
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getLine(duration);
-        const positions = obj.geometry.getAttribute("position");
-        positions.setXYZ(0, pt0.x, pt0.y, pt0.z);
-        positions.setXYZ(1, pt1.x, pt1.y, pt1.z);
-        positions.needsUpdate = true;
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getSphere(radius, duration, true);
-        setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getSphere(radius, duration, false);
-        setWorldPositionXYZ(obj, center.x, center.y, center.z);
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawWireBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getBox(duration);
-        obj.position.set(center.x, center.y, center.z);
-        obj.scale.set(size.x, size.y, size.z);
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["wireframe"] = true;
-        obj.material["depthWrite"] = false;
-    }
-    static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
-        const obj = Internal.getBox(duration);
-        obj.position.copy(box.getCenter(_tmp));
-        obj.scale.copy(box.getSize(_tmp));
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["wireframe"] = true;
-        obj.material["depthWrite"] = false;
-    }
-    private static _up = new Vector3(0, 1, 0);
-    static DrawArrow(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, wireframe: boolean = false) {
-        const obj = Internal.getArrowHead(duration);
-        obj.position.set(pt1.x, pt1.y, pt1.z);
-        obj.quaternion.setFromUnitVectors(this._up.set(0, 1, 0), _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).normalize());
-        const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
-        const scale = dist * 0.1;
-        obj.scale.set(scale, scale, scale);
-        obj.material["color"].set(color);
-        obj.material["depthTest"] = depthTest;
-        obj.material["wireframe"] = wireframe;
-        this.DrawLine(pt0, pt1, color, duration, depthTest);
-    }
-}
-const box: BoxGeometry = new BoxGeometry(1, 1, 1);
-export function CreateWireCube(col: ColorRepresentation | null = null): LineSegments {
-    const color = new Color(col ?? 0xdddddd);
-    // const material = new MeshBasicMaterial();
-    // material.color = new Color(col ?? 0xdddddd);
-    // material.wireframe = true;
-    // const box = new Mesh(box, material);
-    // box.name = "BOX_GIZMO";
-    const edges = new EdgesGeometry(box);
-    const line = new LineSegments(edges, new LineBasicMaterial({ color: color }));
-    return line;
-}
-const $cacheSymbol = Symbol("GizmoCache");
-class Internal {
-    // private static createdLines: number = 0;
-    private static readonly familyName = "needle-gizmos";
-    private static ensureFont() {
-        let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(this.familyName);
-        if (!fontFamily) {
-            fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
-            const variant = fontFamily.addVariant("normal", "normal", "./include/needle/arial-msdf.json", "./include/needle/arial.png") as any as ThreeMeshUI.FontVariant;
-            variant?.addEventListener('ready', () => {
-                ThreeMeshUI.update();
-            });
-        }
-    }
-    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha): Text & LabelHandle {
-        this.ensureFont();
-        let element = this.textLabelCache.pop();
-        let opacity = 1;
-        if (backgroundColor && typeof backgroundColor === "string" && backgroundColor?.length >= 8 && backgroundColor.startsWith("#")) {
-            opacity = parseInt(backgroundColor.substring(7), 16) / 255;
-            backgroundColor = backgroundColor.substring(0, 7);
-            if (debug)
-                console.log(backgroundColor, opacity);
-        }
-        else if (typeof backgroundColor === "object" && backgroundColor["a"] !== undefined) {
-            opacity = backgroundColor["a"]
-        }
-        const props: Options = {
-            boxSizing: 'border-box',
-            fontFamily: this.familyName,
-            width: "auto",
-            fontSize: size,
-            color: color,
-            lineHeight: .75,
-            backgroundColor: backgroundColor ?? undefined,
-            backgroundOpacity: opacity,
-            textContent: text,
-            borderRadius: 1 * size,
-            padding: 1 * size,
-        };
-        if (!element) {
-            element = new Text(props);
-            const global = this;
-            const labelHandle = element as LabelHandle & Text;
-            labelHandle.setText = function (str: string) {
-                this.set({ textContent: str, whiteSpace: 'pre' });
-                global.tmuiNeedsUpdate = true;
-            };
-        }
-        else {
-            element.set(props);
-            // const handle = element as any as LabelHandle;
-            // handle.setText(text);
-        }
-        this.tmuiNeedsUpdate = true;
-        element.layers.disableAll();
-        element.layers.enable(2);
-        this.registerTimedObject(Context.Current, element, duration, this.textLabelCache);
-        return element as Text & LabelHandle;
-    }
-    static getBox(duration: number): Mesh {
-        let box = this.boxesCache.pop();
-        if (!box) {
-            const geo: BoxGeometry = new BoxGeometry(1, 1, 1);
-            box = new Mesh(geo);
-        }
-        this.registerTimedObject(Context.Current, box, duration, this.boxesCache);
-        return box;
-    }
-    static getLine(duration: number): Line {
-        let line = this.linesCache.pop();
-        if (!line) {
-            line = new Line();
-            let positions = line.geometry.getAttribute("position");
-            if (!positions) {
-                positions = new BufferAttribute(new Float32Array(2 * 3), 3);
-                line.geometry.setAttribute("position", positions);
-            }
-        }
-        this.registerTimedObject(Context.Current, line, duration, this.linesCache);
-        return line;
-    }
-    static getSphere(radius: number, duration: number, wireframe: boolean): Mesh {
-        let sphere = this.spheresCache.pop();
-        if (!sphere) {
-            sphere = new Mesh(new SphereGeometry(1, 8, 8));
-        }
-        sphere.scale.set(radius, radius, radius);
-        sphere.material["wireframe"] = wireframe;
-        this.registerTimedObject(Context.Current, sphere, duration, this.spheresCache);
-        return sphere;
-    }
-    static getArrowHead(duration: number): Mesh {
-        let arrowHead = this.arrowHeadsCache.pop();
-        if (!arrowHead) {
-            arrowHead = new Mesh(new CylinderGeometry(0, .5, 1, 8));
-        }
-        this.registerTimedObject(Context.Current, arrowHead, duration, this.arrowHeadsCache);
-        return arrowHead;
-    }
-    private static linesCache: Array<Line> = [];
-    private static spheresCache: Mesh[] = [];
-    private static boxesCache: Mesh[] = [];
-    private static arrowHeadsCache: Mesh[] = [];
-    private static textLabelCache: Array<Text> = [];
-    private static registerTimedObject(context: Context, object: Object3D, duration: number, cache: Array<Object3D>) {
-        if (!this.contextPostRenderCallbacks.get(context)) {
-            const cb = () => { this.onPostRender(context, this.timedObjectsBuffer, this.timesBuffer) };
-            this.contextPostRenderCallbacks.set(context, cb);
-            context.post_render_callbacks.push(cb);
-        }
-        if (!this.contextBeforeRenderCallbacks.get(context)) {
-            const cb = () => { this.onBeforeRender(context, this.timedObjectsBuffer) };
-            this.contextBeforeRenderCallbacks.set(context, cb);
-            context.pre_render_callbacks.push(cb);
-        }
-        object.renderOrder = 999999;
-        object.layers.disableAll();
-        object.layers.enable(2);
-        object[$cacheSymbol] = cache;
-        this.timedObjectsBuffer.push(object);
-        this.timesBuffer.push(Context.Current.time.time + duration);
-        context.scene.add(object);
-    }
-    private static timedObjectsBuffer = new Array<Object3D>();
-    private static timesBuffer = new Array<number>();
-    private static contextPostRenderCallbacks = new Map<Context, () => void>();
-    private static contextBeforeRenderCallbacks = new Map<Context, () => void>();
-    private static tmuiNeedsUpdate = false;
-    private static onBeforeRender(ctx: Context, objects: Array<Object3D>) {
-        // const cameraWorldPosition = getWorldPosition(ctx.mainCamera!, _tmp);
-        if (this.tmuiNeedsUpdate) {
-            ThreeMeshUI.update();
-        }
-        for (let i = 0; i < objects.length; i++) {
-            const obj = objects[i];
-            if (ctx.mainCamera && obj instanceof ThreeMeshUI.MeshUIBaseElement) {
-                const isInXR = ctx.isInVR;
-                const keepUp = isInXR;
-                const copyRotation = !isInXR;
-                lookAtObject(obj, ctx.mainCamera, keepUp, copyRotation);
-            }
-        }
-    }
-    private static onPostRender(ctx: Context, objects: Array<Object3D>, times: Array<number>) {
-        const time = ctx.time.time;
-        for (let i = 0; i < objects.length; i++) {
-            const obj = objects[i];
-            if (time > times[i]) {
-                const cache = obj[$cacheSymbol];
-                cache.push(obj);
-                obj.removeFromParent();
-                objects.splice(i, 1);
-                times.splice(i, 1);
-            }
-        }
-    }
+import { BufferAttribute, Line, BoxGeometry, EdgesGeometry, Color, LineSegments, LineBasicMaterial, Object3D, Mesh, SphereGeometry, type ColorRepresentation, Vector3, Box3, Quaternion, CylinderGeometry, AxesHelper } from 'three';
+import { Context } from './engine_setup.js';
+import { getWorldPosition, lookAtObject, setWorldPositionXYZ } from './engine_three_utils.js';
+import type { Vec3, Vec4 } from './engine_types.js';
+import ThreeMeshUI, { Inline, Text } from "three-mesh-ui"
+import { getParam } from './engine_utils.js';
+import { type Options } from 'three-mesh-ui/build/types/core/elements/MeshUIBaseElement.js';
+const _tmp = new Vector3();
+const _tmp2 = new Vector3();
+const _quat = new Quaternion();
+const debug = getParam("debuggizmos");
+const defaultColor: ColorRepresentation = 0x888888;
+export type LabelHandle = {
+    setText(str: string);
+}
+declare type ColorWithAlpha = Color & { a: number };
+export class Gizmos {
+    static isGizmo(obj: Object3D) {
+        return obj[$cacheSymbol] !== undefined;
+    }
+    /**
+     * Draw a label in the scene or attached to an object (if a parent is provided)
+     * @returns a handle to the label that can be used to change the text
+     */
+    static DrawLabel(position: Vec3, text: string, size: number = .1, duration: number = 9999, color?: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha, parent?: Object3D,) {
+        if (!color) color = defaultColor;
+        const element = Internal.getTextLabel(duration, text, size, color, backgroundColor);
+        if (parent instanceof Object3D) parent.add(element);
+        element.position.x = position.x;
+        element.position.y = position.y;
+        element.position.z = position.z;
+        return element as LabelHandle;
+    }
+    static DrawRay(origin: Vec3, dir: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getLine(duration);
+        const positions = obj.geometry.getAttribute("position");
+        positions.setXYZ(0, origin.x, origin.y, origin.z);
+        _tmp.set(dir.x, dir.y, dir.z).multiplyScalar(999999999);
+        positions.setXYZ(1, origin.x + _tmp.x, origin.y + _tmp.y, origin.z + _tmp.z);
+        positions.needsUpdate = true;
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
+        const obj = Internal.getLine(duration);
+        const positions = obj.geometry.getAttribute("position");
+        positions.setXYZ(0, pt.x, pt.y, pt.z);
+        if (direction["w"] !== undefined) {
+            _tmp.set(0, 0, -lengthFactor);
+            _quat.set(direction["x"], direction["y"], direction["z"], direction["w"]);
+            _tmp.applyQuaternion(_quat);
+        }
+        else {
+            _tmp.set(direction.x, direction.y, direction.z);
+            _tmp.multiplyScalar(lengthFactor);
+        }
+        positions.setXYZ(1, pt.x + _tmp.x, pt.y + _tmp.y, pt.z + _tmp.z);
+        positions.needsUpdate = true;
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawLine(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getLine(duration);
+        const positions = obj.geometry.getAttribute("position");
+        positions.setXYZ(0, pt0.x, pt0.y, pt0.z);
+        positions.setXYZ(1, pt1.x, pt1.y, pt1.z);
+        positions.needsUpdate = true;
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getSphere(radius, duration, true);
+        setWorldPositionXYZ(obj, center.x, center.y, center.z);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getSphere(radius, duration, false);
+        setWorldPositionXYZ(obj, center.x, center.y, center.z);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawWireBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getBox(duration);
+        obj.position.set(center.x, center.y, center.z);
+        obj.scale.set(size.x, size.y, size.z);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = true;
+        obj.material["depthWrite"] = false;
+    }
+    static DrawWireBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
+        const obj = Internal.getBox(duration);
+        obj.position.copy(box.getCenter(_tmp));
+        obj.scale.copy(box.getSize(_tmp));
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = true;
+        obj.material["depthWrite"] = false;
+    }
+    private static _up = new Vector3(0, 1, 0);
+    static DrawArrow(pt0: Vec3, pt1: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, wireframe: boolean = false) {
+        const obj = Internal.getArrowHead(duration);
+        obj.position.set(pt1.x, pt1.y, pt1.z);
+        obj.quaternion.setFromUnitVectors(this._up.set(0, 1, 0), _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).normalize());
+        const dist = _tmp.set(pt1.x, pt1.y, pt1.z).sub(_tmp2.set(pt0.x, pt0.y, pt0.z)).length();
+        const scale = dist * 0.1;
+        obj.scale.set(scale, scale, scale);
+        obj.material["color"].set(color);
+        obj.material["depthTest"] = depthTest;
+        obj.material["wireframe"] = wireframe;
+        this.DrawLine(pt0, pt1, color, duration, depthTest);
+    }
+}
+const box: BoxGeometry = new BoxGeometry(1, 1, 1);
+export function CreateWireCube(col: ColorRepresentation | null = null): LineSegments {
+    const color = new Color(col ?? 0xdddddd);
+    // const material = new MeshBasicMaterial();
+    // material.color = new Color(col ?? 0xdddddd);
+    // material.wireframe = true;
+    // const box = new Mesh(box, material);
+    // box.name = "BOX_GIZMO";
+    const edges = new EdgesGeometry(box);
+    const line = new LineSegments(edges, new LineBasicMaterial({ color: color }));
+    return line;
+}
+const $cacheSymbol = Symbol("GizmoCache");
+class Internal {
+    // private static createdLines: number = 0;
+    private static readonly familyName = "needle-gizmos";
+    private static ensureFont() {
+        let fontFamily = ThreeMeshUI.FontLibrary.getFontFamily(this.familyName);
+        if (!fontFamily) {
+            fontFamily = ThreeMeshUI.FontLibrary.addFontFamily(this.familyName);
+            const variant = fontFamily.addVariant("normal", "normal", "./include/needle/arial-msdf.json", "./include/needle/arial.png") as any as ThreeMeshUI.FontVariant;
+            variant?.addEventListener('ready', () => {
+                ThreeMeshUI.update();
+            });
+        }
+    }
+    static getTextLabel(duration: number, text: string, size: number, color: ColorRepresentation, backgroundColor?: ColorRepresentation | ColorWithAlpha): Text & LabelHandle {
+        this.ensureFont();
+        let element = this.textLabelCache.pop();
+        let opacity = 1;
+        if (backgroundColor && typeof backgroundColor === "string" && backgroundColor?.length >= 8 && backgroundColor.startsWith("#")) {
+            opacity = parseInt(backgroundColor.substring(7), 16) / 255;
+            backgroundColor = backgroundColor.substring(0, 7);
+            if (debug)
+                console.log(backgroundColor, opacity);
+        }
+        else if (typeof backgroundColor === "object" && backgroundColor["a"] !== undefined) {
+            opacity = backgroundColor["a"]
+        }
+        const props: Options = {
+            boxSizing: 'border-box',
+            fontFamily: this.familyName,
+            width: "auto",
+            fontSize: size,
+            color: color,
+            lineHeight: .75,
+            backgroundColor: backgroundColor ?? undefined,
+            backgroundOpacity: opacity,
+            textContent: text,
+            borderRadius: 1 * size,
+            padding: 1 * size,
+        };
+        if (!element) {
+            element = new Text(props);
+            const global = this;
+            const labelHandle = element as LabelHandle & Text;
+            labelHandle.setText = function (str: string) {
+                this.set({ textContent: str, whiteSpace: 'pre' });
+                global.tmuiNeedsUpdate = true;
+            };
+        }
+        else {
+            element.set(props);
+            // const handle = element as any as LabelHandle;
+            // handle.setText(text);
+        }
+        this.tmuiNeedsUpdate = true;
+        element.layers.disableAll();
+        element.layers.enable(2);
+        this.registerTimedObject(Context.Current, element, duration, this.textLabelCache);
+        return element as Text & LabelHandle;
+    }
+    static getBox(duration: number): Mesh {
+        let box = this.boxesCache.pop();
+        if (!box) {
+            const geo: BoxGeometry = new BoxGeometry(1, 1, 1);
+            box = new Mesh(geo);
+        }
+        this.registerTimedObject(Context.Current, box, duration, this.boxesCache);
+        return box;
+    }
+    static getLine(duration: number): Line {
+        let line = this.linesCache.pop();
+        if (!line) {
+            line = new Line();
+            let positions = line.geometry.getAttribute("position");
+            if (!positions) {
+                positions = new BufferAttribute(new Float32Array(2 * 3), 3);
+                line.geometry.setAttribute("position", positions);
+            }
+        }
+        this.registerTimedObject(Context.Current, line, duration, this.linesCache);
+        return line;
+    }
+    static getSphere(radius: number, duration: number, wireframe: boolean): Mesh {
+        let sphere = this.spheresCache.pop();
+        if (!sphere) {
+            sphere = new Mesh(new SphereGeometry(1, 8, 8));
+        }
+        sphere.scale.set(radius, radius, radius);
+        sphere.material["wireframe"] = wireframe;
+        this.registerTimedObject(Context.Current, sphere, duration, this.spheresCache);
+        return sphere;
+    }
+    static getArrowHead(duration: number): Mesh {
+        let arrowHead = this.arrowHeadsCache.pop();
+        if (!arrowHead) {
+            arrowHead = new Mesh(new CylinderGeometry(0, .5, 1, 8));
+        }
+        this.registerTimedObject(Context.Current, arrowHead, duration, this.arrowHeadsCache);
+        return arrowHead;
+    }
+    private static linesCache: Array<Line> = [];
+    private static spheresCache: Mesh[] = [];
+    private static boxesCache: Mesh[] = [];
+    private static arrowHeadsCache: Mesh[] = [];
+    private static textLabelCache: Array<Text> = [];
+    private static registerTimedObject(context: Context, object: Object3D, duration: number, cache: Array<Object3D>) {
+        if (!this.contextPostRenderCallbacks.get(context)) {
+            const cb = () => { this.onPostRender(context, this.timedObjectsBuffer, this.timesBuffer) };
+            this.contextPostRenderCallbacks.set(context, cb);
+            context.post_render_callbacks.push(cb);
+        }
+        if (!this.contextBeforeRenderCallbacks.get(context)) {
+            const cb = () => { this.onBeforeRender(context, this.timedObjectsBuffer) };
+            this.contextBeforeRenderCallbacks.set(context, cb);
+            context.pre_render_callbacks.push(cb);
+        }
+        object.renderOrder = 999999;
+        object.layers.disableAll();
+        object.layers.enable(2);
+        object[$cacheSymbol] = cache;
+        this.timedObjectsBuffer.push(object);
+        this.timesBuffer.push(Context.Current.time.realtimeSinceStartup + duration);
+        context.scene.add(object);
+    }
+    private static readonly timedObjectsBuffer = new Array<Object3D>();
+    private static readonly timesBuffer = new Array<number>();
+    private static readonly contextPostRenderCallbacks = new Map<Context, () => void>();
+    private static readonly contextBeforeRenderCallbacks = new Map<Context, () => void>();
+    private static tmuiNeedsUpdate = false;
+    private static onBeforeRender(ctx: Context, objects: Array<Object3D>) {
+        // const cameraWorldPosition = getWorldPosition(ctx.mainCamera!, _tmp);
+        if (this.tmuiNeedsUpdate) {
+            ThreeMeshUI.update();
+        }
+        for (let i = 0; i < objects.length; i++) {
+            const obj = objects[i];
+            if (ctx.mainCamera && obj instanceof ThreeMeshUI.MeshUIBaseElement) {
+                const isInXR = ctx.isInVR;
+                const keepUp = isInXR;
+                const copyRotation = !isInXR;
+                lookAtObject(obj, ctx.mainCamera, keepUp, copyRotation);
+            }
+        }
+    }
+    private static onPostRender(ctx: Context, objects: Array<Object3D>, times: Array<number>) {
+        const time = ctx.time.realtimeSinceStartup;
+        for (let i = objects.length - 1; i >= 0; i--) {
+            const obj = objects[i];
+            if (time > times[i]) {
+                const cache = obj[$cacheSymbol];
+                cache.push(obj);
+                obj.removeFromParent();
+                objects.splice(i, 1);
+                times.splice(i, 1);
+            }
+        }
+    }
 }

src/engine/engine_gltf_builtin_components.ts CHANGED Viewed

@@ -122,15 +122,28 @@
  * That way the order of components in the scene doesnt affect the result GUID
  */
 // TODO: clear this when re-loading the context
-const componentIdProviderCache = new Map<string, InstantiateIdProvider>();
+const idProviderCache = new Map<string, InstantiateIdProvider>();
 function recursiveCreateGuids(obj: IGameObject, idProvider: UIDProvider | null, guidsMap: GuidsMap, resolveGuids: IHasResolveGuids[]) {
     if (idProvider === null) return;
     if (!obj) return;
     const prev = obj.guid;
-    obj.guid = idProvider.generateUUID();
+    // we also want to use the idproviderCache for objects because they might be removed or re-ordered in the scene hierarchy
+    // in which case we dont want to e.g. change the syncedInstantiate objects that get created because suddenly another object has that guid
+    const idProviderKey = obj.guid;
+    if (idProviderKey?.length) {
+        if (!idProviderCache.has(idProviderKey)) {
+            if (debug) console.log("Creating InstanceIdProvider with key \"" + idProviderKey + "\" for object " + obj.name);
+            idProviderCache.set(idProviderKey, new InstantiateIdProvider(idProviderKey));
+        }
+    }
+    const objectIdProvider = idProviderKey && idProviderCache.get(idProviderKey) || idProvider;
+    obj.guid = objectIdProvider.generateUUID();
     if (prev && prev !== "invalid")
         guidsMap[prev] = obj.guid;
     // console.log(obj);
     if (obj && obj.userData && obj.userData.components) {
         for (const comp of obj.userData.components) {
@@ -140,13 +153,13 @@
             // this is to prevent cases where multiple GLBs are loaded with the same component guid
             const idProviderKey = comp.guid;
             if (idProviderKey) {
-                if (!componentIdProviderCache.has(idProviderKey)) {
+                if (!idProviderCache.has(idProviderKey)) {
                     if (debug) console.log("Creating InstanceIdProvider with key \"" + idProviderKey + "\" for component " + comp[originalComponentNameKey]);
-                    componentIdProviderCache.set(idProviderKey, new InstantiateIdProvider(idProviderKey));
+                    idProviderCache.set(idProviderKey, new InstantiateIdProvider(idProviderKey));
                 }
             }
             else if(debug) console.warn("Can not create IdProvider: component " + comp[originalComponentNameKey] + " has no guid", comp.guid);
-            const componentIdProvider = componentIdProviderCache.get(idProviderKey) || idProvider
+            const componentIdProvider = idProviderCache.get(idProviderKey) || idProvider
             const prev = comp.guid;
             comp.guid = componentIdProvider.generateUUID();

src/engine/engine_networking_instantiate.ts CHANGED Viewed

@@ -56,7 +56,7 @@
         this._seed = this._originalSeed;
     }
-    generateUUID(str?: string) {
+    generateUUID(str?: string): string {
         if (typeof str === "string") {
             return v5(str, ID_NAMESPACE);
         }

src/engine/engine_physics_rapier.ts CHANGED Viewed

@@ -29,6 +29,7 @@
 const debugColliderPlacement = getParam("debugcolliderplacement");
 const debugCollisions = getParam("debugcollisions");
 const showColliders = getParam("showcolliders");
+const showPhysicsRaycasts = getParam("debugraycasts");
 /** on physics body and references the needle component */
@@ -65,8 +66,8 @@
 export class RapierPhysics implements IPhysicsEngine {
-    /** Enable to draw collider shapes */
     debugRenderColliders: boolean = false;
+    debugRenderRaycasts: boolean = false;
     removeBody(obj: IComponent) {
         if (!obj) return;
@@ -297,6 +298,8 @@
         const ray = this.getPhysicsRay(this.rapierRay, origin, direction);
         if (!ray) return null;
+        if (this.debugRenderRaycasts || showPhysicsRaycasts) Gizmos.DrawRay(ray.origin, ray.dir, 0x0000ff, 1);
         const hit = this.world?.castRay(ray, maxDistance, solid, undefined, undefined, undefined, undefined, (c) => {
             // ignore objects in the IgnoreRaycast=2 layer
             return !c[$componentKey]?.gameObject.layers.isEnabled(2);
@@ -320,6 +323,8 @@
         const ray = this.getPhysicsRay(this.rapierRay, origin, direction);
         if (!ray) return null;
+        if (this.debugRenderRaycasts || showPhysicsRaycasts) Gizmos.DrawRay(ray.origin, ray.dir, 0x0000ff, 1);
         const hit = this.world?.castRayAndGetNormal(ray, maxDistance, solid, undefined, undefined, undefined, undefined, (c) => {
             // ignore objects in the IgnoreRaycast=2 layer
             return !c[$componentKey]?.gameObject.layers.isEnabled(2);
@@ -405,15 +410,24 @@
             this.rapierSphere = new Ball(radius);
         this.rapierSphere.radius = radius;
-        this.world.intersectionsWithShape(point, this.rapierIdentityRotation, this.rapierSphere, col => {
-            const collider = col[$componentKey] as ICollider
-            // if (collider.gameObject.layers.isEnabled(2)) return true;
-            const intersection = new SphereOverlapResult(collider.gameObject, collider);
-            this.rapierColliderArray.push(intersection);
-            return true; // Return `false` instead if we want to stop searching for other colliders that contain this point.
-        }, QueryFilterFlags.EXCLUDE_SENSORS, undefined, undefined, undefined,
+        if (this.debugRenderRaycasts || showPhysicsRaycasts) Gizmos.DrawWireSphere(point, radius, 0x3344ff, 1);
+        this.world.intersectionsWithShape(point,
+            this.rapierIdentityRotation,
+            this.rapierSphere,
             col => {
                 const collider = col[$componentKey] as ICollider
+                // if (collider.gameObject.layers.isEnabled(2)) return true;
+                const intersection = new SphereOverlapResult(collider.gameObject, collider);
+                this.rapierColliderArray.push(intersection);
+                return true; // Return `false` instead if we want to stop searching for other colliders that contain this point.
+            },
+            // TODO: it seems as QueryFilterFlags.EXCLUDE_SENSORS also excludes DYNAMIC Rigidbodies (only if they're set to kinematic)
+            undefined, // QueryFilterFlags.EXCLUDE_SENSORS,
+            undefined, undefined, undefined,
+            col => {
+                // we don't want to raycast against triggers (see comment about Exclude Sensors above)
+                if (col.isSensor()) return false;
+                const collider = col[$componentKey] as ICollider
                 return collider.gameObject.layers.isEnabled(2) == false
             }
         );
@@ -787,7 +801,7 @@
         const body = collider[$bodyKey];
         const members = collider.membership;
         let memberMask = 0;
-        if (members.length <= 0) {
+        if (members == undefined) {
             memberMask = 0xffffffff;
         }
         else {
@@ -799,7 +813,7 @@
         const mask = collider.filter;
         let filterMask = 0;
-        if (mask.length <= 0) {
+        if (mask == undefined) {
             filterMask = 0xffffffff;
         }
         else {

src/engine/engine_physics.ts CHANGED Viewed

@@ -4,6 +4,7 @@
 import { getWorldPosition } from "./engine_three_utils.js"
 import type { Vec2, Vec3, } from './engine_types.js';
 import type { IPhysicsEngine } from './engine_types.js';
+import { Gizmos } from './engine_gizmos.js';
 const debugPhysics = getParam("debugphysics");
 const layerMaskHelper: Layers = new Layers();
@@ -161,7 +162,7 @@
     }
     private tempBoundingBox: Box3 = new Box3();
     private onSphereOverlap(obj: Object3D, sp: Sphere, mask: Layers, results: Array<Intersection>, traverseChildsAfterHit: boolean): void {
-        if (obj.type === "Mesh" && obj.layers.test(mask)) {
+        if (obj.type === "Mesh" && obj.layers.test(mask) && !Gizmos.isGizmo(obj)) {
             const mesh = obj as Mesh;
             const geo = mesh.geometry;
             if (!geo.boundingBox)

src/engine/engine_scenelighting.ts CHANGED Viewed

@@ -1,11 +1,11 @@
 import { Vector4, EquirectangularReflectionMapping, WebGLCubeRenderTarget, Texture, LightProbe, SphericalHarmonics3, SRGBColorSpace } from "three";
-import { LightProbeGenerator } from "three/examples/jsm/lights/LightProbeGenerator.js"
 import { Context } from "./engine_setup.js";
 import { SceneLightSettings } from "./extensions/NEEDLE_lighting_settings.js";
 import { createFlatTexture, createTrilightTexture } from "./engine_shaders.js";
 import { getParam } from "./engine_utils.js";
 import { type SourceIdentifier } from "./engine_types.js";
 import { AssetReference } from "./engine_addressables.js";
+// import { LightProbeGenerator } from "three/examples/jsm/lights/LightProbeGenerator.js"
 const debug = getParam("debugenvlight");
@@ -218,33 +218,6 @@
         scene.environment = null;
     }
-    /** @internal */
-    async internalGetSceneLightingData(sourceId: SourceIdentifier): Promise<SphericalHarmonicsData> {
-        if (debug)
-            console.log("GET SCENE LIGHT DATA", sourceId);
-        // const existing = this.getReflection(sourceId);
-        // const sh = existing?.getSphericalHarmonicsArray(this.sceneLightSettings?.ambientIntensity ?? 1);
-        // if (sh) {
-        //     console.log("HAS EXISTING", sh, existing);
-        //     return sh;
-        // }
-        // fallback
-        if (this._waitPromise) return this._waitPromise;
-        this._waitPromise = new Promise((res, _rej) => {
-            const interval = setInterval(async () => {
-                const ex = this.internalGetReflection(sourceId);
-                if (ex) {
-                    clearInterval(interval);
-                    res(ex.getSphericalHarmonicsArray(this.environmentIntensity ?? 1)!);
-                }
-            }, 10);
-        });
-        return this._waitPromise;
-    }
-    private _waitPromise?: Promise<SphericalHarmonicsData>;
     private _lighting: { [sourceId: SourceIdentifier]: LightData } = {};
 }
@@ -269,6 +242,7 @@
         tex.colorSpace = SRGBColorSpace;
     }
+    /* REMOVED, no LightProbe / custom shader lighting support for now
     getSphericalHarmonicsArray(intensityFactor: number = 1): SphericalHarmonicsData | null {
         if (this._sphericalHarmonicsArray?.length && this._source) {
             return { array: this._sphericalHarmonicsArray, texture: this._source, lightProbe: this._lightProbe };
@@ -311,4 +285,5 @@
         return null;
     }
+    */
 }

src/engine/engine_types.ts CHANGED Viewed

@@ -272,19 +272,28 @@
 export declare interface ICollider extends IComponent {
     get isCollider();
     attachedRigidbody: IRigidbody | null;
+    /**
+     * Note: Make sure to call updatePhysicsMaterial after having changed this property
+     */
     isTrigger: boolean;
+    /**
+     * The physics material determines how the collider interacts with other colliders (e.g. bouncyness)
+     * Note: Make sure to call updatePhysicsMaterial after having changed this property
+     */
     sharedMaterial?: PhysicsMaterial;
     center?: Vec3 & { multiply(vec: Vec3) };
     updateProperties(): void;
     updatePhysicsMaterial(): void;
     /** The collider membership indicates what groups the collider is part of (e.g. group 2 and 3)
-     * An empty array indicates that the collider is part of all groups
+     * An `undefined` array indicates that the collider is part of all groups
+     * Note: Make sure to call updateProperties after having changed this property
     */
-    membership: number[];
+    membership?: number[];
     /** The collider filter indicates what groups the collider can interact with (e.g. group 3 and 4)
-     * An empty array indicates that the collider can interact with all groups
+     * An `undefined` array indicates that the collider can interact with all groups
+     * Note: Make sure to call updateProperties after having changed this property
     */
-    filter: number[];
+    filter?: number[];
 }
 export declare interface ISphereCollider extends ICollider {
@@ -495,4 +504,6 @@
     /** Enable to render collider shapes */
     debugRenderColliders: boolean;
+    /** Enable to visualize raycasts in the scene with gizmos */
+    debugRenderRaycasts: boolean;
 }

src/engine/engine_utils.ts CHANGED Viewed

@@ -437,6 +437,14 @@
 };
+/** Is MacOS or Windows (and not hololens) */
+export function isDesktop() {
+    const ua = window.navigator.userAgent;
+    const standalone = /Windows|MacOS/.test(ua);
+    const isHololens = /Windows NT/.test(ua) && /Edg/.test(ua) && !/Win64/.test(ua);
+    return standalone && !isHololens;
+}
 export function isMobileDevice() {
     return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
 }

src/engine/extensions/NEEDLE_lighting_settings.ts CHANGED Viewed

@@ -170,30 +170,10 @@
                 this._ambientLightObj.removeFromParent();
             if (this._hemisphereLightObj)
                 this._hemisphereLightObj.removeFromParent();
-            // create light probe object
-            if (!this._lightProbeObj) {
-                if (this.sourceId) {
-                    this.context.sceneLighting.internalGetSceneLightingData(this.sourceId).then(data => {
-                        if (!data) return;
-                        this._lightProbeObj = data.lightProbe;
-                        if (this.enabled && !this.destroyed && this._lightProbeObj) {
-                            if (debug) console.log("Add", this.sourceId, data);
-                            this.gameObject.add(this._lightProbeObj);
-                        }
-                    });
-                }
-            }
-            else {
-                if (this.enabled && this.destroyed && this._lightProbeObj) {
-                    this.gameObject.add(this._lightProbeObj);
-                }
-            }
         }
         if (this.sourceId)
             this.context.sceneLighting.internalEnableReflection(this.sourceId);
     }
     onDisable() {

src/engine/extensions/NEEDLE_techniques_webgl.ts CHANGED Viewed

@@ -97,7 +97,7 @@
             this.uniforms[this._viewProjectionName] = { value: [] };
         if (this.uniforms[this._sphericalHarmonicsName]) {
-            this.waitForLighting();
+            // this.waitForLighting();
         }
         if (this.depthTextureUniform || this.opaqueTextureUniform) {
@@ -112,6 +112,7 @@
             Context.Current.pre_render_callbacks.splice(index, 1);
     }
+    /* REMOVED, we don't have Lit shader support for now
     async waitForLighting() {
         const context: Context = Context.Current;
         if (!context) {
@@ -136,6 +137,7 @@
         // this.uniformsNeedUpdate = true;
         if (debug) console.log("Set environment lighting", this.uniforms);
     }
+    */
     private _sphericalHarmonicsName = "unity_SpecCube0";

src/engine/codegen/register_types.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore.js"
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.js";
 import { ActionBuilder } from "../../engine-components/export/usdz/extensions/behavior/BehavioursBuilder.js";
@@ -219,7 +219,7 @@
 import { XRGrabRendering } from "../../engine-components/webxr/WebXRGrabRendering.js";
 import { XRRig } from "../../engine-components/webxr/WebXRRig.js";
 import { XRState } from "../../engine-components/XRFlag.js";
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("ActionBuilder", ActionBuilder);