feat: add smaa effect

src/core/effects/SMAA.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { BlendFunction, EdgeDetectionMode, PredicationMode, SMAAEffect, SMAAPreset } from 'postprocessing'
+import { useEffect } from '../composables/effect'
+// import { makePropWatchers } from '../../util/prop'
+
+export interface SMAAProps {
+  /**
+   * The blend function of this effect. This prop is not reactive.
+   * @default BlendFunction.SCREEN
+   * @type {BlendFunction}
+   * @memberof SMAAProps
+   */
+  blendFunction?: BlendFunction
+  /**
+   * The quality preset.
+   *
+   * @default SMAAPreset.MEDIUM
+   * @type {number}
+   * @memberof SMAAPreset
+   */
+  preset?: SMAAPreset
+  /**
+   * The edge detection mode.
+   *
+   * @default EdgeDetectionMode.COLOR
+   * @type {EdgeDetectionMode}
+   * @memberof SMAAProps
+   */
+  edgeDetectionMode?: EdgeDetectionMode
+  /**
+   * The predication mode.
+   *
+   * @default PredicationMode.NORMAL
+   * @type {PredicationMode}
+   * @memberof SMAAProps
+   */
+  predicationMode?: PredicationMode
+}
+
+const props = withDefaults(defineProps<SMAAProps>(), {})
+
+const { pass, effect } = useEffect(() => new SMAAEffect(props))
+
+defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
+
+// makePropWatchers([], effect, () => new SMAAEffect())
+</script>
+
+<template></template>

src/index.ts

@@ -4,6 +4,7 @@ import EffectComposer from './core/EffectComposer.vue'
 import Glitch from './core/effects/Glitch.vue'
 import Outline from './core/effects/Outline.vue'
 import Pixelation from './core/effects/Pixelation.vue'
+import SMAA from './core/effects/SMAA.vue'
 import Vignette from './core/effects/Vignette.vue'
 import Noise from './core/effects/Noise.vue'
 
@@ -17,6 +18,7 @@ export {
   Noise,
   Outline,
   Pixelation,
+  SMAA,
   Vignette,
   useEffect,
 }