@needle-tools/engine 2.67.6-pre → 2.67.8-pre

package/src/engine/engine_time.ts

@@ -20,11 +20,13 @@ export class Time {
 
     get frameCount() { return this.frame; }
     get smoothedFps() { return this._smoothedFps; }
+    get smoothedDeltaTime() { return 1 / this._smoothedFps; }
 
 
     private clock = new Clock();
 
     private _smoothedFps: number = 0;
+    private _smoothedDeltaTime: number = 0;
     private _fpsSamples: number[] = [];
     private _fpsSampleIndex: number = 0;
 
@@ -47,6 +49,7 @@ export class Time {
         let sum = 0;
         for (let i = 0; i < this._fpsSamples.length; i++)
             sum += this._fpsSamples[i];
-        this._smoothedFps = 1 / (sum / this._fpsSamples.length);
+        this._smoothedDeltaTime = sum / this._fpsSamples.length;
+        this._smoothedFps = 1 / this._smoothedDeltaTime;
     }
 }

package/src/engine-components/AnimatorController.ts

@@ -432,9 +432,9 @@ export class AnimatorController {
             case AnimatorConditionMode.IfNot:
                 return param.value === false;
             case AnimatorConditionMode.Greater:
-                return param.value > cond.threshold;
+                return param.value as number > cond.threshold;
             case AnimatorConditionMode.Less:
-                return param.value < cond.threshold;
+                return param.value as number < cond.threshold;
             case AnimatorConditionMode.Equals:
                 return param.value === cond.threshold;
             case AnimatorConditionMode.NotEqual:

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

@@ -1,213 +1,213 @@
-import { Behaviour, GameObject } from "../Component";
-import { serializeable } from "../../engine/engine_serialization_decorator";
-import { getParam } from "../../engine/engine_utils";
-import { VolumeProfile } from "./VolumeProfile";
-import { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync";
-import { PostProcessingHandler } from "./PostProcessingHandler";
-import { PostProcessingEffect } from "./PostProcessingEffect";
-import { VolumeParameter } from "./VolumeParameter";
-import { getEditorModificationCache } from "../../engine/engine_editor-sync";
-import { isDevEnvironment } from "../../engine/debug";
-import { EffectComposer } from "postprocessing";
-
-const debug = getParam("debugpost");
-
-export class Volume extends Behaviour implements IEditorModificationReceiver {
-
-    @serializeable(VolumeProfile)
-    sharedProfile?: VolumeProfile;
-
-    private _postprocessing?: PostProcessingHandler;
-    private _effects: PostProcessingEffect[] = [];
-
-    awake() {
-        // ensure the profile is initialized
-        this.sharedProfile?.init();
-
-        if (debug) {
-            console.log(this);
-            console.log("Press P to toggle post processing");
-            window.addEventListener("keydown", (e) => {
-                if (e.key === "p") {
-                    console.log("Toggle volume: " + this.name, !this.enabled);
-                    this.enabled = !this.enabled;
-                }
-            });
-        }
-    }
-
-    onDisable() {
-        this._postprocessing?.unapply();
-    }
-
-    onBeforeRender(): void {
-        if (!this.context.isInXR) {
-
-            if (this.context.composer && (this.context.composer instanceof EffectComposer) === false) {
-                return;
-            }
-
-            // Wait for the first frame to be rendered before creating because then we know we have a camera (issue 135)
-            if (this.context.mainCamera) {
-                if (!this._postprocessing || !this._postprocessing.isActive) {
-                    this.apply();
-                    // TODO: remove this workaround for postprocessing rendering not working correctly when applied for the first time
-                    this.apply();
-                }
-            }
-
-            if (this.context.composer) {
-                this.context.composer.setRenderer(this.context.renderer);
-                this.context.composer.setMainScene(this.context.scene);
-                if (this.context.mainCamera)
-                    this.context.composer.setMainCamera(this.context.mainCamera);
-            }
-        }
-    }
-
-    onDestroy(): void {
-        this._postprocessing?.dispose();
-    }
-
-    private _lastApplyTime?: number;
-    private _rapidApplyCount = 0;
-
-    private apply() {
-        if (debug) console.log("Apply PostProcessing", this, this.context.mainCamera?.name);
-
-        if (isDevEnvironment()) {
-            if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
-                this._rapidApplyCount++;
-                if (this._rapidApplyCount === 5)
-                    console.warn("Detected rapid post processing modifications - this might be a bug", this);
-            }
-            this._lastApplyTime = Date.now();
-        }
-
-
-        this.unapply();
-
-        this._effects.length = 0;
-        // get from profile
-        if (this.sharedProfile?.components) {
-            this._effects.push(...this.sharedProfile.components);
-        }
-        // get additional effects
-        const additionalComponents = this.gameObject.getComponentsInChildren(PostProcessingEffect);
-        if (debug && additionalComponents?.length)
-            console.log("Additional", additionalComponents);
-        if (additionalComponents) {
-            for (const comp of additionalComponents) {
-                if (comp.active) this._effects.push(comp);
-            }
-        }
-
-        if (this._effects.length > 0) {
-            if (!this._postprocessing)
-                this._postprocessing = new PostProcessingHandler(this.context);
-            this._postprocessing.apply(this._effects);
-            this._applyPostQueue();
-        }
-
-    }
-
-    private unapply() {
-        this._postprocessing?.unapply();
-    }
-
-
-    private _applyPostQueue() {
-        if (this._modificationQueue) {
-            for (const entry of this._modificationQueue.values()) this.onEditorModification(entry);
-            this._modificationQueue.clear();
-        }
-    }
-
-    /** called from needle editor sync package if its active */
-    onEditorModification(modification: EditorModification): void | boolean | undefined {
-
-        if (modification.propertyName.startsWith("postprocessing.")) {
-
-            if (!this._postprocessing) {
-                if (!this._modificationQueue) this._modificationQueue = new Map<string, EditorModification>();
-                this._modificationQueue.set(modification.propertyName, modification);
-                return true;
-            }
-
-            if (!this._effects?.length) return;
-            const path = modification.propertyName.split(".");
-            if (path.length === 3 || path.length === 4) {
-                const componentName = path[1];
-                const propertyName = path[2];
-                for (const comp of this._effects) {
-                    if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
-
-                        if (propertyName === "active") {
-                            comp.active = modification.value;
-                            this.scheduleRecreate();
-                            return;
-                        }
-
-                        // cache the volume parameters
-                        if (!effectVolumeProperties.has(componentName)) {
-                            const volumeParameterKeys = new Array<string>();
-                            effectVolumeProperties.set(componentName, volumeParameterKeys);
-                            const keys = Object.keys(comp);
-                            for (const key of keys) {
-                                const prop = comp[key];
-                                if (prop instanceof VolumeParameter) {
-                                    volumeParameterKeys.push(key);
-                                }
-                            }
-                        }
-
-                        if (effectVolumeProperties.has(componentName)) {
-                            const paramName = propertyName.toLowerCase();
-                            const volumeParameterKeys = effectVolumeProperties.get(componentName)!;
-                            for (const key of volumeParameterKeys) {
-                                if (key.toLowerCase() === paramName) {
-                                    const prop = comp[key] as VolumeParameter;
-                                    if (prop instanceof VolumeParameter) {
-                                        const isActiveStateChange = path.length === 4 && path[3] === "active";
-                                        if (isActiveStateChange) {
-                                            prop.overrideState = modification.value;
-                                            this.scheduleRecreate();
-                                        }
-                                        else if (prop && prop.value !== undefined) {
-                                            prop.value = modification.value;
-                                        }
-                                    }
-                                    return;
-                                }
-                            }
-                        }
-
-                        console.warn("Unknown modification", propertyName);
-                        return;
-                    }
-                }
-            }
-            return true;
-        }
-
-        return false;
-    }
-
-    private _modificationQueue?: Map<string, EditorModification>;
-
-    private _recreateId: number = -1;
-    private scheduleRecreate() {
-        // When the editor modifications come in with changed active effects we want/need to re-create the effects
-        // We defer it slightly because multiple active changes could be made and we dont want to recreate the full effect stack multiple times
-        const id = ++this._recreateId;
-        setTimeout(() => {
-            if (id !== this._recreateId) return;
-            this.onDisable();
-            this.onEnable();
-        }, 200);
-    }
-
-}
-
-/** cached VolumeParameter keys per object */
-const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();
+import { Behaviour, GameObject } from "../Component";
+import { serializeable } from "../../engine/engine_serialization_decorator";
+import { getParam } from "../../engine/engine_utils";
+import { VolumeProfile } from "./VolumeProfile";
+import { EditorModification, IEditorModification as IEditorModificationReceiver } from "../../engine/engine_editor-sync";
+import { PostProcessingHandler } from "./PostProcessingHandler";
+import { PostProcessingEffect } from "./PostProcessingEffect";
+import { VolumeParameter } from "./VolumeParameter";
+import { getEditorModificationCache } from "../../engine/engine_editor-sync";
+import { isDevEnvironment } from "../../engine/debug";
+import { EffectComposer } from "postprocessing";
+
+const debug = getParam("debugpost");
+
+export class Volume extends Behaviour implements IEditorModificationReceiver {
+
+    @serializeable(VolumeProfile)
+    sharedProfile?: VolumeProfile;
+
+    private _postprocessing?: PostProcessingHandler;
+    private _effects: PostProcessingEffect[] = [];
+
+    awake() {
+        // ensure the profile is initialized
+        this.sharedProfile?.init();
+
+        if (debug) {
+            console.log(this);
+            console.log("Press P to toggle post processing");
+            window.addEventListener("keydown", (e) => {
+                if (e.key === "p") {
+                    console.log("Toggle volume: " + this.name, !this.enabled);
+                    this.enabled = !this.enabled;
+                }
+            });
+        }
+    }
+
+    onDisable() {
+        this._postprocessing?.unapply();
+    }
+
+    onBeforeRender(): void {
+        if (!this.context.isInXR) {
+
+            if (this.context.composer && (this.context.composer instanceof EffectComposer) === false) {
+                return;
+            }
+
+            // Wait for the first frame to be rendered before creating because then we know we have a camera (issue 135)
+            if (this.context.mainCamera) {
+                if (!this._postprocessing || !this._postprocessing.isActive) {
+                    this.apply();
+                    // TODO: remove this workaround for postprocessing rendering not working correctly when applied for the first time
+                    this.apply();
+                }
+            }
+
+            if (this.context.composer) {
+                this.context.composer.setRenderer(this.context.renderer);
+                this.context.composer.setMainScene(this.context.scene);
+                if (this.context.mainCamera)
+                    this.context.composer.setMainCamera(this.context.mainCamera);
+            }
+        }
+    }
+
+    onDestroy(): void {
+        this._postprocessing?.dispose();
+    }
+
+    private _lastApplyTime?: number;
+    private _rapidApplyCount = 0;
+
+    private apply() {
+        if (debug) console.log("Apply PostProcessing", this, this.context.mainCamera?.name);
+
+        if (isDevEnvironment()) {
+            if (this._lastApplyTime !== undefined && Date.now() - this._lastApplyTime < 100) {
+                this._rapidApplyCount++;
+                if (this._rapidApplyCount === 5)
+                    console.warn("Detected rapid post processing modifications - this might be a bug", this);
+            }
+            this._lastApplyTime = Date.now();
+        }
+
+
+        this.unapply();
+
+        this._effects.length = 0;
+        // get from profile
+        if (this.sharedProfile?.components) {
+            this._effects.push(...this.sharedProfile.components);
+        }
+        // get additional effects
+        const additionalComponents = this.gameObject.getComponentsInChildren(PostProcessingEffect);
+        if (debug && additionalComponents?.length)
+            console.log("Additional", additionalComponents);
+        if (additionalComponents) {
+            for (const comp of additionalComponents) {
+                if (comp.active) this._effects.push(comp);
+            }
+        }
+
+        if (this._effects.length > 0) {
+            if (!this._postprocessing)
+                this._postprocessing = new PostProcessingHandler(this.context);
+            this._postprocessing.apply(this._effects);
+            this._applyPostQueue();
+        }
+
+    }
+
+    private unapply() {
+        this._postprocessing?.unapply();
+    }
+
+
+    private _applyPostQueue() {
+        if (this._modificationQueue) {
+            for (const entry of this._modificationQueue.values()) this.onEditorModification(entry);
+            this._modificationQueue.clear();
+        }
+    }
+
+    /** called from needle editor sync package if its active */
+    onEditorModification(modification: EditorModification): void | boolean | undefined {
+
+        if (modification.propertyName.startsWith("postprocessing.")) {
+
+            if (!this._postprocessing) {
+                if (!this._modificationQueue) this._modificationQueue = new Map<string, EditorModification>();
+                this._modificationQueue.set(modification.propertyName, modification);
+                return true;
+            }
+
+            if (!this._effects?.length) return;
+            const path = modification.propertyName.split(".");
+            if (path.length === 3 || path.length === 4) {
+                const componentName = path[1];
+                const propertyName = path[2];
+                for (const comp of this._effects) {
+                    if (comp.typeName?.toLowerCase() === componentName.toLowerCase()) {
+
+                        if (propertyName === "active") {
+                            comp.active = modification.value;
+                            this.scheduleRecreate();
+                            return;
+                        }
+
+                        // cache the volume parameters
+                        if (!effectVolumeProperties.has(componentName)) {
+                            const volumeParameterKeys = new Array<string>();
+                            effectVolumeProperties.set(componentName, volumeParameterKeys);
+                            const keys = Object.keys(comp);
+                            for (const key of keys) {
+                                const prop = comp[key];
+                                if (prop instanceof VolumeParameter) {
+                                    volumeParameterKeys.push(key);
+                                }
+                            }
+                        }
+
+                        if (effectVolumeProperties.has(componentName)) {
+                            const paramName = propertyName.toLowerCase();
+                            const volumeParameterKeys = effectVolumeProperties.get(componentName)!;
+                            for (const key of volumeParameterKeys) {
+                                if (key.toLowerCase() === paramName) {
+                                    const prop = comp[key] as VolumeParameter;
+                                    if (prop instanceof VolumeParameter) {
+                                        const isActiveStateChange = path.length === 4 && path[3] === "active";
+                                        if (isActiveStateChange) {
+                                            prop.overrideState = modification.value;
+                                            this.scheduleRecreate();
+                                        }
+                                        else if (prop && prop.value !== undefined) {
+                                            prop.value = modification.value;
+                                        }
+                                    }
+                                    return;
+                                }
+                            }
+                        }
+
+                        console.warn("Unknown modification", propertyName);
+                        return;
+                    }
+                }
+            }
+            return true;
+        }
+
+        return false;
+    }
+
+    private _modificationQueue?: Map<string, EditorModification>;
+
+    private _recreateId: number = -1;
+    private scheduleRecreate() {
+        // When the editor modifications come in with changed active effects we want/need to re-create the effects
+        // We defer it slightly because multiple active changes could be made and we dont want to recreate the full effect stack multiple times
+        const id = ++this._recreateId;
+        setTimeout(() => {
+            if (id !== this._recreateId) return;
+            this.onDisable();
+            this.onEnable();
+        }, 200);
+    }
+
+}
+
+/** cached VolumeParameter keys per object */
+const effectVolumeProperties: Map<string, string[]> = new Map<string, string[]>();

