@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 type { PixelationEffect as PixelationEffectPP } from "postprocessing";

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

/**
 * [PixelationEffect](https://engine.needle.tools/docs/api/PixelationEffect) Pixelation effect simulates a pixelated look by enlarging pixels in the rendered scene.  
 * This effect can be used to achieve a retro or stylized visual aesthetic, reminiscent of early video games or low-resolution graphics.
 * @summary Pixelation Post-Processing Effect
 * @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 MODULES.POSTPROCESSING.MODULE.PixelationEffect();

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

        return effect;
    }

}
registerCustomEffectType("PixelationEffect", PixelationEffect);