fix: expose effectComposer (#83)

* fix: expose effectComposer * fixed types and restructured composable a bit * cleanup * fixed linting errors --------- Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
Tresjs · Nov 17, 2023 · 4878a95 · 4878a95
1 parent ccfa8fb
commit 4878a95
Show file tree

Hide file tree

Showing 15 changed files with 703 additions and 471 deletions.
diff --git a/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs b/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs
@@ -0,0 +1,67 @@
+// .vitepress/config.ts
+import { defineConfig } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/vitepress@1.0.0-rc.25_@algolia+client-search@4.20.0_postcss@8.4.31_search-insights@2.10.0_typescript@5.2.2/node_modules/vitepress/dist/node/index.js";
+import { resolve } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/pathe@1.1.1/node_modules/pathe/dist/index.mjs";
+import { templateCompilerOptions } from "file:///Users/alvarosabu/Projects/tres/post-processing/node_modules/.pnpm/@tresjs+core@3.5.0_three@0.158.0_vue@3.3.8/node_modules/@tresjs/core/dist/tres.js";
+var __vite_injected_original_dirname = "/Users/alvarosabu/Projects/tres/post-processing/docs/.vitepress";
+var config_default = defineConfig({
+  title: "Post-processing",
+  description: "Post-processing effects for ViteJS",
+  head: [["link", { rel: "icon", type: "image/svg", href: "/favicon.svg" }]],
+  themeConfig: {
+    logo: "/logo.svg",
+    search: {
+      provider: "local"
+    },
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: "Guide", link: "/guide/" },
+      { text: "Examples", link: "/examples" }
+    ],
+    sidebar: [
+      {
+        text: "Guide",
+        items: [{ text: "Introduction", link: "/guide/" }]
+      },
+      {
+        text: "Effects",
+        items: [
+          { text: "Bloom", link: "/guide/effects/bloom" },
+          { text: "Depth of Field", link: "/guide/effects/depth-of-field" },
+          { text: "Glitch", link: "/guide/effects/glitch" },
+          { text: "Noise", link: "/guide/effects/noise" },
+          { text: "Outline", link: "/guide/effects/outline" },
+          { text: "Pixelation", link: "/guide/effects/pixelation" },
+          { text: "Vignette", link: "/guide/effects/vignette" }
+        ]
+      }
+    ],
+    socialLinks: [
+      { icon: "twitter", link: "https://twitter.com/tresjs_dev" },
+      { icon: "discord", link: "https://discord.gg/UCr96AQmWn" }
+    ]
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: ["vitepress"],
+      include: ["three"]
+    },
+    server: {
+      hmr: {
+        overlay: false
+      }
+    },
+    resolve: {
+      alias: {
+        "@tresjs/post-processing": resolve(__vite_injected_original_dirname, "../../dist/tres-postprocessing.js")
+      },
+      dedupe: ["three"]
+    }
+  },
+  vue: {
+    ...templateCompilerOptions
+  }
+});
+export {
+  config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLnZpdGVwcmVzcy9jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvYWx2YXJvc2FidS9Qcm9qZWN0cy90cmVzL3Bvc3QtcHJvY2Vzc2luZy9kb2NzLy52aXRlcHJlc3NcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfZmlsZW5hbWUgPSBcIi9Vc2Vycy9hbHZhcm9zYWJ1L1Byb2plY3RzL3RyZXMvcG9zdC1wcm9jZXNzaW5nL2RvY3MvLnZpdGVwcmVzcy9jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2FsdmFyb3NhYnUvUHJvamVjdHMvdHJlcy9wb3N0LXByb2Nlc3NpbmcvZG9jcy8udml0ZXByZXNzL2NvbmZpZy50c1wiO2ltcG9ydCB7IGRlZmluZUNvbmZpZyB9IGZyb20gJ3ZpdGVwcmVzcydcbmltcG9ydCBVbm9jc3MgZnJvbSAndW5vY3NzL3ZpdGUnXG5pbXBvcnQgc3ZnTG9hZGVyIGZyb20gJ3ZpdGUtc3ZnLWxvYWRlcidcbmltcG9ydCB7IHJlc29sdmUgfSBmcm9tICdwYXRoZSdcbmltcG9ydCB7IHRlbXBsYXRlQ29tcGlsZXJPcHRpb25zIH0gZnJvbSAnQHRyZXNqcy9jb3JlJ1xuXG4vLyBodHRwczovL3ZpdGVwcmVzcy5kZXYvcmVmZXJlbmNlL3NpdGUtY29uZmlnXG5leHBvcnQgZGVmYXVsdCBkZWZpbmVDb25maWcoe1xuICB0aXRsZTogJ1Bvc3QtcHJvY2Vzc2luZycsXG4gIGRlc2NyaXB0aW9uOiAnUG9zdC1wcm9jZXNzaW5nIGVmZmVjdHMgZm9yIFZpdGVKUycsXG4gIGhlYWQ6IFtbJ2xpbmsnLCB7IHJlbDogJ2ljb24nLCB0eXBlOiAnaW1hZ2Uvc3ZnJywgaHJlZjogJy9mYXZpY29uLnN2ZycgfV1dLFxuICB0aGVtZUNvbmZpZzoge1xuICAgIGxvZ286ICcvbG9nby5zdmcnLFxuICAgIHNlYXJjaDoge1xuICAgICAgcHJvdmlkZXI6ICdsb2NhbCcsXG4gICAgfSxcbiAgICAvLyBodHRwczovL3ZpdGVwcmVzcy5kZXYvcmVmZXJlbmNlL2RlZmF1bHQtdGhlbWUtY29uZmlnXG4gICAgbmF2OiBbXG4gICAgICB7IHRleHQ6ICdHdWlkZScsIGxpbms6ICcvZ3VpZGUvJyB9LFxuICAgICAgeyB0ZXh0OiAnRXhhbXBsZXMnLCBsaW5rOiAnL2V4YW1wbGVzJyB9LFxuICAgIF0sXG5cbiAgICBzaWRlYmFyOiBbXG4gICAgICB7XG4gICAgICAgIHRleHQ6ICdHdWlkZScsXG4gICAgICAgIGl0ZW1zOiBbeyB0ZXh0OiAnSW50cm9kdWN0aW9uJywgbGluazogJy9ndWlkZS8nIH1dLFxuICAgICAgfSxcbiAgICAgIHtcbiAgICAgICAgdGV4dDogJ0VmZmVjdHMnLFxuICAgICAgICBpdGVtczogW1xuICAgICAgICAgIHsgdGV4dDogJ0Jsb29tJywgbGluazogJy9ndWlkZS9lZmZlY3RzL2Jsb29tJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ0RlcHRoIG9mIEZpZWxkJywgbGluazogJy9ndWlkZS9lZmZlY3RzL2RlcHRoLW9mLWZpZWxkJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ0dsaXRjaCcsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy9nbGl0Y2gnIH0sXG4gICAgICAgICAgeyB0ZXh0OiAnTm9pc2UnLCBsaW5rOiAnL2d1aWRlL2VmZmVjdHMvbm9pc2UnIH0sXG4gICAgICAgICAgeyB0ZXh0OiAnT3V0bGluZScsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy9vdXRsaW5lJyB9LFxuICAgICAgICAgIHsgdGV4dDogJ1BpeGVsYXRpb24nLCBsaW5rOiAnL2d1aWRlL2VmZmVjdHMvcGl4ZWxhdGlvbicgfSxcbiAgICAgICAgICB7IHRleHQ6ICdWaWduZXR0ZScsIGxpbms6ICcvZ3VpZGUvZWZmZWN0cy92aWduZXR0ZScgfSxcbiAgICAgICAgXSxcbiAgICAgIH0sXG4gICAgXSxcblxuICAgIHNvY2lhbExpbmtzOiBbXG4gICAgICB7IGljb246ICd0d2l0dGVyJywgbGluazogJ2h0dHBzOi8vdHdpdHRlci5jb20vdHJlc2pzX2RldicgfSxcbiAgICAgIHsgaWNvbjogJ2Rpc2NvcmQnLCBsaW5rOiAnaHR0cHM6Ly9kaXNjb3JkLmdnL1VDcjk2QVFtV24nIH0sXG4gICAgXSxcbiAgfSxcbiAgdml0ZToge1xuICAgIG9wdGltaXplRGVwczoge1xuICAgICAgZXhjbHVkZTogWyd2aXRlcHJlc3MnXSxcbiAgICAgIGluY2x1ZGU6IFsndGhyZWUnXSxcbiAgICB9LFxuICAgIHNlcnZlcjoge1xuICAgICAgaG1yOiB7XG4gICAgICAgIG92ZXJsYXk6IGZhbHNlLFxuICAgICAgfSxcbiAgICB9LFxuICAgIHJlc29sdmU6IHtcbiAgICAgIGFsaWFzOiB7XG4gICAgICAgICdAdHJlc2pzL3Bvc3QtcHJvY2Vzc2luZyc6IHJlc29sdmUoX19kaXJuYW1lLCAnLi4vLi4vZGlzdC90cmVzLXBvc3Rwcm9jZXNzaW5nLmpzJyksXG4gICAgICB9LFxuICAgICAgZGVkdXBlOiBbJ3RocmVlJ10sXG4gICAgfSxcbiAgfSxcbiAgdnVlOiB7XG4gICAgLi4udGVtcGxhdGVDb21waWxlck9wdGlvbnMsXG4gIH0sXG59KVxuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFxVyxTQUFTLG9CQUFvQjtBQUdsWSxTQUFTLGVBQWU7QUFDeEIsU0FBUywrQkFBK0I7QUFKeEMsSUFBTSxtQ0FBbUM7QUFPekMsSUFBTyxpQkFBUSxhQUFhO0FBQUEsRUFDMUIsT0FBTztBQUFBLEVBQ1AsYUFBYTtBQUFBLEVBQ2IsTUFBTSxDQUFDLENBQUMsUUFBUSxFQUFFLEtBQUssUUFBUSxNQUFNLGFBQWEsTUFBTSxlQUFlLENBQUMsQ0FBQztBQUFBLEVBQ3pFLGFBQWE7QUFBQSxJQUNYLE1BQU07QUFBQSxJQUNOLFFBQVE7QUFBQSxNQUNOLFVBQVU7QUFBQSxJQUNaO0FBQUE7QUFBQSxJQUVBLEtBQUs7QUFBQSxNQUNILEVBQUUsTUFBTSxTQUFTLE1BQU0sVUFBVTtBQUFBLE1BQ2pDLEVBQUUsTUFBTSxZQUFZLE1BQU0sWUFBWTtBQUFBLElBQ3hDO0FBQUEsSUFFQSxTQUFTO0FBQUEsTUFDUDtBQUFBLFFBQ0UsTUFBTTtBQUFBLFFBQ04sT0FBTyxDQUFDLEVBQUUsTUFBTSxnQkFBZ0IsTUFBTSxVQUFVLENBQUM7QUFBQSxNQUNuRDtBQUFBLE1BQ0E7QUFBQSxRQUNFLE1BQU07QUFBQSxRQUNOLE9BQU87QUFBQSxVQUNMLEVBQUUsTUFBTSxTQUFTLE1BQU0sdUJBQXVCO0FBQUEsVUFDOUMsRUFBRSxNQUFNLGtCQUFrQixNQUFNLGdDQUFnQztBQUFBLFVBQ2hFLEVBQUUsTUFBTSxVQUFVLE1BQU0sd0JBQXdCO0FBQUEsVUFDaEQsRUFBRSxNQUFNLFNBQVMsTUFBTSx1QkFBdUI7QUFBQSxVQUM5QyxFQUFFLE1BQU0sV0FBVyxNQUFNLHlCQUF5QjtBQUFBLFVBQ2xELEVBQUUsTUFBTSxjQUFjLE1BQU0sNEJBQTRCO0FBQUEsVUFDeEQsRUFBRSxNQUFNLFlBQVksTUFBTSwwQkFBMEI7QUFBQSxRQUN0RDtBQUFBLE1BQ0Y7QUFBQSxJQUNGO0FBQUEsSUFFQSxhQUFhO0FBQUEsTUFDWCxFQUFFLE1BQU0sV0FBVyxNQUFNLGlDQUFpQztBQUFBLE1BQzFELEVBQUUsTUFBTSxXQUFXLE1BQU0sZ0NBQWdDO0FBQUEsSUFDM0Q7QUFBQSxFQUNGO0FBQUEsRUFDQSxNQUFNO0FBQUEsSUFDSixjQUFjO0FBQUEsTUFDWixTQUFTLENBQUMsV0FBVztBQUFBLE1BQ3JCLFNBQVMsQ0FBQyxPQUFPO0FBQUEsSUFDbkI7QUFBQSxJQUNBLFFBQVE7QUFBQSxNQUNOLEtBQUs7QUFBQSxRQUNILFNBQVM7QUFBQSxNQUNYO0FBQUEsSUFDRjtBQUFBLElBQ0EsU0FBUztBQUFBLE1BQ1AsT0FBTztBQUFBLFFBQ0wsMkJBQTJCLFFBQVEsa0NBQVcsbUNBQW1DO0FBQUEsTUFDbkY7QUFBQSxNQUNBLFFBQVEsQ0FBQyxPQUFPO0FBQUEsSUFDbEI7QUFBQSxFQUNGO0FBQUEsRUFDQSxLQUFLO0FBQUEsSUFDSCxHQUFHO0FBQUEsRUFDTDtBQUNGLENBQUM7IiwKICAibmFtZXMiOiBbXQp9Cg==
diff --git a/docs/.vitepress/theme/components/BloomDemo.vue b/docs/.vitepress/theme/components/BloomDemo.vue
@@ -1,10 +1,12 @@
 <script setup lang="ts">
 import { Color } from 'three'
-import { reactive } from 'vue'
+import { reactive, ref } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BlendFunction } from 'postprocessing'
 import { EffectComposer, Bloom } from '@tresjs/post-processing'
 
