@needle-tools/engine 4.5.5-next.f053174 → 4.5.6

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

@@ -1,96 +1,96 @@
-import { NoToneMapping } from "three";
-
-import { MODULES } from "../../../engine/engine_modules.js";
-import { serializable } from "../../../engine/engine_serialization.js";
-import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
-import { VolumeParameter } from "../VolumeParameter.js";
-import { registerCustomEffectType } from "../VolumeProfile.js";
-import { ToneMappingEffect } from "./Tonemapping.js";
-
-/**
- * @category Effects
- * @group Components
- */
-export class ColorAdjustments extends PostProcessingEffect {
-
-    get typeName() {
-        return "ColorAdjustments";
-    }
-
-    @serializable(VolumeParameter)
-    readonly postExposure: VolumeParameter = new VolumeParameter(0);
-
-    @serializable(VolumeParameter)
-    readonly contrast: VolumeParameter = new VolumeParameter(0);
-
-    @serializable(VolumeParameter)
-    readonly hueShift: VolumeParameter = new VolumeParameter(0);
-
-    @serializable(VolumeParameter)
-    readonly saturation: VolumeParameter = new VolumeParameter(0);
-
-    init() {
-        this.postExposure!.valueProcessor = v => {
-            v = Math.pow(2.0, v);
-            return v;
-        }
-
-        this.contrast.valueProcessor = (v: number) => {
-            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;
-        };
-        this.contrast.defaultValue = 0;
-
-        this.hueShift.valueProcessor = (v: number) => Math.PI * v / 180;
-        this.hueShift.defaultValue = 0;
-
-        this.saturation.valueProcessor = (v: number) => {
-            if (v < 0) return (v / 100);
-            const sat = (v / (100 * Math.PI));
-            return sat;
-        }
-        this.saturation.defaultValue = 0;
-    }
-
-    onCreateEffect(): EffectProviderResult {
-        const effects: EffectProviderResult = [];
-
-        // TODO: do we still need this?
-        if (this.context.renderer.toneMapping !== NoToneMapping && this.postExposure.overrideState)
-            this.context.renderer.toneMapping = NoToneMapping;
-
-
-        // find the ToneMapping effect because we need it to apply post exposure
-        let tonemappingEffect = this.postprocessingContext?.components.find(c => c instanceof ToneMappingEffect) as ToneMappingEffect;
-        if (!tonemappingEffect) {
-            tonemappingEffect = new ToneMappingEffect();
-            this.postprocessingContext?.components.push(tonemappingEffect);
-        }
-
-        // We need this effect if someone uses ACES or AgX tonemapping;
-        // problem is that we CAN'T use this effect for the "Linear" case, the package expects that in this case you remove the effect
-        this.postExposure!.onValueChanged = (v) => {
-            if (this.postExposure.overrideState) {
-                tonemappingEffect.exposure.value = v;
-            }
-        };
-
-        const brightnesscontrast = new MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect();
-        this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;
-
-        const hueSaturationEffect = new MODULES.POSTPROCESSING.MODULE.HueSaturationEffect();
-
-        effects.push(brightnesscontrast);
-        effects.push(hueSaturationEffect);
-
-        this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
-        this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;
-
-        return effects;
-    }
-}
+import { NoToneMapping } from "three";
+
+import { MODULES } from "../../../engine/engine_modules.js";
+import { serializable } from "../../../engine/engine_serialization.js";
+import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
+import { VolumeParameter } from "../VolumeParameter.js";
+import { registerCustomEffectType } from "../VolumeProfile.js";
+import { ToneMappingEffect } from "./Tonemapping.js";
+
+/**
+ * @category Effects
+ * @group Components
+ */
+export class ColorAdjustments extends PostProcessingEffect {
+
+    get typeName() {
+        return "ColorAdjustments";
+    }
+
+    @serializable(VolumeParameter)
+    readonly postExposure: VolumeParameter = new VolumeParameter(0);
+
+    @serializable(VolumeParameter)
+    readonly contrast: VolumeParameter = new VolumeParameter(0);
+
+    @serializable(VolumeParameter)
+    readonly hueShift: VolumeParameter = new VolumeParameter(0);
+
+    @serializable(VolumeParameter)
+    readonly saturation: VolumeParameter = new VolumeParameter(0);
+
+    init() {
+        this.postExposure!.valueProcessor = v => {
+            v = Math.pow(2.0, v);
+            return v;
+        }
+
+        this.contrast.valueProcessor = (v: number) => {
+            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;
+        };
+        this.contrast.defaultValue = 0;
+
+        this.hueShift.valueProcessor = (v: number) => Math.PI * v / 180;
+        this.hueShift.defaultValue = 0;
+
+        this.saturation.valueProcessor = (v: number) => {
+            if (v < 0) return (v / 100);
+            const sat = (v / (100 * Math.PI));
+            return sat;
+        }
+        this.saturation.defaultValue = 0;
+    }
+
+    onCreateEffect(): EffectProviderResult {
+        const effects: EffectProviderResult = [];
+
+        // TODO: do we still need this?
+        if (this.context.renderer.toneMapping !== NoToneMapping && this.postExposure.overrideState)
+            this.context.renderer.toneMapping = NoToneMapping;
+
+
+        // find the ToneMapping effect because we need it to apply post exposure
+        let tonemappingEffect = this.postprocessingContext?.components.find(c => c instanceof ToneMappingEffect) as ToneMappingEffect;
+        if (!tonemappingEffect) {
+            tonemappingEffect = new ToneMappingEffect();
+            this.postprocessingContext?.components.push(tonemappingEffect);
+        }
+
+        // We need this effect if someone uses ACES or AgX tonemapping;
+        // problem is that we CAN'T use this effect for the "Linear" case, the package expects that in this case you remove the effect
+        this.postExposure!.onValueChanged = (v) => {
+            if (this.postExposure.overrideState) {
+                tonemappingEffect.exposure.value = v;
+            }
+        };
+
+        const brightnesscontrast = new MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect();
+        this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;
+
+        const hueSaturationEffect = new MODULES.POSTPROCESSING.MODULE.HueSaturationEffect();
+
+        effects.push(brightnesscontrast);
+        effects.push(hueSaturationEffect);
+
+        this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
+        this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;
+
+        return effects;
+    }
+}
 registerCustomEffectType("ColorAdjustments", ColorAdjustments);

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

