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

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

@@ -1,4 +1,4 @@
-import { BloomEffect, SelectiveBloomEffect } from "postprocessing";
+import { BlendFunction, BloomEffect, SelectiveBloomEffect } from "postprocessing";
 import { serializable } from "../../../engine/engine_serialization";
 import { PostProcessingEffect } from "../PostProcessingEffect";
 import { VolumeParameter } from "../VolumeParameter";
@@ -25,14 +25,14 @@ export class Bloom extends PostProcessingEffect {
         this.scatter.defaultValue = .2;
 
         if (this.selectiveBloom) {
-            this.threshold.valueProcessor = (v: number) => v * .5;// / (Math.PI * 2);
-            this.intensity.valueProcessor = (v: number) => v * Math.PI * 2;
-            this.scatter.valueProcessor = (v: number) => .2 + Math.pow((1 - v), 2);
+            this.threshold.valueProcessor = (v: number) => v;
+            this.intensity.valueProcessor = (v: number) => v;
+            this.scatter.valueProcessor = (v: number) => 1 * Math.PI * (1 - v);
         }
         else {
-            this.threshold.valueProcessor = (v: number) => v / (Math.PI * 2);
+            this.threshold.valueProcessor = (v: number) => v;
             this.intensity.valueProcessor = (v: number) => v;// * 2.2;
-            this.scatter.valueProcessor = (v: number) => (1 - v);
+            this.scatter.valueProcessor = (v: number) => 100 * (1 - v);
         }
     }
 
