@needle-tools/engine 4.4.0-alpha.3 → 4.4.0-alpha.5

package/src/engine/engine_input.ts

@@ -417,6 +417,19 @@ export class Input implements IInput {
     /** Was a double click detected for the primary pointer? */
     get doubleClick(): boolean { return this._pointerDoubleClick[0]; }
 
+    /**
+     * Get a connected Gamepad    
+     * Note: For a gamepad to be available to the browser it must have received input before while the page was focused.  
+     * @link https://developer.mozilla.org/en-US/docs/Web/API/Gamepad_API/Using_the_Gamepad_API
+     * @returns The gamepad or null if no gamepad is connected
+     */
+    getGamepad(index: number = 0): Gamepad | null {
+        if (typeof navigator !== "undefined" && "getGamepads" in navigator) {
+            return navigator.getGamepads()[index] || null;
+        }
+        return null;
+    }
+
     private readonly _setCursorTypes: CursorTypeName[] = [];
 
     /** @deprecated use setCursor("pointer") */

package/src/engine/engine_serialization_decorator.ts

@@ -26,6 +26,10 @@ export const serializable = function <T>(type?: Constructor<T> | null | Array<Co
     }
 
     return function (_target: any, _propertyKey: string | { name: string }) {
+        if (!_target) {
+            console.error("Found @serializable decorator without a target");
+            return;
+        }
         // The _propertyKey parameter is a string in TS4 with experimentalDecorators
         // but a ClassFieldDecoratorContext in TS5 without.
         // Seems when a different TS version is used in VSCode for editor checking, we get errors here

package/src/engine/engine_three_utils.ts

@@ -1,4 +1,4 @@
-import { AnimationAction, Box3, Box3Helper, Color, Euler, GridHelper, Layers, Material, Mesh, MeshStandardMaterial, Object3D, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, ShadowMaterial, Texture, Uniform, Vector3 } from "three";
+import { AnimationAction, Box3, Box3Helper, Camera, Color, Euler, GridHelper, Layers, Material, Mesh, MeshStandardMaterial, Object3D, PerspectiveCamera, PlaneGeometry, Quaternion, Scene, ShadowMaterial, Texture, Uniform, Vector2Like, Vector3 } from "three";
 import { ShaderMaterial, WebGLRenderer } from "three";
 import { GroundedSkybox } from "three/examples/jsm/objects/GroundedSkybox.js";
 
@@ -71,6 +71,57 @@ export function lookAtObject(object: Object3D, target: Object3D, keepUpDirection
 }
 
 
+/**
+ * Look at a 2D point in screen space
+ * @param object the object to look at the point
+ * @param target the target point in 2D screen space XY e.g. from a mouse event
+ * @param camera the camera to use for the lookAt
+ * @param factor the factor to multiply the distance from the camera to the object. Default is 1
+ * @returns the target point in world space
+ * 
+ * @example Needle Engine Component
+ * ```ts 
+ * export class MyLookAtComponent extends Behaviour {      
+ *   update() {     
+ *     lookAtScreenPoint(this.gameObject, this.context.input.mousePosition, this.context.mainCamera);   
+ *   }   
+ * }   
+ * ```
+ * 
+ * @example Look at from browser mouse move event
+ * ```ts
+ * window.addEventListener("mousemove", (e) => {
+ *   lookAtScreenPoint(object, new Vector2(e.clientX, e.clientY), camera);
+ *  });
+ * ```
+ */
+export function lookAtScreenPoint(object: Object3D, target: Vector2Like, camera: Camera, factor : number = 1): Vector3 | null {
+
+    if (camera) {
+        const pos = getTempVector(0, 0, 0);
+        const ndcx = (target.x / window.innerWidth) * 2 - 1;
+        const ndcy = -(target.y / window.innerHeight) * 2 + 1;
+        pos.set(
+            ndcx,
+            ndcy,
+            0
+        );
+        pos.unproject(camera);
+        // get distance from object to camera
+        const camPos = camera.worldPosition;
+        const dist = object.worldPosition.distanceTo(camPos);
+        // Create direction from camera through cursor point
+        const dir = pos.sub(camPos);
+        dir.multiplyScalar(factor * 3.6 * dist);
+        const targetPoint = camera.worldPosition.add(dir);
+        object.lookAt(targetPoint);
+        return targetPoint;
+    }
+    return null;
+}
+
+
+
 const _tempVecs = new CircularBuffer(() => new Vector3(), 100);
 
 /** Gets a temporary vector. If a vector is passed in it will be copied to the temporary vector    

package/src/engine/engine_utils_format.ts

@@ -59,13 +59,21 @@ export async function tryDetermineFileTypeFromURL(url: string, useExtension: boo
         }
     }
 
+    
     // If the URL doesnt contain a filetype we need to check the header
     // This is the case for example if we load a file from a data url
-    const newUrl = new URL(url);
-    // Adding a URL parameter to avoid the brower to bust the full cache
-    // If we don't do this the file that might already be disc cached will be deleted from the cache
-    newUrl.searchParams.append("range", "true");
-    const header = await fetch(newUrl, {
+
+    if(url.startsWith("blob:")) {
+        // We can't modify the blob URL
+    }
+    else {
+        const newUrl = new URL(url);
+        // Adding a URL parameter to avoid the brower to bust the full cache
+        // If we don't do this the file that might already be disc cached will be deleted from the cache
+        newUrl.searchParams.append("range", "true");
+        url = newUrl.toString();
+    }
+    const header = await fetch(url, {
         method: "GET",
         headers: {
             "range": "bytes=0-32"

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -697,7 +697,7 @@ export class NeedleMenuElement extends HTMLElement {
                 if (res == true && hasCommercialLicense() && !debugNonCommercial) {
                     let visible = this._userRequestedLogoVisible;
                     if (visible === undefined) visible = false;
-                    this.#onSetLogoVisible(visible);
+                    this.___onSetLogoVisible(visible);
                 }
             }));
         } catch (e) {
@@ -827,10 +827,10 @@ export class NeedleMenuElement extends HTMLElement {
                 if (!localNetwork) return;
             }
         }
-        this.#onSetLogoVisible(visible);
+        this.___onSetLogoVisible(visible);
     }
 
-    #onSetLogoVisible(visible: boolean) {
+    private ___onSetLogoVisible(visible: boolean) {
         this.logoContainer.style.display = "";
         this.logoContainer.style.opacity = "1";
         this.logoContainer.style.visibility = "visible";

package/src/engine-components/Camera.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, Euler, Frustum, Matrix4, OrthographicCamera, PerspectiveCamera, Ray, Vector3 } from "three";
+import { Color, EquirectangularReflectionMapping, Euler, Frustum, Matrix4, OrthographicCamera, PerspectiveCamera, Ray, Vector3 } from "three";
 import { Texture } from "three";
 
 import { showBalloonMessage } from "../engine/debug/index.js";
@@ -289,15 +289,18 @@ export class Camera extends Behaviour implements ICamera {
     public get backgroundColor(): RGBAColor | null {
         return this._backgroundColor ?? null;
     }
-    public set backgroundColor(val: RGBAColor | null) {
+    public set backgroundColor(val: RGBAColor | Color | null) {
         if (!val) return;
         if (!this._backgroundColor) {
-            if (!val.clone) return;
-            this._backgroundColor = val.clone();
+            this._backgroundColor = new RGBAColor(1, 1, 1, 1);
         }
-        else this._backgroundColor.copy(val);
+
+        this._backgroundColor.copy(val);
+
         // set background color to solid if provided color doesnt have any alpha channel
-        if (val.alpha === undefined) this._backgroundColor.alpha = 1;
+        if ((!("alpha" in val) || val.alpha === undefined)) {
+            this._backgroundColor.alpha = 1;
+        }
         this.applyClearFlagsIfIsActiveCamera();
     }
 

package/src/engine-components/CameraUtils.ts

@@ -1,15 +1,17 @@
-import { PerspectiveCamera } from "three";
+import { Color, PerspectiveCamera, PMREMGenerator } from "three";
 
 import { getCameraController } from "../engine/engine_camera.js";
 import { addNewComponent, getOrAddComponent } from "../engine/engine_components.js";
 import { Context } from "../engine/engine_context.js";
 import { ContextEvent, ContextRegistry } from "../engine/engine_context_registry.js";
 import { NeedleEngineHTMLElement } from "../engine/engine_element.js";
+import { createFlatTexture, createTrilightTexture } from "../engine/engine_shaders.js";
 import type { ICamera, IContext } from "../engine/engine_types.js";
 import { getParam } from "../engine/engine_utils.js";
 import { RGBAColor } from "../engine/js-extensions/index.js";
 import { Camera, ClearFlags } from "./Camera.js";
 import { OrbitControls } from "./OrbitControls.js";
+import EnvironmentScene from "./utils/EnvironmentScene.js";
 
 const debug = getParam("debugmissingcamera");
 
@@ -30,27 +32,47 @@ ContextRegistry.registerCallback(ContextEvent.MissingCamera, (evt) => {
 
     const camInstance = new Camera();
     camInstance.sourceId = evt.files?.[0]?.src ?? "unknown"
+    camInstance.fieldOfView = 35;
 
+    const transparentAttribute = evt.context.domElement.getAttribute("transparent");
+    if (transparentAttribute != undefined) {
+        camInstance.clearFlags = ClearFlags.Uninitialized;
+    }
     // Set the clearFlags to a skybox if we have one OR if the user set a skybox image attribute
-    if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
+    else if (evt.context.domElement.getAttribute("skybox-image")?.length || evt.context.domElement.getAttribute("background-image")?.length || (evt.context as Context).lightmaps.tryGetSkybox(camInstance.sourceId)) {
         camInstance.clearFlags = ClearFlags.Skybox;
+        // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
+        // e.g. when we export a scene from blender without a camera in the scene
+        camInstance.backgroundBlurriness = .2; // same as in blender 0.5
     }
-    else
-        // TODO provide a nice default skybox
+    else {
         camInstance.clearFlags = ClearFlags.SolidColor;
-    camInstance.backgroundColor = new RGBAColor(0.5, 0.5, 0.5, 1);
-    camInstance.fieldOfView = 35;
 
-    const transparentAttribute = evt.context.domElement.getAttribute("transparent");
-    if (transparentAttribute != undefined) {
-        camInstance.clearFlags = ClearFlags.Uninitialized;
+        let backgroundColor = "#efefef";
+        if(typeof window !== undefined && (window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            backgroundColor = "#1f1f1f";
+        }
+        scene.background = new Color(backgroundColor); // dont set it on the camera because this might be controlled from "background-color" attribute which is set on the scene directly. If the camera has a background color, it will override the scene's background color
+
+        // Generate a default environment map if none is set
+        if (!scene.environment) {
+            // const backgroundColorAttribute = evt.context.domElement.getAttribute("background-color") ?? "#fff";
+            // const backgroundColor = new Color(backgroundColorAttribute);
+            const pmremGenerator = new PMREMGenerator(evt.context.renderer);
+            const env = new EnvironmentScene("neutral");
+            // const background = scene.background;
+            // const col0 = new Color(.1, .1, .1);
+            // const col1 = new Color(.3, .3, .3);
+            // const col2 = new Color(1, 1, 1);
+            // const envmap = createTrilightTexture(col0, col1, col2, 32, 32);
+            // scene.background = envmap;
+            scene.environment = pmremGenerator.fromScene(env, .025).texture;
+            // scene.background = background;
+        }
     }
 
-    // TODO: can we store the backgroundBlurriness in the gltf file somewhere except inside the camera?
-    // e.g. when we export a scene from blender without a camera in the scene
-    camInstance.backgroundBlurriness = .2; // same as in blender 0.5
-    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
 
+    const cam = addNewComponent(cameraObject, camInstance, true) as ICamera;
     cameraObject.position.x = 0;
     cameraObject.position.y = 1;
     cameraObject.position.z = 2;

package/src/engine-components/Component.ts

@@ -1128,7 +1128,8 @@ export abstract class Component implements IComponent, EventTarget,
     }
 
     /**
-     * Gets the position of this component's GameObject in world space
+     * Gets the position of this component's GameObject in world space.    
+     * Note: This is equivalent to calling `this.gameObject.worldPosition`
      */
     get worldPosition(): Vector3 {
         return threeutils.getWorldPosition(this.gameObject);
@@ -1154,6 +1155,7 @@ export abstract class Component implements IComponent, EventTarget,
 
     /**
      * Gets the rotation of this component's GameObject in world space as a quaternion
+     * Note: This is equivalent to calling `this.gameObject.worldQuaternion`
      */
     get worldQuaternion(): Quaternion {
         return threeutils.getWorldQuaternion(this.gameObject);
@@ -1194,7 +1196,8 @@ export abstract class Component implements IComponent, EventTarget,
     }
 
     /**
-     * Gets the rotation of this component's GameObject in world space as Euler angles (in degrees)
+     * Gets the rotation of this component's GameObject in world space as Euler angles (in degrees)  
+     * Note: This is equivalent to calling `this.gameObject.worldRotation`
      */
     get worldRotation(): Vector3 {
         return this.gameObject.worldRotation;

package/src/engine-components/ContactShadows.ts

@@ -17,9 +17,15 @@ import { Behaviour, GameObject } from "./Component.js";
 const debug = getParam("debugcontactshadows");
 
 onStart(ctx => {
-    const val = ctx.domElement.getAttribute("contactshadows");
+    const val = ctx.domElement.getAttribute("contactshadows") || ctx.domElement.getAttribute("contact-shadows");
     if (val != undefined && val != "0" && val != "false") {
-        ContactShadows.auto(ctx);
+        console.debug("Auto-creating ContactShadows because of `contactshadows` attribute");
+        const shadows = ContactShadows.auto(ctx);
+        const intensity = parseFloat(val);
+        if (!isNaN(intensity)) {
+            shadows.opacity = intensity;
+            shadows.darkness = intensity;
+        }
     }
 })
 

package/src/engine-components/OrbitControls.ts

@@ -316,6 +316,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
                 if (DeviceUtilities.isMobileDevice()) this.doubleClickToFocus = true;
             }
             this._controls.addEventListener("start", this.onControlsChangeStarted);
+            this._controls.addEventListener("end", this.onControlsChangeEnded);
 
             if (!this._startedListeningToKeyEvents && this.enableKeys) {
                 this._startedListeningToKeyEvents = true;
@@ -346,6 +347,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this._controls.enabled = false;
             this._controls.autoRotate = false;
             this._controls.removeEventListener("start", this.onControlsChangeStarted);
+            this._controls.removeEventListener("end", this.onControlsChangeEnded);
             try {
                 this._controls.stopListenToKeyEvents();
             } catch { /** this fails if we never listened to key events... */ }
@@ -366,7 +368,7 @@ export class OrbitControls extends Behaviour implements ICameraController {
         this._activePointerEvents.push(_evt);
     }
     private _onPointerDownLate = (evt: NEPointerEvent) => {
-        if(evt.used && this._controls) {
+        if (evt.used && this._controls) {
             // Disabling orbit controls here because otherwise we get a slight movement when e.g. using DragControls
             this._controls.enabled = false;
         }
@@ -413,22 +415,45 @@ export class OrbitControls extends Behaviour implements ICameraController {
             this.setTargetFromRaycast();
         }
         // Automatically update the camera focus
-        else if (!evt.used && this.autoTarget) {
-            const ray = new Ray(this._cameraObject?.worldPosition, this._cameraObject?.worldForward.multiplyScalar(-1));
-            const hits = this.context.physics.raycastFromRay(ray);
-            const hit = hits.length > 0 ? hits[0] : undefined;
-            if(hit && hit.distance > this.minZoom && hit.distance < this.maxZoom) {
-                if(debug) Gizmos.DrawWireSphere(hit.point, 0.1, 0xff0000, 2);
-                this._controls?.target.copy(hits[0].point);
-            }
-        }
+        // else if (!evt.used && this.autoTarget) {
+        //     this.updateTargetNow();
+        // }
     };
 
+    private updateTargetNow() {
+        const ray = new Ray(this._cameraObject?.worldPosition, this._cameraObject?.worldForward.multiplyScalar(-1));
+        const hits = this.context.physics.raycastFromRay(ray);
+        const hit = hits.length > 0 ? hits[0] : undefined;
+        if (hit && hit.distance > this.minZoom && hit.distance < this.maxZoom) {
+            if (debug) Gizmos.DrawWireSphere(hit.point, 0.1, 0xff0000, 2);
+            this._controls?.target.copy(hits[0].point);
+        }
+    }
+
+    private _orbitStartAngle: number = 0;
     private onControlsChangeStarted = () => {
+        if (this._controls) {
+            this._orbitStartAngle = this._controls.getAzimuthalAngle() + this._controls.getPolarAngle();
+        }
         if (this._syncedTransform) {
             this._syncedTransform.requestOwnership();
         }
     }
+    private onControlsChangeEnded = () => {
+
+        if (this._controls) {
+            if (this.autoTarget) {
+                const newAngle = this._controls.getAzimuthalAngle() + this._controls.getPolarAngle();
+                const delta = newAngle - this._orbitStartAngle;
+                if (Math.abs(delta) < .01) {
+                    if (debug) console.debug("OrbitControls: No movement detected, updating target now");
+                    this.updateTargetNow();
+                }
+                else if(debug) console.debug("OrbitControls: Movement detected", delta);
+            }
+        }
+
+    }
 
     private _shouldDisable: boolean = false;
     private afterHandleInput(evt: CustomEvent<AfterHandleInputEvent>) {

package/src/engine-components/SyncedTransform.ts

@@ -51,7 +51,7 @@ onUpdate((ctx) => {
     const threshold = isRunningOnGlitch ? 10 : 40;
     FAST_INTERVAL = Math.floor(FAST_ACTIVE_SYNCTRANSFORMS / threshold);
     FAST_ACTIVE_SYNCTRANSFORMS = 0;
-    if(debug && FAST_INTERVAL > 0) console.log("Sync Transform Fast Interval", FAST_INTERVAL);
+    if (debug && FAST_INTERVAL > 0) console.log("Sync Transform Fast Interval", FAST_INTERVAL);
 })
 
 /**
@@ -62,20 +62,20 @@ onUpdate((ctx) => {
  */
 export class SyncedTransform extends Behaviour {
 
-    
+
     // public autoOwnership: boolean = true;
     /** When true, overrides physics behavior when this object is owned by the local user */
     public overridePhysics: boolean = true
-    
+
     /** Whether to smoothly interpolate position changes when receiving updates */
     public interpolatePosition: boolean = true;
-    
+
     /** Whether to smoothly interpolate rotation changes when receiving updates */
     public interpolateRotation: boolean = true;
-    
+
     /** When true, sends updates at a higher frequency, useful for fast-moving objects */
     public fastMode: boolean = false;
-    
+
     /** When true, notifies other clients when this object is destroyed */
     public syncDestroy: boolean = false;
 
@@ -135,8 +135,9 @@ export class SyncedTransform extends Behaviour {
         this._targetRotation = new Quaternion();
 
         // sync instantiate issue was because they shared the same last pos vector!
-        this.lastWorldPos = new Vector3();
-        this.lastWorldRotation = new Quaternion();
+        this.lastPosition = new Vector3();
+        this.lastRotation = new Quaternion();
+        this.lastScale = new Vector3();
 
         this.rb = GameObject.getComponentInChildren(this.gameObject, Rigidbody);
         if (this.rb) {
@@ -207,6 +208,11 @@ export class SyncedTransform extends Behaviour {
                     if (!this.interpolateRotation || !this._receivedDataBefore)
                         setWorldEuler(this.gameObject, this.tempEuler);
                 }
+
+                const scale = transform.scale();
+                if (scale) {
+                    this.gameObject.scale.set(scale.x(), scale.y(), scale.z());
+                }
             }
             this._receivedDataBefore = true;
 
@@ -221,8 +227,9 @@ export class SyncedTransform extends Behaviour {
      * Initializes tracking of position and rotation when component is enabled
      */
     onEnable(): void {
-        this.lastWorldPos.copy(this.worldPosition);
-        this.lastWorldRotation.copy(this.worldQuaternion);
+        this.lastPosition.copy(this.worldPosition);
+        this.lastRotation.copy(this.worldQuaternion);
+        this.lastScale.copy(this.gameObject.scale);
         this._needsUpdate = true;
         // console.log("ENABLE", this.guid, this.gameObject.guid, this.lastWorldPos);
         if (this._model) {
@@ -241,8 +248,9 @@ export class SyncedTransform extends Behaviour {
 
 
     private receivedUpdate = false;
-    private lastWorldPos!: Vector3;
-    private lastWorldRotation!: Quaternion;
+    private lastPosition!: Vector3;
+    private lastRotation!: Quaternion;
+    private lastScale!: Vector3;
 
     /** 
      * @internal 
@@ -264,24 +272,27 @@ export class SyncedTransform extends Behaviour {
             this._model.requestOwnership();
         }
 
-        const wp = this.worldPosition;
-        const wr = this.worldQuaternion;
+        const pos = this.worldPosition;
+        const rot = this.worldQuaternion;
+        const scale = this.gameObject.scale;
         if (this._model.isOwned && !this.receivedUpdate) {
-            const worlddiff = wp.distanceTo(this.lastWorldPos);
-            const worldRot = wr.angleTo(this.lastWorldRotation);
             const threshold = this._model.hasOwnership || this.fastMode ? .0001 : .001;
-            if (worlddiff > threshold || worldRot > threshold) {
+            if (pos.distanceTo(this.lastPosition) > threshold ||
+                rot.angleTo(this.lastRotation) > threshold ||
+                scale.distanceTo(this.lastScale) > threshold) {
                 // console.log(worlddiff, worldRot);
                 if (!this._model.hasOwnership) {
 
                     if (debug)
-                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastWorldPos);
+                        console.log(this.guid, "reset because not owned but", this.gameObject.name, this.lastPosition);
 
-                    this.worldPosition = this.lastWorldPos;
-                    wp.copy(this.lastWorldPos);
+                    this.worldPosition = this.lastPosition;
+                    pos.copy(this.lastPosition);
 
-                    this.worldQuaternion = this.lastWorldRotation;
-                    wr.copy(this.lastWorldRotation);
+                    this.worldQuaternion = this.lastRotation;
+                    rot.copy(this.lastRotation);
+
+                    this.gameObject.scale.copy(this.lastScale);
 
                     InstancingUtil.markDirty(this.gameObject, true);
                     this._needsUpdate = false;
@@ -323,12 +334,13 @@ export class SyncedTransform extends Behaviour {
 
 
         this.receivedUpdate = false;
-        this.lastWorldPos.copy(wp);
-        this.lastWorldRotation.copy(wr);
+        this.lastPosition.copy(pos);
+        this.lastRotation.copy(rot);
+        this.lastScale.copy(scale);
 
 
         if (!this._model) return;
-        
+
         if (!this._model || this._model.hasOwnership === undefined || !this._model.hasOwnership) {
             // if we're not the owner of this synced transform then don't send any data
             return;

package/src/engine-components/postprocessing/PostProcessingHandler.ts

@@ -281,8 +281,12 @@ export class PostProcessingHandler {
 
             if (this._passIndices !== null) {
                 const newPasses = [composer.passes[0]];
-                if (this._passIndices.length > 0 && this._passIndices[0] !== 0) {
-                    newPasses.push(...this._passIndices.map(index => composer.passes[index]).filter(pass => pass));
+                if (this._passIndices.length > 0) {
+                    newPasses.push(...this._passIndices
+                        .filter(x => x !== 0)
+                        .map(index => composer.passes[index])
+                        .filter(pass => pass)
+                    );
                 }
                 if (newPasses.length > 0) {
                     console.log("[PostProcessing] Passes (selected) →", newPasses);
@@ -290,6 +294,7 @@ export class PostProcessingHandler {
                 composer.passes.length = 0;
                 for (const pass of newPasses) {
                     pass.enabled = true;
+                    pass.renderToScreen = false; // allows automatic setting for the last pass
                     composer.addPass(pass);
                 }
             }