@needle-tools/engine/src/engine-components/postprocessing/Effects/Pixelation.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 { PixelationEffect as PixelationEffectPP } from "postprocessing";

import { serializable } from "../../../engine/engine_serialization.js";
import { type EffectProviderResult, PostProcessingEffect } from "../PostProcessingEffect.js";
import { VolumeParameter } from "../VolumeParameter.js";
import { registerCustomEffectType } from "../VolumeProfile.js";

/**
 * @category Effects
 * @group Components
 */
export class PixelationEffect extends PostProcessingEffect {
    get typeName(): string {
        return "PixelationEffect";
    }

    @serializable(VolumeParameter)
    readonly granularity: VolumeParameter = new VolumeParameter(10);

    onCreateEffect(): EffectProviderResult {

        const effect = new PixelationEffectPP();

        this.granularity.onValueChanged = v => {
            effect.granularity = v;
        }

        return effect;
    }

}
registerCustomEffectType("PixelationEffect", PixelationEffect);