added smaa effect

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 />

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>

playground/src/router.ts

@@ -26,6 +26,7 @@ const home: RouteRecordRaw = {
 export const threeRoutes = [
   makeRoute('Pixelation', '👾'),
   makeRoute('Glitch', '📺'),
+  makeRoute('SMAA', '📐'),
 ]
 
 export const postProcessingRoutes = [

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>

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,
 }