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

package/lib/engine-components/postprocessing/VolumeParameter.js.map

@@ -1 +1 @@
-{"version":3,"file":"VolumeParameter.js","sourceRoot":"","sources":["../../../../src/engine-components/postprocessing/VolumeParameter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAKjE,MAAM,OAAO,eAAe;IAGxB,IAAI,aAAa;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IACD,IAAI,aAAa,CAAC,GAAY;QAC1B,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG;YAAE,OAAO;QACjC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAClE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IACO,OAAO,GAAY,KAAK,CAAC;IAKjC,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,GAAQ;QACd,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IACO,MAAM,CAAM;IACZ,mBAAmB,CAAO;IAGlC,IAAI,YAAY,CAAC,GAAQ;QACrB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;IAC7B,CAAC;IACO,aAAa,GAAQ,SAAS,CAAC;IAGvC,8EAA8E;IAC9E,MAAM;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,2DAA2D;IAC3D,cAAc,CAA4C;IAC1D,6DAA6D;IAC7D,cAAc,CAA0C;IAGhD,YAAY,CAAC,GAAQ,EAAE,WAAoB;QAC/C,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO;QAE9C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,KAAK;YACtD,OAAO;QAEX,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;YACnD,6HAA6H;YAC7H,8EAA8E;YAC9E,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YACjC,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;SAC5B;aACI;YACD,IAAI,CAAC,mBAAmB,GAAG,GAAG,CAAC;YAC/B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc;gBACnC,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;SACrB;QAED,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;SAC5C;IACL,CAAC;IAEO,kBAAkB,CAAC,QAAa;QAEpC,IAAI,IAAI,CAAC,mBAAmB,KAAK,QAAQ;YACrC,OAAO,KAAK,CAAC;QAEjB,0IAA0I;QAE1I,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AA5EG;IADC,YAAY,EAAE;oDAGd;AAYD;IADC,YAAY,EAAE;4CAGd"}
+{"version":3,"file":"VolumeParameter.js","sourceRoot":"","sources":["../../../../src/engine-components/postprocessing/VolumeParameter.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAKjE,MAAM,OAAO,eAAe;IAGxB,IAAI,aAAa;QACb,OAAO,IAAI,CAAC,OAAO,CAAC;IACxB,CAAC;IACD,IAAI,aAAa,CAAC,GAAY;QAC1B,IAAI,IAAI,CAAC,OAAO,KAAK,GAAG;YAAE,OAAO;QACjC,IAAI,CAAC,OAAO,GAAG,GAAG,CAAC;QACnB,MAAM,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;QAClE,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;IACO,OAAO,GAAY,IAAI,CAAC;IAKhC,IAAI,KAAK;QACL,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IACD,IAAI,KAAK,CAAC,GAAQ;QACd,IAAI,CAAC,YAAY,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;IAClC,CAAC;IACO,MAAM,CAAM;IACZ,mBAAmB,CAAO;IAGlC,IAAI,YAAY,CAAC,GAAQ;QACrB,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;IAC7B,CAAC;IACO,aAAa,GAAQ,SAAS,CAAC;IAGvC,8EAA8E;IAC9E,MAAM;QACF,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,mBAAmB,EAAE,IAAI,CAAC,CAAC;IACtD,CAAC;IAED,2DAA2D;IAC3D,cAAc,CAA4C;IAC1D,6DAA6D;IAC7D,cAAc,CAA0C;IAGhD,YAAY,CAAC,GAAQ,EAAE,WAAoB;QAC/C,IAAI,GAAG,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO;QAE9C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,KAAK;YACtD,OAAO;QAEX,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa,KAAK,SAAS,EAAE;YACnD,6HAA6H;YAC7H,8EAA8E;YAC9E,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,aAAa,CAAC;YACjC,GAAG,GAAG,IAAI,CAAC,aAAa,CAAC;SAC5B;aACI;YACD,IAAI,CAAC,mBAAmB,GAAG,GAAG,CAAC;YAC/B,IAAI,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,cAAc;gBACnC,GAAG,GAAG,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;YACnC,IAAI,CAAC,MAAM,GAAG,GAAG,CAAC;SACrB;QAED,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,QAAQ,EAAE,IAAI,CAAC,CAAC;SAC5C;IACL,CAAC;IAEO,kBAAkB,CAAC,QAAa;QAEpC,IAAI,IAAI,CAAC,mBAAmB,KAAK,QAAQ;YACrC,OAAO,KAAK,CAAC;QAEjB,0IAA0I;QAE1I,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AA5EG;IADC,YAAY,EAAE;oDAGd;AAYD;IADC,YAAY,EAAE;4CAGd"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@needle-tools/engine",
-    "version": "2.67.5-pre",
+    "version": "2.67.6-pre",
     "description": "Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development, and can be deployed anywhere. It is flexible, extensible, and collaboration and XR come naturally.",
     "main": "dist/needle-engine.umd.cjs",
     "module": "lib/needle-engine.js",

package/src/engine/engine_gizmos.ts

@@ -21,6 +21,7 @@ export class Gizmos {
         positions.needsUpdate = true;
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
     }
 
     static DrawDirection(pt: Vec3, direction: Vec3 | Vec4, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true, lengthFactor: number = 1) {
@@ -40,6 +41,7 @@ export class Gizmos {
         positions.needsUpdate = true;
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
 
     }
 
@@ -52,6 +54,7 @@ export class Gizmos {
         positions.needsUpdate = true;
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
     }
 
     static DrawWireSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
@@ -59,6 +62,7 @@ export class Gizmos {
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
     }
 
     static DrawSphere(center: Vec3, radius: number, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
@@ -66,6 +70,7 @@ export class Gizmos {
         setWorldPositionXYZ(obj, center.x, center.y, center.z);
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
+        obj.material["depthWrite"] = false;
     }
 
     static DrawBox(center: Vec3, size: Vec3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
@@ -75,6 +80,7 @@ export class Gizmos {
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
+        obj.material["depthWrite"] = false;
     }
 
     static DrawBox3(box: Box3, color: ColorRepresentation = defaultColor, duration: number = 0, depthTest: boolean = true) {
@@ -84,6 +90,7 @@ export class Gizmos {
         obj.material["color"].set(color);
         obj.material["depthTest"] = depthTest;
         obj.material["wireframe"] = true;
+        obj.material["depthWrite"] = false;
     }
 
     private static _up = new Vector3(0, 1, 0);

package/src/engine/engine_setup.ts

@@ -244,7 +244,6 @@ export class Context implements IContext {
 			this.isManagedExternally = true;
 		}
 		else {
-			const useComposer = utils.getParam("postfx");
 			this.renderer = new WebGLRenderer({ 
 				antialias: true 
 			});
@@ -263,8 +262,6 @@ export class Context implements IContext {
 			this.renderer.setSize(this.domWidth, this.domHeight);
 			this.renderer.outputEncoding = THREE.sRGBEncoding;
 			this.renderer.physicallyCorrectLights = true;
-
-			this.composer = useComposer ? new EffectComposer(this.renderer) : null;
 		}
 
 		this.scene = new THREE.Scene();

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;