@needle-tools/engine 2.65.2-pre → 2.67.0-pre

package/src/engine-components/js-extensions/Object3D.ts

@@ -3,7 +3,7 @@ import { Object3D } from "three";
 import { Constructor, ConstructorConcrete, IComponent } from "../../engine/engine_types"
 import { IComponent as Component } from "../../engine/engine_types";
 import { addNewComponent, getComponent, getComponentInChildren, getComponentInParent, getComponents, getComponentsInChildren, getComponentsInParent, getOrAddComponent, removeComponent } from "../../engine/engine_components";
-import { isActiveSelf, setActive } from "../../engine/engine_gameobject";
+import { isActiveSelf, setActive, destroy } from "../../engine/engine_gameobject";
 
 // used to decorate cloned object3D objects with the same added components defined above
 export function apply(object: Object3D) {
@@ -20,6 +20,10 @@ Object3D.prototype["setActive"] = function (active: boolean) {
     this.visible = active;
 }
 
+Object3D.prototype["destroy"] = function () {
+    destroy(this);
+}
+
 Object3D.prototype["addNewComponent"] = function <T extends Component>(type: ConstructorConcrete<T>) {
     return addNewComponent(this, new type());
 }
@@ -78,5 +82,6 @@ if (!Object.getOwnPropertyDescriptor(Object3D.prototype, "transform")) {
 
 
 
+
 // do this after adding the component extensions
 registerPrototypeExtensions(Object3D);

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

@@ -0,0 +1,52 @@
+import { EdgeDetectionMode, SMAAEffect, SMAAPreset } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+
+
+export enum QualityLevel {
+    LOW = 0,
+    MEDIUM = 1,
+    HIGH = 2,
+    ULTRA = 3
+}
+
+
+export class Antialiasing extends PostProcessingEffect {
+    get typeName(): string {
+        return "Antialiasing";
+    }
+
+    // @serializable(VolumeParameter)
+    // edgeDetectionThreshold!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    preset!: VolumeParameter;
+
+
+    onCreateEffect(): EffectProviderResult {
+        const effect = new SMAAEffect({
+            preset: SMAAPreset.HIGH,
+            edgeDetectionMode: EdgeDetectionMode.DEPTH
+        });
+
+        this.preset.onValueChanged = (newValue) => {
+            effect.applyPreset(newValue);
+        };
+
+        // effect.edgeDetectionMaterial.edgeDetectionThreshold = .01;
+
+        // this.edgeDetectionThreshold.onValueChanged = (newValue) => {
+        //     console.log(newValue);
+        //     effect.edgeDetectionMaterial.edgeDetectionThreshold = newValue;
+        // }
+
+        return effect;
+    }
+
+
+}
+
+registerCustomEffectType("Antialiasing", Antialiasing)

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

@@ -0,0 +1,75 @@
+import { BloomEffect, SelectiveBloomEffect } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+export class Bloom extends PostProcessingEffect {
+
+    get typeName() {
+        return "Bloom";
+    }
+
+    @serializable(VolumeParameter)
+    threshold!: VolumeParameter;
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+    @serializable(VolumeParameter)
+    scatter!: VolumeParameter;
+
+    selectiveBloom = true;
+
+    init() {
+        this.threshold.defaultValue = 1;
+        this.intensity.defaultValue = 0;
+        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);
+        }
+        else {
+            this.threshold.valueProcessor = (v: number) => v / (Math.PI * 2);
+            this.intensity.valueProcessor = (v: number) => v;// * 2.2;
+            this.scatter.valueProcessor = (v: number) => (1 - v);
+        }
+    }
+
+    onCreateEffect() {
+        let bloom: BloomEffect;
+        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!, {
+                luminanceThreshold: this.threshold.value,
+                luminanceSmoothing: this.scatter.value,
+                intensity: this.intensity.value,
+                mipmapBlur: false,
+            });
+            selectiveBloom.inverted = true;
+        }
+        else {
+            bloom = new BloomEffect();
+        }
+
+
+        const blur = bloom["mipmapBlurPass"];
+        if (typeof blur === "object") {
+            blur.radius = this.scatter.value;
+        }
+
+        this.intensity.onValueChanged = newValue => {
+            bloom!.intensity = newValue;
+        };
+        this.threshold.onValueChanged = newValue => {
+            bloom!.luminanceMaterial.threshold = newValue;
+        };
+        this.scatter.onValueChanged = newValue => {
+            bloom!.luminanceMaterial.smoothing = newValue;
+        };
+
+        return bloom;
+    }
+
+}
+registerCustomEffectType("Bloom", Bloom);

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

