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

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;

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/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;
     }
 
 

package/src/engine-components/SpriteRenderer.ts

@@ -1,9 +1,48 @@
 import { Behaviour } from "./Component";
 import * as THREE from "three";
-import { serializable } from "../engine/engine_serialization_decorator";
-import { Color, Material, Texture } from "three";
+import { serializable, serializeable } from "../engine/engine_serialization_decorator";
+import { Color, Material, NearestFilter, Texture, Vector2, TextureFilter } from "three";
 import { RGBAColor } from "./js-extensions/RGBAColor";
+import { getParam } from "../engine/engine_utils";
 
+const debug = getParam("debugspriterenderer")
+
+class SpriteUtils {
+
+    static cache: { [key: string]: THREE.BufferGeometry } = {};
+
+    static getOrCreateGeometry(sprite: Sprite): THREE.BufferGeometry {
+        if (sprite._geometry) return sprite._geometry;
+        if (sprite.guid) {
+            if (SpriteUtils.cache[sprite.guid]) {
+                if (debug) console.log("Take cached geometry for sprite", sprite.guid);
+                return SpriteUtils.cache[sprite.guid];
+            }
+        }
+        const geo = new THREE.BufferGeometry();
+        sprite._geometry = geo;
+        const vertices = new Float32Array(sprite.triangles.length * 3);
+        const uvs = new Float32Array(sprite.triangles.length * 2);
+        for (let i = 0; i < sprite.triangles.length; i += 1) {
+            const index = sprite.triangles[i];
+
+            vertices[i * 3] = -sprite.vertices[index].x;
+            vertices[i * 3 + 1] = sprite.vertices[index].y;
+
+            vertices[i * 3 + 2] = 0;
+            const uv = sprite.uv[index];
+            uvs[i * 2] = uv.x;
+            uvs[i * 2 + 1] = 1 - uv.y;
+        }
+        geo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
+        geo.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
+        if (sprite.guid)
+            this.cache[sprite.guid] = geo;
+        if (debug)
+            console.log("Built sprite geometry", sprite, geo);
+        return geo;
+    }
+}
 
 /// <summary>
 ///   <para>SpriteRenderer draw mode.</para>
