@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";
    }

    /**
     * Whether values for contrast, hueshift or saturation are remapped to a different range.
     */
    remap = true;

    @serializable(VolumeParameter)
    readonly postExposure: VolumeParameter = new VolumeParameter(1);

    /**
     * Range -1 to 1, where 0 is the default value, -1 is the lowest contrast and 1 is the highest contrast.
     * @default 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 => {
            if(!this.remap) return v;
            v = Math.pow(2.0, v);
            return v;
        }
        this.contrast.valueProcessor = (v: number) => {
            if(!this.remap) return v;
            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) => {
            if(!this.remap) return v;
            return Math.PI * v / 180;
        }
        this.hueShift.defaultValue = 0;

        this.saturation.valueProcessor = (v: number) => {
            if(!this.remap) return v;
            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) {
                tonemappingEffect.exposure.value = v;
            }
            else console.warn("[PostProcessing] PostExposure is set to override but no ToneMappingEffect found in the postprocessing stack. Please add a ToneMappingEffect to your postprocessing stack to use PostExposure.");
        };

        const brightnesscontrast = new MODULES.POSTPROCESSING.MODULE.BrightnessContrastEffect();
        this.contrast!.onValueChanged = v => brightnesscontrast.contrast = v;

        const hueSaturationEffect = new MODULES.POSTPROCESSING.MODULE.HueSaturationEffect();
        this.hueShift!.onValueChanged = v => hueSaturationEffect.hue = v;
        this.saturation!.onValueChanged = v => hueSaturationEffect.saturation = v;


        effects.push(brightnesscontrast);
        effects.push(hueSaturationEffect);
        return effects;
    }
}
registerCustomEffectType("ColorAdjustments", ColorAdjustments);