@needle-tools/engine/src/engine-components/postprocessing/Effects/ColorAdjustments.ts

Needle Engine is a web-based runtime for 3D apps. It runs on your machine for development with great integrations into editors like Unity or Blender - and can be deployed onto any device! It is flexible, extensible and networking and XR are built-in

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