@needle-tools/engine 2.55.0-pre → 2.55.1-pre

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.55.0-pre",
+    "version": "2.55.1-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.js",
     "module": "src/needle-engine.ts",

package/src/engine/codegen/register_types.js

@@ -1,5 +1,5 @@
 import { TypeStore } from "./../engine_typestore"
-
+
 // Import types
 import { __Ignore } from "../../engine-components/codegen/components.ts";
 import { AlignmentConstraint } from "../../engine-components/AlignmentConstraint.ts";
@@ -172,7 +172,7 @@ import { XRGrabModel } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRGrabRendering } from "../../engine-components/WebXRGrabRendering.ts";
 import { XRRig } from "../../engine-components/WebXRRig.ts";
 import { XRState } from "../../engine-components/XRFlag.ts";
-
+
 // Register types
 TypeStore.add("__Ignore", __Ignore);
 TypeStore.add("AlignmentConstraint", AlignmentConstraint);

package/src/engine/engine_serialization_core.ts

@@ -5,7 +5,7 @@ import { Context } from "./engine_setup";
 import { isPersistentAsset } from "./extensions/NEEDLE_persistent_assets";
 import { IComponent, SourceIdentifier } from "./engine_types";
 import { debugExtension } from "../engine/engine_default_parameters";
-import { LogType, showBalloonMessage } from "./debug/debug";
+import { LogType, showBalloonMessage, showBalloonWarning } from "./debug/debug";
 import { isLocalNetwork } from "./engine_networking_utils";
 import { $BuiltInTypeFlag } from "./engine_typestore";
 
@@ -357,7 +357,7 @@ export function deserializeObject(obj: ISerializable, serializedData: object, co
 const blockChecks = getParam("noerrors");
 function checkObjectAssignments(obj: any, serializedData: any, implementationInformation?: ImplementationInformation) {
     if (blockChecks) return;
-    if(!serializedData) return;
+    if (!serializedData) return;
     if (isLocalNetwork() === false) return;
     if (!obj) return;
 
@@ -371,7 +371,17 @@ function checkObjectAssignments(obj: any, serializedData: any, implementationInf
         if (key === "sourceId") continue;
         const value = obj[key];
         const serialized = serializedData[key];
+        // check if the field is defined in the class
         if (implementationInformation?.getDefinedKey(typeName, key) === false) {
+            
+            // if the field is defined but the defined key is uppercase we need to show a warning
+            // because all fields are serialized in lowercase
+            const firstCharUppercase = key.charAt(0).toUpperCase() + key.slice(1);
+            if (implementationInformation.getDefinedKey(typeName, firstCharUppercase)) {
+                showBalloonWarning("<strong>Please rename</strong> \"" + firstCharUppercase + "\" to \"" + key + "\" in " + typeName);
+                console.warn("Please use lowercase for field: \"" + firstCharUppercase + "\" in " + typeName, serialized, obj);
+            }
+
             continue;
         }
         if (serialized === undefined || serialized === null) continue;
@@ -385,14 +395,16 @@ function checkObjectAssignments(obj: any, serializedData: any, implementationInf
                     if (!hasOtherKeys) {
                         showBalloonMessage(`<strong>Missing serialization for object reference!</strong>\n\nPlease change to: \n@serializable(Object3D)\n${key}? : Object3D;\n\nin script ${typeName}.ts\n<a href="https://docs.needle.tools/serializable" target="_blank">documentation</a>`, LogType.Warn);
                         console.warn(typeName, key, obj[key], obj);
+                        continue;
                     }
                 }
             }
         }
-        else if (typeof value === "string") {
+        if (typeof value === "string") {
             if (serialized.endsWith(".gltf") || serialized.endsWith(".glb")) {
                 showBalloonMessage(`<strong>Missing serialization for object reference!</strong>\n\nPlease change to: \n@serializable(AssetReference)\n${key}? : AssetReference;\n\nin script ${typeName}.ts\n<a href="https://docs.needle.tools/serializable" target="_blank">documentation</a>`, LogType.Warn);
                 console.warn(typeName, key, obj[key], obj);
+                continue;
             }
         }
     }
@@ -421,16 +433,16 @@ function implictlyAssignPrimitiveTypes(obj: any, serializedData: any) {
             }
         }
     }
+}
 
-    function isPrimitiveType(val): boolean {
-        switch (typeof val) {
-            case "number":
-            case "string":
-            case "boolean":
-                return true;
-        }
-        return false;
+function isPrimitiveType(val): boolean {
+    switch (typeof val) {
+        case "number":
+        case "string":
+        case "boolean":
+            return true;
     }
+    return false;
 }
 
 // this is a wrapper for the cached serializer
@@ -459,7 +471,7 @@ function deserializeObjectWithType(data: any, typeOrConstructor: Constructor<any
         }
     }
     context.type = type;
