From 4878a956f05ba8b19289062e4b77b6e3fc5ae40f Mon Sep 17 00:00:00 2001
From: Alvaro Saburido <alvaro.saburido@gmail.com>
Date: Fri, 17 Nov 2023 21:31:49 +0100
Subject: [PATCH] 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>
---
 ....timestamp-1700208814950-61916cb6f3fe3.mjs |  67 ++
 .../.vitepress/theme/components/BloomDemo.vue |   9 +-
 .../theme/components/DepthOfFieldDemo.vue     |   7 +-
 .../theme/components/GlitchDemo.vue           |   7 +-
 .../.vitepress/theme/components/NoiseDemo.vue |   8 +-
 .../theme/components/OutlineDemo.vue          | 108 ++-
 .../theme/components/PixelationDemo.vue       |   9 +-
 .../theme/components/VignetteDemo.vue         |   8 +-
 .../theme/composables/useRouteDisposal.ts     |  17 +
 docs/package.json                             |   7 +-
 package.json                                  |  10 +-
 playground/src/pages/depth-of-field.vue       |   1 +
 playground/src/pages/outline.vue              |  46 +-
 pnpm-lock.yaml                                | 867 ++++++++++--------
 src/core/EffectComposer.vue                   |   3 +-
 15 files changed, 703 insertions(+), 471 deletions(-)
 create mode 100644 docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs
 create mode 100644 docs/.vitepress/theme/composables/useRouteDisposal.ts

diff --git a/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs b/docs/.vitepress/config.ts.timestamp-1700208814950-61916cb6f3fe3.mjs
new file mode 100644
index 00000000..0f030659
--- /dev/null
+++ 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
index ae1f9541..acd1ac03 100644
--- 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
index 0c0e303b..66ec50d8 100644
--- 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
index deb7df01..a0cbc03a 100644
--- 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
index 0df5fb92..48f4da44 100644
--- 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
index 2680a123..b4c8b1df 100644
--- 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
index f5f58684..198e1951 100644
--- 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
index 92196114..830e14cb 100644
--- 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
new file mode 100644
index 00000000..5bb3712d
--- /dev/null
+++ 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,
+  }
+}
\ No newline at end of file
diff --git a/docs/package.json b/docs/package.json
index 7f65e351..22c8ed2a 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -9,15 +9,16 @@
     "preview": "vitepress preview"
   },
   "dependencies": {
-    "@tresjs/cientos": "^3.5.1",
+    "@tresjs/cientos": "^3.6.0",
     "@tresjs/core": "^3.5.0",
     "@tresjs/post-processing": "workspace:^",
     "gsap": "^3.12.2"
   },
   "devDependencies": {
-    "unocss": "^0.57.2",
+    "@tresjs/leches": "^0.13.0",
+    "unocss": "^0.57.4",
     "unplugin-vue-components": "^0.25.2",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-rc.25"
+    "vitepress": "1.0.0-rc.26"
   }
 }
diff --git a/package.json b/package.json
index f17c2713..b6b8b946 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@tresjs/core": "^3.5.0",
-    "@unocss/core": "^0.57.3",
+    "@unocss/core": "^0.57.4",
     "@vueuse/core": "^10.6.1",
     "postprocessing": "^6.33.3",
     "three-stdlib": "^2.28.5"
@@ -58,7 +58,7 @@
     "@release-it/conventional-changelog": "^8.0.1",
     "@tresjs/eslint-config-vue": "^0.2.1",
     "@types/three": "^0.158.2",
-    "@vitejs/plugin-vue": "^4.4.1",
+    "@vitejs/plugin-vue": "^4.5.0",
     "gsap": "^3.12.2",
     "kolorist": "^1.8.0",
     "pathe": "^1.1.1",
@@ -68,12 +68,12 @@
     "rollup-plugin-visualizer": "^5.9.2",
     "three": "^0.158.0",
     "typescript": "^5.2.2",
-    "unocss": "^0.57.3",
-    "vite": "^4.5.0",
+    "unocss": "^0.57.4",
+    "vite": "^5.0.0",
     "vite-plugin-banner": "^0.7.1",
     "vite-plugin-dts": "3.6.3",
     "vite-svg-loader": "^4.0.0",
-    "vitepress": "1.0.0-rc.25",
+    "vitepress": "1.0.0-rc.26",
     "vue": "^3.3.8",
     "vue-tsc": "^1.8.22"
   }
diff --git a/playground/src/pages/depth-of-field.vue b/playground/src/pages/depth-of-field.vue
index 4b6ed5a5..c8979449 100644
--- a/playground/src/pages/depth-of-field.vue
+++ b/playground/src/pages/depth-of-field.vue
@@ -3,6 +3,7 @@ import { computed } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 import { EffectComposer, DepthOfField } from '@tresjs/post-processing'
+
 import { TresLeches, useControls } from '@tresjs/leches'
 import '@tresjs/leches/styles'
 
diff --git a/playground/src/pages/outline.vue b/playground/src/pages/outline.vue
index 962b5464..c066c1bc 100644
--- a/playground/src/pages/outline.vue
+++ b/playground/src/pages/outline.vue
@@ -1,12 +1,15 @@
 <script setup lang="ts">
 import { KernelSize } from 'postprocessing'
-import { reactive, ref } from 'vue'
+import { ref } from 'vue'
 import { EffectComposer, Outline } from '@tresjs/post-processing'
 import { TresCanvas } from '@tresjs/core'
-import { OrbitControls, useTweakPane } from '@tresjs/cientos'
+import { OrbitControls } from '@tresjs/cientos'
 import type { Object3D, Intersection } from 'three'
 import { NoToneMapping } from 'three'
 
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
 const gl = {
   clearColor: '#4ADE80',
   toneMapping: NoToneMapping,
@@ -21,25 +24,32 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
   else outlinedObjects.value = [...outlinedObjects.value, object]
 }
 
-const outlineParameters = reactive({
-  pulseSpeed: 0,
-  edgeStrength: 2000,
+const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useControls({
+  edgeStrength: {
+    value: 2000,
+    min: 0,
+    max: 3000,
+    step: 10,
+  },
+  pulseSpeed: {
+    value: 0,
+    min: 0,
+    max: 2,
+    step: 0.01,
+  },
   visibleEdgeColor: '#ffffff',
-  multisampling: 4,
-  kernelSize: 3,
   blur: false,
+  kernelSize: {
+    value: 3,
+    min: KernelSize.VERY_SMALL,
+    max: KernelSize.VERY_LARGE,
+    step: 1,
+  },
 })
-
-const { pane } = useTweakPane()
-
-pane.addInput(outlineParameters, 'edgeStrength', { min: 0, max: 3000 })
-pane.addInput(outlineParameters, 'pulseSpeed', { min: 0, max: 2 })
-pane.addInput(outlineParameters, 'visibleEdgeColor')
-pane.addInput(outlineParameters, 'blur')
-pane.addInput(outlineParameters, 'kernelSize', { min: KernelSize.VERY_SMALL, max: KernelSize.VERY_LARGE, step: 1 })
 </script>
 
 <template>
+  <TresLeches />
   <TresCanvas
     v-bind="gl"
     :disable-render="true"
@@ -71,7 +81,11 @@ pane.addInput(outlineParameters, 'kernelSize', { min: KernelSize.VERY_SMALL, max
       <EffectComposer>
         <Outline
           :outlined-objects="outlinedObjects"
-          v-bind="outlineParameters"
+          :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/pnpm-lock.yaml b/pnpm-lock.yaml
index a1560aa7..969161ea 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^3.5.0
         version: 3.5.0(three@0.158.0)(vue@3.3.8)
       '@unocss/core':
-        specifier: ^0.57.3
-        version: 0.57.3
+        specifier: ^0.57.4
+        version: 0.57.4
       '@vueuse/core':
         specifier: ^10.6.1
         version: 10.6.1(vue@3.3.8)
@@ -34,8 +34,8 @@ importers:
         specifier: ^0.158.2
         version: 0.158.2
       '@vitejs/plugin-vue':
-        specifier: ^4.4.1
-        version: 4.4.1(vite@4.5.0)(vue@3.3.8)
+        specifier: ^4.5.0
+        version: 4.5.0(vite@5.0.0)(vue@3.3.8)
       gsap:
         specifier: ^3.12.2
         version: 3.12.2
@@ -64,23 +64,23 @@ importers:
         specifier: ^5.2.2
         version: 5.2.2
       unocss:
-        specifier: ^0.57.3
-        version: 0.57.3(postcss@8.4.31)(vite@4.5.0)
+        specifier: ^0.57.4
+        version: 0.57.4(postcss@8.4.31)(vite@5.0.0)
       vite:
-        specifier: ^4.5.0
-        version: 4.5.0
+        specifier: ^5.0.0
+        version: 5.0.0
       vite-plugin-banner:
         specifier: ^0.7.1
         version: 0.7.1
       vite-plugin-dts:
         specifier: 3.6.3
-        version: 3.6.3(typescript@5.2.2)(vite@4.5.0)
+        version: 3.6.3(typescript@5.2.2)(vite@5.0.0)
       vite-svg-loader:
         specifier: ^4.0.0
         version: 4.0.0
       vitepress:
-        specifier: 1.0.0-rc.25
-        version: 1.0.0-rc.25(@algolia/client-search@4.20.0)(postcss@8.4.31)(search-insights@2.10.0)(typescript@5.2.2)
+        specifier: 1.0.0-rc.26
+        version: 1.0.0-rc.26(@algolia/client-search@4.20.0)(postcss@8.4.31)(search-insights@2.11.0)(typescript@5.2.2)
       vue:
         specifier: ^3.3.8
         version: 3.3.8(typescript@5.2.2)
@@ -91,8 +91,8 @@ importers:
   docs:
     dependencies:
       '@tresjs/cientos':
-        specifier: ^3.5.1
-        version: 3.5.1(@tresjs/core@3.5.0)(three@0.158.0)(tweakpane@4.0.1)(vue@3.3.8)
+        specifier: ^3.6.0
+        version: 3.6.0(@tresjs/core@3.5.0)(three@0.158.0)(tweakpane@4.0.1)(vue@3.3.8)
       '@tresjs/core':
         specifier: ^3.5.0
         version: 3.5.0(three@0.158.0)(vue@3.3.8)
@@ -103,9 +103,12 @@ importers:
         specifier: ^3.12.2
         version: 3.12.2
     devDependencies:
+      '@tresjs/leches':
+        specifier: ^0.13.0
+        version: 0.13.0(vue@3.3.8)
       unocss:
-        specifier: ^0.57.2
-        version: 0.57.2(postcss@8.4.31)(vite@4.5.0)
+        specifier: ^0.57.4
+        version: 0.57.4(postcss@8.4.31)(vite@4.5.0)
       unplugin-vue-components:
         specifier: ^0.25.2
         version: 0.25.2(vue@3.3.8)
@@ -113,8 +116,8 @@ importers:
         specifier: ^4.0.0
         version: 4.0.0
       vitepress:
-        specifier: 1.0.0-rc.25
-        version: 1.0.0-rc.25(@algolia/client-search@4.20.0)(postcss@8.4.31)(search-insights@2.10.0)(typescript@5.2.2)
+        specifier: 1.0.0-rc.26
+        version: 1.0.0-rc.26(@algolia/client-search@4.20.0)(postcss@8.4.31)(search-insights@2.11.0)(typescript@5.2.2)
 
   playground:
     dependencies:
@@ -176,10 +179,10 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
+  /@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.11.0):
     resolution: {integrity: sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==}
     dependencies:
-      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
+      '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.11.0)
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -187,13 +190,13 @@ packages:
       - search-insights
     dev: true
 
-  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0):
+  /@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.11.0):
     resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==}
     peerDependencies:
       search-insights: '>= 1 < 3'
     dependencies:
       '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
