@needle-tools/engine 2.61.0-pre → 2.62.2-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.61.0-pre",
+    "version": "2.62.2-pre",
     "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",
     "module": "dist/needle-engine.js",

package/src/engine/api.ts

@@ -8,4 +8,5 @@ export * from "./debug/debug";
 export { validate } from "./engine_util_decorator"
 export { Gizmos } from "./engine_gizmos"
 export * from "./engine_scenetools";
-export * from "./engine_math"
+export * from "./engine_math"
+export * from "./js-extensions"

package/src/engine/debug/debug_overlay.ts

@@ -115,39 +115,37 @@ const logsContainerStyles = `
 
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
 
-
-div {
+div[data-needle_engine_debug_overlay] {
     font-family: 'Roboto', sans-serif;
     font-weight: 400;
 }
 
-strong {
+div[data-needle_engine_debug_overlay] strong {
     font-weight: 700;
 }
 
-a {
+div[data-needle_engine_debug_overlay] a {
     color: white;
     text-decoration: none;
     border-bottom: 1px solid rgba(255, 255, 255, 0.3);
 }
 
-a:hover {
+div[data-needle_engine_debug_overlay] a:hover {
     text-decoration: none;
     border: none;
 }
 
-.log strong {
+div[data-needle_engine_debug_overlay] .log strong {
     color: rgba(200,200,200,.9);
 }
 
-.warn strong {
+div[data-needle_engine_debug_overlay] .warn strong {
     color: rgba(255,255,230, 1);
 }
 
-.error strong {
+div[data-needle_engine_debug_overlay] .error strong {
     color: rgba(255,100,120, 1);
 }
-
 `;
 
 function getLogsContainer(domElement: HTMLElement): HTMLElement {
@@ -155,6 +153,7 @@ function getLogsContainer(domElement: HTMLElement): HTMLElement {
         return errorContainer.get(domElement)!;
     } else {
         const container = document.createElement("div");
+        container.setAttribute("data-needle_engine_debug_overlay", "");
         container.classList.add(arContainerClassName);
         container.classList.add("desktop");
         container.classList.add("debug-container");
@@ -206,6 +205,7 @@ function getMessageContainer(type: LogType, msg: string): HTMLElement {
         }
     }
     const element = document.createElement("div");
+    element.setAttribute("data-id", "__needle_engine_debug_overlay");
     element.style.marginRight = "5px";
     element.style.padding = ".5em";
     element.style.backgroundColor = "rgba(0,0,0,.9)";

package/src/engine/engine.ts

@@ -1,8 +1,5 @@
 import "./engine_hot_reload"
 
-import * as layers from "./js-extensions/Layers";
-layers.patchLayers();
-
 import * as engine_setup from "./engine_setup";
 import * as engine_scenetools from "./engine_scenetools";
 import "./tests/test_utils";

package/src/engine/engine_addressables.ts

@@ -60,7 +60,7 @@ export class AssetReference {
         return ref;
     }
 
-    private static currentlyInstantiating: string[] = [];
+    private static currentlyInstantiating: Map<string, number> = new Map<string, number>();
 
     get asset(): any {
         return this._glbRoot ?? this._asset;
@@ -236,12 +236,16 @@ export class AssetReference {
                 }
             }
 
-            if (AssetReference.currentlyInstantiating.indexOf(this.uri) >= 0) {
-                console.error("Recursive instantiation of", this.uri);
+            let count = AssetReference.currentlyInstantiating.get(this.uri);
+            // allow up to 100 instantiations of the same prefab in the same frame
+            if (count !== undefined && count >= 100) {
+                console.error("Recursive or too many instantiations of " + this.uri + " in the same frame (" + count + ")");
                 return null;
             }
             try {
-                AssetReference.currentlyInstantiating.push(this.uri);
+                if (count === undefined) count = 0;
+                count += 1;
+                AssetReference.currentlyInstantiating.set(this.uri, count);
                 if (networked) {
                     options.context = context;
                     const prefab = this.asset;
@@ -259,7 +263,11 @@ export class AssetReference {
                 }
             }
             finally {
-                context.post_render_callbacks.push(() => AssetReference.currentlyInstantiating.pop());
+                context.post_render_callbacks.push(() => {
+                    if (count === undefined || count < 0) count = 0;
+                    else count -= 1;
+                    AssetReference.currentlyInstantiating.set(this.uri, count)
+                });
             }
 
         }

package/src/engine/engine_camera.ts

@@ -0,0 +1,18 @@
+import { ICameraController } from "./engine_types";
+import { Camera } from "three";
+
+
+const $cameraController = Symbol("cameraController");
+
+export function getCameraController(cam: Camera): ICameraController | null {
+    return cam[$cameraController];
+}
+
+export function setCameraController(cam: Camera, cameraController: ICameraController, active: boolean) {
+    if (active)
+        cam[$cameraController] = cameraController;
+    else{
+        if(cam[$cameraController] === cameraController)
+            cam[$cameraController] = null;
+    }
+}

package/src/engine/engine_element.ts

@@ -79,6 +79,12 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     public get loadingProgress01(): number { return this._loadingProgress01; }
     public get loadingFinished(): boolean { return this.loadingProgress01 > .999; }
 
+    public get cameraControls(): boolean {
+        const attr = this.getAttribute("camera-controls");
+        if(attr === null || attr === "False" || attr === "false" || attr === "0") return false;
+        return true;
+    }
+
     public getContext(): Promise<Context> {
         return new Promise((res, _rej) => {
             if (this._context && this.loadingFinished) {
@@ -237,7 +243,17 @@ export class EngineElement extends HTMLElement implements INeedleEngineComponent
     }
 
     static get observedAttributes() {
-        return ["hash", "src", "loadstart", "progress", "loadfinished", "dracoDecoderPath", "dracoDecoderType", "ktx2DecoderPath"];
+        return [
+            "hash",
+            "src",
+            "camera-controls",
+            "loadstart",
+            "progress",
+            "loadfinished",
+            "dracoDecoderPath",
+            "dracoDecoderType",
+            "ktx2DecoderPath"
+        ];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {

package/src/engine/engine_input.ts

@@ -220,6 +220,7 @@ export class Input extends EventTarget {
     private _pointerPositionDown: THREE.Vector2[] = [new THREE.Vector2()];
     private _pointerDownTime: number[] = [];
     private _pointerUpTime: number[] = [];
+    private _pointerUpTimestamp: number[] = [];
     private _pointerIds: number[] = [];
     private _pointerTypes: string[] = [""];
     private _mouseWheelChanged: boolean[] = [false];
@@ -411,13 +412,15 @@ export class Input extends EventTarget {
         }
     }
 
-    private onTouchUp(evt) {
+    private onTouchUp(evt: TouchEvent) {
         if (evt.changedTouches.length <= 0) return;
         for (let i = 0; i < evt.changedTouches.length; i++) {
             const touch = evt.changedTouches[i];
-            const id = this.getPointerIndex(touch.identifier)
-            if (debug)
-                showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
+            const id = this.getPointerIndex(touch.identifier);
+
+            if (!this.isNewEvent(evt.timeStamp, id, this._pointerUpTimestamp)) continue;
+
+            if (debug) showBalloonMessage(`touch up #${id}, identifier:${touch.identifier}`);
             const args: PointerEventArgs = { button: id, clientX: touch.clientX, clientY: touch.clientY, pointerType: PointerType.Touch, source: evt };
             this.onUp(args);
         }
@@ -440,11 +443,20 @@ export class Input extends EventTarget {
     private onMouseUp(evt: MouseEvent) {
         if (evt.defaultPrevented) return;
         let i = evt.button;
+        if (!this.isNewEvent(evt.timeStamp, i, this._pointerUpTimestamp)) return;
         this.onUp({ button: i, clientX: evt.clientX, clientY: evt.clientY, pointerType: PointerType.Mouse, source: evt });
     }
 
+    // Prevent the same event being handled twice (e.g. on touch we get a mouseUp and touchUp evt with the same timestamp)
+    private isNewEvent(timestamp: number, index: number, arr: number[]): boolean {
+        while (arr.length <= index) arr.push(-1);
+        if (timestamp === arr[index]) return false;
+        arr[index] = timestamp;
+        return true;
+    }
+
     private isInRect(e: { clientX: number, clientY: number }): boolean {
-        if(this.context.isInXR) return true;
+        if (this.context.isInXR) return true;
         const rect = this.context.domElement.getBoundingClientRect();
         const px = e.clientX;
         const py = e.clientY;

package/src/engine/engine_loaders.ts

@@ -3,6 +3,8 @@ import { Context } from "./engine_setup"
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
 import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
 import { KTX2Loader } from 'three/examples/jsm/loaders/KTX2Loader.js';
+import { MeshoptDecoder } from 'three/examples/jsm/libs/meshopt_decoder.module.js';
+
 import { getParam } from "./engine_utils";
 
 const debug = getParam("debugdecoders");
@@ -11,6 +13,7 @@ const DEFAULT_DRACO_DECODER_LOCATION ='https://www.gstatic.com/draco/versioned/d
 const DEFAULT_KTX2_TRANSCODER_LOCATION ='https://www.gstatic.com/basis-universal/versioned/2021-04-15-ba1c3e4/';
 
 let dracoLoader: DRACOLoader;
+let meshoptDecoder: MeshoptDecoder;
 let ktx2Loader: KTX2Loader;
 
 export function setDracoDecoderPath(path: string | undefined) {
@@ -40,6 +43,11 @@ export function setKtx2TranscoderPath(path: string) {
     }
 }
 
+export function setMeshoptDecoder(_meshoptDecoder: any) {
+    if (_meshoptDecoder !== undefined)
+        meshoptDecoder = _meshoptDecoder;
+}
+
 export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Context) {
     if (!dracoLoader) {
         dracoLoader = new DRACOLoader();
@@ -54,7 +62,12 @@ export function addDracoAndKTX2Loaders(loader: GLTFLoader, context: Context) {
         if (context.renderer)
             ktx2Loader.detectSupport(context.renderer);
     }
+    if (!meshoptDecoder) {
+        meshoptDecoder = MeshoptDecoder;
+        if (debug) console.log("Using the default meshopt decoder");
+    }
 
     loader.setDRACOLoader(dracoLoader);
     loader.setKTX2Loader(ktx2Loader);
+    loader.setMeshoptDecoder(meshoptDecoder);
 }

package/src/engine/engine_setup.ts

@@ -504,7 +504,6 @@ export class Context implements IContext {
 			this.domElement.prepend(this.renderer.domElement);
 
 		Context._current = this;
-		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 
 		// Setup
 		Context._current = this;
@@ -591,6 +590,8 @@ export class Context implements IContext {
 
 		if (debug)
 			logHierarchy(this.scene, true);
+
+		ContextRegistry.dispatchCallback(ContextEvent.ContextCreated, this);
 	}
 
 	private render(_, frame) {

package/src/engine/engine_types.ts

@@ -30,10 +30,11 @@ export declare type CoroutineData = {
 export interface IContext {
     alias?: string | null;
 
-    scene : Scene;
-    renderer : WebGLRenderer;
-    mainCamera : Camera | null;
-    domElement : HTMLElement;
+    scene: Scene;
+    renderer: WebGLRenderer;
+    mainCamera: Camera | null;
+    mainCameraComponent: ICamera | undefined;
+    domElement: HTMLElement;
 
     scripts: IComponent[];
 	scripts_pausedChanged: IComponent[];
@@ -158,6 +159,10 @@ export declare interface ICamera extends IComponent {
     screenPointToRay(x: number, y: number, ray?: Ray): Ray;
 }
 
+export declare interface ICameraController {
+    get isCameraController(): boolean;
+}
+
 export declare interface ILight extends IComponent {
     intensity: number;
     color: Color;

package/src/engine/extensions/extension_utils.ts

@@ -43,7 +43,7 @@ function internalResolve(paths: DependencyInfo[], parser: GLTFParser, obj, promi
             // handle json pointer in string variable
             if (typeof val === "string") {
                 const ext = resolveExtension(parser, val);
-                if (ext !== null) {
+                if (ext !== null && ext !== undefined) {
                     if (typeof ext.then === "function")
                         promises.push(ext.then(res => obj[key] = res));
                     else obj[key] = ext;

package/src/engine/js-extensions/Camera.ts

@@ -0,0 +1,35 @@
+import { PerspectiveCamera } from "three";
+
+// Wrap camera FOV to allow animation of fov
+Object.defineProperty(PerspectiveCamera.prototype, "fov", {
+    get: function () {
+        return this._fov;;
+    },
+    set: function (val) {
+        const changed = val !== this._fov;
+        this._fov = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "near", {
+    get: function () {
+        return this._near;
+    },
+    set: function (val) {
+        const changed = val !== this._near;
+        this._near = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});
+
+Object.defineProperty(PerspectiveCamera.prototype, "far", {
+    get: function () {
+        return this._far;
+    },
+    set: function (val) {
+        const changed = val !== this._far;
+        this._far = val;
+        if (changed && this.view !== undefined) this.updateProjectionMatrix();
+    }
+});

package/src/engine/js-extensions/Layers.ts

@@ -16,4 +16,5 @@ export function patchLayers() {
         if(this[$customVisibilityFlag] === false) return false;
         return origTest.call(this, layer);
     };
-}
+}
+patchLayers();

package/src/engine/js-extensions/index.ts

@@ -0,0 +1,2 @@
+import "./Layers"
+import "./Camera"

package/src/engine-components/Animation.ts

@@ -145,12 +145,19 @@ export class Animation extends Behaviour {
     }
 
     play(clipOrNumber: AnimationClip | number | string | undefined, options?: PlayOptions): Promise<AnimationAction> | void {
+        if (debug) console.log("PLAY", clipOrNumber)
         this.init();
-        if (!this.mixer) return;
+        if (!this.mixer) {
+            if (debug) console.warn("Missing mixer", this);
+            return;
+        }
         if (clipOrNumber === undefined) clipOrNumber = 0;
         let clip: AnimationClip | undefined = clipOrNumber as AnimationClip;
         if (typeof clipOrNumber === 'number') {
-            if (clipOrNumber >= this.animations.length) return;
+            if (clipOrNumber >= this.animations.length) {
+                if (debug) console.log("No animation at index", clipOrNumber)
+                return;
+            }
             clip = this.animations[clipOrNumber];
         }
         else if (typeof clipOrNumber === "string") {
@@ -205,7 +212,8 @@ export class Animation extends Behaviour {
             action.loop = options.loop ? THREE.LoopRepeat : THREE.LoopOnce;
         else action.loop = THREE.LoopOnce;
         action.play();
-        // console.log("PLAY", action.getClip().name, action)
+        if (debug)
+            console.log("PLAY", action.getClip().name, action)
 
         const handle = new AnimationHandle(action, this.mixer!, options, _ => {
             this._handles.splice(this._handles.indexOf(handle), 1);

package/src/engine-components/CameraUtils.ts

@@ -1,32 +1,54 @@
 import { OrbitControls } from "./OrbitControls";
-import { Camera } from "./Camera";
 import { addNewComponent } from "../engine/engine_components";
-import { Color, Object3D, Scene, Vector3 } from "three";
-import { ICamera, SourceIdentifier } from "../engine/engine_types";
-import { lookAtInverse } from "../engine/engine_three_utils";
+import { Object3D } from "three";
+import { ICamera } from "../engine/engine_types";
 import { RGBAColor } from "./js-extensions/RGBAColor";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry";
-
+import { getCameraController } from "../engine/engine_camera";
+import { Camera } from "./Camera";
+import { EngineElement } from "../engine/engine_element";
 
 ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
-    createCameraWithOrbitControl(evt.context.scene, "unknown");
-});
+    const scene = evt.context.scene;
+    const srcId = "unknown";
 
+    const cameraObject = new Object3D();
+    scene.add(cameraObject);
 
-export function createCameraWithOrbitControl(scene: Scene, source: SourceIdentifier): ICamera {
-    const srcId = source;
-    const go = new Object3D();
-    scene.add(go);
     const camInstance = new Camera();
-    const cam = addNewComponent(go, camInstance, true) as ICamera
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera
     cam.sourceId = srcId;
     cam.clearFlags = 2;
     cam.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
-    const orbit = addNewComponent(go, new OrbitControls(), false) as OrbitControls;
-    orbit.sourceId = srcId;
-    go.position.x = -2;
-    go.position.y = 2;
-    go.position.z = 2;
-    lookAtInverse(go, new Vector3(0, 0, 0));
-    return cam as Camera;
-}
+
+    cameraObject.position.x = -2;
+    cameraObject.position.y = 2;
+    cameraObject.position.z = 2;
+    return cam;
+});
+
+ContextRegistry.registerCallback(ContextEvent.ContextCreated, (evt) => {
+    if (!evt.context.mainCamera) return;
+
+    // check if the <needle-engine controls> is not set to false
+    const engineElement = evt.context.domElement as EngineElement
+
+    if (engineElement?.cameraControls === true) {
+
+        // Check if something else already acts as a camera controller
+        const existing = getCameraController(evt.context.mainCamera);
+        if (existing?.isCameraController === true) {
+            return;
+        }
+
+        const cam = evt.context.mainCameraComponent;
+        const cameraObject = cam?.gameObject;
+        if (cameraObject) {
+            const orbit = addNewComponent(cameraObject, new OrbitControls(), false) as OrbitControls;
+            orbit.sourceId = "unknown";
+        }
+        else {
+            console.warn("Missing camera object, can not add orbit controls")
+        }
+    }
+})

package/src/engine-components/Light.ts

@@ -95,7 +95,17 @@ export class Light extends Behaviour implements ILight {
     public innerSpotAngle: number = 1;
 
     @serializable(Color)
-    public color: THREE.Color = new THREE.Color(0xffffff);
+    set color(val: Color) {
+        this._color = val;
+        if (this.light !== undefined) {
+            this.light.color = val;
+        }
+    }
+    get color(): Color {
+        if (this.light) return this.light.color;
+        return this._color;
+    }
+    public _color: THREE.Color = new THREE.Color(0xffffff);
 
     @serializable()
     set shadowNearPlane(val: number) {
@@ -242,13 +252,14 @@ export class Light extends Behaviour implements ILight {
 
     awake() {
         this.color = new THREE.Color(this.color ?? 0xffffff);
-        if(debug) console.log(this.name, this);
+        if (debug) console.log(this.name, this);
     }
 
     onEnable(): void {
         this.createLight();
         if (this.isBaked) return;
         else if (this.light) {
+            this.light.visible = true;
             if (this.selfIsLight) {
                 // nothing to do
             }
@@ -257,12 +268,14 @@ export class Light extends Behaviour implements ILight {
         }
         if (this.type === LightType.Directional)
             this.startCoroutine(this.updateMainLightRoutine(), FrameEvent.LateUpdate);
-
         this._webXRStartedListener = WebXR.addEventListener(WebXREvent.XRStarted, this.onWebXRStarted.bind(this));
         this._webXREndedListener = WebXR.addEventListener(WebXREvent.XRStopped, this.onWebXREnded.bind(this));
     }
 
     onDisable() {
+        if (this.light) {
+            this.light.visible = false;
+        }
         WebXR.removeEventListener(WebXREvent.XRStarted, this._webXRStartedListener);
         WebXR.removeEventListener(WebXREvent.XRStopped, this._webXREndedListener);
     }

package/src/engine-components/OrbitControls.ts

@@ -6,17 +6,23 @@ import { RaycastOptions } from "../engine/engine_physics";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { getParam, isMobileDevice } from "../engine/engine_utils";
 
-import { Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { Camera as ThreeCamera, Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { EventSystem, EventSystemEvents } from "./ui/EventSystem";
-import { transformWithEsbuild } from "vite";
+import { ICameraController } from "../engine/engine_types";
+import { setCameraController } from "../engine/engine_camera";
 
 const freeCam = getParam("freecam");
 
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
 let defaultKeys: any = undefined;
 
-export class OrbitControls extends Behaviour {
+export class OrbitControls extends Behaviour implements ICameraController {
+
+    get isCameraController(): boolean {
+        return true;
+    }
+
     public get controls() {
         return this._controls;
     }
@@ -64,6 +70,7 @@ export class OrbitControls extends Behaviour {
 
     private _eventSystem?: EventSystem;
     private _afterHandleInputFn?: any;
+    private _camera : Camera | null = null;
 
     targetElement: HTMLElement | null = null;
 
@@ -98,8 +105,10 @@ export class OrbitControls extends Behaviour {
 
     onEnable() {
         this._enableTime = this.context.time.time;
-        const camGo = GameObject.getComponent(this.gameObject, Camera);
-        const cam = camGo?.cam;
+        const cameraComponent = GameObject.getComponent(this.gameObject, Camera);
+        this._camera = cameraComponent;
+        const cam = cameraComponent?.cam;
+        if (cam) setCameraController(cam, this, true);
         if (!this._controls) {
             console.assert(cam !== null && cam !== undefined, "Missing camera", this);
             if (cam)
@@ -153,6 +162,9 @@ export class OrbitControls extends Behaviour {
     }
 
     onDisable() {
+        if (this._camera?.cam) {
+            setCameraController(this._camera.cam, this, false);
+        }
         if (this._controls) {
             this._controls.enabled = false;
             this._controls.autoRotate = false;
@@ -160,7 +172,7 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    private _shouldDisable : boolean = false;
+    private _shouldDisable: boolean = false;
     private afterHandleInput() {
         if (this._controls && this._eventSystem) {
             this._shouldDisable = this._eventSystem.hasActiveUI;