Needle Engine 3.32.14-alpha

Changes between version 3.32.13-alpha and 3.32.14-alpha

src/engine-components/api.ts CHANGED Viewed

@@ -17,4 +17,4 @@
 import "./AnimationUtils.js"
 export { ParticleSystemBaseBehaviour, type QParticle, type QParticleBehaviour } from "./ParticleSystem.js"
+export { ParticleSystemShapeType } from "./ParticleSystemModules.js"

src/engine-components/AudioSource.ts CHANGED Viewed

@@ -327,7 +327,7 @@
         }
     }
-    private onNewClip(clip?: string | MediaStream) {
+    private async onNewClip(clip?: string | MediaStream) {
         if (clip) this.clip = clip;
         if (typeof clip === "string") {
             if (debug)
@@ -343,7 +343,10 @@
                 this._lastClipStartedLoading = clip;
                 if (debug)
                     console.log("load audio", clip);
-                this.audioLoader.load(clip, this.createAudio, () => { }, console.error);
+                const buffer = await this.audioLoader.loadAsync(clip).catch(console.error);
+                this._lastClipStartedLoading = null;
+                if (buffer)
+                    this.createAudio(buffer);
             }
             else console.warn("Unsupported audio clip type", clip)
         }

src/engine/debug/debug.ts CHANGED Viewed

@@ -1,10 +1,13 @@
 import { isLocalNetwork } from "../engine_networking_utils.js";
+import { getParam } from "../engine_utils.js";
 import { showDebugConsole } from "./debug_console.js";
 import { addLog, LogType, setAllowOverlayMessages } from "./debug_overlay.js";
 export { showDebugConsole }
 export { LogType, setAllowOverlayMessages };
+const noDevLogs = getParam("nodevlogs");
 /** Displays a debug message on screen for a certain amount of time */
 export function showBalloonMessage(text: string, logType: LogType = LogType.Log): void {
     addLog(logType, text);
@@ -22,6 +25,7 @@
 /** True when the application runs on a local url */
 export function isDevEnvironment(): boolean {
+    if (noDevLogs) return false;
     if (_manuallySetDevEnvironment !== undefined) return _manuallySetDevEnvironment;
     return isLocalNetwork();
 }

src/engine/engine_element_loading.ts CHANGED Viewed

@@ -228,6 +228,18 @@
             }
         }
+        const container = document.createElement("div");
+        container.style.cssText = `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        opacity: 0;
+        transition: opacity 1.2s ease-in-out .2s;
+        `;
+        setTimeout(() => { container.style.opacity = "1"; }, 1);
+        this._loadingElement.appendChild(container);
         const loadingBarContainer = document.createElement("div");
         const maxWidth = 30;
@@ -270,8 +282,8 @@
             logo.style.pointerEvents = "all";
             logo.addEventListener("click", () => window.open("https://needle.tools", "_blank"));
         }
-        this._loadingElement.appendChild(logo);
-        this._loadingElement.appendChild(loadingBarContainer);
+        container.appendChild(logo);
+        container.appendChild(loadingBarContainer);
         this._loadingBar = document.createElement("div");
@@ -302,7 +314,7 @@
         this._loadingTextContainer.style.display = "flex";
         this._loadingTextContainer.style.justifyContent = "center";
         this._loadingTextContainer.style.marginTop = "1.2em";
-        this._loadingElement.appendChild(this._loadingTextContainer);
+        container.appendChild(this._loadingTextContainer);
         const messageContainer = document.createElement("div");
         this._messageContainer = messageContainer;
@@ -312,7 +324,7 @@
         messageContainer.style.fontWeight = "200";
         // messageContainer.style.border = "1px solid rgba(255,255,255,.1)";
         messageContainer.style.justifyContent = "center";
-        this._loadingElement.appendChild(messageContainer);
+        container.appendChild(messageContainer);
         if (hasLicense && this._element) {
             const loadingTextColor = this._element.getAttribute("loading-text-color");
@@ -321,7 +333,7 @@
             }
         }
-        this.handleRuntimeLicense(this._loadingElement);
+        this.handleRuntimeLicense(container);
         return this._loadingElement;
     }

src/engine/engine_utils.ts CHANGED Viewed