@@ -41,10 +41,11 @@ export class Bloom extends PostProcessingEffect {
         if (this.selectiveBloom) {
             // https://github.com/pmndrs/postprocessing/blob/64d2829f014cfec97a46bf3c109f3abc55af0715/demo/src/demos/BloomDemo.js#L265
             const selectiveBloom = bloom = new SelectiveBloomEffect(this.context.scene, this.context.mainCamera!, {
+                blendFunction: BlendFunction.ADD,
+                mipmapBlur: true,
                 luminanceThreshold: this.threshold.value,
                 luminanceSmoothing: this.scatter.value,
                 intensity: this.intensity.value,
-                mipmapBlur: false,
             });
             selectiveBloom.inverted = true;
         }
@@ -53,10 +54,10 @@ export class Bloom extends PostProcessingEffect {
         }
 
 
-        const blur = bloom["mipmapBlurPass"];
-        if (typeof blur === "object") {
-            blur.radius = this.scatter.value;
-        }
+        // const blur = bloom["mipmapBlurPass"];
+        // if (typeof blur === "object") {
+        //     blur.radius = this.scatter.value;
+        // }
 
         this.intensity.onValueChanged = newValue => {
             bloom!.intensity = newValue;
@@ -65,6 +66,7 @@ export class Bloom extends PostProcessingEffect {
             bloom!.luminanceMaterial.threshold = newValue;
         };
         this.scatter.onValueChanged = newValue => {
+            bloom!.luminancePass.enabled = true;
             bloom!.luminanceMaterial.smoothing = newValue;
         };
 

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

@@ -3,7 +3,7 @@ import { serializable } from "../../../engine/engine_serialization";
 import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
 import { VolumeParameter } from "../VolumeParameter";
 import { registerCustomEffectType } from "../VolumeProfile";
-import { NoToneMapping } from "three";
+import { CustomToneMapping, LinearToneMapping, NoToneMapping } from "three";
 
 
 export class ColorAdjustments extends PostProcessingEffect {
@@ -26,20 +26,16 @@ export class ColorAdjustments extends PostProcessingEffect {
 
     init() {
         this.postExposure!.valueProcessor = v => {
-            // when using tone mapping, the exposure will just be set to the renderer
-            if (this.context.renderer.toneMapping !== NoToneMapping && v > 0) {
-                return Math.pow(2, v);
-            }
-            // Custom effects need modification
-            else {
-                return v / (2 * Math.PI);
-            }
+            v = Math.pow(2, v);
+            return v;
         }
         this.postExposure.defaultValue = 0;
 
         this.contrast.valueProcessor = (v: number) => {
-            let divisor = 100;
-            if (v > 0) divisor *= Math.PI * 2;
+            let divisor = 1;
+            if (v > 0) divisor = 200;
+            else if (v < 0) divisor = 100;
+            // if (v > 0) divisor *= Math.PI;
             const val = v / divisor;
             return val;
         };
@@ -49,7 +45,8 @@ export class ColorAdjustments extends PostProcessingEffect {
         this.hueShift.defaultValue = 0;
 
         this.saturation.valueProcessor = (v: number) => {
-            return (v / 180);
+            if (v < 0) return (v / 100);
+            return (v / (100 * Math.PI));
         }
         this.saturation.defaultValue = 0;
     }
@@ -60,39 +57,24 @@ export class ColorAdjustments extends PostProcessingEffect {
 
 
     onCreateEffect(): EffectProviderResult {
-
+        if (this.context.renderer.toneMapping === NoToneMapping && this.postExposure.overrideState)
+            this.context.renderer.toneMapping = LinearToneMapping;
         const brightnesscontrast = new BrightnessContrastEffect();
-        // TODO: darkening etc doesnt really work well in all cases right now
         this.postExposure!.onValueChanged = v => {
-            // We can use the builtin exposure when tonemapping is set
-            if (this.context.renderer.toneMapping !== NoToneMapping) {
-                if (v === 0) {
-                    this.context.renderer.toneMappingExposure = 1;
-                    brightnesscontrast.brightness = 0;
-                }
-                else if (v > 0) {
-                    this.context.renderer.toneMappingExposure = v;
-                    brightnesscontrast.brightness = 0;
-                }
-                else {
-                    this.context.renderer.toneMappingExposure = v;
-                    brightnesscontrast.brightness = 0;
-                }
-            }
-            // Otherwise use the effect (they look sligthly different/behave different unfortunately)
-            else {
-                this.context.renderer.toneMappingExposure = 0;
-                brightnesscontrast.brightness = v;
-            }
+            if (this.context.renderer.toneMapping === NoToneMapping)
+                this.context.renderer.toneMapping = LinearToneMapping;
+            this.context.renderer.toneMappingExposure = v;
+        }
+        this.contrast!.onValueChanged = v => {
+            brightnesscontrast.contrast = v;
         }
-        this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;
 
 
         const hueSaturationEffect = new HueSaturationEffect();
         this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
         this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;
 
-        return [brightnesscontrast, hueSaturationEffect];
+        return [hueSaturationEffect, brightnesscontrast];
     }
 
     // apply() {

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

@@ -61,7 +61,9 @@ export class DepthOfField extends PostProcessingEffect {
             bokehScale: 20,
         });
 
-        this.focusDistance.onValueChanged = v => dof.circleOfConfusionMaterial.worldFocusDistance = v;
+        this.focusDistance.onValueChanged = v => {
+            dof.circleOfConfusionMaterial.worldFocusDistance = v;
+        }
         this.focalLength.onValueChanged = v => dof.circleOfConfusionMaterial.worldFocusRange = v;
         this.aperture.onValueChanged = v => dof.bokehScale = v;
 
@@ -69,22 +71,8 @@ export class DepthOfField extends PostProcessingEffect {
         return [dof];
     }
 
-
     unapply() {
     }
 
-
-    calculateFocusDistance(target) {
-
-        const camera = this.context.mainCamera! as PerspectiveCamera;
-        const distance = getWorldPosition(camera).distanceTo(target);
-        // console.log(distance, camera.near, camera.far);
-        return this.viewZToOrthographicDepth(-distance, camera.near, camera.far);
-
-    }
-
-    viewZToOrthographicDepth(viewZ, near, far) {
-        return (viewZ + near) / (near - far);
-    }
 }
 registerCustomEffectType("DepthOfField", DepthOfField);

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

@@ -118,6 +118,7 @@ export class PostProcessingHandler {
             // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
             this._composer = new EffectComposer(renderer, {
                 frameBufferType: HalfFloatType,
+                stencilBuffer: true,
                 // multisampling: 2,
             });
         }
@@ -134,6 +135,7 @@ export class PostProcessingHandler {
         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> = [];
 

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

@@ -1,191 +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";
-
-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 {
-        // 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();
-        }
-
-        if (!this.context.isInXR && this.context.composer && this.context.mainCamera) {
-            this.context.composer.setRenderer(this.context.renderer);
-            this.context.composer.setMainScene(this.context.scene);
-            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);
-        }
-    }
-
-    private unapply() {
-        this._postprocessing?.unapply();
-    }
-
-
-    private tryApplyCache() {
-        const cache = getEditorModificationCache();
-        if (cache) {
-            for (const entry of cache.values()) this.onEditorModification(entry);
-        }
-    }
-
-
-    /** called from needle editor sync package if its active */
-    onEditorModification(modification: EditorModification): void | boolean | undefined {
-
-        if (modification.propertyName.startsWith("postprocessing.")) {
-            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 _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();
+            }
+
+            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);
+            }
+            if (this.context.renderer) {
+                this.context.renderer.autoClear = false;
+            }
+        }
+    }
+
+    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[]>();