package/src/engine-components/ui/Canvas.ts

@@ -8,11 +8,13 @@ import { getComponentsInChildren } from "../../engine/engine_components";
 import { IComponent } from "../../engine/engine_types";
 import { GameObject } from "../Component";
 import { showBalloonMessage, showBalloonWarning } from "../../engine/debug";
+import { Object3D } from "three";
 
 export enum RenderMode {
     ScreenSpaceOverlay = 0,
     ScreenSpaceCamera = 1,
     WorldSpace = 2,
+    Undefined = -1,
 }
 
 export class Canvas extends UIRootComponent {
@@ -74,7 +76,7 @@ export class Canvas extends UIRootComponent {
         this._renderMode = val;
         this.onRenderSettingsChanged();
     }
-    private _renderMode: RenderMode = -1;
+    private _renderMode: RenderMode = RenderMode.Undefined;
 
     private _rootCanvas!: Canvas;
 
@@ -109,12 +111,28 @@ export class Canvas extends UIRootComponent {
     }
 
     private previousAspect: number = -1;
+    private previousParent: Object3D | null = null;
 
     onBeforeRender() {
         if (this.isScreenSpace && this.context.mainCameraComponent && this.context.mainCameraComponent.aspect !== this.previousAspect) {
             this.previousAspect = this.context.mainCameraComponent.aspect;
             this.updateRenderMode();
         }
+        else if(this.renderOnTop){
+            // This is just a test but in reality it should be combined with all world canvases with render on top in one render pass
+            this.previousParent = this.gameObject.parent;
+            this.gameObject.removeFromParent();
+        }
+    }
+
+    onAfterRender(): void {
+        if (this.renderOnTop && this.previousParent && this.context.mainCamera) {
+            this.previousParent.add(this.gameObject);
+            this.context.renderer.autoClear = false;
+            this.context.renderer.clearDepth();
+            this.context.renderer.render(this.gameObject, this.context.mainCamera);
+            this.context.renderer.autoClear = true;
+        }
     }
 
     applyRenderSettings(){

package/src/engine-components/ui/EventSystem.ts

@@ -382,8 +382,7 @@ export class EventSystem extends Behaviour {
                 const actualGo = parent[$shadowDomOwner].gameObject;
                 if (actualGo) {
                     const res = UIRaycastUtils.isInteractable(actualGo, this.out);
-                    // console.log(actualGo, res);
-                    if (!res) return this.out.canvasGroup?.interactable ?? false;
+                    if (!res) return false;
                     canvasGroup = this.out.canvasGroup ?? null;
 
                     const handled = this.handleMeshUIIntersection(object, pressedOrClicked);

package/src/engine-components/ui/Text.ts

@@ -214,6 +214,9 @@ export class Text extends Graphic {
 
         this.getAlignment(opts, isTextIntermediate);
         const block = rt.createNewBlock(opts);
+        // The text block should never write depth to avoid z-fighting
+        const mat = block["backgroundMaterial"];
+        if(mat) mat.depthWrite = false;
         if (content) {
             if (Array.isArray(content)) {
                 block.add(...content);

package/src/engine-components/ui/Utils.ts

@@ -34,11 +34,13 @@ export function updateRenderSettings(shadowComponent: THREE.Object3D, settings:
     //     console.log(shadowComponent)
     const mat = shadowComponent["material"];
     if (mat?.isMaterial === true) {
-        // console.log(shadowComponent, shadowComponent.name);
-        // console.log(mat, component.renderOnTop, component.doubleSided, component.depthWrite);
-        mat.depthTest = !settings.renderOnTop ?? true;
+        const parent = shadowComponent.parent;
+        if (parent && parent["isText"] === true) {
+            // console.log(shadowComponent, shadowComponent.name);
+        }
+        // mat.depthTest = !settings.renderOnTop ?? true;
+        // mat.depthWrite = settings.depthWrite ?? false;
         mat.side = (settings.doubleSided ?? true) ? DoubleSide : FrontSide;
-        mat.depthWrite = settings.depthWrite ?? false;
         mat.shadowSide = settings.doubleSided ? DoubleSide : FrontSide;
         shadowComponent.castShadow = settings.castShadows ? settings.castShadows : false;
         shadowComponent.receiveShadow = settings.receiveShadows ? settings.receiveShadows : false;