@@ -1,104 +1,104 @@
-import type { DepthOfFieldEffect } from "postprocessing";
-
-import { Mathf } from "../../../engine/engine_math.js";
-import { MODULES } from "../../../engine/engine_modules.js";
-import { serializable } from "../../../engine/engine_serialization.js";
-import { getParam, isMobileDevice } from "../../../engine/engine_utils.js";
-import { PostProcessingEffect } from "../PostProcessingEffect.js";
-import { VolumeParameter } from "../VolumeParameter.js";
-import { registerCustomEffectType } from "../VolumeProfile.js";
-
-export enum DepthOfFieldMode {
-    Off = 0,
-    Gaussian = 1,
-    Bokeh = 2,
-}
-
-const debug = getParam("debugpost");
-
-/**
- * @category Effects
- * @group Components
- */
-export class DepthOfField extends PostProcessingEffect {
-
-    get typeName() {
-        return "DepthOfField";
-    }
-
-    @serializable()
-    mode!: DepthOfFieldMode;
-
-    @serializable(VolumeParameter)
-    readonly focusDistance: VolumeParameter = new VolumeParameter(1);
-
-    @serializable(VolumeParameter)
-    readonly focalLength: VolumeParameter = new VolumeParameter(.2);
-
-    @serializable(VolumeParameter)
-    readonly aperture: VolumeParameter = new VolumeParameter(20);
-
-    @serializable(VolumeParameter)
-    readonly gaussianMaxRadius: VolumeParameter = new VolumeParameter();
-
-    @serializable(VolumeParameter)
-    readonly resolutionScale: VolumeParameter = new VolumeParameter(1 * 1 / window.devicePixelRatio);
-
-    @serializable(VolumeParameter)
-    readonly bokehScale: VolumeParameter = new VolumeParameter();
-
-    init() {
-        this.focalLength.valueProcessor = v => {
-            const t = v / 300;
-            const max = 2;// this.context.mainCameraComponent?.farClipPlane ?? 10;
-            return Mathf.lerp(max, .01, t);
-        };
-
-        const maxBokehScale = 20;
-        this.aperture.valueProcessor = v => {
-            const t = 1 - v / 32;
-            return Mathf.lerp(1, maxBokehScale, t);
-        };
-    }
-
-    onCreateEffect() {
-        if (this.mode === DepthOfFieldMode.Off) {
-            if (debug) console.warn("DepthOfField: Mode is set to Off");
-            return undefined;
-        }
-
-        // const factor = 1 / window.devicePixelRatio;
-        // if (this.resolutionScale === undefined) {
-        //     let defaultValue = 1;
-        //     if(isMobileDevice()) defaultValue = .6;
-        //     this.resolutionScale = new VolumeParameter(defaultValue * factor);
-        // }
-
-        // console.log(this.focusDistance.overrideState, this.focusDistance.value);
-        // const depth = new DepthEffect({
-        //     inverted: true,
-        //     // blendFunction: BlendFunction.SET,
-        // });
-        const dof = new MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect(this.context.mainCamera!, {
-            worldFocusRange: .2,
-            focalLength: 1,
-            bokehScale: 20,
-            resolutionScale: this.resolutionScale.value,
-        });
-
-        this.focusDistance.onValueChanged = v => {
-            dof.cocMaterial.worldFocusDistance = v;
-        }
-        this.focalLength.onValueChanged = v => dof.cocMaterial.worldFocusRange = v;
-        this.aperture.onValueChanged = v => dof.bokehScale = v;
-
-        if (this.resolutionScale) this.resolutionScale.onValueChanged = v => dof.resolution.scale = v;
-
-        return [dof];
-    }
-
-    unapply() {
-    }
-
-}
+import type { DepthOfFieldEffect } from "postprocessing";
+
+import { Mathf } from "../../../engine/engine_math.js";
+import { MODULES } from "../../../engine/engine_modules.js";
+import { serializable } from "../../../engine/engine_serialization.js";
+import { getParam, isMobileDevice } from "../../../engine/engine_utils.js";
+import { PostProcessingEffect } from "../PostProcessingEffect.js";
+import { VolumeParameter } from "../VolumeParameter.js";
+import { registerCustomEffectType } from "../VolumeProfile.js";
+
+export enum DepthOfFieldMode {
+    Off = 0,
+    Gaussian = 1,
+    Bokeh = 2,
+}
+
+const debug = getParam("debugpost");
+
+/**
+ * @category Effects
+ * @group Components
+ */
+export class DepthOfField extends PostProcessingEffect {
+
+    get typeName() {
+        return "DepthOfField";
+    }
+
+    @serializable()
+    mode!: DepthOfFieldMode;
+
+    @serializable(VolumeParameter)
+    readonly focusDistance: VolumeParameter = new VolumeParameter(1);
+
+    @serializable(VolumeParameter)
+    readonly focalLength: VolumeParameter = new VolumeParameter(.2);
+
+    @serializable(VolumeParameter)
+    readonly aperture: VolumeParameter = new VolumeParameter(20);
+
+    @serializable(VolumeParameter)
+    readonly gaussianMaxRadius: VolumeParameter = new VolumeParameter();
+
+    @serializable(VolumeParameter)
+    readonly resolutionScale: VolumeParameter = new VolumeParameter(1 * 1 / window.devicePixelRatio);
+
+    @serializable(VolumeParameter)
+    readonly bokehScale: VolumeParameter = new VolumeParameter();
+
+    init() {
+        this.focalLength.valueProcessor = v => {
+            const t = v / 300;
+            const max = 2;// this.context.mainCameraComponent?.farClipPlane ?? 10;
+            return Mathf.lerp(max, .01, t);
+        };
+
+        const maxBokehScale = 20;
+        this.aperture.valueProcessor = v => {
+            const t = 1 - v / 32;
+            return Mathf.lerp(1, maxBokehScale, t);
+        };
+    }
+
+    onCreateEffect() {
+        if (this.mode === DepthOfFieldMode.Off) {
+            if (debug) console.warn("DepthOfField: Mode is set to Off");
+            return undefined;
+        }
+
+        // const factor = 1 / window.devicePixelRatio;
+        // if (this.resolutionScale === undefined) {
+        //     let defaultValue = 1;
+        //     if(isMobileDevice()) defaultValue = .6;
+        //     this.resolutionScale = new VolumeParameter(defaultValue * factor);
+        // }
+
+        // console.log(this.focusDistance.overrideState, this.focusDistance.value);
+        // const depth = new DepthEffect({
+        //     inverted: true,
+        //     // blendFunction: BlendFunction.SET,
+        // });
+        const dof = new MODULES.POSTPROCESSING.MODULE.DepthOfFieldEffect(this.context.mainCamera!, {
+            worldFocusRange: .2,
+            focalLength: 1,
+            bokehScale: 20,
+            resolutionScale: this.resolutionScale.value,
+        });
+
+        this.focusDistance.onValueChanged = v => {
+            dof.cocMaterial.worldFocusDistance = v;
+        }
+        this.focalLength.onValueChanged = v => dof.cocMaterial.worldFocusRange = v;
+        this.aperture.onValueChanged = v => dof.bokehScale = v;
+
+        if (this.resolutionScale) this.resolutionScale.onValueChanged = v => dof.resolution.scale = v;
+
+        return [dof];
+    }
+
+    unapply() {
+    }
+
+}
 registerCustomEffectType("DepthOfField", DepthOfField);

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

