@needle-tools/engine 2.50.0-pre → 2.52.0-pre

package/src/engine/extensions/NEEDLE_components.ts

@@ -53,15 +53,19 @@ export class NEEDLE_components implements GLTFLoaderPlugin {
             // the write node callback is called after user data is serialized
             // we could also traverse everything before export and remove components
             // but doing it like that we avoid traversing multiple times
-            const originalFunction = writer.serializeUserData.bind(writer);
-            this.writer = writer;
-            writer.serializeUserData = (o, def) => {
-                try {
-                    this.serializeUserData(o, def);
-                    originalFunction(o, def);
-                }
-                finally {
-                    this.afterSerializeUserData(o, def);
+            if("serializeUserData" in writer){
+                //@ts-ignore
+                const originalFunction = writer.serializeUserData.bind(writer);
+                this.writer = writer;
+                //@ts-ignore
+                writer.serializeUserData = (o, def) => {
+                    try {
+                        this.serializeUserData(o, def);
+                        originalFunction(o, def);
+                    }
+                    finally {
+                        this.afterSerializeUserData(o, def);
+                    }
                 }
             }
             return this;

package/src/engine/extensions/NEEDLE_deferred_texture.ts

@@ -40,17 +40,19 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
 
     static assignTextureLOD(context: Context, source: SourceIdentifier | undefined, material: Material, level: number = 0) {
         if (!material) return;
-        for (const slot of Object.keys(material)) {
+        for (let slot of Object.keys(material)) {
             const val = material[slot];
             if (val?.isTexture === true) {
-                if (debug)
-                    console.log("-----------\n", "FIND", material.name, slot, val?.name, val?.userData, val);
+
+                if (debug) console.log("-----------\n", "FIND", material.name, slot, val?.name, val?.userData, val, material);
+
                 NEEDLE_deferred_texture.getOrLoadTexture(context, source, material, slot, val, level).then(t => {
                     if (t?.isTexture === true) {
-                        t.needsUpdate = true;
-                        if (debug)
-                            console.log("Assign LOD", material.name, slot, t.name, t["guid"], material, "Prev:", val, "Now:", t, "\n--------------");
+
+                        if (debug) console.log("Assign LOD", material.name, slot, t.name, t["guid"], material, "Prev:", val, "Now:", t, "\n--------------");
+
                         material[slot] = t;
+                        t.needsUpdate = true;
                         material.needsUpdate = true;
 
                         if (debug) {
@@ -174,6 +176,7 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
 
                 // const index = Number.parseInt(ext.pointer.substring("textures/".length));
                 const tex = await parser.getDependency("texture", index);
+                tex.encoding = current.encoding;
                 if (tex) {
                     tex.guid = ext.guid;
                 }

package/src/engine-components/Camera.ts

@@ -52,6 +52,7 @@ export class Camera extends Behaviour implements ICamera {
             this._cam.updateProjectionMatrix();
         }
     }
+    private _nearClipPlane: number = 0.1;
 
     get farClipPlane(): number { return this._farClipPlane; }
     @serializable()
@@ -63,6 +64,7 @@ export class Camera extends Behaviour implements ICamera {
             this._cam.updateProjectionMatrix();
         }
     }
+    private _farClipPlane: number = 1000;
 
     @serializable()
     public get clearFlags(): ClearFlags {
@@ -94,8 +96,33 @@ export class Camera extends Behaviour implements ICamera {
     }
     private _cullingMask: number = 0xffffffff;
 
-    private _nearClipPlane: number = 0.1;
-    private _farClipPlane: number = 1000;
+    @serializable()
+    public set backgroundBlurriness(val: number | undefined) {
+        if(val === this._backgroundBlurriness) return;
+        if (val === undefined)
+            this._backgroundBlurriness = undefined;
+        else
+            this._backgroundBlurriness = Math.min(Math.max(val, 0), 1);
+        this.applyClearFlagsIfIsActiveCamera();
+    }
+    public get backgroundBlurriness() : number | undefined {
+        return this._backgroundBlurriness;
+    }
+    private _backgroundBlurriness?: number;
+
+    @serializable()
+    public set backgroundIntensity(val: number | undefined) {
+        if(val === this._backgroundIntensity) return;
+        if (val === undefined)
+            this._backgroundIntensity = undefined;
+        else
+            this._backgroundIntensity = Math.min(Math.max(val, 0), 10);
+        this.applyClearFlagsIfIsActiveCamera();
+    }
+    public get backgroundIntensity() : number | undefined {
+        return this._backgroundIntensity;
+    }
+    private _backgroundIntensity?: number;
 
     @serializable(RGBAColor)
     public get backgroundColor(): RGBAColor | null {
@@ -220,6 +247,13 @@ export class Camera extends Behaviour implements ICamera {
                         }
                     }
                     this.enableSkybox();
+
+                    if (this._backgroundBlurriness !== undefined)
+                        this.context.scene.backgroundBlurriness = this._backgroundBlurriness;
+                    if (this._backgroundIntensity !== undefined)
+                        //@ts-ignore
+                        this.context.scene.backgroundIntensity = this._backgroundIntensity;
+
                     break;
                 case ClearFlags.SolidColor:
                     if (this._backgroundColor) {

package/src/engine-components/Component.ts

@@ -326,7 +326,7 @@ class Component implements IComponent, EventTarget {
     earlyUpdate?(): void;
     update?(): void;
     lateUpdate?(): void;
-    onBeforeRender?(frame: THREE.XRFrame | null): void;
+    onBeforeRender?(frame: XRFrame | null): void;
     onAfterRender?(): void;
 
     onCollisionEnter?(col: Collision);

package/src/engine-components/DragControls.ts

@@ -35,8 +35,8 @@ export interface IDragEventListener {
 
 export class DragControls extends Interactable implements IPointerDownHandler, IPointerUpHandler, IPointerEnterHandler, IPointerExitHandler {
 
-    private static _active: DragControls | null = null;
-    public static get HasAnySelected(): boolean { return this._active !== null; }
+    private static _active: number = 0;
+    public static get HasAnySelected(): boolean { return this._active > 0; }
 
 
     public transformSelf: boolean = true;
@@ -106,20 +106,24 @@ export class DragControls extends Interactable implements IPointerDownHandler, I
     onPointerDown(args: PointerEventData) {
         if (!this.allowEdit(this.gameObject)) return;
         if (WebXR.IsInWebXR) return;
+        DragControls._active += 1;
         this._dragDelta.set(0, 0);
         this._didDrag = false;
         this._waitingForDragStart = args;
         args.StopPropagation();
-        // if (this.orbit) this.orbit.enabled = false;
+        // disabling pointer controls here already, otherwise we get a few frames of movement event in orbit controls and this will rotate the camera sligthly AFTER drag controls dragging ends.
+        if (this.orbit) this.orbit.enabled = false;
     }
 
     onPointerUp(args: PointerEventData) {
         this._waitingForDragStart = null;
         if (!this.allowEdit(this.gameObject)) return;
+        if(DragControls._active > 0)
+            DragControls._active -= 1;
         if (WebXR.IsInWebXR) return;
         this.onDragEnd(args);
         args.StopPropagation();
-        // if (this.orbit) this.orbit.enabled = true;
+        if (this.orbit) this.orbit.enabled = true;
     }
 
 

package/src/engine-components/EventTrigger.ts

@@ -1,28 +1,48 @@
+import { serializable } from "../engine/engine_serialization";
+import { EventList } from "./EventList";
+import { IPointerEventHandler, PointerEventData } from "./ui/PointerEvents"
 import { Behaviour } from "./Component"
 import { EventType } from "./EventType"
 
-export class EventTrigger extends Behaviour {
-/*
-    private triggers: Array<{ key: EventType, callbacks: Array<Function> }> = [];
-    private events: Map<EventType, Array<Function>> = new Map();
+class TriggerEvent {
+    @serializable()
+    eventID!: EventType;
+    @serializable(EventList)
+    callback!: EventList;
+}
 
-    awake() {
-        for (const i in this.triggers) {
-            const evt = this.triggers[i];
-            const key = EventType[evt.key];
-            this.events.set(key, evt.callbacks);
+export class EventTrigger extends Behaviour implements IPointerEventHandler {
+    
+    @serializable(TriggerEvent)
+    private triggers?: Array<TriggerEvent>;
+
+    invoke(type: EventType) {
+        if(!this.triggers) return;
+        for(const trigger of this.triggers){
+            if(trigger.eventID === type){
+                trigger.callback.invoke();
+            }
         }
-        console.log(this);
-        // console.log(this.events);
     }
 
-    public invoke(type: EventType) {
-        const evt = this.events.get(type);
-        if (evt) {
-            evt.forEach(callback => {
-                callback();
-            });
-        }
+    onPointerClick(_: PointerEventData) {
+        this.invoke(EventType.PointerClick);
+    }
+    
+    onPointerEnter(_: PointerEventData) {
+        this.invoke(EventType.PointerEnter);
+    }
+
+    onPointerExit(_: PointerEventData) {
+        this.invoke(EventType.PointerExit);
     }
-*/
+
+    onPointerDown(_: PointerEventData) {
+        this.invoke(EventType.PointerDown);
+    }
+
+    onPointerUp(_: PointerEventData) {
+        this.invoke(EventType.PointerUp);
+    }
+
 }

package/src/engine-components/Light.ts

@@ -165,7 +165,7 @@ export class Light extends Behaviour implements ILight {
         }
     }
     get intensity(): number { return this._intensity; }
-    private _intensity: number = 1;
+    private _intensity: number = -1;
 
     @serializable()
     get shadowDistance(): number {
@@ -344,7 +344,9 @@ export class Light extends Behaviour implements ILight {
 
 
         if (this.light) {
-            this._intensity = this.light.intensity;
+            if (this._intensity >= 0)
+                this.light.intensity = this._intensity;
+            else this._intensity = this.light.intensity;
 
             if (this.shadows !== LightShadows.None) {
                 this.light.castShadow = true;
@@ -440,20 +442,20 @@ export class Light extends Behaviour implements ILight {
     private updateShadowSoftHard() {
         if (!this.light) return;
         if (this.shadows === LightShadows.Soft) {
-            const radius = this.light.shadow.mapSize.width / 1024 * 5;
-            const samples = Mathf.clamp(Math.round(radius), 2, 10);
-            this.light.shadow.radius = radius;
-            this.light.shadow.blurSamples = samples;
-            if (isMobileDevice()) {
-                this.light.shadow.radius *= .5;
-                this.light.shadow.blurSamples = Math.floor(this.light.shadow.blurSamples * .5);
-            }
-            if (Light.allowChangingRendererShadowMapType) {
-                if(this.context.renderer.shadowMap.type !== THREE.VSMShadowMap){
-                    if(isLocalNetwork()) console.warn("Changing renderer shadow map type to VSMShadowMap because a light with soft shadows enabled was found (this will cause all shadow receivers to also cast shadows). If you don't want this behaviour either set the shadow type to hard or set Light.allowChangingRendererShadowMapType to false.", this);
-                    this.context.renderer.shadowMap.type = THREE.VSMShadowMap;
-                }
-            }
+            // const radius = this.light.shadow.mapSize.width / 1024 * 5;
+            // const samples = Mathf.clamp(Math.round(radius), 2, 10);
+            // this.light.shadow.radius = radius;
+            // this.light.shadow.blurSamples = samples;
+            // if (isMobileDevice()) {
+            //     this.light.shadow.radius *= .5;
+            //     this.light.shadow.blurSamples = Math.floor(this.light.shadow.blurSamples * .5);
+            // }
+            // if (Light.allowChangingRendererShadowMapType) {
+            //     if(this.context.renderer.shadowMap.type !== THREE.VSMShadowMap){
+            //         if(isLocalNetwork()) console.warn("Changing renderer shadow map type to VSMShadowMap because a light with soft shadows enabled was found (this will cause all shadow receivers to also cast shadows). If you don't want this behaviour either set the shadow type to hard or set Light.allowChangingRendererShadowMapType to false.", this);
+            //         this.context.renderer.shadowMap.type = THREE.VSMShadowMap;
+            //     }
+            // }
         }
         else {
             this.light.shadow.radius = 1;

package/src/engine-components/OrbitControls.ts

@@ -3,13 +3,13 @@ import { Behaviour, GameObject } from "./Component";
 import { OrbitControls as ThreeOrbitControls } from "three/examples/jsm/controls/OrbitControls";
 import { LookAtConstraint } from "./LookAtConstraint";
 import * as THREE from "three";
-import { getWorldPosition } from "../engine/engine_three_utils";
+import { getWorldPosition, setWorldPosition, 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 } from "../engine/engine_utils";
+import { getParam, isMobileDevice } from "../engine/engine_utils";
 
-const noLimits = getParam("nocamlimits");
+const freeCam = getParam("freecam");
 
 export class OrbitControls extends Behaviour {
     public get controls() {
@@ -40,7 +40,7 @@ export class OrbitControls extends Behaviour {
     doubleClickToFocus: boolean = true;
 
     // remove once slerp works correctly
-    useSlerp: boolean = false;
+    useSlerp: boolean = true;
 
 
     debugLog: boolean = false;
@@ -76,13 +76,21 @@ export class OrbitControls extends Behaviour {
         }
 
         if (this._controls) {
+            if (freeCam) {
+                this.enablePan = true;
+                this.enableZoom = true;
+                this.middleClickToFocus = true;
+                if(isMobileDevice()) this.doubleClickToFocus = true;
+            }
+
             this._controls.enableDamping = this.enableDamping;
+            //@ts-ignore (not in types)
             this._controls.enableKeys = this.enableKeys;
             this._controls.autoRotate = this.autoRotate;
             this._controls.autoRotateSpeed = this.autoRotateSpeed;
             this._controls.enableZoom = this.enableZoom;
             if (cam?.type === "PerspectiveCamera") {
-                if (noLimits) {
+                if (freeCam) {
                     // dont set limits
                 }
                 else {
@@ -91,7 +99,7 @@ export class OrbitControls extends Behaviour {
                 }
             }
             else {
-                if (noLimits) {
+                if (freeCam) {
                     // dont set limits
                 }
                 else {
@@ -183,14 +191,10 @@ export class OrbitControls extends Behaviour {
 
             // lerp the camera
             if (this._lerpCameraToTarget && this._cameraTargetPosition && this._cameraObject) {
-                if (this.useSlerp && typeof this._cameraObject?.position["slerp"] === "function") {
+                // setWorldPosition(this._cameraObject, this._cameraTargetPosition);
+                if (this.useSlerp) {
                     const position = this._cameraObject?.position;
-                    position
-                        // TODO fix the offset here
-                        // .sub(this._cameraTargetPosition)
-                        //@ts-ignore
-                        .slerp(this._cameraTargetPosition, step)
-                    // .add(this._cameraTargetPosition);
+                    slerp(position, this._cameraTargetPosition, step);
                 }
                 else {
                     this._cameraObject?.position.lerp(this._cameraTargetPosition, step);
@@ -210,7 +214,7 @@ export class OrbitControls extends Behaviour {
             }
         }
 
-        if (this.lookAtConstraint?.locked) this.setFromTargetPosition(0, this.lookAtConstraint01);
+        if (!freeCam && this.lookAtConstraint?.locked) this.setFromTargetPosition(0, this.lookAtConstraint01);
 
 
         if (this._controls && !this.context.isInXR) {
@@ -281,6 +285,7 @@ export class OrbitControls extends Behaviour {
                     this._lerpCameraToTarget = true;
                     const pos = getWorldPosition(this.context.mainCamera);
                     this._cameraTargetPosition = pos.clone().sub(this.controls.target).add(this._lookTargetPosition);
+                    this._cameraObject?.parent?.worldToLocal(this._cameraTargetPosition);
                 }
                 break;
             }

package/src/engine-components/ParticleSystemModules.ts

@@ -656,8 +656,6 @@ export class ShapeModule implements EmitterShape {
 
     private randomizeDirection(direction: Vector3, amount: number) {
         if (amount === 0) return;
-        console.log('randomizeDirection', amount);
-
         const randomQuat = ShapeModule._randomQuat;
         const tempVec = ShapeModule._tempVec;
         tempVec.set(Math.random() - .5, Math.random() - .5, Math.random() - .5).normalize();
@@ -674,7 +672,6 @@ export class ShapeModule implements EmitterShape {
         const z = Math.cos(phi);
         const v = new Vector3(x, y, z);
         dir.lerp(v, amount);
-
     }
 
     private randomSpherePoint(pos: Vec3, radius: number, thickness: number, arc: number, vec: Vec3) {

package/src/engine-components/Renderer.ts

@@ -2,7 +2,7 @@ import { Behaviour, GameObject } from "./Component";
 import * as THREE from "three";
 // import { RendererCustomShader } from "./RendererCustomShader";
 import { RendererLightmap } from "./RendererLightmap";
-import { Context } from "../engine/engine_setup";
+import { Context, FrameEvent } from "../engine/engine_setup";
 import { getParam } from "../engine/engine_utils";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { AxesHelper, Material, Mesh, Object3D, SkinnedMesh, Texture, Vector4 } from "three";
@@ -546,11 +546,17 @@ export class Renderer extends Behaviour implements IRenderer {
         this._reflectionProbe = null;
         if (this.reflectionProbeUsage !== ReflectionProbeUsage.Off) {
             if (!this.probeAnchor) return;
-            const obj = this.probeAnchor || this.gameObject;
-            const isAnchor = this.probeAnchor ? true : false;
-            this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor);
+            // update the reflection probe right before rendering
+            // if we do it immediately the reflection probe might not be enabled yet 
+            // (since this method is called from onEnable)
+            this.startCoroutine(this._updateReflectionProbe(), FrameEvent.OnBeforeRender);
         }
     }
+    private *_updateReflectionProbe(){
+        const obj = this.probeAnchor || this.gameObject;
+        const isAnchor = this.probeAnchor ? true : false;
+        this._reflectionProbe = ReflectionProbe.get(obj, this.context, isAnchor);
+    }
 
     private setVisibility(visible: boolean) {
 

package/src/engine-components/RigidBody.ts

@@ -3,7 +3,7 @@ import * as THREE from 'three'
 import { getWorldPosition } from "../engine/engine_three_utils";
 import { serializable } from "../engine/engine_serialization_decorator";
 import { Watch } from "../engine/engine_utils";
-import { Object3D, Vector3 } from "three";
+import { Matrix4, Object3D, Vector3 } from "three";
 import { IRigidbody } from "../engine/engine_types";
 import { CollisionDetectionMode, RigidbodyConstraints } from "../engine/engine_physics.types";
 import { validate } from "../engine/engine_util_decorator";
@@ -110,6 +110,18 @@ class TransformWatch {
                 this.rotationChanged = true;
             })
         }
+
+        // detect changes in the parent matrix
+        const original = this.obj.matrixWorld.multiplyMatrices.bind(this.obj.matrixWorld);
+        const lastParentMatrix = new Matrix4();
+        this.obj.matrixWorld["multiplyMatrices"] = (parent: Matrix4, matrix: Matrix4) => {
+            if (!lastParentMatrix.equals(parent)) {
+                this.positionChanged = true;
+                this.rotationChanged = true;
+                lastParentMatrix.copy(parent);
+            }
+            return original(parent, matrix);;
+        }
     }
 
     stop() {

package/src/engine-components/ScreenCapture.ts

@@ -40,6 +40,7 @@ declare type ScreenCaptureOptions = {
 export class ScreenCapture extends Behaviour implements IPointerClickHandler {
 
     onPointerClick() {
+        if(this.context.connection.isInRoom === false) return;
         if (this.isReceiving) {
             if (this.videoPlayer)
                 this.videoPlayer.screenspace = !this.videoPlayer.screenspace;

package/src/engine-components/ShadowCatcher.ts

@@ -40,7 +40,7 @@ export class ShadowCatcher extends Behaviour {
     applyLightBlendMaterial() {
         const renderer = GameObject.getComponent(this.gameObject, Renderer);
         if (renderer) {
-            const material = renderer.material;
+            const material = renderer.sharedMaterial;
             material.blending = AdditiveBlending;
             this.applyMaterialOptions(material);
             material.onBeforeCompile = (shader) => {
@@ -50,9 +50,8 @@ export class ShadowCatcher extends Behaviour {
                 // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmask_pars_fragment.glsl.js#L2
                 // see https://github.com/mrdoob/three.js/blob/dev/src/renderers/shaders/ShaderChunk/shadowmap_pars_fragment.glsl.js#L281
 
-                shader.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",
+                shader.fragmentShader = shader.fragmentShader.replace("vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;",
                     `vec3 outgoingLight = totalDiffuse + totalSpecular + totalEmissiveRadiance;
-                
                 // diffuse-only lighting with overdrive to somewhat compensate
                 // for the loss of indirect lighting and to make it more visible.
                 vec3 direct = reflectedLight.directDiffuse * 3.;
@@ -73,15 +72,15 @@ export class ShadowCatcher extends Behaviour {
     applyShadowMaterial() {
         const renderer = GameObject.getComponent(this.gameObject, Renderer);
         if (renderer) {
-            if (renderer.material?.type !== "ShadowMaterial") {
+            if (renderer.sharedMaterial?.type !== "ShadowMaterial") {
                 const material = new ShadowMaterial();
                 material.color = this.shadowColor;
                 material.opacity = this.shadowColor.alpha;
                 this.applyMaterialOptions(material);
-                renderer.material = material;
+                renderer.sharedMaterial = material;
             }
             else {
-                const material = renderer.material as ShadowMaterial;
+                const material = renderer.sharedMaterial as ShadowMaterial;
                 material.color = this.shadowColor;
                 material.opacity = this.shadowColor.alpha;
                 this.applyMaterialOptions(material);

package/src/engine-components/Skybox.ts

@@ -18,6 +18,9 @@ export class RemoteSkybox extends Behaviour {
     @serializable()
     background: boolean = true;
 
+    @serializable()
+    backgroundBlurriness: number = 0;
+
     @serializable()
     environment: boolean = true;
 
@@ -79,6 +82,7 @@ export class RemoteSkybox extends Behaviour {
         this._prevLoadedEnvironment = envMap;
         const nameIndex = url.lastIndexOf("/");
         envMap.name = url.substring(nameIndex >= 0 ? nameIndex + 1 : 0);
+        this.context.scene.backgroundBlurriness = this.backgroundBlurriness;
     }