@@ -30,42 +69,59 @@ class Vec2 {
 
 export class Sprite {
 
+    @serializable()
+    guid?: string;
     @serializable(Texture)
     texture?: THREE.Texture;
-
+    @serializeable()
     triangles!: Array<number>;
+    @serializeable()
     uv!: Array<Vec2>;
+    @serializeable()
     vertices!: Array<Vec2>;
 
     _geometry?: THREE.BufferGeometry;
 }
 
-class SpriteUtils {
 
-    static getOrCreateGeometry(sprite: Sprite): THREE.BufferGeometry {
-        if (sprite._geometry) return sprite._geometry;
-        const geo = new THREE.BufferGeometry();
-        sprite._geometry = geo;
-        const vertices = new Float32Array(sprite.triangles.length * 3);
-        const uvs = new Float32Array(sprite.triangles.length * 2);
-        for (let i = 0; i < sprite.triangles.length; i += 1) {
-            const index = sprite.triangles[i];
+class Slice {
+    @serializable()
+    name!: string;
+    @serializable(Vector2)
+    offset!: Vector2;
+    @serializable(Vector2)
+    size!: Vector2;
+}
 
-            vertices[i * 3] = -sprite.vertices[index].x;
-            vertices[i * 3 + 1] = sprite.vertices[index].y;
+const $spriteTexOwner = Symbol("spriteOwner");
 
-            vertices[i * 3 + 2] = 0;
-            const uv = sprite.uv[index];
-            uvs[i * 2] = uv.x;
-            uvs[i * 2 + 1] = 1 - uv.y;
-        }
-        // console.log(vertices);
-        geo.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
-        geo.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
-        return geo;
+export class SpriteSheet {
+
+    @serializable(Sprite)
+    sprite?: Sprite;
+    @serializable()
+    index: number = 0;
+    @serializable(Slice)
+    slices!: Slice[];
+
+    update() {
+        const index = this.index;
+        if (index < 0 || index >= this.slices.length)
+            return;
+        const slice = this.slices[index];
+        let tex = this.sprite?.texture;
+        if (!tex) return;
+        tex.encoding = THREE.sRGBEncoding;
+        tex.offset.set(slice.offset.x, slice.offset.y);
+        // aniso > 1 makes the texture blurry
+        if (tex.minFilter == NearestFilter && tex.magFilter == NearestFilter)
+            tex.anisotropy = 1;
+        // tex.repeat.set(slice.size.x, -slice.size.y);
+        tex.needsUpdate = true;
     }
 }
 
+
 export class SpriteRenderer extends Behaviour {
 
     @serializable()
@@ -79,37 +135,69 @@ export class SpriteRenderer extends Behaviour {
     @serializable(Material)
     sharedMaterial?: THREE.Material;
 
-    get sprite(): Sprite | undefined {
-        return this._sprite;
+    @serializable(SpriteSheet)
+    get sprite(): SpriteSheet | undefined {
+        return this._spriteSheet;
     }
-    set sprite(value: Sprite | undefined) {
-        if(value === this._sprite) return;
-        this._sprite = value;
-        this.updateSprite();
+    set sprite(value: SpriteSheet | undefined | number) {
+        if (value === this._spriteSheet) return;
+        if (typeof value === "number") {
+            const index = Math.floor(value);;
+            if (index === value)
+                this.spriteIndex = index;
+            return;
+        }
+        else {
+            this._spriteSheet = value;
+            this.updateSprite();
+        }
     }
 
-    private _sprite?: Sprite;
+    set spriteIndex(value: number) {
+        if (!this._spriteSheet) return;
+        this._spriteSheet.index = value;
+        this._spriteSheet.update();
+    }
+    get spriteIndex(): number {
+        return this._spriteSheet?.index ?? 0;
+    }
+    get spriteFrames(): number {
+        return this._spriteSheet?.slices.length ?? 0;
+    }
+
+    private _spriteSheet?: SpriteSheet;
     private _currentSprite?: THREE.Mesh;
 
     awake(): void {
         this._currentSprite = undefined;
+        if(debug) {
+            console.log("Awake", this.name, this, this.sprite?.sprite?.texture);
+            if(this.sprite?.sprite?.texture)
+                console.log(this.sprite.sprite.texture.minFilter.toString(), this.sprite.sprite.texture.magFilter.toString());
+        }
     }
 
     start() {
-        if (this.drawMode === SpriteDrawMode.Tiled) {
-            console.warn("Tiled draw mode is not supported yet", this);
-        }
         if (!this._currentSprite)
             this.updateSprite();
         else if (this.gameObject)
             this.gameObject.add(this._currentSprite);
     }
 
+    // frame : number = 0;
+    // update(){
+    //     // const frameRate = 12;
+    //     // this.frame += frameRate * this.context.time.deltaTime;
+    //     // if(this.frame >= this.spriteFrames)
+    //     //     this.frame = 0;
+    //     // this.spriteIndex = Math.floor(this.frame);
+    //     // console.log(this.spriteIndex);
+    // }
+
     private updateSprite() {
         if (!this.__didAwake) return;
-        if (!this.sprite) return;
-        if (!this.sharedMaterial) return;
-
+        if (!this.sprite?.sprite) return;
+        const sprite = this.sprite.sprite;
         if (!this._currentSprite) {
             const mat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
             if (!mat) return;
@@ -120,17 +208,23 @@ export class SpriteRenderer extends Behaviour {
             }
             mat.alphaTest = 0.5;
 
-            if (this.sprite.texture && !mat.wireframe) {
-                const t = this.sprite.texture;
-                // t.wrapS = THREE.RepeatWrapping;
-                mat["map"] = t;
+            if (sprite.texture && !mat.wireframe) {
+                let tex = sprite.texture;
+                // the sprite renderer modifies the textue offset 
+                // so we need to clone the texture 
+                // if the same texture is used multiple times
+                if (tex[$spriteTexOwner] !== undefined && tex[$spriteTexOwner] !== this && this.spriteFrames > 1) {
+                    tex = sprite!.texture = tex.clone();
+                }
+                tex[$spriteTexOwner] = this;
+                mat["map"] = tex;
             }
-
-            this._currentSprite = new THREE.Mesh(SpriteUtils.getOrCreateGeometry(this.sprite), mat);
+            this.sharedMaterial = mat;
+            this._currentSprite = new THREE.Mesh(SpriteUtils.getOrCreateGeometry(sprite), mat);
         }
         else {
-            this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(this.sprite);
-            this._currentSprite.material["map"] = this.sprite.texture;
+            this._currentSprite.geometry = SpriteUtils.getOrCreateGeometry(sprite);
+            this._currentSprite.material["map"] = sprite.texture;
         }
 
         if (this._currentSprite.parent !== this.gameObject) {
@@ -139,5 +233,7 @@ export class SpriteRenderer extends Behaviour {
             if (this.gameObject)
                 this.gameObject.add(this._currentSprite);
         }
+
+        this._spriteSheet?.update();
     }
 }

package/src/engine-components/WebXRRig.ts

@@ -1,9 +1,22 @@
-import { Behaviour } from "./Component";
+import { Object3D } from "three";
+import { IGameObject } from "../engine/engine_types";
+import { getParam } from "../engine/engine_utils";
+import { Behaviour, GameObject } from "./Component";
+import { BoxGizmo } from "./Gizmos";
 
+const debug = getParam("debugrig");
 
 export class XRRig extends Behaviour {
     awake(): void {
         // const helper = new AxesHelper(.1);
         // this.gameObject.add(helper);
+        if (debug) {
+            const gizmoObj = new Object3D() as IGameObject;
+            gizmoObj.position.y += .5;
+            this.gameObject.add(gizmoObj);
+            const gizmo = gizmoObj.addNewComponent(BoxGizmo);
+            if (gizmo)
+                gizmo.isGizmo = false;
+        }
     }
 }

package/src/engine-components/codegen/components.ts

@@ -85,6 +85,7 @@ export { SpatialTriggerReceiver } from "../SpatialTrigger";
 export { SpatialTrigger } from "../SpatialTrigger";
 export { SpectatorCamera } from "../SpectatorCamera";
 export { Sprite } from "../SpriteRenderer";
+export { SpriteSheet } from "../SpriteRenderer";
 export { SpriteRenderer } from "../SpriteRenderer";
 export { SyncedCamera } from "../SyncedCamera";
 export { SyncedRoom } from "../SyncedRoom";

package/src/engine-components/timeline/PlayableDirector.ts

@@ -309,6 +309,11 @@ export class PlayableDirector extends Behaviour {
                         if (debug)
                             console.log("Resolved binding", binding, "to", obj);
                         track.outputs[i] = obj;
+                        if(obj instanceof Animator) {
+                            // TODO: should disable? animator but this is not the animator that is currently on the object? needs investigation
+                            // console.log("DISABLE ANIMATOR", obj, obj.name, binding, this._guidsMap);
+                            // obj.enabled = false;
+                        }
                     }
                 }
                 else if (binding === null) {