@@ -1,26 +1,26 @@
-import type { Effect } from "postprocessing";
-
-import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
-
-/**
- * @category Effects
- * @group Components
- */
-export class EffectWrapper extends PostProcessingEffect {
-
-    readonly effect: Effect;
-
-    constructor(effect: Effect) {
-        super();
-        this.effect = effect;
-    }
-
-    get typeName(): string {
-        return this.effect.constructor.name;
-    }
-
-    onCreateEffect(): EffectProviderResult | undefined {
-        return this.effect;
-    }
-
+import type { Effect } from "postprocessing";
+
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
+
+/**
+ * @category Effects
+ * @group Components
+ */
+export class EffectWrapper extends PostProcessingEffect {
+
+    readonly effect: Effect;
+
+    constructor(effect: Effect) {
+        super();
+        this.effect = effect;
+    }
+
+    get typeName(): string {
+        return this.effect.constructor.name;
+    }
+
+    onCreateEffect(): EffectProviderResult | undefined {
+        return this.effect;
+    }
+
 }

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

@@ -1,33 +1,33 @@
-import type { PixelationEffect as PixelationEffectPP } from "postprocessing";
-
-import { MODULES } from "../../../engine/engine_modules.js";
-import { serializable } from "../../../engine/engine_serialization.js";
-import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
-import { VolumeParameter } from "../VolumeParameter.js";
-import { registerCustomEffectType } from "../VolumeProfile.js";
-
-/**
- * @category Effects
- * @group Components
- */
-export class PixelationEffect extends PostProcessingEffect {
-    get typeName(): string {
-        return "PixelationEffect";
-    }
-
-    @serializable(VolumeParameter)
-    readonly granularity: VolumeParameter = new VolumeParameter(10);
-
-    onCreateEffect(): EffectProviderResult {
-
-        const effect = new MODULES.POSTPROCESSING.MODULE.PixelationEffect();
-
-        this.granularity.onValueChanged = v => {
-            effect.granularity = v;
-        }
-
-        return effect;
-    }
-
-}
+import type { PixelationEffect as PixelationEffectPP } from "postprocessing";
+
+import { MODULES } from "../../../engine/engine_modules.js";
+import { serializable } from "../../../engine/engine_serialization.js";
+import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
+import { VolumeParameter } from "../VolumeParameter.js";
+import { registerCustomEffectType } from "../VolumeProfile.js";
+
+/**
+ * @category Effects
+ * @group Components
+ */
+export class PixelationEffect extends PostProcessingEffect {
+    get typeName(): string {
+        return "PixelationEffect";
+    }
+
+    @serializable(VolumeParameter)
+    readonly granularity: VolumeParameter = new VolumeParameter(10);
+
+    onCreateEffect(): EffectProviderResult {
+
+        const effect = new MODULES.POSTPROCESSING.MODULE.PixelationEffect();
+
+        this.granularity.onValueChanged = v => {
+            effect.granularity = v;
+        }
+
+        return effect;
+    }
+
+}
 registerCustomEffectType("PixelationEffect", PixelationEffect);