@@ -674,6 +674,5 @@
         correctLevel: QRCODE.CorrectLevel.M,
         ...args,
     });
-    console.log("QRCode generated for " + args.text);
     return target;
 }

src/engine/xr/NeedleXRController.ts CHANGED Viewed

@@ -157,17 +157,32 @@
     }
     private readonly _gripWorldQuaternion: Quaternion = new Quaternion();
-    /** Controller ray position in worldspace */
+    /** Controller ray position in worldspace (this value is calculated once per frame by default - call `updateRayWorldPosition` to force an update) */
     get rayWorldPosition() {
         return getTempVector(this._rayWorldPosition);
     }
     private readonly _rayWorldPosition: Vector3 = new Vector3();
+    /** Recalculates the ray world position */
+    updateRayWorldPosition() {
+        const parent = this.xr.context.mainCamera?.parent;
+        this._rayWorldPosition.copy(this._rayPosition);
+        if (parent) this._rayWorldPosition.applyMatrix4(parent.matrixWorld);
+    }
-    /** Controller ray rotation in wordspace */
+    /** Controller ray rotation in wordspace (this value is calculated once per frame by default - call `updateRayWorldQuaternion` to force an update) */
     get rayWorldQuaternion() {
         return getTempQuaternion(this._rayWorldQuaternion);
     }
     private readonly _rayWorldQuaternion: Quaternion = new Quaternion();
+    /** Recalculates the ray world quaternion */
+    updateRayWorldQuaternion() {
+        const parent = this.xr.context.mainCamera?.parent;
+        const parentWorldQuaternion = parent ? getWorldQuaternion(parent) : undefined;
+        this._rayWorldQuaternion.copy(this._rayQuaternion)
+            // flip forward because we want +Z to be forward
+            .multiply(flipForwardQuaternion);
+        if (parentWorldQuaternion) this._rayWorldQuaternion.premultiply(parentWorldQuaternion)
+    }
     /** The controller ray in worldspace */
     get ray(): Ray {
@@ -324,12 +339,8 @@
         if (parentWorldQuaternion) this._gripWorldQuaternion.premultiply(parentWorldQuaternion)
         // RAY
-        this._rayWorldPosition.copy(this._rayPosition);
-        if (parent) this._rayWorldPosition.applyMatrix4(parent.matrixWorld);
-        this._rayWorldQuaternion.copy(this._rayQuaternion)
-            // flip forward because we want +Z to be forward
-            .multiply(flipForwardQuaternion);
-        if (parentWorldQuaternion) this._rayWorldQuaternion.premultiply(parentWorldQuaternion)
+        this.updateRayWorldPosition();
+        this.updateRayWorldQuaternion();
     }
     /** Called when the input source disconnects */

src/engine-components/ParticleSystem.ts CHANGED Viewed

@@ -429,7 +429,7 @@
         const simulationSpeed = this.system.main.simulationSpeed;
         particle.startSpeed = this.system.main.startSpeed.evaluate(Math.random(), Math.random());
-        particle.velocity.copy(this.system.shape.getDirection(particle.position)).multiplyScalar(particle.startSpeed);
+        particle.velocity.copy(this.system.shape.getDirection(particle, particle.position)).multiplyScalar(particle.startSpeed);
         if (this.system.inheritVelocity?.enabled) {
             this.system.inheritVelocity.applyInitial(particle.velocity);
         }

@@ -1,15 +1,18 @@
 import { createNoise4D, type NoiseFunction4D } from 'simplex-noise';
-import { Euler, Matrix4, Object3D, Quaternion, Vector2, Vector3, Vector4 } from "three";
+import { BufferGeometry, Euler, Matrix4, Mesh, Object3D, Quaternion, Triangle, Vector2, Vector3, Vector4 } from "three";
 import type { EmitterShape, Particle, ShapeJSON } from "three.quarks";
+import { isDevEnvironment } from '../engine/debug/index.js';
 import { Gizmos } from "../engine/engine_gizmos.js";
 import { Mathf } from "../engine/engine_math.js";
 import { serializable } from "../engine/engine_serialization.js";
 import { Context } from "../engine/engine_setup.js";
+import { getTempVector, getWorldQuaternion } from '../engine/engine_three_utils.js';
 import type { Vec2, Vec3 } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
 import { AnimationCurve } from "./AnimationCurve.js";
 import { RGBAColor } from "./js-extensions/RGBAColor.js";