@@ -0,0 +1,36 @@
+import { ChromaticAberrationEffect } from "postprocessing";
+import { Vector2 } from "three";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType, VolumeProfile } from "../VolumeProfile";
+
+export class ChromaticAberration extends PostProcessingEffect {
+
+    get typeName() {
+        return "ChromaticAberration";
+    }
+
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+
+    init() {
+        this.intensity.defaultValue = 0;
+    }
+
+    onCreateEffect(): EffectProviderResult {
+        const chromatic = new ChromaticAberrationEffect();
+        chromatic.offset = new Vector2(0, 0)
+        chromatic.radialModulation = true;
+        chromatic.modulationOffset = .15;
+        this.intensity.valueProcessor = v => v * .02;
+        this.intensity.onValueChanged = v => {
+            chromatic.offset.x = -v;
+            chromatic.offset.y = v;
+        }
+        return chromatic;
+    }
+
+};
+
+registerCustomEffectType("ChromaticAberration", ChromaticAberration);

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

@@ -0,0 +1,114 @@
+import { BrightnessContrastEffect, HueSaturationEffect } from "postprocessing";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+import { NoToneMapping } from "three";
+
+
+export class ColorAdjustments extends PostProcessingEffect {
+
+    get typeName() {
+        return "ColorAdjustments";
+    }
+
+    @serializable(VolumeParameter)
+    postExposure!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    contrast!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    hueShift!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    saturation!: VolumeParameter;
+
+    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);
+            }
+        }
+        this.postExposure.defaultValue = 0;
+
+        this.contrast.valueProcessor = (v: number) => {
+            let divisor = 100;
+            if (v > 0) divisor *= Math.PI * 2;
+            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) => {
+            return (v / 180);
+        }
+        this.saturation.defaultValue = 0;
+    }
+
+    unapply() {
+        this.context.renderer.toneMappingExposure = 1;
+    }
+
+
+    onCreateEffect(): EffectProviderResult {
+
+        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;
+            }
+        }
+        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];
+    }
+
+    // apply() {
+    //     this.postExposure!.onValueChanged = () => {
+    //         this.setExposure();
+    //     };
+
+    //     // unity range goes from -15..15
+    //     // three.js range goes from 0..inf
+    //     if (this.postExposure?.overrideState) {
+    //         this.setExposure();
+    //     }
+    // }
+    // private setExposure() {
+    //     const exposure = Math.pow(2, this.postExposure?.value ?? 0);
+    //     this.context.renderer.toneMappingExposure = exposure;
+    // }
+}
+registerCustomEffectType("ColorAdjustments", ColorAdjustments);

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