-    
+
     // e.g. when @serializable(Texture) and the texture is already resolved via json pointer from gltf
     // then we dont need to do anything else
     if (!typeIsFunction && currentValue instanceof type) return currentValue;
@@ -531,7 +543,7 @@ function deserializeObjectWithType(data: any, typeOrConstructor: Constructor<any
     }
     else {
         // happens when exporting e.g. Animation component with only clip assigned (clips array is marked as serialized but it might be undefined if no clips are assigned in e.g. blender)
-        if(data === undefined) return undefined;
+        if (data === undefined) return undefined;
         // the fallback - this assumes that the type has a constructor that accepts the serialized arguments
         // made originally with THREE.Vector3 in mind but SHOULD actually not be used/called anymore
         instance = new type(...setBuffer(data));

package/src/engine/extensions/NEEDLE_lightmaps.ts

@@ -1,5 +1,5 @@
 import { ILightDataRegistry } from "../engine_lightdata";
-import { FloatType, HalfFloatType, sRGBEncoding, Texture } from "three";
+import { FloatType, HalfFloatType, LinearEncoding, sRGBEncoding, Texture } from "three";
 import { GLTF, GLTFLoaderPlugin, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
 import { SourceIdentifier } from "../engine_types";
 import { resolveReferences } from "./extension_utils";
@@ -70,6 +70,8 @@ export class NEEDLE_lightmaps implements GLTFLoaderPlugin {
                                         // TODO this is most likely wrong for floating point textures
                                         if (entry.type !== LightmapType.Lightmap)
                                             tex.encoding = sRGBEncoding;
+                                        else 
+                                            tex.encoding = LinearEncoding;
 
                                         // not sure why, but seems EXR-loaded float textures need to be flipped
                                         if (entry.type === LightmapType.Skybox) {

package/src/engine-components/Camera.ts

@@ -1,16 +1,15 @@
-import { Behaviour, GameObject } from "./Component";
-import * as THREE from "three";
-// import { OrbitControls } from "./OrbitControls";
+import { Behaviour } from "./Component";
 import { getParam } from "../engine/engine_utils";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { RGBAColor } from "./js-extensions/RGBAColor";
-import { PerspectiveCamera, Ray } from "three";
 import { XRSessionMode } from "../engine/engine_setup";
 import { ICamera } from "../engine/engine_types"
 import { showBalloonMessage } from "../engine/debug/debug";
 import { getWorldPosition } from "../engine/engine_three_utils";
 import { Gizmos } from "../engine/engine_gizmos";
 
+import { EquirectangularReflectionMapping, OrthographicCamera, PerspectiveCamera, Ray, sRGBEncoding, Vector3 } from "three";
+
 export enum ClearFlags {
     Skybox = 1,
     SolidColor = 2,
@@ -37,7 +36,7 @@ export class Camera extends Behaviour implements ICamera {
         const changed = this._fov != val;
         this._fov = val;
         if (changed && this._cam) {
-            if (this._cam instanceof THREE.PerspectiveCamera) {
+            if (this._cam instanceof PerspectiveCamera) {
                 this._cam.fov = this._fov;
                 this._cam.updateProjectionMatrix();
             }
@@ -148,16 +147,14 @@ export class Camera extends Behaviour implements ICamera {
     private _clearFlags: ClearFlags = ClearFlags.SolidColor;
     private _skybox?: CameraSkybox;
 
-
     public get cam(): THREE.PerspectiveCamera | THREE.OrthographicCamera {
         if (this.activeAndEnabled)
             this.buildCamera();
         return this._cam!;
     }
 
-
-    private static _origin: THREE.Vector3 = new THREE.Vector3();
-    private static _direction: THREE.Vector3 = new THREE.Vector3();
+    private static _origin: THREE.Vector3 = new Vector3();
+    private static _direction: THREE.Vector3 = new Vector3();
     public screenPointToRay(x: number, y: number, ray?: Ray): Ray {
         let cam = this.cam;
         const origin = Camera._origin;
@@ -231,12 +228,12 @@ export class Camera extends Behaviour implements ICamera {
             }
         }
         else if (!this.orthographic) {
-            cam = new THREE.PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
+            cam = new PerspectiveCamera(this.fieldOfView, window.innerWidth / window.innerHeight, this._nearClipPlane, this._farClipPlane);
             cam.fov = this.fieldOfView;
         }
         else {
             const factor = this.orthographicSize * 100;
-            cam = new THREE.OrthographicCamera(window.innerWidth / -factor, window.innerWidth / factor, window.innerHeight / factor, window.innerHeight / -factor, this._nearClipPlane, this._farClipPlane);
+            cam = new OrthographicCamera(window.innerWidth / -factor, window.innerWidth / factor, window.innerHeight / factor, window.innerHeight / -factor, this._nearClipPlane, this._farClipPlane);
         }
         this._cam = cam;
 
@@ -312,7 +309,6 @@ export class Camera extends Behaviour implements ICamera {
         return transparent;
     }
 
-
     private enableSkybox() {
         if (!this._skybox)
             this._skybox = new CameraSkybox(this);
@@ -340,10 +336,9 @@ class CameraSkybox {
         else if(this.context.scene.background !== this._skybox) {
             if (debug)
                 console.log("Set skybox", this._camera, this._skybox);
-            this._skybox.encoding = THREE.sRGBEncoding;
-            this._skybox.mapping = THREE.EquirectangularReflectionMapping;
+            this._skybox.encoding = sRGBEncoding;
+            this._skybox.mapping = EquirectangularReflectionMapping;
             this.context.scene.background = this._skybox;
         }
     }
-
 }

package/src/engine-components/LODGroup.ts

@@ -108,6 +108,7 @@ export class LODGroup extends Behaviour {
                 this.gameObject.add(handler);
             }
             const empty = new THREE.Object3D();
+            empty.name = "Cull " + this.name;
             if (debug)
                 console.log(renderers);
             for (let i = 0; i < renderers.length; i++) {
@@ -132,6 +133,10 @@ export class LODGroup extends Behaviour {
                     const dist = lod.model.distance;
                     lodDistanceDiff = dist - maxDistance;
                     maxDistance = Math.max(dist, maxDistance);
+                    if (object.type === "Group") {
+                        console.warn("LODGroup: Group is not supported as LOD object", obj.name, object);
+                        continue;
+                    }
                     this.onAddLodLevel(handler, object, dist);
                 }
                 const cullDistance = maxDistance + lodDistanceDiff;
@@ -155,6 +160,10 @@ export class LODGroup extends Behaviour {
     }
 
     private onAddLodLevel(lod: THREE.LOD, obj: THREE.Object3D, dist: number) {
+        if(obj === this.gameObject) {
+            console.warn("LODGroup component must be on parent object and not mesh directly at the moment", obj.name, obj)
+            return;
+        }
         lod.addLevel(obj, dist * this._distanceFactor);
         const setting = { lod: lod, levelIndex: lod.levels.length - 1, distance: dist };
         this._settings.push(setting)

package/src/engine-components/OrbitControls.ts

@@ -1,14 +1,14 @@
 import { Behaviour, GameObject } from "./Component";
-// import { Camera } from "./Camera";
-import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { Camera } from "./Camera";
 import { LookAtConstraint } from "./LookAtConstraint";
-import * as THREE from "three";
-import { getWorldPosition, setWorldPosition, slerp } from "../engine/engine_three_utils";
+import { getWorldPosition, slerp } from "../engine/engine_three_utils";
 import { RaycastOptions } from "../engine/engine_physics";
 import { serializable } from "../engine/engine_serialization_decorator";
-import { Camera } from "./Camera";
 import { getParam, isMobileDevice } from "../engine/engine_utils";
 
+import { Box3, Object3D, PerspectiveCamera, Vector2, Vector3 } from "three";
+import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
+
 const freeCam = getParam("freecam");
 
 const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
@@ -19,7 +19,7 @@ export class OrbitControls extends Behaviour {
         return this._controls;
     }
 
-    public get controllerObject(): THREE.Object3D | null {
+    public get controllerObject(): Object3D | null {
         return this._cameraObject;
     }
 
@@ -45,29 +45,27 @@ export class OrbitControls extends Behaviour {
     // remove once slerp works correctly
     useSlerp: boolean = true;
 
-
     debugLog: boolean = false;
     targetLerpSpeed = 5;
 
-    private _lookTargetPosition!: THREE.Vector3;
+    private _lookTargetPosition!: Vector3;
     private _controls: ThreeOrbitControls | null = null;
-    private _cameraObject: THREE.Object3D | null = null;
+    private _cameraObject: Object3D | null = null;
 
     private _lerpToTargetPosition: boolean = false;
     private _lerpCameraToTarget: boolean = false;
-    private _cameraTargetPosition: THREE.Vector3 | null = null;
+    private _cameraTargetPosition: Vector3 | null = null;
 
     private _inputs: number = 0;
     private _enableTime: number = 0; // use to disable double click when double clicking on UI
     private _startedListeningToKeyEvents: boolean = false;
 
     awake(): void {
-        this._lookTargetPosition = new THREE.Vector3();
+        this._lookTargetPosition = new Vector3();
         this._startedListeningToKeyEvents = false;
     }
 
     onEnable() {
-
         this._enableTime = this.context.time.time;
         const camGo = GameObject.getComponent(this.gameObject, Camera);
         const cam = camGo?.cam;
@@ -119,7 +117,6 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-
     onDisable() {
         if (this._controls) {
             this._controls.enabled = false;
@@ -138,7 +135,7 @@ export class OrbitControls extends Behaviour {
             if (camGo && !this.setFromTargetPosition()) {
                 if (this.debugLog)
                     console.log("NO TARGET");
-                const forward = new THREE.Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
+                const forward = new Vector3(0, 0, -1).applyMatrix4(camGo.cam.matrixWorld);
                 this.setTarget(forward, true);
             }
         }
@@ -151,7 +148,7 @@ export class OrbitControls extends Behaviour {
         if (!this.setFromTargetPosition()) {
             const opts = new RaycastOptions();
             // center of the screen:
-            opts.screenPoint = new THREE.Vector2(0, 0);
+            opts.screenPoint = new Vector2(0, 0);
             opts.lineThreshold = 0.1;
             const hits = this.context.physics.raycast(opts);
             if (hits.length > 0) {
@@ -229,7 +226,7 @@ export class OrbitControls extends Behaviour {
         }
     }
 
-    public setCameraTarget(position?: THREE.Vector3 | null, immediate: boolean = false) {
+    public setCameraTarget(position?: Vector3 | null, immediate: boolean = false) {
         if (!position) this._lerpCameraToTarget = false;
         else {
             this._lerpCameraToTarget = true;
@@ -254,7 +251,7 @@ export class OrbitControls extends Behaviour {
         return false;
     }
 
-    public setTarget(position: THREE.Vector3 | null = null, immediate: boolean = false) {
+    public setTarget(position: Vector3 | null = null, immediate: boolean = false) {
         if (!this._controls) return;
         if (position !== null) this._lookTargetPosition.copy(position);
         if (immediate)
@@ -262,12 +259,12 @@ export class OrbitControls extends Behaviour {
         else this._lerpToTargetPosition = true;
     }
 
-    public lerpTarget(position: THREE.Vector3, delta: number) {
+    public lerpTarget(position: Vector3, delta: number) {
         if (!this._controls) return;
         this._controls.target.lerp(position, delta);
     }
 
-    public distanceToTarget(position: THREE.Vector3): number {
+    public distanceToTarget(position: Vector3): number {
         if (!this._controls) return -1;
         return this._controls.target.distanceTo(position);
     }
@@ -296,6 +293,48 @@ export class OrbitControls extends Behaviour {
         }
     }
 
+    // Adapted from https://discourse.threejs.org/t/camera-zoom-to-fit-object/936/24
+    // Slower but better implementation that takes bones and exact vertex positions into account: https://github.com/google/model-viewer/blob/04e900c5027de8c5306fe1fe9627707f42811b05/packages/model-viewer/src/three-components/ModelScene.ts#L321
+    fitCameraToObjects(objects: Array<Object3D>, fitOffset: number = 1.5) {
+        const camera = this._cameraObject as PerspectiveCamera;
+        const controls = this._controls as ThreeOrbitControls | null;
+
+        if (!camera || !controls) return;
+
+        const size = new Vector3();
+        const center = new Vector3();
+        const box = new Box3();
+
+        box.makeEmpty();
+        for (const object of objects)
+            box.expandByObject(object);
+
+        box.getSize( size );
+        box.getCenter( center );
+
+        const maxSize = Math.max(size.x, size.y, size.z);
+        const fitHeightDistance = maxSize / (2 * Math.atan( Math.PI * camera.fov / 360 ));
+        const fitWidthDistance = fitHeightDistance / camera.aspect;
+        const distance = fitOffset * Math.max(fitHeightDistance, fitWidthDistance);
+
+        const direction = controls.target.clone()
+            .sub(camera.position)
+            .normalize()
+            .multiplyScalar(distance);
+
+        controls.maxDistance = distance * 10;
+        controls.minDistance = distance * 0.01;
+        controls.target.copy(center);
+
+        camera.near = distance / 100;
+        camera.far = distance * 100;
+        camera.updateProjectionMatrix();
+
+        camera.position.copy(controls.target).sub(direction);
+
+        controls.update();
+    }
+
     // private onPositionDrag(){
 
     // }

package/src/engine-components/ParticleSystem.ts

@@ -153,6 +153,7 @@ class ParticleSystemEmissionOverTime extends BaseValueGenerator {
     }
 
     genValue(): number {
+        if (!this.system.emission.enabled) return 0;
         if (this.system.currentParticles >= this.system.maxParticles) return 0;
         // emission over time
         let emission = this.system.emission.rateOverTime.evaluate(this.system.time / this.system.duration, Math.random());
@@ -225,9 +226,15 @@ class TextureSheetAnimationBehaviour extends ParticleSystemBaseBehaviour {
 
 }
 
+const $particleRotation = Symbol("particleRotation")
+
 class RotationBehaviour extends ParticleSystemBaseBehaviour {
     type: string = "NeedleRotation"
 
+    initialize(particle: Particle) {
+        particle[$particleRotation] = Math.random();
+    }
+
     update(particle: Particle, delta: number) {
         if (particle.rotation === undefined) return;
 
@@ -235,7 +242,7 @@ class RotationBehaviour extends ParticleSystemBaseBehaviour {
 
         if (typeof particle.rotation === "number") {
             if (this.system.rotationOverLifetime.enabled) {
-                particle.rotation += this.system.rotationOverLifetime.evaluate(t) * delta;
+                particle.rotation += this.system.rotationOverLifetime.evaluate(t, particle[$particleRotation]) * delta;
             }
             else {
                 if (this.system.renderer.renderMode === ParticleSystemRenderMode.Billboard)
@@ -777,7 +784,7 @@ export class ParticleSystem extends Behaviour implements IParticleSystem {
         if (this._time > this.duration) this._time = 0;
     }
 
-    private onUpdate(){
+    private onUpdate() {
         if (this._bursts) {
             this.emission.bursts = this._bursts;
             delete this._bursts;

package/src/engine-components/ParticleSystemModules.ts

@@ -1117,10 +1117,10 @@ export class RotationOverLifetimeModule {
     @serializable()
     zMultiplier!: number;
 
-    evaluate(t01: number): number {
+    evaluate(t01: number, t:number): number {
         if (!this.enabled) return 0;
         if (!this.separateAxes) {
-            const rot = this.z.evaluate(t01) * -1;
+            const rot = this.z.evaluate(t01, t) * -1;
             return rot;
         }
         return 0;

package/src/engine-components/Renderer.ts

@@ -22,6 +22,7 @@ const debugInstancing = getParam("debuginstancing");
 const debugProgressiveLoading = getParam("debugprogressive");
 const suppressProgressiveLoading = getParam("noprogressive");
 
+const showWireframe = getParam("wireframe");
 
 export enum ReflectionProbeUsage {
     Off = 0,
@@ -285,15 +286,20 @@ export class Renderer extends Behaviour implements IRenderer {
                 this._lightmaps = [];
 
                 if (type === "Mesh") {
-                    if (!this.gameObject["material"]?.isMeshBasicMaterial === true) {
+                    const mat = this.gameObject["material"];
+                    if (!mat?.isMeshBasicMaterial) {
                         const rm = new RendererLightmap(this.gameObject, this.context);// GameObject.addNewComponent(this.gameObject, RendererLightmap);
                         this._lightmaps.push(rm);
                         rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex, debugLightmap);
                     }
+                    else {
+                        if (mat)
+                            console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
+                    }
                 }
                 // for multi materials we need to loop through children 
                 // and then we add a lightmap renderer component to each of them
-                else if (this.isMultiMaterialObject(this.gameObject)) {
+                else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
                     for (const child of this.gameObject.children) {
                         if (!child["material"]?.isMeshBasicMaterial) {
                             const rm = new RendererLightmap(child as GameObject, this.context);
@@ -309,6 +315,17 @@ export class Renderer extends Behaviour implements IRenderer {
             }
         }
 
+
+
+        if (showWireframe) {
+            for (let i = 0; i < this.sharedMaterials.length; i++) {
+                const mat: any = this.sharedMaterials[i];
+                if (mat) {
+                    mat.wireframe = true;
+                }
+            }
+        }
+
     }
 
     private _isInstancingEnabled: boolean = false;

package/src/engine-components/js-extensions/RGBAColor.ts

@@ -6,6 +6,9 @@ export class RGBAColor extends Color {
 
     get isRGBAColor() { return true; }
 
+    set a(val: number) { this.alpha = val; }
+    get a() { return this.alpha; }
+
     constructor(r: number, g: number, b: number, a: number) {
         super(r, g, b);
         this.alpha = a;