From 37f1ab6383d1a88140903caa450624035befc368 Mon Sep 17 00:00:00 2001
From: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Date: Thu, 5 Sep 2024 17:23:41 +0200
Subject: [PATCH] added smaa effect

---
 playground/src/components/BasicScene.vue | 10 ++++++---
 playground/src/pages/three/smaa.vue      | 18 ++++++++++++++++
 playground/src/router.ts                 |  1 +
 src/core/three/SMAA.vue                  | 26 ++++++++++++++++++++++++
 src/index.ts                             |  2 ++
 5 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 playground/src/pages/three/smaa.vue
 create mode 100644 src/core/three/SMAA.vue

diff --git a/playground/src/components/BasicScene.vue b/playground/src/components/BasicScene.vue
index a4bd4bf2..a06f0f39 100644
--- a/playground/src/components/BasicScene.vue
+++ b/playground/src/components/BasicScene.vue
@@ -2,6 +2,10 @@
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposerThree, PixelationThree } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
+
+defineProps<{
+  wireframe?: boolean
+}>()
 </script>
 
 <template>
@@ -15,17 +19,17 @@ import { OrbitControls } from '@tresjs/cientos'
       :position="[-3.5, 1, 0]"
     >
       <TresConeGeometry :args="[1.25, 2, 4, 1, false, Math.PI * 0.25]" />
-      <TresMeshNormalMaterial />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
     </TresMesh>
 
     <TresMesh :position="[0, 1, 0]">
       <TresBoxGeometry :args="[2, 2, 2]" />
-      <TresMeshNormalMaterial />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
     </TresMesh>
 
     <TresMesh :position="[3.5, 1, 0]">
       <TresSphereGeometry />
-      <TresMeshNormalMaterial />
+      <TresMeshNormalMaterial :wireframe="wireframe" />
     </TresMesh>
 
     <TresGridHelper />
diff --git a/playground/src/pages/three/smaa.vue b/playground/src/pages/three/smaa.vue
new file mode 100644
index 00000000..a4163b93
--- /dev/null
+++ b/playground/src/pages/three/smaa.vue
@@ -0,0 +1,18 @@
+<script lang="ts" setup>
+import { SMAAThree } from '@tresjs/post-processing'
+import { ref } from 'vue'
+import BasicScene from '../../components/BasicScene.vue'
+
+const enabled = ref(true)
+</script>
+
+<template>
+  <div class="absolute top-0 left-0 z-10">
+    <input v-model="enabled" type="checkbox" /> enabled
+  </div>
+  <BasicScene wireframe>
+    <template #effects>
+      <SMAAThree v-if="enabled" />
+    </template>
+  </BasicScene>
+</template>
diff --git a/playground/src/router.ts b/playground/src/router.ts
index 97e16102..909c8075 100644
--- a/playground/src/router.ts
+++ b/playground/src/router.ts
@@ -26,6 +26,7 @@ const home: RouteRecordRaw = {
 export const threeRoutes = [
   makeRoute('Pixelation', '👾'),
   makeRoute('Glitch', '📺'),
+  makeRoute('SMAA', '📐'),
 ]
 
 export const postProcessingRoutes = [
diff --git a/src/core/three/SMAA.vue b/src/core/three/SMAA.vue
new file mode 100644
index 00000000..dc969cee
--- /dev/null
+++ b/src/core/three/SMAA.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { SMAAPass } from 'three/examples/jsm/postprocessing/SMAAPass.js'
+import { useTresContext } from '@tresjs/core'
+import { computed, watchEffect } from 'vue'
+import { useDevicePixelRatio } from '@vueuse/core'
+import { useEffectThree } from '../composables/useEffectThree'
+
+const props = defineProps<{
+  width?: number
+  height?: number
+}>()
+
+const { sizes } = useTresContext()
+const { pixelRatio } = useDevicePixelRatio() // the renderers pixel ratio is not used because it is not reactive
+
+const width = computed(() => props.width ?? sizes.width.value * pixelRatio.value)
+const height = computed(() => props.height ?? sizes.height.value * pixelRatio.value)
+
+const { pass } = useEffectThree(() => new SMAAPass(width.value, height.value))
+
+defineExpose({ pass })
+
+watchEffect(() => {
+  pass.value.setSize(width.value, height.value)
+})
+</script>
diff --git a/src/index.ts b/src/index.ts
index d5b53477..f450809c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -4,6 +4,7 @@ import EffectComposer from './core/EffectComposer.vue'
 import EffectComposerThree from './core/three/EffectComposer.vue'
 import PixelationThree from './core/three/Pixelation.vue' // TODO seperate exports differently
 import GlitchThree from './core/three/Glitch.vue' // TODO seperate exports differently
+import SMAAThree from './core/three/SMAA.vue' // TODO seperate exports differently
 import Glitch from './core/postprocessing/Glitch.vue'
 import Outline from './core/postprocessing/Outline.vue'
 import Pixelation from './core/postprocessing/Pixelation.vue'
@@ -25,4 +26,5 @@ export {
   EffectComposerThree,
   PixelationThree,
   GlitchThree,
+  SMAAThree,
 }