-      search-insights: 2.10.0
+      search-insights: 2.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
       - algoliasearch
@@ -692,10 +695,10 @@ packages:
     resolution: {integrity: sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA==}
     dev: true
 
-  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0):
+  /@docsearch/js@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.11.0):
     resolution: {integrity: sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==}
     dependencies:
-      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0)
+      '@docsearch/react': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.11.0)
       preact: 10.18.2
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -705,7 +708,7 @@ packages:
       - search-insights
     dev: true
 
-  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0):
+  /@docsearch/react@3.5.2(@algolia/client-search@4.20.0)(search-insights@2.11.0):
     resolution: {integrity: sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==}
     peerDependencies:
       '@types/react': '>= 16.8.0 < 19.0.0'
@@ -722,11 +725,11 @@ packages:
       search-insights:
         optional: true
     dependencies:
-      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.10.0)
+      '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)(search-insights@2.11.0)
       '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.20.0)(algoliasearch@4.20.0)
       '@docsearch/css': 3.5.2
       algoliasearch: 4.20.0
-      search-insights: 2.10.0
+      search-insights: 2.11.0
     transitivePeerDependencies:
       - '@algolia/client-search'
     dev: true
@@ -1150,7 +1153,7 @@ packages:
       debug: 4.3.4
       espree: 9.6.1
       globals: 13.23.0
-      ignore: 5.2.4
+      ignore: 5.3.0
       import-fresh: 3.3.0
       js-yaml: 4.1.0
       minimatch: 3.1.2
@@ -1644,7 +1647,7 @@ packages:
     dependencies:
       '@nuxt/kit': 3.8.0
       '@rollup/plugin-replace': 5.0.4(rollup@3.29.4)
-      '@vitejs/plugin-vue': 4.4.1(vite@4.5.0)(vue@3.3.7)
+      '@vitejs/plugin-vue': 4.5.0(vite@4.5.0)(vue@3.3.7)
       '@vitejs/plugin-vue-jsx': 3.0.2(vite@4.5.0)(vue@3.3.7)
       autoprefixer: 10.4.16(postcss@8.4.31)
       clear: 0.1.0
@@ -2131,6 +2134,102 @@ packages:
       picomatch: 2.3.1
       rollup: 3.29.4
 
