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

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);

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

@@ -0,0 +1,112 @@
+import { serializable } from "../../engine/engine_serialization";
+import { Effect, Pass } from "postprocessing";
+import { VolumeParameter } from "./VolumeParameter";
+import { Component } from "../Component";
+import { ISerializable, SerializationContext } from "../../engine/engine_serialization_core";
+import { EditorModification, IEditorModification } from "../../engine/engine_editor-sync";
+
+export declare type EffectProviderResult = Effect | Pass | Array<Effect | Pass>;
+
+export interface IEffectProvider {
+    apply(): void | undefined | EffectProviderResult;
+    unapply(): void;
+}
+
+export abstract class PostProcessingEffect extends Component implements IEffectProvider, ISerializable, IEditorModification {
+
+    abstract get typeName(): string;
+
+    onEnable(): void {
+        // Dont override the serialized value by enabling (we could also just disable this component / map enabled to active)
+        if (this.__internalDidAwakeAndStart)
+            this.active = true;
+    }
+
+    onDisable(): void {
+        this.active = false;
+    }
+
+    @serializable()
+    active: boolean = true;
+
+    /** override to initialize bindings on parameters */
+    init() {
+
+    }
+
+    /** previously created effect (if any) */
+    private _result: void | undefined | EffectProviderResult;
+
+
+    /** Apply post settings. Make sure to call super.apply() if you also create an effect */
+    apply(): void | undefined | EffectProviderResult {
+        if (!this._result) {
+            this._result = this.onCreateEffect?.call(this);
+            if (this._result) {
+                this.initParameters();
+            }
+        }
+        return this._result;
+    }
+
+    /** Reset previously set values (e.g. when adjusting settings on the renderer like Tonemapping) */
+    unapply(): void { }
+
+    /** implement to create a effect once to be cached in the base class. Make sure super.apply() is called if you also override apply */
+    onCreateEffect?(): EffectProviderResult | undefined
+
+    dispose() {
+        if (this._result) {
+            if (Array.isArray(this._result)) {
+                this._result.forEach(r => r.dispose());
+            } else {
+                this._result.dispose();
+            }
+        }
+        this._result = undefined;
+    }
+
+    private initParameters() {
+        // Automatically call init on all VolumeParameter properties
+        // This will enforce the valueProcessor and onValueChanged to be called
+        const keys = Object.keys(this);
+        for (const key of keys) {
+            const value = this[key];
+            if (value instanceof VolumeParameter) {
+                value.__init();
+            }
+        }
+    }
+
+    onAfterDeserialize(data: any, _context: SerializationContext): void {
+        // When using additional effects and parameters exported from the editor are not in the volume parameter format
+        if (typeof data === "object") {
+            const types = this["$serializedTypes"];
+            if (types) {
+                for (const fieldName in Object.keys(types)) {
+                    const type = types[fieldName];
+                    if (type === VolumeParameter) {
+                        const value = data[fieldName];
+                        if (value !== undefined) {
+                            this[fieldName].value = value;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+
+    onEditorModification(modification: EditorModification): void | boolean | undefined {
+        // Handle a property modification if the property is a VolumeParameter and the modification is just a plain value
+        const key = modification.propertyName;
+        if (this[key] instanceof VolumeParameter) {
+            const value = modification.value;
+            this[key].value = value;
+            return true;
+        }
+    }
+}
+
+
+

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

@@ -0,0 +1,148 @@
+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 { showBalloonWarning } from "../../engine/debug/debug";
+import { Camera } from "../Camera";
+import { PostProcessingEffect } from "./PostProcessingEffect";
+
+const debug = getParam("debugpost");
+
+const activeKey = Symbol("postprocessing-handler");
+
+export class PostProcessingHandler {
+
+    private _composer: EffectComposer | null = null;
+    private _lastVolumeComponents?: PostProcessingEffect[];
+    private _effects: Array<Effect | Pass> = [];
+
+
+    apply(context: Context, components: PostProcessingEffect[]) {
+        this.onApply(context, components);
+    }
+
+    unapply(context: Context) {
+        if (this._lastVolumeComponents) {
+            for (const component of this._lastVolumeComponents) {
+                component.unapply();
+            }
+            this._lastVolumeComponents.length = 0;
+        }
+        const active = context[activeKey] as PostProcessingHandler | null;
+        if (active === this) {
+            delete context[activeKey];
+        }
+        if (context.composer === this._composer)
+            context.composer = null;
+    }
+
+    dispose(context: Context) {
+        this.unapply(context);
+
+        for (const effect of this._effects) {
+            effect.dispose();
+        }
+        this._effects.length = 0;
+    }
+
+
+    private onApply(context: Context, components: PostProcessingEffect[]) {
+
+        if (!components) return;
+
+        context[activeKey] = this;
+
+        if (debug) console.log("refreshing volume profile", components);
+
+        this._lastVolumeComponents = [...components];
+
+        // store all effects in an array to apply them all in one pass
+        // const effects: Array<Effect | Pass> = [];
+        this._effects.length = 0;
+
+        for (const component of components) {
+            //@ts-ignore
+            component.context = context;
+            if (component.apply) {
+                if (component.active) {
+                    if (!context.mainCameraComponent) {
+                        console.error("No camera in scene found or available yet - can not create postprocessing effects");
+                        return;
+                    }
+                    // apply or collect effects
+                    const res = component.apply();
+                    if (res === undefined || res === null) continue;
+                    if (Array.isArray(res)) {
+                        this._effects.push(...res);
+                    }
+                    else this._effects.push(res);
+                }
+            }
+            else {
+                if (component.active)
+                    showBalloonWarning("Volume component is not a VolumeComponent: " + component["__type"]);
+            }
+        }
+
+        this.applyEffects(context);
+
+    }
+
+
+    /** Build composer passes */
+    private applyEffects(context: Context) {
+
+        const effectsOrPasses = this._effects;
+        const camera = context.mainCameraComponent as Camera;
+        const renderer = context.renderer;
+
+        if (effectsOrPasses.length <= 0) return;
+
+        const cam = camera.cam;
+
+        // create composer and set active on context
+        if (!this._composer) {
+            // const hdrRenderTarget = new WebGLRenderTarget(window.innerWidth, window.innerHeight, { type: HalfFloatType });
+            this._composer = new EffectComposer(renderer, {
+                frameBufferType: HalfFloatType,
+                // multisampling: 2,
+            });
+        }
+        context.composer = this._composer;
+        const composer = context.composer;
+        composer.setMainCamera(cam);
+        composer.setRenderer(renderer);
+        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);
+
+
+        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.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.enabled = true;
+            composer.addPass(pass);
+        }
+    }
+}
+