+import { MeshRenderer } from './Renderer.js';
 const debug = getParam("debugparticles");
@@ -500,6 +503,13 @@
     }
 }
+export enum ParticleSystemMeshShapeType {
+    Vertex = 0,
+    Edge = 1,
+    Triangle = 2,
+}
 export class ShapeModule implements EmitterShape {
     // Emittershape start
@@ -507,7 +517,7 @@
         return ParticleSystemShapeType[this.shapeType];
     }
     initialize(particle: Particle): void {
-        this.getPosition();
+        this.onInitialize(particle);
         particle.position.copy(this._vector);
     }
     toJSON(): ShapeJSON {
@@ -557,6 +567,30 @@
     @serializable()
     randomPositionAmount!: number;
+    /** Controls if particles should spawn off vertices, faces or edges. `shapeType` must be set to `MeshRenderer` */
+    @serializable()
+    meshShapeType?: ParticleSystemMeshShapeType;
+    /** When assigned and `shapeType` is set to `MeshRenderer` particles will spawn using a mesh in the scene.
+     * Use the `meshShapeType` to choose if particles should be spawned from vertices, faces or edges
+     * To re-assign use the `setMesh` function to cache the mesh and geometry
+     * */
+    @serializable(MeshRenderer)
+    meshRenderer?: MeshRenderer;
+    private _meshObj?: Mesh;
+    private _meshGeometry?: BufferGeometry;
+    setMesh(mesh: MeshRenderer) {
+        this.meshRenderer = mesh;
+        if (mesh) {
+            this._meshObj = mesh.sharedMeshes[Math.floor(Math.random() * mesh.sharedMeshes.length)];
+            this._meshGeometry = this._meshObj.geometry;
+        }
+        else {
+            this._meshObj = undefined;
+            this._meshGeometry = undefined;
+        }
+    }
     private system!: IParticleSystem;
     private _space?: ParticleSystemSimulationSpace;
     private readonly _worldSpaceMatrix: Matrix4 = new Matrix4();
@@ -607,12 +641,13 @@
     /** initializer implementation */
     private _vector: Vector3 = new Vector3(0, 0, 0);
     private _temp: Vector3 = new Vector3(0, 0, 0);
-    /** called by nebula on initialize */
-    get vector() {
-        return this._vector;
-    }
-    getPosition(): void {
+    private _triangle: Triangle = new Triangle();
+    onInitialize(particle: Particle): void {
         this._vector.set(0, 0, 0);
+        // remove mesh from particle in case it got destroyed (we dont want to keep a reference to a destroyed mesh in the particle system)
+        particle["mesh"] = undefined;
+        particle["mesh_geometry"] = undefined;
         const pos = this._temp.copy(this.position);
         const isWorldSpace = this._space === ParticleSystemSimulationSpace.World;
@@ -639,8 +674,64 @@
                 case ParticleSystemShapeType.Circle:
                     this.randomCirclePoint(this.position, radius, this.radiusThickness, this.arc, this._vector);
                     break;
+                case ParticleSystemShapeType.MeshRenderer:
+                    const renderer = this.meshRenderer;
+                    if (renderer?.destroyed == false) this.setMesh(renderer);
+                    const mesh = particle["mesh"] = this._meshObj;
+                    const geometry = particle["mesh_geometry"] = this._meshGeometry;
+                    if (mesh && geometry) {
+                        switch (this.meshShapeType) {
+                            case ParticleSystemMeshShapeType.Vertex:
+                                {
+                                    const vertices = geometry.getAttribute("position");
+                                    const index = Math.floor(Math.random() * vertices.count);
+                                    this._vector.fromBufferAttribute(vertices, index);
+                                    this._vector.applyMatrix4(mesh.matrixWorld);
+                                    particle["mesh_normal"] = index;
+                                }
+                                break;
+                            case ParticleSystemMeshShapeType.Edge:
+                                break;
+                            case ParticleSystemMeshShapeType.Triangle:
+                                {
+                                    const faces = geometry.index;
+                                    if (faces) {
+                                        let u = Math.random();
+                                        let v = Math.random();
+                                        if (u + v > 1) {
+                                            u = 1 - u;
+                                            v = 1 - v;
+                                        }
+                                        const faceIndex = Math.floor(Math.random() * (faces.count / 3));
+                                        let i0 = faceIndex * 3;
+                                        let i1 = faceIndex * 3 + 1;
+                                        let i2 = faceIndex * 3 + 2;
+                                        i0 = faces.getX(i0);
+                                        i1 = faces.getX(i1);
+                                        i2 = faces.getX(i2);
+                                        const positionAttribute = geometry.getAttribute("position");
+                                        this._triangle.a.fromBufferAttribute(positionAttribute, i0);
+                                        this._triangle.b.fromBufferAttribute(positionAttribute, i1);
+                                        this._triangle.c.fromBufferAttribute(positionAttribute, i2);
+                                        this._vector
+                                            .set(0, 0, 0)
+                                            .addScaledVector(this._triangle.a, u)
+                                            .addScaledVector(this._triangle.b, v)
+                                            .addScaledVector(this._triangle.c, 1 - (u + v));
+                                        this._vector.applyMatrix4(mesh.matrixWorld);
+                                        particle["mesh_normal"] = faceIndex;
+                                    }
+                                }
+                                break;
+                        }
+                    }
+                    break;
                 default:
                     this._vector.set(0, 0, 0);
+                    if (isDevEnvironment() && !globalThis["__particlesystem_shapetype_unsupported"]) {
+                        console.warn("ParticleSystem ShapeType is not supported:", ParticleSystemShapeType[this.shapeType]);
+                        globalThis["__particlesystem_shapetype_unsupported"] = true;
+                    }
                     break;
                 // case ParticleSystemShapeType.Hemisphere:
                 //     randomSpherePoint(this.position.x, this.position.y, this.position.z, this.radius, this.radiusThickness, 180, this._vector);
@@ -666,7 +757,7 @@
     private _dir: Vector3 = new Vector3();
-    getDirection(pos: Vec3): Vector3 {
+    getDirection(particle: Particle, pos: Vec3): Vector3 {
         if (!this.enabled) {
             this._dir.set(0, 0, 1);
             return this._dir;
@@ -691,6 +782,47 @@
                 else
                     this._dir.sub(this.position)
                 break;
+            case ParticleSystemShapeType.MeshRenderer:
+                const mesh = particle["mesh"];
+                const geometry = particle["mesh_geometry"];
+                if (mesh && geometry) {
+                    switch (this.meshShapeType) {
+                        case ParticleSystemMeshShapeType.Vertex:
+                            {
+                                const normal = geometry.getAttribute("normal");
+                                const index = particle["mesh_normal"];
+                                this._dir.fromBufferAttribute(normal, index);
+                            }
+                            break;
+                        case ParticleSystemMeshShapeType.Edge:
+                            break;
+                        case ParticleSystemMeshShapeType.Triangle:
+                            {
+                                const faces = geometry.index;
+                                if (faces) {
+                                    const index = particle["mesh_normal"];
+                                    const i0 = faces.getX(index * 3);
+                                    const i1 = faces.getX(index * 3 + 1);
+                                    const i2 = faces.getX(index * 3 + 2);
+                                    const positionAttribute = geometry.getAttribute("position");
+                                    const a = getTempVector();
+                                    const b = getTempVector();
+                                    const c = getTempVector();
+                                    a.fromBufferAttribute(positionAttribute, i0);
+                                    b.fromBufferAttribute(positionAttribute, i1);
+                                    c.fromBufferAttribute(positionAttribute, i2);
+                                    a.sub(b);
+                                    c.sub(b);
+                                    a.cross(c);
+                                    this._dir.copy(a).multiplyScalar(-1);
+                                    const rot = getWorldQuaternion(mesh);
+                                    this._dir.applyQuaternion(rot)
+                                }
+                            }
+                            break;
+                    }
+                }
+                break;
             default:
                 this._dir.set(0, 0, 1);
                 break;

src/engine-components/Renderer.ts CHANGED Viewed

@@ -241,7 +241,11 @@
     // private _materialProperties: Array<MaterialProperties> | undefined = undefined;
     private _lightmaps?: RendererLightmap[];
-    get sharedMesh(): Mesh | undefined {
+    /** Get the mesh Object3D for this renderer
+     * Warn: if this is a multimaterial object it will return the first mesh only
+     * @returns the mesh object3D.
+     * */
+    get sharedMesh(): Mesh | SkinnedMesh | undefined {
         if (this.gameObject.type === "Mesh") {
             return this.gameObject as unknown as Mesh
         }
@@ -254,6 +258,26 @@
         return undefined;
     }
+    private readonly _sharedMeshes: Mesh[] = [];
+    /** Get all the mesh Object3D for this renderer
+     * @returns an array of mesh object3D.
+     */
+    get sharedMeshes(): Mesh[] {
+        if (this.destroyed || !this.gameObject) return this._sharedMeshes;
+        this._sharedMeshes.length = 0;
+        if (this.gameObject.type === "Group") {
+            for (const ch of this.gameObject.children) {
+                if (ch.type === "Mesh" || ch.type === "SkinnedMesh") {
+                    this._sharedMeshes.push(ch as Mesh);
+                }
+            }
+        }
+        else if (this.gameObject.type === "Mesh" || this.gameObject.type === "SkinnedMesh") {
+            this._sharedMeshes.push(this.gameObject as unknown as Mesh);
+        }
+        return this._sharedMeshes;
+    }
     get sharedMaterial(): Material {
         return this.sharedMaterials[0];
     }
@@ -518,6 +542,9 @@
     }
     onEnable() {
+        // ensure shared meshes are initialized
+        const _ = this.sharedMeshes;
         this.setVisibility(true);
         if (this._isInstancingEnabled) {
@@ -1009,7 +1036,7 @@
             material.defines["USE_INSTANCING"] = true;
             material.needsUpdate = true;
         }
         context.pre_render_callbacks.push(this.onBeforeRender);
         context.post_render_callbacks.push(this.onAfterRender);
     }

src/engine-components/webxr/controllers/XRControllerModel.ts CHANGED Viewed

@@ -53,7 +53,11 @@
             if (controller.hand) {
                 if (this.createHandModel) {
                     const res = await this.loadHandModel(controller);
-                    if (!res || !controller.connected) return;
+                    if (!res || !controller.connected) {
+                        res?.handObject?.removeFromParent();
+                        res?.handmesh?.controller?.removeFromParent();
+                        return;
+                    }
                     this._models[controller.index] = { controller: controller, model: res.handObject, handmesh: res.handmesh };
                     this.scene.add(res.handObject);
                 }
@@ -215,6 +219,9 @@
                 if (NeedleXRSession.active?.isPassThrough)
                     this.makeOccluder(child);
             });
+            if (!controller.connected) {
+                object.removeFromParent();
+            }
         });
         if (debug) handObject.add(new AxesHelper(.5));

src/engine-components/webxr/controllers/XRControllerMovement.ts CHANGED Viewed

@@ -60,10 +60,6 @@
         // in AR pass through mode we dont want to move the rig
         if (args.xr.isPassThrough) {
-            if (this.showRays)
-                this.renderRays(args.xr);
-            if (this.showHits)
-                this.renderHits(args.xr);
             return;
         }
@@ -78,10 +74,6 @@
                 this.onHandleTeleport(teleportController, rig.gameObject);
         }
-        if (this.showRays)
-            this.renderRays(args.xr);
-        if (this.showHits)
-            this.renderHits(args.xr);
     }
     onLeaveXR(_: NeedleXREventArgs): void {
         for (const line of this._lines) {
@@ -92,6 +84,15 @@
         }
     }
+    onBeforeRender(): void {
+        if (this.context.xr?.running) {
+            if (this.showRays)
+                this.renderRays(this.context.xr);
+            if (this.showHits)
+                this.renderHits(this.context.xr);
+        }
+    }
     protected onHandleMovement(controller: NeedleXRController, rig: IGameObject) {
         const stick = controller.getStick("xr-standard-thumbstick");
         const vec = new Vector3(stick.x, 0, stick.y);
@@ -185,6 +186,8 @@
                 this._lines[i] = line;
             }
+            ctrl.updateRayWorldPosition();
+            ctrl.updateRayWorldQuaternion();
             const pos = ctrl.rayWorldPosition;
             const rot = ctrl.rayWorldQuaternion;
             line.position.copy(pos);