+  /@rollup/rollup-android-arm-eabi@4.4.1:
+    resolution: {integrity: sha512-Ss4suS/sd+6xLRu+MLCkED2mUrAyqHmmvZB+zpzZ9Znn9S8wCkTQCJaQ8P8aHofnvG5L16u9MVnJjCqioPErwQ==}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-android-arm64@4.4.1:
+    resolution: {integrity: sha512-sRSkGTvGsARwWd7TzC8LKRf8FiPn7257vd/edzmvG4RIr9x68KBN0/Ek48CkuUJ5Pj/Dp9vKWv6PEupjKWjTYA==}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-arm64@4.4.1:
+    resolution: {integrity: sha512-nz0AiGrrXyaWpsmBXUGOBiRDU0wyfSXbFuF98pPvIO8O6auQsPG6riWsfQqmCCC5FNd8zKQ4JhgugRNAkBJ8mQ==}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-darwin-x64@4.4.1:
+    resolution: {integrity: sha512-Ogqvf4/Ve/faMaiPRvzsJEqajbqs00LO+8vtrPBVvLgdw4wBg6ZDXdkDAZO+4MLnrc8mhGV6VJAzYScZdPLtJg==}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm-gnueabihf@4.4.1:
+    resolution: {integrity: sha512-9zc2tqlr6HfO+hx9+wktUlWTRdje7Ub15iJqKcqg5uJZ+iKqmd2CMxlgPpXi7+bU7bjfDIuvCvnGk7wewFEhCg==}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-gnu@4.4.1:
+    resolution: {integrity: sha512-phLb1fN3rq2o1j1v+nKxXUTSJnAhzhU0hLrl7Qzb0fLpwkGMHDem+o6d+ZI8+/BlTXfMU4kVWGvy6g9k/B8L6Q==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-arm64-musl@4.4.1:
+    resolution: {integrity: sha512-M2sDtw4tf57VPSjbTAN/lz1doWUqO2CbQuX3L9K6GWIR5uw9j+ROKCvvUNBY8WUbMxwaoc8mH9HmmBKsLht7+w==}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-gnu@4.4.1:
+    resolution: {integrity: sha512-mHIlRLX+hx+30cD6c4BaBOsSqdnCE4ok7/KDvjHYAHoSuveoMMxIisZFvcLhUnyZcPBXDGZTuBoalcuh43UfQQ==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-linux-x64-musl@4.4.1:
+    resolution: {integrity: sha512-tB+RZuDi3zxFx7vDrjTNGVLu2KNyzYv+UY8jz7e4TMEoAj7iEt8Qk6xVu6mo3pgjnsHj6jnq3uuRsHp97DLwOA==}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-arm64-msvc@4.4.1:
+    resolution: {integrity: sha512-Hdn39PzOQowK/HZzYpCuZdJC91PE6EaGbTe2VCA9oq2u18evkisQfws0Smh9QQGNNRa/T7MOuGNQoLeXhhE3PQ==}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-ia32-msvc@4.4.1:
+    resolution: {integrity: sha512-tLpKb1Elm9fM8c5w3nl4N1eLTP4bCqTYw9tqUBxX8/hsxqHO3dxc2qPbZ9PNkdK4tg4iLEYn0pOUnVByRd2CbA==}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
+  /@rollup/rollup-win32-x64-msvc@4.4.1:
+    resolution: {integrity: sha512-eAhItDX9yQtZVM3yvXS/VR3qPqcnXvnLyx1pLXl4JzyNMBNO3KC986t/iAg2zcMzpAp9JSvxB5VZGnBiNoA98w==}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
   /@rushstack/node-core-library@3.61.0:
     resolution: {integrity: sha512-tdOjdErme+/YOu4gPed3sFS72GhtWCgNV9oDsHDnoLY5oDfwjKUc9Z+JOZZ37uAxcm/OCahDHfuu2ugqrfWAVQ==}
     peerDependencies:
@@ -2265,6 +2364,30 @@ packages:
       - '@vue/composition-api'
     dev: false
 
+  /@tresjs/cientos@3.6.0(@tresjs/core@3.5.0)(three@0.158.0)(tweakpane@4.0.1)(vue@3.3.8):
+    resolution: {integrity: sha512-VM6LamAFlcKufbrtbYN71ncuAw2JPVfKUC6Ey9+scq05qvHdQM8fU0WoppNZEtmIL7m2aUqroOZRnr9LXyZPCg==}
+    peerDependencies:
+      '@tresjs/core': '>=3.2'
+      three: '>=0.133'
+      tweakpane: '>=3.0.0'
+      vue: '>=3.3'
+    dependencies:
+      '@tresjs/core': 3.5.0(three@0.158.0)(vue@3.3.8)
+      '@vueuse/core': 10.6.1(vue@3.3.8)
+      camera-controls: 2.7.3(three@0.158.0)
+      stats-gl: 1.0.7
+      stats.js: 0.17.0
+      three: 0.158.0
+      three-custom-shader-material: 5.4.0(three@0.158.0)
+      three-stdlib: 2.28.5(three@0.158.0)
+      tweakpane: 4.0.1
+      vue: 3.3.8(typescript@5.2.2)
+    transitivePeerDependencies:
+      - '@react-three/fiber'
+      - '@vue/composition-api'
+      - react
+    dev: false
+
   /@tresjs/core@3.4.1(three@0.158.0)(vue@3.3.7):
     resolution: {integrity: sha512-C48PNObHT9F85ci6xvo0ifngDQSSeZjKcxsaLyrHGq65XYGSN1XCFXA/FgsSE20WUkpeG2lPWBxNwE5dnhPqHw==}
     peerDependencies:
@@ -2376,7 +2499,7 @@ packages:
     peerDependencies:
       vue: '>=3.3.4'
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
       '@vueuse/components': 10.5.0(vue@3.3.8)
       vue: 3.3.8(typescript@5.2.2)
     transitivePeerDependencies:
@@ -2457,15 +2580,15 @@ packages:
     resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==}
     dev: true
 
-  /@types/linkify-it@3.0.4:
-    resolution: {integrity: sha512-hPpIeeHb/2UuCw06kSNAOVWgehBLXEo0/fUs0mw3W2qhqX89PI2yvok83MnuctYGCPrabGIoi0fFso4DQ+sNUQ==}
+  /@types/linkify-it@3.0.5:
+    resolution: {integrity: sha512-yg6E+u0/+Zjva+buc3EIb+29XEg4wltq7cSmd4Uc2EE/1nUVmxyzpX6gUXD0V8jIrG0r7YeOGVIbYRkxeooCtw==}
     dev: true
 
-  /@types/markdown-it@13.0.5:
-    resolution: {integrity: sha512-QhJP7hkq3FCrFNx0szMNCT/79CXfcEgUIA3jc5GBfeXqoKsk3R8JZm2wRXJ2DiyjbPE4VMFOSDemLFcUTZmHEQ==}
+  /@types/markdown-it@13.0.6:
+    resolution: {integrity: sha512-0VqpvusJn1/lwRegCxcHVdmLfF+wIsprsKMC9xW8UPcTxhFcQtoN/fBU1zMe8pH7D/RuueMh2CaBaNv+GrLqTw==}
     dependencies:
-      '@types/linkify-it': 3.0.4
-      '@types/mdurl': 1.0.4
+      '@types/linkify-it': 3.0.5
+      '@types/mdurl': 1.0.5
     dev: true
 
   /@types/mdast@3.0.14:
@@ -2474,8 +2597,8 @@ packages:
       '@types/unist': 2.0.9
     dev: true
 
-  /@types/mdurl@1.0.4:
-    resolution: {integrity: sha512-ARVxjAEX5TARFRzpDRVC6cEk0hUIXCCwaMhz8y7S1/PxU6zZS1UMjyobz7q4w/D/R552r4++EhwmXK1N2rAy0A==}
+  /@types/mdurl@1.0.5:
+    resolution: {integrity: sha512-6L6VymKTzYSrEf4Nev4Xa1LCHKrlTlYCBMTlQKFuddo1CvQcE52I0mwfOJayueUC7MJuXOeHTcIU683lzd0cUA==}
     dev: true
 
   /@types/node@20.8.9:
@@ -2738,70 +2861,48 @@ packages:
       vue: 3.3.7(typescript@5.2.2)
     dev: true
 
-  /@unocss/astro@0.57.2(vite@4.5.0):
-    resolution: {integrity: sha512-6R6xJVD1n+OrgRwLtiw6fi8/Mx9lECB9wiqRo/liWH27lEWrToXKpgX3oTGGihQQceGNukGe6O4lBThYUILgEQ==}
+  /@unocss/astro@0.57.4(vite@4.5.0):
+    resolution: {integrity: sha512-BP7+X/AlUFFMzr5s8bUpbO4HsWBESzIcPUE9VMA4bpSJIbXxi9GyJRU3Av72nbQp4BBeDjYiDT0qRa5gS0oPxw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       vite:
         optional: true
     dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/reset': 0.57.2
-      '@unocss/vite': 0.57.2(vite@4.5.0)
+      '@unocss/core': 0.57.4
+      '@unocss/reset': 0.57.4
+      '@unocss/vite': 0.57.4(vite@4.5.0)
       vite: 4.5.0
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/astro@0.57.3(vite@4.5.0):
-    resolution: {integrity: sha512-Kwu/k8iGNVrMtOuzJ7jKOvjYZFZz3recSxd7ceDp5Hi5SMsmjvXXHzkQ1Iypj1g0nczWcX4U+krROr2EH0GlnA==}
+  /@unocss/astro@0.57.4(vite@5.0.0):
+    resolution: {integrity: sha512-BP7+X/AlUFFMzr5s8bUpbO4HsWBESzIcPUE9VMA4bpSJIbXxi9GyJRU3Av72nbQp4BBeDjYiDT0qRa5gS0oPxw==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       vite:
         optional: true
     dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/reset': 0.57.3
-      '@unocss/vite': 0.57.3(vite@4.5.0)
-      vite: 4.5.0
-    transitivePeerDependencies:
-      - rollup
-    dev: true
-
-  /@unocss/cli@0.57.2:
-    resolution: {integrity: sha512-Poz20X4q7rCu9oBnF8/vNGzCKU9M32xlyeeWoExho0nwh8WJ9JaZ8E8ijcLWeS7YUt1kLOdrsQlppcq+I8o2nQ==}
-    engines: {node: '>=14'}
-    hasBin: true
-    dependencies:
-      '@ampproject/remapping': 2.2.1
-      '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
-      '@unocss/config': 0.57.2
-      '@unocss/core': 0.57.2
-      '@unocss/preset-uno': 0.57.2
-      cac: 6.7.14
-      chokidar: 3.5.3
-      colorette: 2.0.20
-      consola: 3.2.3
-      fast-glob: 3.3.1
-      magic-string: 0.30.5
-      pathe: 1.1.1
-      perfect-debounce: 1.0.0
+      '@unocss/core': 0.57.4
+      '@unocss/reset': 0.57.4
+      '@unocss/vite': 0.57.4(vite@5.0.0)
+      vite: 5.0.0
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/cli@0.57.3:
-    resolution: {integrity: sha512-F5k0IjkbHFlZDcGAUr7UTa2xehxobfqWzooDL0tU9PtvAk6S4Edf5Iq0HymAcVK1k9yO17i7Pvg6dw7gOM0TIg==}
+  /@unocss/cli@0.57.4:
+    resolution: {integrity: sha512-8g00ZV1iZIEmgSqmIycvEesIXt8KFQHUCI64D9cqf3UEcWgEoRqUZOjhVozHbhfDe+yg9s6D9E++arLn1wAvzg==}
     engines: {node: '>=14'}
     hasBin: true
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
-      '@unocss/config': 0.57.3
-      '@unocss/core': 0.57.3
-      '@unocss/preset-uno': 0.57.3
+      '@unocss/config': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/preset-uno': 0.57.4
       cac: 6.7.14
       chokidar: 3.5.3
       colorette: 2.0.20
@@ -2814,342 +2915,192 @@ packages:
       - rollup
     dev: true
 
-  /@unocss/config@0.57.2:
-    resolution: {integrity: sha512-C+uZPz4lYN8dft0dKRRiBBtDIyd+RdYlbaQhuQp5F7UEfJeEPH8HpdiF+FeKZVJxP4j7kaGfcGWEJj1ImC/g9A==}
+  /@unocss/config@0.57.4:
+    resolution: {integrity: sha512-Si0fA6fb6kLymgWbXvgM50PtX8zKV5p+BMeAn17ihefnasjg0fdPe1Zgdj/QdLJpwIcJ5yOw3uFwVgrOYRqIfQ==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.57.2
+      '@unocss/core': 0.57.4
       unconfig: 0.3.11
     dev: true
 
-  /@unocss/config@0.57.3:
-    resolution: {integrity: sha512-jrjvmcrrdiHHLqp6LBpHWs7VAnumFK3fEdMH7celRe+99CTOvRn73caUThyD2Ftt8rDIMejmteR1hqVBH51kug==}
-    engines: {node: '>=14'}
-    dependencies:
-      '@unocss/core': 0.57.3
-      unconfig: 0.3.11
-    dev: true
+  /@unocss/core@0.57.4:
+    resolution: {integrity: sha512-JXufixa501p7+uwUkfG9voIUvNYXv58shZCKXO4Q9AojOzOMu6TDj35x8f3Sv5WFtZ3tp03sIETAfQRo7ksshw==}
 
-  /@unocss/core@0.57.2:
-    resolution: {integrity: sha512-iTmowhObigxeqcxtEW4v+mAEQtFslifTG0Fiw8kXs3+t4L6fcnjj0i7/FtBbz+nOxrWyt2EzdkUyjpLGQa/yCw==}
-    dev: true
-
-  /@unocss/core@0.57.3:
-    resolution: {integrity: sha512-o6snDo5vwAenIqA+wjjI6BUsftJXXSqrPHYqplb+QX5bLfxW/OU1xhBRlnhiP0BOGGZXqgGEETU1ym8MM9bLwA==}
-
-  /@unocss/extractor-arbitrary-variants@0.57.2:
-    resolution: {integrity: sha512-f6sc8pfgHbJua1VzdpFSPW92lNyIBRl93avRNk+HM4iWAhxBPD3LsCxSS7kOnQg2tFe6YsRkm8QkuF6SjFq1AA==}
-    dependencies:
-      '@unocss/core': 0.57.2
-    dev: true
-
-  /@unocss/extractor-arbitrary-variants@0.57.3:
-    resolution: {integrity: sha512-OmF+2TjJ97i7KOCR8wPgZK/pkp8Rcfo4tzqT/4jBUIi7rfDGZx/eE3aZKFpZSZlUuTH5cdReaKxymXQmJ4dibA==}
+  /@unocss/extractor-arbitrary-variants@0.57.4:
+    resolution: {integrity: sha512-BPvS2ePUrhGMSuEkNMnPcOcTC7SkrRblARwGk00PGGfCRSWhCi6Csz0oHvn2Qm8147hoQzkEwM74+dox8gcsxw==}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/inspector@0.57.2:
-    resolution: {integrity: sha512-W82xj5oOi7fGSGuV+GvgwZVWH0xCthIgqEscZEwtphiIconswwV8zZjrwzt/gMXmvYv8qx9+QDKmlhVQnJJj6w==}
+  /@unocss/inspector@0.57.4:
+    resolution: {integrity: sha512-0GV4g2/jXVf+5YKvm1g/ExQTeU5+Zfl2qhkzJXuUT7IigDrG+dAEuQ2oaTwXHpdtGfxdYWYS8Cbr7rxRsZU/Pg==}
     dependencies:
-      '@unocss/rule-utils': 0.57.2
+      '@unocss/core': 0.57.4
+      '@unocss/rule-utils': 0.57.4
       gzip-size: 6.0.0
       sirv: 2.0.3
     dev: true
 
-  /@unocss/inspector@0.57.3:
-    resolution: {integrity: sha512-Oj5cUbuwx+4/rckW3mfpdKMWzhOOSehXChzuJ7x7tMDDB5ywdHwnDsxtK07Y+5UwKHC322T3I3VtLolOfsdlCA==}
-    dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/rule-utils': 0.57.3
-      gzip-size: 6.0.0
-      sirv: 2.0.3
-    dev: true
-
-  /@unocss/postcss@0.57.2(postcss@8.4.31):
-    resolution: {integrity: sha512-OygjXgHkBPCQ6rc7Zo5vd2KDn4XUikTA1knz67oSiPFZLjUmmhzMc/XtckBITzougMNktv1qH1vECGAbKx+FNA==}
-    engines: {node: '>=14'}
-    peerDependencies:
-      postcss: ^8.4.21
-    dependencies:
-      '@unocss/config': 0.57.2
-      '@unocss/core': 0.57.2
-      '@unocss/rule-utils': 0.57.2
-      css-tree: 2.3.1
-      fast-glob: 3.3.1
-      magic-string: 0.30.5
-      postcss: 8.4.31
-    dev: true
-
-  /@unocss/postcss@0.57.3(postcss@8.4.31):
-    resolution: {integrity: sha512-rYXQ2/iXeF59/g8xbvoyYJ9EClQCBcWj2oeJCt85dykOYyQJCWJT+LoYF0s/kvg7m+x5ovdNQfXtAACLYBqh9g==}
+  /@unocss/postcss@0.57.4(postcss@8.4.31):
+    resolution: {integrity: sha512-ggq8JS4rvgvW2QXjLGwg+m8e4YcmvOtbUS6C7UCrP8pmUqBCpbnTmLi6inpBbBuCN5WokecNZS5f3C4EwNMOMA==}
     engines: {node: '>=14'}
     peerDependencies:
       postcss: ^8.4.21
     dependencies:
-      '@unocss/config': 0.57.3
-      '@unocss/core': 0.57.3
-      '@unocss/rule-utils': 0.57.3
+      '@unocss/config': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/rule-utils': 0.57.4
       css-tree: 2.3.1
       fast-glob: 3.3.2
       magic-string: 0.30.5
       postcss: 8.4.31
     dev: true
 
-  /@unocss/preset-attributify@0.57.2:
-    resolution: {integrity: sha512-OQh/vqR5PbPjOFJLizw4wrvSIrkHKyTTGaFObi0exeREW2XYslTs44Y+uEQc+GTriYDX9A2cKJDKu7vT7VVEIg==}
-    dependencies:
-      '@unocss/core': 0.57.2
-    dev: true
-
-  /@unocss/preset-attributify@0.57.3:
-    resolution: {integrity: sha512-leX9jxM2PnqvZn42thDb2rPdE0nq6WtIr98pvdnkRZKt5gLwtOJCANXH/gVP6tPdRRf6FiZstA8jvAxVGL1sIA==}
+  /@unocss/preset-attributify@0.57.4:
+    resolution: {integrity: sha512-U23qV/f1jXClHZtzzqgZxWEuGZouAzsxXvbjui5WVgD/wrVIcStz6uJE929nNfR+ohV2owu86habxpwi9/0NCA==}
     dependencies:
-      '@unocss/core': 0.57.3
-    dev: true
-
-  /@unocss/preset-icons@0.57.2:
-    resolution: {integrity: sha512-LlKt83+QLVvbeCCOetq20t5iUnFA+8nIL4mc1bscdK0nyVqspkZkcM8F6uqRwHcMitEbReq1K5kS99qzwUieVQ==}
-    dependencies:
-      '@iconify/utils': 2.1.11
-      '@unocss/core': 0.57.2
-      ofetch: 1.3.3
-    transitivePeerDependencies:
-      - supports-color
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/preset-icons@0.57.3:
-    resolution: {integrity: sha512-cG7gaFQzSidHS+nHPV9HEB3aaUVs/PjZywxMl5jwkJIWHuFMU/SQZXMorH6avU2jH8PoYkRZfjLdRWA+h/+fPA==}
+  /@unocss/preset-icons@0.57.4:
+    resolution: {integrity: sha512-c7vKYGAHfWa3eUIUswiQon1a9CXKT68uH4xgJ/EDcnCu+Og8AoA7iM+cesNDsLK4OlD4+qDjSvkGHW8of+u9cQ==}
     dependencies:
       '@iconify/utils': 2.1.11
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
       ofetch: 1.3.3
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@unocss/preset-mini@0.57.2:
-    resolution: {integrity: sha512-ZahZ8TWa40SVnJw6fYFhYzLFMCZU3obMBNl0otallevoooKLXIDZL2VmHxFDqCvwaAk9DYsAzPrqUpNWr6bPgA==}
-    dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/extractor-arbitrary-variants': 0.57.2
-      '@unocss/rule-utils': 0.57.2
-    dev: true
-
-  /@unocss/preset-mini@0.57.3:
-    resolution: {integrity: sha512-2KFxbbxRqhc+0fyWNYSiRGGr+3jp4jEQIRnjT8sv5uAMo1OaUmUTwz2qzYhSc3sCM8ZEofblZY2BOcqJwZ5yxA==}
+  /@unocss/preset-mini@0.57.4:
+    resolution: {integrity: sha512-1wjiMIPq7yHO4vYAhNtwmYIUiXiZd5jHLbclX8aW7oKDKrKLm1UqezMLi+tuQqwDZGhoFJ6L6sYxONH5YxnRvA==}
     dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/extractor-arbitrary-variants': 0.57.3
-      '@unocss/rule-utils': 0.57.3
+      '@unocss/core': 0.57.4
+      '@unocss/extractor-arbitrary-variants': 0.57.4
+      '@unocss/rule-utils': 0.57.4
     dev: true
 
-  /@unocss/preset-tagify@0.57.2:
-    resolution: {integrity: sha512-ISebsMHcbUoZG9CoUBA1qDxAGVZ4izXLtQwWde6tb50xIrVSHt1bbfNSgZ/c2RJR1c3fBjn0dzfXVzOHDnFejA==}
+  /@unocss/preset-tagify@0.57.4:
+    resolution: {integrity: sha512-qNcEwbbjNi6XifxbCI8AUUee2PF2FmgERKDZkUwxH42CA9ODnN3Lu+nvVXF5B623cImnUDtwa+8kuCAhRIQs8g==}
     dependencies:
-      '@unocss/core': 0.57.2
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/preset-tagify@0.57.3:
-    resolution: {integrity: sha512-GXs5Hu6XtHcIRLexPghHkfb6ekSodh4Xs8895xrvP5H7Tm/+wEIHALXkW762Rujl1Rtq+xzxAeCoeFxW+y9eLw==}
+  /@unocss/preset-typography@0.57.4:
+    resolution: {integrity: sha512-kBSPI5gm1562X5DtALcst8F6S1OyN2olhYmhtCNZ7TQXVhPgUS1d7dYVxtPO6/2lqNJLimXnIagdEH8ZjcUeyw==}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
+      '@unocss/preset-mini': 0.57.4
     dev: true
 
-  /@unocss/preset-typography@0.57.2:
-    resolution: {integrity: sha512-THCHKzt1Jc8rdt8Ft1DhKxm191QvtiW3+mfkbYvGUUOklIztVspNTSs6iS0Vr6EZWjhLzmUYevq8va+Zk4P91A==}
+  /@unocss/preset-uno@0.57.4:
+    resolution: {integrity: sha512-4pI4wxiPnDoo4KjU9deTmomNe4egJQTIrLWlpGStKb+d5ZS6S+zoRyR+XcSB8pKwa0Z1ZBA46OXAgMjtEVhVqw==}
     dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/preset-mini': 0.57.2
-    dev: true
-
-  /@unocss/preset-typography@0.57.3:
-    resolution: {integrity: sha512-C/pIfRY56wxBuV4bTIeZMZYMmYc0gD8DU+sJSPWiZJP1JHiLc3FzSnc51BYcT/Dqdx0fDWhJyP2qqo9000VFKQ==}
-    dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/preset-mini': 0.57.3
-    dev: true
-
-  /@unocss/preset-uno@0.57.2:
-    resolution: {integrity: sha512-A5fZmz8i1fSwKMUN8olRAUskkTAPjFsdw19Iem5yOHtK/9NYM3eQPaHDdHldhfZ7/51oF27poavdPfe8KKugQQ==}
-    dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/preset-mini': 0.57.2
-      '@unocss/preset-wind': 0.57.2
-      '@unocss/rule-utils': 0.57.2
-    dev: true
-
-  /@unocss/preset-uno@0.57.3:
-    resolution: {integrity: sha512-dLZrFc6GrE5J0zAZMFXk/c4WKq7fmU0jCgHvbDXLGdKdJ7zpByslhc2YTPqkLW40F6+73SCN7DlARInSh2fa4g==}
-    dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/preset-mini': 0.57.3
-      '@unocss/preset-wind': 0.57.3
-      '@unocss/rule-utils': 0.57.3
-    dev: true
-
-  /@unocss/preset-web-fonts@0.57.2:
-    resolution: {integrity: sha512-Ymy1N/X7lRzsb551V/SE6EtVdWmBNjW9dFz8viuHuchgjBrq9wF6IBhCG+nrBoUqlz0Jj5piGd/M/OHHQ0Qseg==}
-    dependencies:
-      '@unocss/core': 0.57.2
-      ofetch: 1.3.3
+      '@unocss/core': 0.57.4
+      '@unocss/preset-mini': 0.57.4
+      '@unocss/preset-wind': 0.57.4
+      '@unocss/rule-utils': 0.57.4
     dev: true
 
-  /@unocss/preset-web-fonts@0.57.3:
-    resolution: {integrity: sha512-W/voQjgo98oj/D/oGrhL4xAS0XsR6fF9yULu3xf4nWrUkdkZq/64/rOM5uLBgUFSmkulW524Dsjd1INYmPzz8w==}
+  /@unocss/preset-web-fonts@0.57.4:
+    resolution: {integrity: sha512-cKEHr8xMdJJqJhgMrBLXb6KhtPNfmlaqR+uG1wfWMOh5qKvOawb21S6wYVu/MGgXfKin/iLyelnZIq0Q8y+b6g==}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
       ofetch: 1.3.3
     dev: true
 
-  /@unocss/preset-wind@0.57.2:
-    resolution: {integrity: sha512-d8s4PFcIakzcmAoECTY3Ft2Wtb5nn+AvVGj5j52YpVt5ShTuGVlk5UbF9kpfEfzLigtkHcNivM24D1UTfR/MBg==}
+  /@unocss/preset-wind@0.57.4:
+    resolution: {integrity: sha512-6jl+niNZtSFZmxvC0/27CvIJCLex9wjOQJy/x3vtYN1wcyKPZK90t+kx8Fxh2YN9ormiESCPeniv39PHgKpbJA==}
     dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/preset-mini': 0.57.2
-      '@unocss/rule-utils': 0.57.2
+      '@unocss/core': 0.57.4
+      '@unocss/preset-mini': 0.57.4
+      '@unocss/rule-utils': 0.57.4
     dev: true
 
-  /@unocss/preset-wind@0.57.3:
-    resolution: {integrity: sha512-LymBZtNK86qEpLpbH5eOAiHNFvkIAjfL+Jlok5xI/yO/GCqjnTiw1QAxu2vxLUnQlqlvu7IykOx+Hk1nNvkSaA==}
-    dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/preset-mini': 0.57.3
-      '@unocss/rule-utils': 0.57.3
-    dev: true
-
-  /@unocss/reset@0.57.2:
-    resolution: {integrity: sha512-e9N5R9ZqbBhePa5ehK63LhU57nlgP3MSG4zblXv61SzBm1xIoTuhj7HX3OVJaMeDsrgazRlndSYNhSfD/ziPxg==}
-    dev: true
-
-  /@unocss/reset@0.57.3:
-    resolution: {integrity: sha512-E6Q8jucQlVLOM+d+F5DKGi/8GVc8KDwAQnbcpbrGL/1iix4IM3emRkPmujgTLWS+HIRRcWcEvT6sNwnd9r6H2A==}
-    dev: true
-
-  /@unocss/rule-utils@0.57.2:
-    resolution: {integrity: sha512-fgAc5gkZo8JLDe9vMisofSck3k1nN05+kblKhrEaq/+gS5bxHzL9VNExtiTbT00wyMKGjak/uC7qDMbdVmUhYg==}
-    engines: {node: '>=14'}
-    dependencies:
-      '@unocss/core': 0.57.2
-      magic-string: 0.30.5
+  /@unocss/reset@0.57.4:
+    resolution: {integrity: sha512-4i2d5SrERGDJmN18CY5pgkPqZ3PMvAoDHe7MSF1Eqtv4YW6CsxohrTmAJtS3B/2xw68ngtnbf0EFMbwyUwW+ug==}
     dev: true
 
-  /@unocss/rule-utils@0.57.3:
-    resolution: {integrity: sha512-koWXeRJHFt/SJdb3m7s/2+NrBCcUtl67SX7rSHJc99Z+dwZgIsPUfdfRKM4mZD43MayybvDrd1Wue2LNQg5R/g==}
+  /@unocss/rule-utils@0.57.4:
+    resolution: {integrity: sha512-fwwlIkLZpVDstyvRFzObQkJT7kGUHr2o5AVD1X9io7GgN5UJzSQk0FHfnrN0M1QYUyqzFQJDd+s/pq6fTae+tA==}
     engines: {node: '>=14'}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
       magic-string: 0.30.5
     dev: true
 
-  /@unocss/scope@0.57.2:
-    resolution: {integrity: sha512-UPDCOSvkCDCvQXCAlpRDXLQDYnAYFjGerXtjHigaB+uzJ7Ds4p1yZxcOu6ds6jhcr2kt3Y56Lp3nTqf7tncM0g==}
+  /@unocss/scope@0.57.4:
+    resolution: {integrity: sha512-LGmRp/KQYgRSWQ5oYykD5FewUELc43IfFQx0H6aJmNtlqzm6q0VmRqMhR/2TPNp3o+pD6eYUrQ4WqbSsZoMRJA==}
     dev: true
 
-  /@unocss/scope@0.57.3:
-    resolution: {integrity: sha512-hL0Gjd5getA6ziiOvu1M2Jw5e+FnD9rzu+t+4SnxWcpP+bZtu+LBrt5FeqrizwUHfE/723iuEvg16W5hjhGLQA==}
-    dev: true
-
-  /@unocss/transformer-attributify-jsx-babel@0.57.2:
-    resolution: {integrity: sha512-SKx4B0oIv1+F2lzmUyxbMlJ6xqoycPQUazaI1XD29pqkRaqEFYE5RBEZwUwLhLp0ksSyIy2lTtzZYBWQHUs5mw==}
-    dependencies:
-      '@unocss/core': 0.57.2
-    dev: true
-
-  /@unocss/transformer-attributify-jsx-babel@0.57.3:
-    resolution: {integrity: sha512-b5esljHAz274tv0sXe8GmHew7FXzwkRQrod6NdR9pyFlPQ9gn7gxi0MIsvIV0U8PdSz3HOHOuT0tU/zphjaJDA==}
+  /@unocss/transformer-attributify-jsx-babel@0.57.4:
+    resolution: {integrity: sha512-SNM2f8C/H5HRPgdg9qAKN4nB8mTyhFt6qrTmoi8WgM6EKooz9XugIjCIQaMSzkDduML5ObqjlBbDIWRuCHOOUw==}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.57.2:
-    resolution: {integrity: sha512-6KFOp5ldBoWEA0DPAw+uh7FUglyqBU60IeRmyLASLbaz9BPT7ut1rAP7LyIXW78NIi+biwzxQq9FQSbDEFQ4QQ==}
+  /@unocss/transformer-attributify-jsx@0.57.4:
+    resolution: {integrity: sha512-Y7dvkAsveEFicgfmSQDc0AFNk6NeuuipgAYxJNS0xWH362V0+uELgxTZzicSznCj8kF7bkHUfyCKmR2J2gPcSg==}
     dependencies:
-      '@unocss/core': 0.57.2
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/transformer-attributify-jsx@0.57.3:
-    resolution: {integrity: sha512-OgejFNN7AcCgudh/HGe2BS00TbRv7Bi+siWeUS7AEGEG+p7cQZn92XljCFZGqIyvgfVWypb6/xve9H4oY3/E+w==}
+  /@unocss/transformer-compile-class@0.57.4:
+    resolution: {integrity: sha512-7zwVnah1Pgrrf0ipHot2hRyJZqZKyf75FbGNFtUaXaahwt3h6uncwRYN0BDEu2tuoDBp9fF1CpZggmJcg8vDzw==}
     dependencies:
-      '@unocss/core': 0.57.3
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/transformer-compile-class@0.57.2:
-    resolution: {integrity: sha512-le2H/kYSMobRSo9XzBv6E6jorrCpxdCS7N3hQ+GpRocJasriebffDgRG/m9hVRJvsTgjpYTxbNZkm0KUjGXsmw==}
+  /@unocss/transformer-directives@0.57.4:
+    resolution: {integrity: sha512-AbmSmO5zDnup0tJYB4mlJBIXPuCruW/g3GVLHG6ztT/I6TanB9V5u5jNeIB+AAaF1TeoM7xPw97WhJmFeSIhRA==}
     dependencies:
-      '@unocss/core': 0.57.2
-    dev: true
-
-  /@unocss/transformer-compile-class@0.57.3:
-    resolution: {integrity: sha512-DqmRTQujqAdk4uSrqy+t9xSVmKM9E3yW9PCwDxI1evva0/qTFexzjoR42glq8x7LSn0ZmFyflXcQoeXmwjsBrg==}
-    dependencies:
-      '@unocss/core': 0.57.3
-    dev: true
-
-  /@unocss/transformer-directives@0.57.2:
-    resolution: {integrity: sha512-7pQROj/GPsqMig+t7ntzKi4rY/lvSrE/A0PiBJsFJt328PAa+wnzgCDWkL/FNnhhbXi4BIYSq0V2v+YACwPBVQ==}
-    dependencies:
-      '@unocss/core': 0.57.2
-      '@unocss/rule-utils': 0.57.2
-      css-tree: 2.3.1
-    dev: true
-
-  /@unocss/transformer-directives@0.57.3:
-    resolution: {integrity: sha512-GXedqnb0PB+XkjdfNEInuLxxLjPbaCQLCUhSvTcw67+kalGgX2Mn/hYwpSHmDMLe+Uld5n0vcJRu2a8chBdAwA==}
-    dependencies:
-      '@unocss/core': 0.57.3
-      '@unocss/rule-utils': 0.57.3
+      '@unocss/core': 0.57.4
+      '@unocss/rule-utils': 0.57.4
       css-tree: 2.3.1
     dev: true
 
-  /@unocss/transformer-variant-group@0.57.2:
-    resolution: {integrity: sha512-Xik8auIUfVr5xQ6M/CggnrIu5wD9h1tqdbxy5ci9+RQvtmUfrh9m09MfRXxHZWTRQOruGjV63U6rfVzo9X74eA==}
+  /@unocss/transformer-variant-group@0.57.4:
+    resolution: {integrity: sha512-+KbSqEDCK2lziGJ8wnY4FhYxCSpONaxoKp/B0iTxc8sJ6tTfq2/GoRwnMy3miQTepjOBb6xfRY7ocF1BCjnpnQ==}
     dependencies:
-      '@unocss/core': 0.57.2
+      '@unocss/core': 0.57.4
     dev: true
 
-  /@unocss/transformer-variant-group@0.57.3:
-    resolution: {integrity: sha512-PpKtnwyb4ncjDhsTm/PtiL0RUdmaee+07W0AzSEz29IFFwyrueIP6WHmD6agKmgDPoaw5Ywebt6DdkSbnfYHzw==}
-    dependencies:
-      '@unocss/core': 0.57.3
-    dev: true
-
-  /@unocss/vite@0.57.2(vite@4.5.0):
-    resolution: {integrity: sha512-PoyqYsgTSzRE7umfp5Qpdt29ZmYD24M4WIQhATIDkJQm26f/KME6SMcQO1ybLWgkJgrHoenO9QJo+/W8tId/uA==}
+  /@unocss/vite@0.57.4(vite@4.5.0):
+    resolution: {integrity: sha512-bVMftC1hzdlfRQOfllDuJ+bd5Z0/TOvPthNk8LyoHsnjAEH7FqspdCyPM3nQpnfqfYRocXiuLJv+KdQ2DLQWOQ==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
-      '@unocss/config': 0.57.2
-      '@unocss/core': 0.57.2
-      '@unocss/inspector': 0.57.2
-      '@unocss/scope': 0.57.2
-      '@unocss/transformer-directives': 0.57.2
+      '@unocss/config': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/inspector': 0.57.4
+      '@unocss/scope': 0.57.4
+      '@unocss/transformer-directives': 0.57.4
       chokidar: 3.5.3
-      fast-glob: 3.3.1
+      fast-glob: 3.3.2
       magic-string: 0.30.5
       vite: 4.5.0
     transitivePeerDependencies:
       - rollup
     dev: true
 
-  /@unocss/vite@0.57.3(vite@4.5.0):
-    resolution: {integrity: sha512-SX2wtxRFLka0CgMwqokKuhaBUptj8vcpmLObVRRgV+7dSdx6GMbZcjZfQfibMKhJY3d5iSAylcfyW2JqTX2F+g==}
+  /@unocss/vite@0.57.4(vite@5.0.0):
+    resolution: {integrity: sha512-bVMftC1hzdlfRQOfllDuJ+bd5Z0/TOvPthNk8LyoHsnjAEH7FqspdCyPM3nQpnfqfYRocXiuLJv+KdQ2DLQWOQ==}
     peerDependencies:
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     dependencies:
       '@ampproject/remapping': 2.2.1
       '@rollup/pluginutils': 5.0.5(rollup@3.29.4)
-      '@unocss/config': 0.57.3
-      '@unocss/core': 0.57.3
-      '@unocss/inspector': 0.57.3
-      '@unocss/scope': 0.57.3
-      '@unocss/transformer-directives': 0.57.3
+      '@unocss/config': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/inspector': 0.57.4
+      '@unocss/scope': 0.57.4
+      '@unocss/transformer-directives': 0.57.4
       chokidar: 3.5.3
       fast-glob: 3.3.2
       magic-string: 0.30.5
-      vite: 4.5.0
+      vite: 5.0.0
     transitivePeerDependencies:
       - rollup
     dev: true
@@ -3191,36 +3142,25 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue@4.3.1(vite@4.5.0)(vue@3.3.8):
-    resolution: {integrity: sha512-tUBEtWcF7wFtII7ayNiLNDTCE1X1afySEo+XNVMNkFXaThENyCowIEX095QqbJZGTgoOcSVDJGlnde2NG4jtbQ==}
+  /@vitejs/plugin-vue@4.5.0(vite@4.5.0)(vue@3.3.7):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 4.5.0
-      vue: 3.3.8(typescript@5.2.2)
-    dev: true
-
-  /@vitejs/plugin-vue@4.4.1(vite@4.5.0)(vue@3.3.7):
-    resolution: {integrity: sha512-HCQG8VDFDM7YDAdcj5QI5DvUi+r6xvo9LgvYdk7LSkUNwdpempdB5horkMSZsbdey9Ywsf5aaU8kEPw9M5kREA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
       vite: 4.5.0
       vue: 3.3.7(typescript@5.2.2)
     dev: true
 
-  /@vitejs/plugin-vue@4.4.1(vite@4.5.0)(vue@3.3.8):
-    resolution: {integrity: sha512-HCQG8VDFDM7YDAdcj5QI5DvUi+r6xvo9LgvYdk7LSkUNwdpempdB5horkMSZsbdey9Ywsf5aaU8kEPw9M5kREA==}
+  /@vitejs/plugin-vue@4.5.0(vite@5.0.0)(vue@3.3.8):
+    resolution: {integrity: sha512-a2WSpP8X8HTEww/U00bU4mX1QpLINNuz/2KMNpLsdu3BzOpak3AGI1CJYBTXcc4SPhaD0eNRUp7IyQK405L5dQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
-      vite: ^4.0.0
+      vite: ^4.0.0 || ^5.0.0
       vue: ^3.2.25
     dependencies:
-      vite: 4.5.0
+      vite: 5.0.0
       vue: 3.3.8(typescript@5.2.2)
     dev: true
 
@@ -3551,8 +3491,8 @@ packages:
       - '@vue/composition-api'
       - vue
 
-  /@vueuse/integrations@10.5.0(focus-trap@7.5.4)(vue@3.3.8):
-    resolution: {integrity: sha512-fm5sXLCK0Ww3rRnzqnCQRmfjDURaI4xMsx+T+cec0ngQqHx/JgUtm8G0vRjwtonIeTBsH1Q8L3SucE+7K7upJQ==}
+  /@vueuse/integrations@10.6.1(focus-trap@7.5.4)(vue@3.3.8):
+    resolution: {integrity: sha512-mPDupuofMJ4DPmtX/FfP1MajmWRzYDv8WSaTCo8LQ5kFznjWgmUQ16ApjYqgMquqffNY6+IRMdMgosLDRZOSZA==}
     peerDependencies:
       async-validator: '*'
       axios: '*'
@@ -3592,8 +3532,8 @@ packages:
       universal-cookie:
         optional: true
     dependencies:
-      '@vueuse/core': 10.5.0(vue@3.3.8)
-      '@vueuse/shared': 10.5.0(vue@3.3.8)
+      '@vueuse/core': 10.6.1(vue@3.3.8)
+      '@vueuse/shared': 10.6.1(vue@3.3.8)
       focus-trap: 7.5.4
       vue-demi: 0.14.6(vue@3.3.8)
     transitivePeerDependencies:
@@ -5675,7 +5615,7 @@ packages:
       glob-parent: 6.0.2
       globals: 13.23.0
       graphemer: 1.4.0
-      ignore: 5.2.4
+      ignore: 5.3.0
       imurmurhash: 0.1.4
       is-glob: 4.0.3
       is-path-inside: 3.0.3
@@ -6290,6 +6230,20 @@ packages:
       unicorn-magic: 0.1.0
     dev: true
 
+  /glsl-token-functions@1.0.1:
+    resolution: {integrity: sha512-EigGhp1g+aUVeUNY7H1o5tL/bnwIB3/FcRREPr2E7Du+/UDXN24hDkaZ3e4aWHDjHr9lJ6YHXMISkwhUYg9UOg==}
+    dev: false
+
+  /glsl-token-string@1.0.1:
+    resolution: {integrity: sha512-1mtQ47Uxd47wrovl+T6RshKGkRRCYWhnELmkEcUAPALWGTFe2XZpH3r45XAwL2B6v+l0KNsCnoaZCSnhzKEksg==}
+    dev: false
+
+  /glsl-tokenizer@2.1.5:
+    resolution: {integrity: sha512-XSZEJ/i4dmz3Pmbnpsy3cKh7cotvFlBiZnDOwnj/05EwNp2XrhQ4XKJxT7/pDt4kp4YcpRSKz8eTV7S+mwV6MA==}
+    dependencies:
+      through2: 0.6.5
+    dev: false
+
   /gopd@1.0.1:
     resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==}
     dependencies:
@@ -6591,6 +6545,11 @@ packages:
     resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
     engines: {node: '>= 4'}
 
+  /ignore@5.3.0:
+    resolution: {integrity: sha512-g7dmpshy+gD7mh88OC9NwSGTKoc3kyLAZQRU1mt53Aw/vnvfXnbC+F/7F7QoYVKbV+KNvJx8wArewKy1vXMtlg==}
+    engines: {node: '>= 4'}
+    dev: true
+
   /image-meta@0.1.1:
     resolution: {integrity: sha512-+oXiHwOEPr1IE5zY0tcBLED/CYcre15J4nwL50x3o0jxWqEkyjrusiKP3YSU+tr9fvJp33ZcP5Gpj2295g3aEw==}
     engines: {node: '>=10.18.0'}
@@ -7004,6 +6963,10 @@ packages:
       is-docker: 2.2.1
     dev: true
 
+  /isarray@0.0.1:
+    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
+    dev: false
+
   /isarray@1.0.0:
     resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}
 
@@ -7739,6 +7702,12 @@ packages:
     resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
+    dev: true
+
+  /nanoid@3.3.7:
+    resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
+    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
+    hasBin: true
 
   /nanoid@4.0.2:
     resolution: {integrity: sha512-7ZtY5KTCNheRGfEFxnedV5zFiORN1+Y1N6zvPTnHQd8ENUvfaDBeuJDZb2bN/oXwXxu3qkTXDzy57W5vAmDTBw==}
@@ -8207,6 +8176,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /object-inspect@1.13.1:
     resolution: {integrity: sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==}
     dev: true
@@ -8976,7 +8950,7 @@ packages:
     resolution: {integrity: sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==}
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
-      nanoid: 3.3.6
+      nanoid: 3.3.7
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
@@ -9212,6 +9186,15 @@ packages:
       type-fest: 4.7.1
     dev: true
 
+  /readable-stream@1.0.34:
+    resolution: {integrity: sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==}
+    dependencies:
+      core-util-is: 1.0.3
+      inherits: 2.0.4
+      isarray: 0.0.1
+      string_decoder: 0.10.31
+    dev: false
+
   /readable-stream@2.3.8:
     resolution: {integrity: sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==}
     dependencies:
@@ -9447,6 +9430,26 @@ packages:
     optionalDependencies:
       fsevents: 2.3.3
 
+  /rollup@4.4.1:
+    resolution: {integrity: sha512-idZzrUpWSblPJX66i+GzrpjKE3vbYrlWirUHteoAbjKReZwa0cohAErOYA5efoMmNCdvG9yrJS+w9Kl6csaH4w==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.4.1
+      '@rollup/rollup-android-arm64': 4.4.1
+      '@rollup/rollup-darwin-arm64': 4.4.1
+      '@rollup/rollup-darwin-x64': 4.4.1
+      '@rollup/rollup-linux-arm-gnueabihf': 4.4.1
+      '@rollup/rollup-linux-arm64-gnu': 4.4.1
+      '@rollup/rollup-linux-arm64-musl': 4.4.1
+      '@rollup/rollup-linux-x64-gnu': 4.4.1
+      '@rollup/rollup-linux-x64-musl': 4.4.1
+      '@rollup/rollup-win32-arm64-msvc': 4.4.1
+      '@rollup/rollup-win32-ia32-msvc': 4.4.1
+      '@rollup/rollup-win32-x64-msvc': 4.4.1
+      fsevents: 2.3.3
+    dev: true
+
   /run-applescript@5.0.0:
     resolution: {integrity: sha512-XcT5rBksx1QdIhlFOCtgZkB99ZEouFZ1E2Kc2LHqNW13U3/74YGdkQRmThTwxy4QIyookibDKYZOPqX//6BlAg==}
     engines: {node: '>=12'}
@@ -9502,8 +9505,8 @@ packages:
   /scule@1.0.0:
     resolution: {integrity: sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==}
 
-  /search-insights@2.10.0:
-    resolution: {integrity: sha512-pQGrOE56QuTRmq4NzliRZe9rv914hBMBjOviuDliDHoIhmBGoyZRlFsPd4RprGGNC4PKdD2Jz54YN4Cmkb44mA==}
+  /search-insights@2.11.0:
+    resolution: {integrity: sha512-Uin2J8Bpm3xaZi9Y8QibSys6uJOFZ+REMrf42v20AA3FUDUrshKkMEP6liJbMAHCm71wO6ls4mwAf7a3gFVxLw==}
     dev: true
 
   /semver-diff@4.0.0:
@@ -9808,6 +9811,10 @@ packages:
     resolution: {integrity: sha512-XimMxvwnf1Qf5KwebhcoA34kcX+fWEkIl0QjNkCbu4IpoyDMMsOajExn7FIq5w569k45+LhmsuRlGSrsvmGdNw==}
     dev: false
 
+  /stats-gl@1.0.7:
+    resolution: {integrity: sha512-vZI82CjefSxLC1bjw36z28v0+QE9rJKymGlXtfWu+ipW70ZEAwa4EbO4LxluAfLfpqiaAS04NzpYBRLDeAwYWQ==}
+    dev: false
+
   /stats.js@0.17.0:
     resolution: {integrity: sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==}
     dev: false
@@ -9898,6 +9905,10 @@ packages:
       es-abstract: 1.22.3
     dev: true
 
+  /string_decoder@0.10.31:
+    resolution: {integrity: sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==}
+    dev: false
+
   /string_decoder@1.1.1:
     resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
     dependencies:
@@ -10063,6 +10074,25 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /three-custom-shader-material@5.4.0(three@0.158.0):
+    resolution: {integrity: sha512-Yn1lFlKOk3Vul3npEGAmbbFUZ5S2+yjPgM2XqJEZEYRSUUH2vk+WVYrtTB6Bcq15wa7hLUXAKoctAvbRmBmbYA==}
+    peerDependencies:
+      '@react-three/fiber': '>=8.0'
+      react: '>=18.0'
+      three: '>=0.154'
+    peerDependenciesMeta:
+      '@react-three/fiber':
+        optional: true
+      react:
+        optional: true
+    dependencies:
+      glsl-token-functions: 1.0.1
+      glsl-token-string: 1.0.1
+      glsl-tokenizer: 2.1.5
+      object-hash: 3.0.0
+      three: 0.158.0
+    dev: false
+
   /three-stdlib@2.28.5(three@0.158.0):
     resolution: {integrity: sha512-JdLMhkpT+1ZWeQPyKQNW1zqUwISI2hsUljS6u3vB9lp5EvwsayaAzGnbVeR35895udOF+zxcTiQY3psk+qqlxg==}
     peerDependencies:
@@ -10080,6 +10110,13 @@ packages:
   /three@0.158.0:
     resolution: {integrity: sha512-TALj4EOpdDPF1henk2Q+s17K61uEAAWQ7TJB68nr7FKxqwyDr3msOt5IWdbGm4TaWKjrtWS8DJJWe9JnvsWOhQ==}
 
+  /through2@0.6.5:
+    resolution: {integrity: sha512-RkK/CCESdTKQZHdmKICijdKKsCRVHs5KsLZ6pACAmF/1GPUQhonHSXWNERctxEp7RmvjdNbZTL5z9V7nSCXKcg==}
+    dependencies:
+      readable-stream: 1.0.34
+      xtend: 4.0.2
+    dev: false
+
   /through@2.3.8:
     resolution: {integrity: sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==}
     dev: true
@@ -10405,11 +10442,11 @@ packages:
     engines: {node: '>= 10.0.0'}
     dev: true
 
-  /unocss@0.57.2(postcss@8.4.31)(vite@4.5.0):
-    resolution: {integrity: sha512-Wmh/a+iXSaDnf6KCf0JtzZ9AoY//fxXLadiXvuTuM4aGEcItHzgt0IeZPs4+ab60usebQBsDyWV5Yr/lgiQ4bQ==}
+  /unocss@0.57.4(postcss@8.4.31)(vite@4.5.0):
+    resolution: {integrity: sha512-rf5eiCVb8957rqzCyRxLzljeYguVMS70X322/Z1sYhosKhh8SBBMsC/TrZEf5o8LTn/MbFN9fVizEtbUKaFjUg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.57.2
+      '@unocss/webpack': 0.57.4
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       '@unocss/webpack':
@@ -10417,26 +10454,26 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.57.2(vite@4.5.0)
-      '@unocss/cli': 0.57.2
-      '@unocss/core': 0.57.2
-      '@unocss/extractor-arbitrary-variants': 0.57.2
-      '@unocss/postcss': 0.57.2(postcss@8.4.31)
-      '@unocss/preset-attributify': 0.57.2
-      '@unocss/preset-icons': 0.57.2
-      '@unocss/preset-mini': 0.57.2
-      '@unocss/preset-tagify': 0.57.2
-      '@unocss/preset-typography': 0.57.2
-      '@unocss/preset-uno': 0.57.2
-      '@unocss/preset-web-fonts': 0.57.2
-      '@unocss/preset-wind': 0.57.2
-      '@unocss/reset': 0.57.2
-      '@unocss/transformer-attributify-jsx': 0.57.2
-      '@unocss/transformer-attributify-jsx-babel': 0.57.2
-      '@unocss/transformer-compile-class': 0.57.2
-      '@unocss/transformer-directives': 0.57.2
-      '@unocss/transformer-variant-group': 0.57.2
-      '@unocss/vite': 0.57.2(vite@4.5.0)
+      '@unocss/astro': 0.57.4(vite@4.5.0)
+      '@unocss/cli': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/extractor-arbitrary-variants': 0.57.4
+      '@unocss/postcss': 0.57.4(postcss@8.4.31)
+      '@unocss/preset-attributify': 0.57.4
+      '@unocss/preset-icons': 0.57.4
+      '@unocss/preset-mini': 0.57.4
+      '@unocss/preset-tagify': 0.57.4
+      '@unocss/preset-typography': 0.57.4
+      '@unocss/preset-uno': 0.57.4
+      '@unocss/preset-web-fonts': 0.57.4
+      '@unocss/preset-wind': 0.57.4
+      '@unocss/reset': 0.57.4
+      '@unocss/transformer-attributify-jsx': 0.57.4
+      '@unocss/transformer-attributify-jsx-babel': 0.57.4
+      '@unocss/transformer-compile-class': 0.57.4
+      '@unocss/transformer-directives': 0.57.4
+      '@unocss/transformer-variant-group': 0.57.4
+      '@unocss/vite': 0.57.4(vite@4.5.0)
       vite: 4.5.0
     transitivePeerDependencies:
       - postcss
@@ -10444,11 +10481,11 @@ packages:
       - supports-color
     dev: true
 
-  /unocss@0.57.3(postcss@8.4.31)(vite@4.5.0):
-    resolution: {integrity: sha512-reIvKa1sG9bwRZ6oGwj8p2XZSmT5On/NEisqkxsk1vTV5ZHIagbilG3aNMb5vNcI7MhRb4dy0Z4cvyNGd3194Q==}
+  /unocss@0.57.4(postcss@8.4.31)(vite@5.0.0):
+    resolution: {integrity: sha512-rf5eiCVb8957rqzCyRxLzljeYguVMS70X322/Z1sYhosKhh8SBBMsC/TrZEf5o8LTn/MbFN9fVizEtbUKaFjUg==}
     engines: {node: '>=14'}
     peerDependencies:
-      '@unocss/webpack': 0.57.3
+      '@unocss/webpack': 0.57.4
       vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0
     peerDependenciesMeta:
       '@unocss/webpack':
@@ -10456,27 +10493,27 @@ packages:
       vite:
         optional: true
     dependencies:
-      '@unocss/astro': 0.57.3(vite@4.5.0)
-      '@unocss/cli': 0.57.3
-      '@unocss/core': 0.57.3
-      '@unocss/extractor-arbitrary-variants': 0.57.3
-      '@unocss/postcss': 0.57.3(postcss@8.4.31)
-      '@unocss/preset-attributify': 0.57.3
-      '@unocss/preset-icons': 0.57.3
-      '@unocss/preset-mini': 0.57.3
-      '@unocss/preset-tagify': 0.57.3
-      '@unocss/preset-typography': 0.57.3
-      '@unocss/preset-uno': 0.57.3
-      '@unocss/preset-web-fonts': 0.57.3
-      '@unocss/preset-wind': 0.57.3
-      '@unocss/reset': 0.57.3
-      '@unocss/transformer-attributify-jsx': 0.57.3
-      '@unocss/transformer-attributify-jsx-babel': 0.57.3
-      '@unocss/transformer-compile-class': 0.57.3
-      '@unocss/transformer-directives': 0.57.3
-      '@unocss/transformer-variant-group': 0.57.3
-      '@unocss/vite': 0.57.3(vite@4.5.0)
-      vite: 4.5.0
+      '@unocss/astro': 0.57.4(vite@5.0.0)
+      '@unocss/cli': 0.57.4
+      '@unocss/core': 0.57.4
+      '@unocss/extractor-arbitrary-variants': 0.57.4
+      '@unocss/postcss': 0.57.4(postcss@8.4.31)
+      '@unocss/preset-attributify': 0.57.4
+      '@unocss/preset-icons': 0.57.4
+      '@unocss/preset-mini': 0.57.4
+      '@unocss/preset-tagify': 0.57.4
+      '@unocss/preset-typography': 0.57.4
+      '@unocss/preset-uno': 0.57.4
+      '@unocss/preset-web-fonts': 0.57.4
+      '@unocss/preset-wind': 0.57.4
+      '@unocss/reset': 0.57.4
+      '@unocss/transformer-attributify-jsx': 0.57.4
+      '@unocss/transformer-attributify-jsx-babel': 0.57.4
+      '@unocss/transformer-compile-class': 0.57.4
+      '@unocss/transformer-directives': 0.57.4
+      '@unocss/transformer-variant-group': 0.57.4
+      '@unocss/vite': 0.57.4(vite@5.0.0)
+      vite: 5.0.0
     transitivePeerDependencies:
       - postcss
       - rollup
@@ -10802,7 +10839,7 @@ packages:
       vue-tsc: 1.8.22(typescript@5.2.2)
     dev: true
 
-  /vite-plugin-dts@3.6.3(typescript@5.2.2)(vite@4.5.0):
+  /vite-plugin-dts@3.6.3(typescript@5.2.2)(vite@5.0.0):
     resolution: {integrity: sha512-NyRvgobl15rYj65coi/gH7UAEH+CpSjh539DbGb40DfOTZSvDLNYTzc8CK4460W+LqXuMK7+U3JAxRB3ksrNPw==}
     engines: {node: ^14.18.0 || >=16.0.0}
     peerDependencies:
@@ -10818,7 +10855,7 @@ packages:
       debug: 4.3.4
       kolorist: 1.8.0
       typescript: 5.2.2
-      vite: 4.5.0
+      vite: 5.0.0
       vue-tsc: 1.8.22(typescript@5.2.2)
     transitivePeerDependencies:
       - '@types/node'
@@ -10922,8 +10959,43 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /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):
-    resolution: {integrity: sha512-1dqWiHNThNrVZ08ixmfEDBEH+764KOgnev9oXga/x6cN++Vb9pnuu8p3K6DQP+KZrYcG+WiX7jxal0iSNpAWuQ==}
+  /vite@5.0.0:
+    resolution: {integrity: sha512-ESJVM59mdyGpsiNAeHQOR/0fqNoOyWPYesFto8FFZugfmhdHx8Fzd8sF3Q/xkVhZsyOxHfdM7ieiVAorI9RjFw==}
+    engines: {node: ^18.0.0 || >=20.0.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^18.0.0 || >=20.0.0
+      less: '*'
+      lightningcss: ^1.21.0
+      sass: '*'
+      stylus: '*'
+      sugarss: '*'
+      terser: ^5.4.0
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+    dependencies:
+      esbuild: 0.19.5
+      postcss: 8.4.31
+      rollup: 4.4.1
+    optionalDependencies:
+      fsevents: 2.3.3
+    dev: true
+
+  /vitepress@1.0.0-rc.26(@algolia/client-search@4.20.0)(postcss@8.4.31)(search-insights@2.11.0)(typescript@5.2.2):
+    resolution: {integrity: sha512-bAeph87NheD7bM/+E1AsJx8N6bGnP+5k0gZmtXbSgKAzNSFZBgAPcl7CoWzETST5pPpH/ZGRPhWSefcBX9Yfjg==}
     hasBin: true
     peerDependencies:
       markdown-it-mathjax3: ^4.3.2
@@ -10935,18 +11007,18 @@ packages:
         optional: true
     dependencies:
       '@docsearch/css': 3.5.2
-      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.10.0)
-      '@types/markdown-it': 13.0.5
-      '@vitejs/plugin-vue': 4.3.1(vite@4.5.0)(vue@3.3.8)
+      '@docsearch/js': 3.5.2(@algolia/client-search@4.20.0)(search-insights@2.11.0)
+      '@types/markdown-it': 13.0.6
+      '@vitejs/plugin-vue': 4.5.0(vite@5.0.0)(vue@3.3.8)
       '@vue/devtools-api': 6.5.1
       '@vueuse/core': 10.6.1(vue@3.3.8)
-      '@vueuse/integrations': 10.5.0(focus-trap@7.5.4)(vue@3.3.8)
+      '@vueuse/integrations': 10.6.1(focus-trap@7.5.4)(vue@3.3.8)
       focus-trap: 7.5.4
       mark.js: 8.11.1
       minisearch: 6.2.0
       postcss: 8.4.31
       shiki: 0.14.5
-      vite: 4.5.0
+      vite: 5.0.0
       vue: 3.3.8(typescript@5.2.2)
     transitivePeerDependencies:
       - '@algolia/client-search'
@@ -11313,6 +11385,11 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
+  /xtend@4.0.2:
+    resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}
+    engines: {node: '>=0.4'}
+    dev: false
+
   /xxhashjs@0.2.2:
     resolution: {integrity: sha512-AkTuIuVTET12tpsVIQo+ZU6f/qDmKuRUcjaqR+OIvm+aCBsZ95i7UVY5WJ9TMsSaZ0DA2WxoZ4acu0sPH+OKAw==}
     dependencies:
diff --git a/src/core/EffectComposer.vue b/src/core/EffectComposer.vue
index 392c0523..35088798 100644
--- a/src/core/EffectComposer.vue
+++ b/src/core/EffectComposer.vue
@@ -26,7 +26,6 @@ const props = withDefaults(defineProps<EffectComposerProps>(), {
   autoClear: true,
   frameBufferType: HalfFloatType,
   disableNormalPass: false,
-
   depthBuffer: undefined,
   multisampling: 0,
   stencilBuffer: undefined,
@@ -39,7 +38,7 @@ let downSamplingPass: DepthDownsamplingPass | null = null
 let normalPass: NormalPass | null = null
 
 provide(effectComposerInjectionKey, effectComposer)
-
+defineExpose({ composer: effectComposer })
 const setNormalPass = () => {
   if (!effectComposer.value) return