@needle-tools/engine/src/engine-components/postprocessing/Effects/ChromaticAberration.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 { Vector2 } 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, VolumeProfile } from "../VolumeProfile.js";

/**
 * @category Effects
 * @group Components
 */
export class ChromaticAberration extends PostProcessingEffect {

    get typeName() {
        return "ChromaticAberration";
    }

    @serializable(VolumeParameter)
    readonly intensity: VolumeParameter = new VolumeParameter(0);


    onCreateEffect(): EffectProviderResult {
        const chromatic = new MODULES.POSTPROCESSING.MODULE.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);