docs: smaa

docs/.vitepress/config.ts

@@ -63,9 +63,9 @@ export default defineConfig({
         items: [
           { text: 'Glitch', link: '/guide/three/glitch' },
           { text: 'Halftone', link: '/guide/three/halftone' },
-          { text: 'Outline', link: '/guide/three/outline' },
+          { text: 'SMAA', link: '/guide/three/smaa' },
           { text: 'Pixelation', link: '/guide/three/pixelation' },
-          { text: 'Vignette', link: '/guide/three/vignette' },
+          { text: 'Unreal Bloom', link: '/guide/three/unreal-bloom' },
         ],
       },
     ],

docs/.vitepress/theme/components/three/SMAAThreeDemo.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { EffectComposer, SMAA } from '@tresjs/post-processing/three'
+
+import { useRouteDisposal } from '../../composables/useRouteDisposal'
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
+</script>
+
+<template>
+  <TresCanvas
+    :alpha="false"
+    :shadows="true"
+  >
+    <TresPerspectiveCamera
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls />
+    <TresMesh
+      :position="[1, 0.5, 1]"
+    >
+      <TresBoxGeometry />
+      <TresMeshNormalMaterial
+        wireframe
+      />
+    </TresMesh>
+    <TresMesh
+      :position="[-1.5, 0.75, 0]"
+    >
+      <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshNormalMaterial />
+      <TresMeshNormalMaterial
+        wireframe
+      />
+    </TresMesh>
+
+    <TresGridHelper />
+    <TresAmbientLight :intensity="0.9" />
+    <TresDirectionalLight
+      :position="[-10, 5, 8]"
+      :intensity="1"
+    />
+
+    <Suspense>
+      <EffectComposer ref="effectComposer">
+        <SMAA />
+      </EffectComposer>
+    </Suspense>
+  </TresCanvas>
+</template>

docs/components.d.ts

@@ -9,7 +9,7 @@ declare module 'vue' {
   export interface GlobalComponents {
     BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
     BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
-    copy: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo copy.vue')['default']
+    copy: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo copy.vue')['default']
     DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
     GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
@@ -23,6 +23,7 @@ declare module 'vue' {
     PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default']
     VignetteDemo: typeof import('./.vitepress/theme/components/pmdrs/VignetteDemo.vue')['default']
   }
 }

docs/guide/three/smaa.md

@@ -0,0 +1,29 @@
+# SMAA
+
+<DocsDemo>
+  <SMAAThreeDemo />
+</DocsDemo>
+
+SMAA (Subpixel Morphological Antialiasing) is an antialiasing technique that aims to reduce the visual defects that occur when high-frequency detail is displayed on a lower-resolution screen. This effect can be used to smooth out jagged edges in your 3D scenes.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { EffectComposer, SMAA } from '@tresjs/post-processing/three'
+</script>
+
+<template>
+  <EffectComposer>
+    <SMAA :width="1024" :height="768" />
+    <Output />
+  </EffectComposer>
+</template>
+```
+
+## Props
+
+| Prop    | Description                                                                                       | Default                         |
+|---------|---------------------------------------------------------------------------------------------------|---------------------------------|
+| `width` | The width of the render target. If not provided, it defaults to the width of the renderer.        |       |
+| `height`| The height of the render target. If not provided, it defaults to the height of the renderer.      |    |