@needle-tools/engine 3.0.1-alpha.2 → 3.0.1-alpha.3

package/package.json

@@ -1,10 +1,11 @@
 {
     "name": "@needle-tools/engine",
-    "version": "3.0.1-alpha.2",
+    "version": "3.0.1-alpha.3",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "exports": {
         ".": {
+            "development": "./src/needle-engine.ts",
             "import": "./lib/needle-engine.js",
             "require": "./dist/needle-engine.umd.cjs"
         },

package/plugins/vite/alias.js

@@ -53,12 +53,15 @@ export const needleViteAlias = (command, config, userSettings) => {
         // introduced in 89a50718c38940abb99ee16c5e029065e41d7d65
         const res = path.resolve(projectDir, 'node_modules', name);
         if (typeof cb !== "function") cb = null;
+        const isDevEnvironment = process.env.NODE_ENV === "development";
         if (existsSync(res)) {
             aliasDict[name] = (packageName, index, path) => {
-                if (cb !== null) {
+                if (cb !== null && !isDevEnvironment) {
                     const overrideResult = cb(res, packageName, index, path);
                     if (overrideResult !== undefined)
-                        return overrideResult;
+                        if (existsSync(overrideResult)) {
+                            return overrideResult;
+                        }
                 }
                 return res;
             }

package/src/engine/engine_input.ts

@@ -242,28 +242,54 @@ export class Input extends EventTarget {
         }
         return null;
     }
-    isKeyDown(keyCode: KeyCode | string | number) {
-        if (typeof keyCode === "number") {
-            console.warn("Use of keycode as number is not recommended, please use KeyCode or string instead");
-            keyCode = String.fromCharCode(keyCode);
+    isKeyDown(keyCode: KeyCode | string) {
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyDown(code)) return true;
+            return false;
         }
-        // console.log( this.keysPressed[keyCode]?.frame, time.frameCount);
         return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.startFrame === this.context.time.frameCount && this.keysPressed[keyCode].pressed;
     }
-    isKeyUp(keyCode: KeyCode | string | number) {
-        if (typeof keyCode === "number") {
-            console.warn("Use of keycode as number is not recommended, please use KeyCode or string instead");
-            keyCode = String.fromCharCode(keyCode);
+    isKeyUp(keyCode: KeyCode | string) {
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyUp(code)) return true;
+            return false;
         }
         return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.frame === this.context.time.frameCount && !this.keysPressed[keyCode].pressed;
     }
-    isKeyPressed(keyCode: KeyCode | string | number) {
-        if (typeof keyCode === "number") {
-            keyCode = String.fromCharCode(keyCode);
+    isKeyPressed(keyCode: KeyCode | string) {
+        const codes = this.getCodeForCommonKeyName(keyCode);
+        if (codes !== null) {
+            for (const code of codes) if (this.isKeyPressed(code)) return true;
+            return false;
         }
         return this.context.application.isVisible && this.context.application.hasFocus && this.keysPressed[keyCode]?.pressed;// && time.frameCount - this.keysPressed[keyCode].frame < 100;
     }
 
+    // utility helper for mapping common names to actual codes; e.g. "Shift" -> "ShiftLeft" and "ShiftRight" or "a" -> "KeyA"
+    private getCodeForCommonKeyName(keyName: string): string[] | null {
+        if (keyName.length === 1) {
+            // check if this is a digit
+            if (keyName >= "0" && keyName <= "9")
+                return ["Digit" + keyName];
+            // check if this is a letter
+            if (keyName >= "a" && keyName <= "z")
+                return ["Key" + keyName.toUpperCase()];
+            if (keyName == " ")
+                return ["Space"];
+        }
+        switch (keyName) {
+            case "Shift":
+                return ["ShiftLeft", "ShiftRight"];
+            case "Control":
+                return ["ControlLeft", "ControlRight"];
+            case "Alt":
+                return ["AltLeft", "AltRight"];
+        }
+        return null;
+    }
+
     createPointerDown(args: PointerEventArgs) {
         if (debug) showBalloonMessage("Create Pointer down");
         this.onDown(args);
@@ -350,20 +376,20 @@ export class Input extends EventTarget {
         return evt.target === this.context.renderer.domElement;
     }
 
-    private keysPressed: { [key: number]: { pressed: boolean, frame: number, startFrame: number, key: string } } = {};
+    private keysPressed: { [key: KeyCode | string]: { pressed: boolean, frame: number, startFrame: number, key: string, code: KeyCode | string } } = {};
 
     private onKeyDown(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const ex = this.keysPressed[evt.key];
+        const ex = this.keysPressed[evt.code];
         if (ex && ex.pressed) return;
-        this.keysPressed[evt.key] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key };
+        this.keysPressed[evt.code] = { pressed: true, frame: this.context.time.frameCount + 1, startFrame: this.context.time.frameCount + 1, key: evt.key, code: evt.code };
         this.onDispatchEvent(InputEvents.KeyDown, new KeyEventArgs(evt));
     }
     private onKeyPressed(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const p = this.keysPressed[evt.key];
+        const p = this.keysPressed[evt.code];
         if (!p) return;
         p.pressed = true;
         p.frame = this.context.time.frameCount + 1;
@@ -373,7 +399,7 @@ export class Input extends EventTarget {
     private onKeyUp(evt: KeyboardEvent) {
         if (!this.context.application.hasFocus)
             return;
-        const p = this.keysPressed[evt.key];
+        const p = this.keysPressed[evt.code];
         if (!p) return;
         p.pressed = false;
         p.frame = this.context.time.frameCount + 1;
@@ -478,6 +504,8 @@ export class Input extends EventTarget {
 
         while (evt.button >= this._pointerPositionDown.length) this._pointerPositionDown.push(new THREE.Vector2());
         this._pointerPositionDown[evt.button].set(evt.clientX, evt.clientY);
+        while (evt.button >= this._pointerPositions.length) this._pointerPositions.push(new THREE.Vector2());
+        this._pointerPositions[evt.button].set(evt.clientX, evt.clientY);
 
         if (evt.button >= this._pointerDownTime.length) this._pointerDownTime.push(0);
         this._pointerDownTime[evt.button] = this.context.time.time;
@@ -552,8 +580,8 @@ export class Input extends EventTarget {
 
         const lf = this._pointerPositionsLastFrame[evt.button];
         lf.copy(this._pointerPositions[evt.button]);
-        const dx = evt.movementX !== undefined ? evt.movementX : evt.clientX - lf.x;
-        const dy = evt.movementY !== undefined ? evt.movementY : evt.clientY - lf.y;
+        const dx = evt.clientX - lf.x;
+        const dy = evt.clientY - lf.y;
         this._pointerPositionsDelta[evt.button].set(dx, dy);
 
         this._pointerPositions[evt.button].x = evt.clientX;
@@ -616,95 +644,93 @@ export class Input extends EventTarget {
     }
 }
 
-
-
-export enum KeyCode {
-    BACKSPACE = "Backspace",
-    TAB = "Tab",
-    ENTER = "Enter",
-    SHIFT = "Shift",
-    CTRL = "Control",
-    ALT = "Alt",
-    PAUSE = "Pause",
-    CAPS_LOCK = "CapsLock",
-    ESCAPE = "Escape",
-    SPACE = " ",
-    PAGE_UP = "PageUp",
-    PAGE_DOWN = "PageDown",
-    END = "End",
-    HOME = "Home",
-    LEFT_ARROW = "ArrowLeft",
-    UP_ARROW = "ArrowUp",
-    RIGHT_ARROW = "ArrowRight",
-    DOWN_ARROW = "ArrowDown",
-    INSERT = "Insert",
-    DELETE = "Delete",
-    KEY_0 = "0",
-    KEY_1 = "1",
-    KEY_2 = "2",
-    KEY_3 = "3",
-    KEY_4 = "4",
-    KEY_5 = "5",
-    KEY_6 = "6",
-    KEY_7 = "7",
-    KEY_8 = "8",
-    KEY_9 = "9",
-    KEY_A = "a",
-    KEY_B = "b",
-    KEY_C = "c",
-    KEY_D = "d",
-    KEY_E = "e",
-    KEY_F = "f",
-    KEY_G = "g",
-    KEY_H = "h",
-    KEY_I = "i",
-    KEY_K = "k",
-    KEY_J = "j",
-    KEY_L = "l",
-    KEY_M = "m",
-    KEY_N = "n",
-    KEY_O = "o",
-    KEY_P = "p",
-    KEY_Q = "q",
-    KEY_R = "r",
-    KEY_S = "s",
-    KEY_T = "t",
-    KEY_U = "u",
-    KEY_V = "v",
-    KEY_W = "w",
-    KEY_X = "x",
-    KEY_Z = "z",
-    KEY_Y = "y",
-    SELECT = "Select",
-    NUMPAD_0 = "Numpad0",
-    NUMPAD_1 = "Numpad1",
-    NUMPAD_2 = "Numpad2",
-    NUMPAD_3 = "Numpad3",
-    NUMPAD_4 = "Numpad4",
-    NUMPAD_5 = "Numpad5",
-    NUMPAD_6 = "Numpad6",
-    NUMPAD_7 = "Numpad7",
-    NUMPAD_8 = "Numpad8",
-    NUMPAD_9 = "Numpad9",
-    MULTIPLY = "Multiply",
-    ADD = "Add",
-    SUBTRACT = "Subtract",
-    DECIMAL = "Decimal",
-    DIVIDE = "Divide",
-    F1 = "F1",
-    F2 = "F2",
-    F3 = "F3",
-    F4 = "F4",
-    F5 = "F5",
-    F6 = "F6",
-    F7 = "F7",
-    F8 = "F8",
-    F9 = "F9",
-    F10 = "F10",
-    F11 = "F11",
-    F12 = "F12"
-};
-
+export declare type KeyCode = 
+    | "Tab"
+    | "Enter"
+    | "ShiftLeft"
+    | "ShiftRight"
+    | "ControlLeft"
+    | "ControlRight"
+    | "AltLeft"
+    | "AltRight"
+    | "Pause"
+    | "CapsLock"
+    | "Escape"
+    | "Space"
+    | "PageUp"
+    | "PageDown"
+    | "End"
+    | "Home"
+    | "ArrowLeft"
+    | "ArrowUp"
+    | "ArrowRight"
+    | "ArrowDown"
+    | "Insert"
+    | "Delete"
+    | "Digit0"
+    | "Digit1"
+    | "Digit2"
+    | "Digit3"
+    | "Digit4"
+    | "Digit5"
+    | "Digit6"
+    | "Digit7"
+    | "Digit8"
+    | "Digit9"
+    | "KeyA"
+    | "KeyB"
+    | "KeyC"
+    | "KeyD"
+    | "KeyE"
+    | "KeyF"
+    | "KeyG"
+    | "KeyH"
+    | "KeyI"
+    | "KeyJ"
+    | "KeyK"
+    | "KeyL"
+    | "KeyM"
+    | "KeyN"
+    | "KeyO"
+    | "KeyP"
+    | "KeyQ"
+    | "KeyR"
+    | "KeyS"
+    | "KeyT"
+    | "KeyU"
+    | "KeyV"
+    | "KeyW"
+    | "KeyX"
+    | "KeyY"
+    | "KeyZ"
+    | "Select"
+    | "Numpad0"
+    | "Numpad1"
+    | "Numpad2"
+    | "Numpad3"
+    | "Numpad4"
+    | "Numpad5"
+    | "Numpad6"
+    | "Numpad7"
+    | "Numpad8"
+    | "Numpad9"
+    | "Multiply"
+    | "Add"
+    | "Subtract"
+    | "Decimal"
+    | "Divide"
+    | "F1"
+    | "F2"
+    | "F3"
+    | "F4"
+    | "F5"
+    | "F6"
+    | "F7"
+    | "F8"
+    | "F9"
+    | "F10"
+    | "F11"
+    | "F12";
 
     // KEY_1 = 49,
     // KEY_2 = 50,

package/src/engine/engine_physics.ts

@@ -263,7 +263,10 @@ export class Physics {
         const ray = this.getPhysicsRay(this.rapierRay, origin, direction);
         if (!ray) return null;
 
-        const hit = this.world?.castRay(ray, maxDistance, solid);
+        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);
+        });
         if (hit) {
             const point = ray.pointAt(hit.toi);
             const vec = this.raycastVectorsBuffer.get();
@@ -274,6 +277,28 @@ export class Physics {
         return null;
     }
 
+    public raycastPhysicsFastAndGetNormal(origin: Vec2 | Vec3, direction: Vec3 | undefined = undefined, maxDistance: number = Infinity, solid: boolean = true)
+    : null | { point: Vector3, normal: Vector3, collider: ICollider } {
+
+        const ray = this.getPhysicsRay(this.rapierRay, origin, direction);
+        if (!ray) return null;
+        
+        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);
+        });
+        if (hit) {
+            const point = ray.pointAt(hit.toi);
+            const normal = hit.normal;
+            const vec = this.raycastVectorsBuffer.get();
+            const nor = this.raycastVectorsBuffer.get();
+            vec.set(point.x, point.y, point.z);
+            nor.set(normal.x, normal.y, normal.z);
+            return { point: vec, normal: nor, collider: hit.collider[$componentKey] };
+        }
+        return null;
+    }
+
     private getPhysicsRay(ray: RAPIER.Ray, origin: Vec2 | Vec3, direction: Vec3 | undefined = undefined): RAPIER.Ray | null {
         const cam = this.context.mainCamera;
         // if we get origin in 2d space we need to project it to 3d space
@@ -283,11 +308,13 @@ export class Physics {
                 return null;
             }
             const vec3 = this.raycastVectorsBuffer.get();
+            vec3.x = origin.x;
+            vec3.y = origin.y;
+            vec3.z = 0;
             // if the origin is in screen space we need to convert it to raycaster space
-            if (origin.x > 1 || origin.y > 1 || origin.y < -1 || origin.x < -1) {
-                this.context.input.convertScreenspaceToRaycastSpace(origin);
+            if (vec3.x > 1 || vec3.y > 1 || vec3.y < -1 || vec3.x < -1) {
+                this.context.input.convertScreenspaceToRaycastSpace(vec3);
             }
-            vec3.set(origin.x, origin.y, -1);
             vec3.unproject(cam);
             origin = vec3;
         }
@@ -466,9 +493,15 @@ export class Physics {
         if (scale.z < 0)
             scale.z = Math.abs(scale.z);
 
+        // prevent zero scale - seems normals are flipped otherwise
+        if (scale.x == 0) scale.x = 0.0000001;
+        if (scale.y == 0) scale.y = 0.0000001;
+        if (scale.z == 0) scale.z = 0.0000001;
+
         const desc = ColliderDesc.cuboid(scale.x, scale.y, scale.z);
         // const objectLayerMask = collider.gameObject.layers.mask;
         // const mask = objectLayerMask & ~2;
+        // TODO: https://rapier.rs/docs/user_guides/javascript/colliders/#collision-groups-and-solver-groups
         // desc.setCollisionGroups(objectLayerMask);
         this.createCollider(collider, desc, center);
     }
@@ -612,6 +645,10 @@ export class Physics {
         col[$componentKey] = collider;
         collider[$bodyKey] = col;
         col.setActiveEvents(ActiveEvents.COLLISION_EVENTS);
+        
+        // const objectLayerMask = collider.gameObject.layers.mask;
+        // const mask = objectLayerMask & ~2;
+        // col.setCollisionGroups(objectLayerMask);
         this.objects.push(collider);
         this.bodies.push(col);
         return col;

package/src/engine/engine_types.ts

@@ -178,6 +178,7 @@ export declare interface ICamera extends IComponent {
     backgroundColor: RGBAColor | null;
     backgroundBlurriness: number | undefined;
     clearFlags: number;
+    cullingMask: number;
     aspect: number;
     fieldOfView?: number;
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;

package/src/engine/engine_utils.ts

@@ -26,14 +26,10 @@ export class CircularBuffer<T> {
     }
 
     get(): T {
-        let i = this._index++;
-        if (i >= this._cache.length) {
-            if (i >= this._maxSize) {
-                i = this._index = 0;
-            }
-            else {
-                this._cache.push(this._factory());
-            }
+        const i = this._index % this._maxSize;
+        this._index++;
+        if (this._cache.length <= i) {
+            this._cache[i] = this._factory();
         }
         return this._cache[i];
     }

package/src/engine-components/CharacterController.ts

@@ -120,7 +120,7 @@ export class CharacterControllerInput extends Behaviour {
         // if (jumpDown) this._jumpDownTime = this.context.time.time;
         // const jumpUp = this.context.input.isKeyUp(" ");
 
-        const step = forward ? 1 : 0 + backward ? -1 : 0;
+        const step = (forward ? 1 : 0) + (backward ? -1 : 0);
         this._currentSpeed.z += step * this.movementSpeed * this.context.time.deltaTime;
 
         // if (!this.controller || this.controller.isGrounded)
@@ -132,7 +132,7 @@ export class CharacterControllerInput extends Behaviour {
         if (this.controller) this.controller.move(this._temp);
         else this.gameObject.position.add(this._temp);
 
-        const rotation = rotateLeft ? 1 : 0 + rotateRight ? -1 : 0;
+        const rotation = (rotateLeft ? 1 : 0) + (rotateRight ? -1 : 0);
         this._currentAngularSpeed.y += Mathf.toRadians(rotation * this.rotationSpeed) * this.context.time.deltaTime;
         if (this.lookForward && Math.abs(this._currentAngularSpeed.y) < .01) {
             const forwardVector = this.context.mainCameraComponent!.forward;

package/src/engine-components/DragControls.ts

@@ -383,10 +383,9 @@ class DragHelper {
     onUpdate(_context: Context) {
         if (!this._context) return;
 
-
-        const mainKey = KeyCode.SPACE;
-        const secondaryKey = KeyCode.KEY_D;
-        const scaleKey = KeyCode.KEY_S;
+        const mainKey: KeyCode = "Space";
+        const secondaryKey: KeyCode = "KeyD";
+        const scaleKey: KeyCode = "KeyS";
 
         const isRotateKeyPressed = this._context?.input.isKeyPressed(mainKey) || this._context?.input.isKeyPressed(secondaryKey);
         const isRotating = this._context.input.getTouchesPressedCount() >= 2 || isRotateKeyPressed;

package/src/engine-components/SpectatorCamera.ts

@@ -7,7 +7,7 @@ import { AvatarMarker } from "./WebXRAvatar";
 import { XRStateFlag } from "./XRFlag";
 import { SmoothFollow } from "./SmoothFollow";
 import { Object3D } from "three";
-import { InputEvents, KeyCode } from "../engine/engine_input";
+import { InputEvents } from "../engine/engine_input";
 import { Context } from "../engine/engine_setup";
 import { getParam } from "../engine/engine_utils";
 import { PlayerView, ViewDevice } from "../engine/engine_playerview";

package/src/engine-components/WebXR.ts

@@ -390,10 +390,19 @@ export class WebXR extends Behaviour {
         if (this.context.mainCamera) {
             //@ts-ignore
             const cam = xr.getCamera(this.context.mainCamera) as ArrayCamera;
-            for (const c of cam.cameras) {
-                c.layers.enableAll();
+            const cull = this.context.mainCameraComponent?.cullingMask;
+            if(cull !== undefined){
+                for (const c of cam.cameras) {
+                    c.layers.mask = cull;
+                }
+                cam.layers.mask = cull;
+            }
+            else {
+                for (const c of cam.cameras) {
+                    c.layers.enableAll();
+                }
+                cam.layers.enableAll();
             }
-
             this.rig.add(this.context.mainCamera);
             if (this._requestedAR) {
                 this.context.scene.add(this.rig);

package/src/engine-components/WebXRController.ts

@@ -769,7 +769,7 @@ export class WebXRController extends Behaviour {
     public raycast(): Intersection[] {
         const opts = new RaycastOptions();
         opts.layerMask = new Layers();
-        opts.layerMask.set(0);
+        opts.layerMask.enableAll();
         opts.layerMask.disable(2);
         opts.ray = this.getRay();
         const hits = this.context.physics.raycast(opts);

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

@@ -7,7 +7,7 @@ import { Context } from "../../engine/engine_setup";
 import { OrbitControls } from "../OrbitControls";
 import { IPointerEventHandler, PointerEventData } from "./PointerEvents";
 import { Raycaster } from "./Raycaster";
-import { InputEvents, KeyCode } from "../../engine/engine_input";
+import { InputEvents } from "../../engine/engine_input";
 import { Object3D } from "three";
 import { ICanvasGroup, IGraphic } from "./Interfaces";
 import { getParam } from "../../engine/engine_utils";
@@ -208,8 +208,7 @@ export class EventSystem extends Behaviour {
         this.resetMeshUIStates();
 
         if (WebXR.IsInWebXR) return;
-        // console.log(this.context.input.isKeyPressed(KeyCode.ALT));
-        if (this.context.input.isKeyPressed(KeyCode.ALT)) {
+        if (this.context.input.isKeyPressed("AltLeft") || this.context.input.isKeyPressed("AltRight")) {
             // console.log("alt pressed");
             return;
         }

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

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