@needle-tools/engine/src/engine-components/postprocessing/Effects/Antialiasing.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 { EdgeDetectionMode, SMAAEffect, SMAAPreset } 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";



export enum QualityLevel {
    LOW = 0,
    MEDIUM = 1,
    HIGH = 2,
    ULTRA = 3
}

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

    // @serializable(VolumeParameter)
    // edgeDetectionThreshold!: VolumeParameter;

    @serializable(VolumeParameter)
    readonly preset: VolumeParameter = new VolumeParameter(SMAAPreset.HIGH);


    onCreateEffect(): EffectProviderResult {
        const effect = new SMAAEffect({
            preset: SMAAPreset.HIGH,
            edgeDetectionMode: EdgeDetectionMode.DEPTH
        });

        this.preset.onValueChanged = (newValue) => {
            effect.applyPreset(newValue);
        };

        // effect.edgeDetectionMaterial.edgeDetectionThreshold = .01;

        // this.edgeDetectionThreshold.onValueChanged = (newValue) => {
        //     console.log(newValue);
        //     effect.edgeDetectionMaterial.edgeDetectionThreshold = newValue;
        // }

        return effect;
    }


}

registerCustomEffectType("Antialiasing", Antialiasing)