@@ -0,0 +1,90 @@
+import { DepthOfFieldEffect } from "postprocessing";
+import { PerspectiveCamera, Vector3 } from "three";
+import { getWorldPosition } from "../../../engine/engine_three_utils";
+import { serializable } from "../../../engine/engine_serialization";
+import { Mathf } from "../../../engine/engine_math";
+import { PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+export enum DepthOfFieldMode {
+    Off = 0,
+    Gaussian = 1,
+    Bokeh = 2,
+}
+
+export class DepthOfField extends PostProcessingEffect {
+
+    get typeName() {
+        return "DepthOfField";
+    }
+
+    @serializable()
+    mode! : DepthOfFieldMode;
+
+    @serializable(VolumeParameter)
+    focusDistance!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    focalLength!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    aperture!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    gaussianMaxRadius!: 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) return undefined;
+        // console.log(this.focusDistance.overrideState, this.focusDistance.value);
+        // const depth = new DepthEffect({
+        //     inverted: true,
+        //     // blendFunction: BlendFunction.SET,
+        // });
+        const dof = new DepthOfFieldEffect(this.context.mainCamera!, {
+            worldFocusRange: .2,
+            focalLength: 1,
+            bokehScale: 20,
+        });
+
+        this.focusDistance.onValueChanged = v => dof.circleOfConfusionMaterial.worldFocusDistance = v;
+        this.focalLength.onValueChanged = v => dof.circleOfConfusionMaterial.worldFocusRange = v;
+        this.aperture.onValueChanged = v => dof.bokehScale = v;
+
+
+        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/Effects/Pixelation.ts

@@ -0,0 +1,28 @@
+import { registerCustomEffectType } from "../VolumeProfile";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { PixelationEffect as PixelationEffectPP } from "postprocessing";
+import { VolumeParameter } from "../VolumeParameter";
+import { serializable } from "../../../engine/engine_serialization";
+
+export class PixelationEffect extends PostProcessingEffect {
+    get typeName(): string {
+        return "PixelationEffect";
+    }
+
+    @serializable(VolumeParameter)
+    granularity!: VolumeParameter;
+
+    onCreateEffect(): EffectProviderResult {
+
+        const effect = new PixelationEffectPP();
+
+        this.granularity.onValueChanged = v => {
+            console.log(v);
+            effect.granularity = v;
+        }
+
+        return effect;
+    }
+
+}
+registerCustomEffectType("PixelationEffect", PixelationEffect);

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

@@ -0,0 +1,71 @@
+import { BlendFunction, DepthDownsamplingPass, Effect, NormalPass, SSAOEffect } from "postprocessing";
+import { NeverDepth, PerspectiveCamera } from "three";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+
+export class ScreenSpaceAmbientOcclusion extends PostProcessingEffect {
+
+    get typeName() {
+        return "ScreenSpaceAmbientOcclusion";
+    }
+
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    falloff!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    samples!: VolumeParameter;
+
+    onBeforeRender() {
+        if (this._ssao && this.context.mainCamera instanceof PerspectiveCamera) {
+            const fadeDistance = this.context.mainCamera.far - this.context.mainCamera.near;
+            this._ssao.ssaoMaterial.worldDistanceFalloff = fadeDistance * .01;
+            this._ssao.ssaoMaterial.worldDistanceThreshold = this.context.mainCamera.far;
+        }
+    }
+
+    private _ssao?: SSAOEffect;
+
+    onCreateEffect(): EffectProviderResult {
+
+        const cam = this.context.mainCamera! as PerspectiveCamera;
+        const normalPass = new NormalPass(this.context.scene, cam);
+        const depthDownsamplingPass = new DepthDownsamplingPass({
+            normalBuffer: normalPass.texture,
+            resolutionScale: 0.5
+        });
+
+        const ssao = this._ssao = new SSAOEffect(cam!, normalPass.texture, {
+            normalDepthBuffer: depthDownsamplingPass.texture,
+            worldDistanceThreshold: 1, // when it starts to fade out
+            worldDistanceFalloff: 1, // smoothness of cutoff
+            worldProximityThreshold: .1,
+            worldProximityFalloff: 2,
+            intensity: 1,
+            // blendFunction: BlendFunction.MULTIPLY,
+        });
+
+        this.intensity.onValueChanged = newValue => {
+            ssao.intensity = newValue;
+        }
+        this.falloff.onValueChanged = newValue => {
+            ssao.ssaoMaterial.radius = newValue * .1;
+        }
+        this.samples.onValueChanged = newValue => {
+            ssao.samples = newValue;
+        }
+
+        const arr = new Array();
+        arr.push(normalPass);
+        arr.push(depthDownsamplingPass);
+        arr.push(ssao);
+        return arr;
+    }
+
+}
+registerCustomEffectType("ScreenSpaceAmbientOcclusion", ScreenSpaceAmbientOcclusion);

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

@@ -0,0 +1,55 @@
+import { ACESFilmicToneMapping, LinearToneMapping, NoToneMapping, ReinhardToneMapping } from "three";
+import { serializable } from "../../../engine/engine_serialization";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { VolumeParameter } from "../VolumeParameter";
+import { registerCustomEffectType } from "../VolumeProfile";
+
+
+export enum TonemappingMode {
+    None = 0,
+    Neutral = 1, // Neutral tonemapper
+    ACES = 2,    // ACES Filmic reference tonemapper (custom approximation)
+}
+
+export class ToneMapping extends PostProcessingEffect {
+
+
+    get typeName() {
+        return "ToneMapping";
+    }
+
+    @serializable(VolumeParameter)
+    mode!: VolumeParameter;
+
+    get isToneMapping() { return true; }
+
+    init(): void {
+        this.mode.defaultValue = NoToneMapping;
+    }
+
+    apply() {
+        this.mode!.onValueChanged = this._apply.bind(this);
+        this._apply(this.mode!.value)
+    }
+
+    unapply() {
+        this.context.renderer.toneMapping = NoToneMapping;
+    }
+
+    private _apply(v) {
+        switch (v) {
+            case TonemappingMode.None:
+                this.context.renderer.toneMapping = LinearToneMapping;
+                break;
+            case TonemappingMode.Neutral:
+                this.context.renderer.toneMapping = ReinhardToneMapping;
+                break;
+            case TonemappingMode.ACES:
+                this.context.renderer.toneMapping = ACESFilmicToneMapping;
+                break;
+        }
+    }
+
+}
+
+registerCustomEffectType("Tonemapping", ToneMapping);

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

@@ -0,0 +1,55 @@
+import { serializable } from "../../../engine/engine_serialization";
+import { VolumeParameter } from "../VolumeParameter";
+import { EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect";
+import { registerCustomEffectType } from "../VolumeProfile";
+import { VignetteEffect } from "postprocessing";
+
+
+export class Vignette extends PostProcessingEffect {
+    get typeName(): string {
+        return "Vignette";
+    }
+
+    @serializable(VolumeParameter)
+    color!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    intensity!: VolumeParameter;
+
+    @serializable(VolumeParameter)
+    center!: VolumeParameter;
+
+    init(){
+        this.color.defaultValue = { r: 0, g: 0, b: 0, a: 1 };
+        this.intensity.defaultValue = 0;
+        this.center.defaultValue = { x: 0.5, y: 0.5 };
+    }
+
+    onCreateEffect(): EffectProviderResult {
+        // https://github.com/pmndrs/postprocessing/blob/f8ed90635ee6710744cc0f38811fc00ce873a450/src/effects/VignetteEffect.js
+        const vignette = new VignetteEffect();
+
+        this.intensity.onValueChanged = v => {
+            vignette.offset = v;
+            this.updateDarkness(vignette);
+        }
+        this.color.onValueChanged = _ => {
+            this.updateDarkness(vignette);
+        };
+        // this.center.onValueChanged = v => {
+        //     console.log(v);
+        //     vignette.offset = v.x;
+        // };
+
+        return vignette;
+    }
+
+    private updateDarkness(effect: VignetteEffect) {
+        // const col = this.color.value;
+        // const colval = 1 - (col.r + col.g + col.b + col.a) / 4;
+        const val = this.intensity.value;
+        effect.darkness = val;
+    }
+
+}
+registerCustomEffectType("Vignette", Vignette);