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

package/src/engine/extensions/{NEEDLE_deferred_texture.ts → NEEDLE_progressive.ts}

@@ -5,14 +5,13 @@ import { Context } from "../engine_setup";
 import { addDracoAndKTX2Loaders } from "../engine_loaders";
 import { getParam, getPath } from "../engine_utils";
 
-export const EXTENSION_NAME = "NEEDLE_deferred_texture";
+export const EXTENSION_NAME = "NEEDLE_progressive";
 
 const debug = getParam("debugprogressive");
 
-declare type DeferredTextureModel = {
+declare type ProgressiveTextureSchema = {
     uri: string;
     guid: string;
-    usage?: string,
 }
 
 const debug_toggle_maps: Map<Material, { [key: string]: { original: Texture, lod0: Texture } }> = new Map();
@@ -35,22 +34,23 @@ if (debug) {
     });
 }
 
-export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
-
+export class NEEDLE_progressive 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);
-                NEEDLE_deferred_texture.getOrLoadTexture(context, source, material, slot, val, level).then(t => {
+
+                if (debug) console.log("-----------\n", "FIND", material.name, slot, val?.name, val?.userData, val, material);
+
+                NEEDLE_progressive.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) {
@@ -107,14 +107,14 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
             console.log("AFTER", this.sourceId, gltf);
         this.parser.json.textures?.forEach((textureInfo, index) => {
             if (textureInfo?.extensions) {
-                const ext: DeferredTextureModel = textureInfo?.extensions[EXTENSION_NAME];
+                const ext: ProgressiveTextureSchema = textureInfo?.extensions[EXTENSION_NAME];
                 if (ext) {
                     const prom = this.parser.getDependency("texture", index);
                     this._loading.splice(this._loading.indexOf(index), 1);
                     prom.then(t => {
                         if (debug) console.log("register texture", t.name, t.uuid, ext);
                         t.userData.deferred = ext;
-                        NEEDLE_deferred_texture.cache.set(t.uuid, ext);
+                        NEEDLE_progressive.cache.set(t.uuid, ext);
                     });
                 }
             }
@@ -123,13 +123,13 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
         return null;
     }
 
-    private static cache = new Map<string, DeferredTextureModel>();
+    private static cache = new Map<string, ProgressiveTextureSchema>();
     private static resolved: { [key: string]: Texture } = {};
 
     private static async getOrLoadTexture(context: Context, source: SourceIdentifier | undefined, material: Material, slot: string, current: Texture, _level: number): Promise<Texture | null> {
 
         const key = current.uuid;
-        const ext: DeferredTextureModel | undefined = NEEDLE_deferred_texture.cache.get(key);// || current.userData.deferred;
+        const ext: ProgressiveTextureSchema | undefined = NEEDLE_progressive.cache.get(key);// || current.userData.deferred;
         if (ext) {
             if (debug)
                 console.log(key, ext.uri, ext.guid);
@@ -156,7 +156,7 @@ export class NEEDLE_deferred_texture implements GLTFLoaderPlugin {
                 for (const tex of gltf.parser.json.textures) {
                     index++;
                     if (tex?.extensions) {
-                        const other: DeferredTextureModel = tex?.extensions[EXTENSION_NAME];
+                        const other: ProgressiveTextureSchema = tex?.extensions[EXTENSION_NAME];
                         if (other?.guid) {
                             if (other.guid === ext.guid) {
                                 found = true;
@@ -174,6 +174,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/extensions/extensions.ts

@@ -12,7 +12,7 @@ import { SourceIdentifier } from "../engine_types";
 import { Context } from "../engine_setup";
 import { NEEDLE_lighting_settings } from "./NEEDLE_lighting_settings";
 import { NEEDLE_render_objects } from "./NEEDLE_render_objects";
-import { NEEDLE_deferred_texture } from "./NEEDLE_deferred_texture";
+import { NEEDLE_progressive } from "./NEEDLE_progressive";
 
 export function registerComponentExtension(loader: GLTFLoader): NEEDLE_components {
     const ext = new NEEDLE_components();
@@ -40,7 +40,7 @@ export function registerExtensions(loader: GLTFLoader, context: Context, sourceI
     loader.register(p => new NEEDLE_lighting_settings(p, sourceId, context));
     loader.register(p => new NEEDLE_techniques_webgl(p, sourceId));
     loader.register(p => new NEEDLE_render_objects(p, sourceId));
-    loader.register(p => new NEEDLE_deferred_texture(p, sourceId, context));
+    loader.register(p => new NEEDLE_progressive(p, sourceId, context));
     loader.register(p => new EXT_texture_exr(p));
 
     const setPointerResolverFunction = loader["setAnimationPointerResolver"];

package/src/engine-components/Camera.ts

@@ -9,6 +9,7 @@ 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";
 
 export enum ClearFlags {
     Skybox = 1,
@@ -17,6 +18,7 @@ export enum ClearFlags {
 }
 
 const debug = getParam("debugcam");
+const debugscreenpointtoray = getParam("debugscreenpointtoray");
 
 export class Camera extends Behaviour implements ICamera {
 
@@ -52,6 +54,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 +66,7 @@ export class Camera extends Behaviour implements ICamera {
             this._cam.updateProjectionMatrix();
         }
     }
+    private _farClipPlane: number = 1000;
 
     @serializable()
     public get clearFlags(): ClearFlags {
@@ -94,8 +98,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 {
@@ -130,14 +159,15 @@ export class Camera extends Behaviour implements ICamera {
     private static _origin: THREE.Vector3 = new THREE.Vector3();
     private static _direction: THREE.Vector3 = new THREE.Vector3();
     public screenPointToRay(x: number, y: number, ray?: Ray): Ray {
+        let cam = this.cam;
         const origin = Camera._origin;
         origin.set(x, y, -1);
         this.context.input.convertScreenspaceToRaycastSpace(origin);
+        if(debugscreenpointtoray) console.log("screenPointToRay", x.toFixed(2), y.toFixed(2), "now:", origin.x.toFixed(2), origin.y.toFixed(2), "isInXR:" + this.context.isInXR);
         origin.z = -1;
-        origin.unproject(this.cam);
-
+        origin.unproject(cam);
         const dir = Camera._direction.set(origin.x, origin.y, origin.z);
-        const camPosition = getWorldPosition(this.cam);
+        const camPosition = getWorldPosition(cam);
         dir.sub(camPosition);
         dir.normalize();
         if (ray) {
@@ -153,6 +183,17 @@ export class Camera extends Behaviour implements ICamera {
         if (!this.sourceId) {
             console.warn("Camera has no source - the camera should be exported inside a gltf", this.name);
         }
+
+        if(debugscreenpointtoray){
+            window.addEventListener("pointerdown", evt => {
+                const px = evt.clientX;
+                const py = evt.clientY;
+                console.log("touch", px.toFixed(2), py.toFixed(2))
+                const ray = this.screenPointToRay(px, py);
+                const randomHex = "#" + Math.floor(Math.random()*16777215).toString(16);
+                Gizmos.DrawRay(ray.origin, ray.direction, randomHex, 10);
+            });
+        }
     }
 
     onEnable(): void {
@@ -220,6 +261,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/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 {
@@ -292,6 +292,7 @@ export class Light extends Behaviour implements ILight {
 
         if (lightAlreadyCreated && !this.light) {
             this.light = this.gameObject as unknown as THREE.Light;
+            this._intensity = this.light.intensity;
 
             switch (this.type) {
                 case LightType.Directional:
@@ -344,7 +345,10 @@ 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/OrbitControls.ts

@@ -11,6 +11,9 @@ import { getParam, isMobileDevice } from "../engine/engine_utils";
 
 const freeCam = getParam("freecam");
 
+const disabledKeys = { LEFT: "", UP: "", RIGHT: "", BOTTOM: "" };
+let defaultKeys: any = undefined;
+
 export class OrbitControls extends Behaviour {
     public get controls() {
         return this._controls;
@@ -73,6 +76,7 @@ export class OrbitControls extends Behaviour {
             if (cam)
                 this._cameraObject = cam;
             this._controls = new ThreeOrbitControls(cam!, this.context.renderer.domElement);
+            if (defaultKeys === undefined) defaultKeys = { ...this._controls.keys };
         }
 
         if (this._controls) {
@@ -80,12 +84,11 @@ export class OrbitControls extends Behaviour {
                 this.enablePan = true;
                 this.enableZoom = true;
                 this.middleClickToFocus = true;
-                if(isMobileDevice()) this.doubleClickToFocus = true;
+                if (isMobileDevice()) this.doubleClickToFocus = true;
             }
 
             this._controls.enableDamping = this.enableDamping;
-            //@ts-ignore (not in types)
-            this._controls.enableKeys = this.enableKeys;
+            this._controls.keys = this.enableKeys ? defaultKeys : disabledKeys;
             this._controls.autoRotate = this.autoRotate;
             this._controls.autoRotateSpeed = this.autoRotateSpeed;
             this._controls.enableZoom = this.enableZoom;
@@ -164,6 +167,7 @@ export class OrbitControls extends Behaviour {
             this._inputs += 1;
         }
         if (this._inputs > 0) {
+            this.autoRotate = false;
             this._controls.autoRotate = false;
             this._lerpCameraToTarget = false;
             this._lerpToTargetPosition = false;

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,12 +2,12 @@ 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";
 import { NEEDLE_render_objects } from "../engine/extensions/NEEDLE_render_objects";
-import { NEEDLE_deferred_texture } from "../engine/extensions/NEEDLE_deferred_texture";
+import { NEEDLE_progressive } from "../engine/extensions/NEEDLE_progressive";
 import { NEED_UPDATE_INSTANCE_KEY } from "../engine/engine_instancing";
 import { IRenderer, ISharedMaterials } from "../engine/engine_types";
 import { debug, ReflectionProbe } from "./ReflectionProbe";
@@ -465,11 +465,11 @@ export class Renderer extends Behaviour implements IRenderer {
             if (debugProgressiveLoading) {
                 console.log("Load material LOD (with delay)", material.name);
                 setTimeout(() => {
-                    NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
+                    NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
                 }, 2000);
             }
             else {
-                NEEDLE_deferred_texture.assignTextureLOD(this.context, this.sourceId, material);
+                NEEDLE_progressive.assignTextureLOD(this.context, this.sourceId, material);
             }
         }
 
@@ -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;
     }