@needle-tools/engine 2.67.5-pre → 2.67.7-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/Effects/DepthOfField.ts

@@ -59,6 +59,7 @@ export class DepthOfField extends PostProcessingEffect {
             worldFocusRange: .2,
             focalLength: 1,
             bokehScale: 20,
+            resolutionScale: 1,
         });
 
         this.focusDistance.onValueChanged = v => {

package/src/engine-components/postprocessing/Effects/Pixelation.ts

@@ -17,7 +17,6 @@ export class PixelationEffect extends PostProcessingEffect {
         const effect = new PixelationEffectPP();
 
         this.granularity.onValueChanged = v => {
-            console.log(v);
             effect.granularity = v;
         }
 

package/src/engine-components/postprocessing/Effects/ScreenspaceAmbientOcclusion.ts

@@ -37,7 +37,7 @@ export class ScreenSpaceAmbientOcclusion extends PostProcessingEffect {
         const normalPass = new NormalPass(this.context.scene, cam);
         const depthDownsamplingPass = new DepthDownsamplingPass({
             normalBuffer: normalPass.texture,
-            resolutionScale: 0.5
+            resolutionScale: .5
         });
 
         const ssao = this._ssao = new SSAOEffect(cam!, normalPass.texture, {
@@ -47,7 +47,7 @@ export class ScreenSpaceAmbientOcclusion extends PostProcessingEffect {
             worldProximityThreshold: .1,
             worldProximityFalloff: 2,
             intensity: 1,
-            // blendFunction: BlendFunction.MULTIPLY,
+            blendFunction: BlendFunction.MULTIPLY,
         });
 
         this.intensity.onValueChanged = newValue => {

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

@@ -83,12 +83,13 @@ export abstract class PostProcessingEffect extends Component implements IEffectP
         if (typeof data === "object") {
             const types = this["$serializedTypes"];
             if (types) {
-                for (const fieldName in Object.keys(types)) {
+                for (const fieldName of Object.keys(types)) {
                     const type = types[fieldName];
                     if (type === VolumeParameter) {
                         const value = data[fieldName];
                         if (value !== undefined) {
-                            this[fieldName].value = value;
+                            const parameter = this[fieldName];
+                            parameter.value = value;
                         }
                     }
                 }

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

@@ -1,10 +1,11 @@
 import { HalfFloatType, sRGBEncoding, WebGLRenderTarget } from "three";
 import { Context } from "../../engine/engine_setup";
-import { getParam } from "../../engine/engine_utils";
-import { Effect, EffectComposer, EffectPass, Pass, RenderPass } from "postprocessing";
+import { getParam, isMobileDevice } from "../../engine/engine_utils";
+import { BloomEffect, BrightnessContrastEffect, ChromaticAberrationEffect, DepthDownsamplingPass, DepthOfFieldEffect, Effect, EffectComposer, EffectPass, HueSaturationEffect, NormalPass, Pass, PixelationEffect, RenderPass, SelectiveBloomEffect, SSAOEffect, VignetteEffect } from "postprocessing";
 import { showBalloonWarning } from "../../engine/debug/debug";
 import { Camera } from "../Camera";
 import { PostProcessingEffect } from "./PostProcessingEffect";
+import { Constructor } from "../../engine/engine_serialization_core";
 
 const debug = getParam("debugpost");
 
@@ -98,7 +99,6 @@ export class PostProcessingHandler {
         }
 
         this.applyEffects(context);
-
     }
 
 
@@ -106,11 +106,11 @@ export class PostProcessingHandler {
     private applyEffects(context: Context) {
 
         const effectsOrPasses = this._effects;
-        const camera = context.mainCameraComponent as Camera;
-        const renderer = context.renderer;
-
         if (effectsOrPasses.length <= 0) return;
 
+        const camera = context.mainCameraComponent as Camera;
+        const renderer = context.renderer;
+        const scene = context.scene;
         const cam = camera.cam;
 
         // create composer and set active on context
@@ -119,45 +119,90 @@ export class PostProcessingHandler {
             this._composer = new EffectComposer(renderer, {
                 frameBufferType: HalfFloatType,
                 stencilBuffer: true,
-                // multisampling: 2,
+                multisampling: isMobileDevice() ? 0 : 8,
             });
         }
         context.composer = this._composer;
         const composer = context.composer;
         composer.setMainCamera(cam);
         composer.setRenderer(renderer);
+        composer.setMainScene(scene);
+
         for (const prev of composer.passes)
             prev.dispose();
         composer.removeAllPasses();
-        composer.addPass(new RenderPass(context.scene, cam));
-
-
-        if (debug)
-            console.log("Set effects or passes", camera, effectsOrPasses, composer);
-
-        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
 
-        const effects: Array<Effect> = [];
-
-        for (const ef of effectsOrPasses) {
-            if (ef instanceof Effect)
-                effects.push(ef as Effect);
-            else if (ef instanceof Pass) {
+        // Render to screen pass
+        const screenpass = new RenderPass(scene, cam);
+        screenpass.mainScene = scene;
+        composer.addPass(screenpass);
+
+        try {
+            this.orderEffects();
+
+            const effects: Array<Effect> = [];
+    
+            for (const ef of effectsOrPasses) {
+                if (ef instanceof Effect)
+                    effects.push(ef as Effect);
+                else if (ef instanceof Pass) {
+                    const pass = new EffectPass(cam, ...effects);
+                    pass.mainScene = scene;
+                    pass.name = effects.map(e => e.constructor.name).join(", ");
+                    pass.enabled = true;
+                    // composer.addPass(pass);
+                    effects.length = 0;
+                    composer.addPass(ef as Pass);
+                }
+            }
+    
+            // create and apply uber pass
+            if (effects.length > 0) {
                 const pass = new EffectPass(cam, ...effects);
-                pass.name = effects.map(e => e.constructor.name).join(", ");
+                pass.mainScene = scene;
                 pass.enabled = true;
                 composer.addPass(pass);
-                effects.length = 0;
-                composer.addPass(ef as Pass);
             }
         }
-
-        // create and apply uber pass
-        if (effects.length > 0) {
-            const pass = new EffectPass(cam, ...effects);
-            pass.enabled = true;
-            composer.addPass(pass);
+        catch(e) {
+            console.error("Error while applying postprocessing effects", e);
+            composer.removeAllPasses();
+            composer.addPass(screenpass);
         }
+
+
+        if (debug)
+            console.log("PostProcessing Passes", effectsOrPasses, "->", composer.passes);
+    }
+
+    private orderEffects() {
+        if (debug) console.log("Before ordering effects", [...this._effects]);
+        // TODO: enforce correct order of effects (e.g. DOF before Bloom)
+        const effects = this._effects;
+        effects.sort((a, b) => {
+            const aidx = effectsOrder.indexOf(a.constructor as any);
+            const bidx = effectsOrder.indexOf(b.constructor as any);
+            // Unknown effects should be rendered first
+            if (aidx < 0 && bidx < 0) return -1;
+            if (aidx < 0) return 1;
+            if (bidx < 0) return -1;
+            return aidx - bidx;
+        });
+        if (debug) console.log("After ordering effects", [...this._effects]);
     }
 }
 
+
+const effectsOrder: Array<Constructor<Effect | Pass>> = [
+    NormalPass,
+    DepthDownsamplingPass,
+    SSAOEffect,
+    DepthOfFieldEffect,
+    BloomEffect,
+    SelectiveBloomEffect,
+    VignetteEffect,
+    HueSaturationEffect,
+    ChromaticAberrationEffect,
+    BrightnessContrastEffect,
+    PixelationEffect,
+];

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

@@ -42,15 +42,18 @@ export class Volume extends Behaviour implements IEditorModificationReceiver {
 
     onBeforeRender(): void {
         if (!this.context.isInXR) {
-        
-	        if (this.context.composer && (this.context.composer instanceof EffectComposer) === false) {
-	            return;
-	        }
-        
+
+            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)
+                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) {
@@ -59,9 +62,6 @@ export class Volume extends Behaviour implements IEditorModificationReceiver {
                 if (this.context.mainCamera)
                     this.context.composer.setMainCamera(this.context.mainCamera);
             }
-            if (this.context.renderer) {
-                this.context.renderer.autoClear = false;
-            }
         }
     }
 
@@ -106,9 +106,9 @@ export class Volume extends Behaviour implements IEditorModificationReceiver {
             if (!this._postprocessing)
                 this._postprocessing = new PostProcessingHandler(this.context);
             this._postprocessing.apply(this._effects);
+            this._applyPostQueue();
         }
 
-        this._applyPostQueue();
     }
 
     private unapply() {

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

@@ -15,7 +15,7 @@ export class VolumeParameter {
         const value = val ? this._lastActiveSetValue : this._defaultValue;
         this.processValue(value, true);
     }
-    private _active: boolean = false;
+    private _active: boolean = true;
 
 
 

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;