+import { useRouteDisposal } from '../composables/useRouteDisposal'
+
 const gl = {
   clearColor: '#121212',
   shadows: true,
@@ -20,6 +22,9 @@ const bloomParams = reactive({
   disableRender: true,
   blendFunction: BlendFunction.ADD,
 })
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
@@ -44,7 +49,7 @@ const bloomParams = reactive({
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer>
+      <EffectComposer ref="effectComposer">
         <Bloom v-bind="bloomParams" />
       </EffectComposer>
     </Suspense>

diff --git a/docs/.vitepress/theme/components/DepthOfFieldDemo.vue b/docs/.vitepress/theme/components/DepthOfFieldDemo.vue
@@ -4,6 +4,8 @@ import { gsap } from 'gsap'
 import { TresCanvas } from '@tresjs/core'
 import { EffectComposer, DepthOfField } from '@tresjs/post-processing'
 
+import { useRouteDisposal } from '../composables/useRouteDisposal'
+
 const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
 
 const toggleFocusDistance = () => {
@@ -13,6 +15,9 @@ const toggleFocusDistance = () => {
     ease: 'power2',
   })
 }
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
@@ -59,7 +64,7 @@ const toggleFocusDistance = () => {
       <TresMeshNormalMaterial />
     </TresMesh>
     <TresGridHelper />
-    <EffectComposer>
+    <EffectComposer ref="effectComposer">
       <DepthOfField
         ref="dofEffect"
         :focus-distance="0.0012"

diff --git a/docs/.vitepress/theme/components/GlitchDemo.vue b/docs/.vitepress/theme/components/GlitchDemo.vue
@@ -5,12 +5,17 @@ import { Text3D } from '@tresjs/cientos'
 
 import { EffectComposer, Glitch } from '@tresjs/post-processing'
 
+import { useRouteDisposal } from '../composables/useRouteDisposal'
+
 const gl = {
   clearColor: '#121212',
   shadows: true,
   alpha: false,
   disableRender: true,
 }
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
@@ -40,7 +45,7 @@ const gl = {
       :intensity="1"
     />
     <Suspense>
-      <EffectComposer>
+      <EffectComposer ref="effectComposer">
         <Glitch />
       </EffectComposer>
     </Suspense>

diff --git a/docs/.vitepress/theme/components/NoiseDemo.vue b/docs/.vitepress/theme/components/NoiseDemo.vue
@@ -4,7 +4,8 @@ import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { EffectComposer, Noise } from '@tresjs/post-processing'
 import { OrbitControls } from '@tresjs/cientos'
 import { BlendFunction } from 'postprocessing'
-import '@tresjs/leches/styles'
+
+import { useRouteDisposal } from '../composables/useRouteDisposal'
 
 const gl = {
   clearColor: '#82DBC5',
@@ -14,6 +15,9 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
@@ -23,7 +27,7 @@ const gl = {
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />
     <Suspense>
-      <EffectComposer :depth-buffer="true">
+      <EffectComposer ref="effectComposer">
         <Noise
           premultiply
           :blend-function="BlendFunction.SCREEN"

diff --git a/docs/.vitepress/theme/components/OutlineDemo.vue b/docs/.vitepress/theme/components/OutlineDemo.vue
@@ -1,13 +1,25 @@
 <script lang="ts" setup>
-import { ref, shallowRef } from 'vue'
-import { watchOnce } from '@vueuse/core'
+import { ref } from 'vue'
+import type { Intersection, Object3D } from 'three'
+import { NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { Outline, EffectComposer } from '@tresjs/post-processing'
 import { KernelSize } from 'postprocessing'
-import { EffectComposer, Outline } from '@tresjs/post-processing'
-import type { Intersection, Object3D } from 'three'
-import { Color } from 'three'
 
-const boxWidth = 2
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+import { useRouteDisposal } from '../composables/useRouteDisposal'
+
+const gl = {
+  clearColor: '#121212',
+  toneMapping: NoToneMapping,
+  disableRender: true,
+}
+
+const { effectComposer } = useRouteDisposal()
+
 const outlinedObjects = ref<Object3D[]>([])
 
 const toggleMeshSelectionState = ({ object }: Intersection) => {
@@ -16,55 +28,71 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
   else outlinedObjects.value = [...outlinedObjects.value, object]
 }
 
-const meshes = shallowRef<Object3D[] | null>(null)
-
-watchOnce(meshes, () => {
-  if (meshes.value?.[0]) outlinedObjects.value.push(meshes.value[0])
-  if (meshes.value?.[2]) outlinedObjects.value.push(meshes.value[2])
+const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useControls({
+  edgeStrength: {
+    value: 8000,
+    min: 0,
+    max: 8000,
+    step: 10,
+  },
+  pulseSpeed: {
+    value: 0,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
+  visibleEdgeColor: '#ffffff',
+  blur: false,
+  kernelSize: {
+    value: 0,
+    min: KernelSize.VERY_SMALL,
+    max: KernelSize.VERY_LARGE,
+    step: 1,
+  },
 })
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+useRouteDisposal(effectComposer)
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas
-    clear-color="#121212"
-    :alpha="false"
-    :shadows="true"
+    v-bind="gl"
     :disable-render="true"
   >
     <TresPerspectiveCamera
-      :position="[3, 3, 4]"
-      :look-at="[0, 0, 0]"
+      :position="[1, 3, 3]"
+      :look-at="[2, 2, 2]"
     />
-    <TresMesh
-      v-for="i in 3"
-      ref="meshes"
-      :key="i.toString()"
-      :position="[(i - 2) * boxWidth, 0.5, 1]"
-      @click="toggleMeshSelectionState"
+    <OrbitControls />
+    <template
+      v-for="i in 5"
+      :key="i"
     >
-      <TresBoxGeometry />
-      <TresMeshStandardMaterial
-        color="hotpink"
-        :emissive="new Color('hotpink')"
-        :emissive-intensity="1"
-      />
-    </TresMesh>
+      <TresMesh
+        :position="[i * 1.1 - 2.8, 1, 0]"
+        @click="toggleMeshSelectionState"
+      >
+        <TresBoxGeometry
+          :width="4"
+          :height="4"
+          :depth="4"
+        />
+        <TresMeshStandardMaterial color="hotpink" />
+      </TresMesh>
+    </template>
     <TresGridHelper />
     <TresAmbientLight :intensity="2" />
-    <TresDirectionalLight
-      :position="[-4, 4, 3]"
-      :intensity="2"
-    />
-
     <Suspense>
-      <EffectComposer>
+      <EffectComposer ref="effectComposer">
         <Outline
-          blur
-          :edge-glow="3"
-          :kernel-size="KernelSize.LARGE"
-          :edge-strength="20"
           :outlined-objects="outlinedObjects"
-          visible-edge-color="#82DBC5"
+          :blur="blur.value"
+          :edge-strength="edgeStrength.value"
+          :pulse-speed="pulseSpeed.value"
+          :visible-edge-color="visibleEdgeColor.value"
+          :kernel-size="kernelSize.value"
         />
       </EffectComposer>
     </Suspense>

diff --git a/docs/.vitepress/theme/components/PixelationDemo.vue b/docs/.vitepress/theme/components/PixelationDemo.vue
@@ -1,10 +1,13 @@
 <script lang="ts" setup>
-import { Color } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, Pixelation } from '@tresjs/post-processing'
 
-const boxWidth = 2
+import { ref } from 'vue'
+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>
@@ -45,7 +48,7 @@ const boxWidth = 2
     />
 
     <Suspense>
-      <EffectComposer>
+      <EffectComposer ref="effectComposer">
         <Pixelation :granularity="8" />
       </EffectComposer>
     </Suspense>

diff --git a/docs/.vitepress/theme/components/VignetteDemo.vue b/docs/.vitepress/theme/components/VignetteDemo.vue
@@ -3,6 +3,9 @@ import { TresCanvas } from '@tresjs/core'
 import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
+
+import { useRouteDisposal } from '../composables/useRouteDisposal'
+
 import BlenderCube from './BlenderCube.vue'
 
 const gl = {
@@ -13,6 +16,9 @@ const gl = {
   outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
+
+// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
+const { effectComposer } = useRouteDisposal()
 </script>
 
 <template>
@@ -23,7 +29,7 @@ const gl = {
     <Suspense>
       <BlenderCube />
     </Suspense>
-    <EffectComposer>
+    <EffectComposer ref="effectComposer">
       <DepthOfField
         :focus-distance="0"
         :focal-length="0.02"

diff --git a/docs/.vitepress/theme/composables/useRouteDisposal.ts b/docs/.vitepress/theme/composables/useRouteDisposal.ts
@@ -0,0 +1,17 @@
+import { ref, watch } from 'vue'
+import { useRouter } from 'vitepress'
+import type { EffectComposer } from '@tresjs/post-processing'
+
+export function useRouteDisposal() {
+  const router = useRouter()
+
+  const effectComposer = ref<InstanceType<typeof EffectComposer> | null>(null)
+
+  watch(() => router.route.data.relativePath, () => {
+    effectComposer.value?.composer.dispose()
+  })
+
+  return {
+    effectComposer,
+  }
+}