feat(post-processing): depth of field effect

docs/.vitepress/cache/deps/_metadata.json

@@ -1,71 +1,56 @@
 {
-  "hash": "23f857d3",
-  "browserHash": "d59cd564",
+  "hash": "e8b9415e",
+  "browserHash": "9395bd41",
   "optimized": {
     "vue": {
       "src": "../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "6f926f4f",
+      "fileHash": "29847c23",
+      "needsInterop": false
+    },
+    "three": {
+      "src": "../../../../node_modules/.pnpm/three@0.153.0/node_modules/three/build/three.module.js",
+      "file": "three.js",
+      "fileHash": "c47970e5",
       "needsInterop": false
     },
     "gsap": {
       "src": "../../../../node_modules/.pnpm/gsap@3.12.1/node_modules/gsap/index.js",
       "file": "gsap.js",
-      "fileHash": "7be7561a",
-      "needsInterop": false
-    },
-    "@vueuse/core": {
-      "src": "../../../../node_modules/.pnpm/@vueuse+core@10.2.0_vue@3.3.4/node_modules/@vueuse/core/index.mjs",
-      "file": "@vueuse_core.js",
-      "fileHash": "96173de7",
+      "fileHash": "0a744ad7",
       "needsInterop": false
     },
     "@tresjs/core": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+core@2.3.0_react@18.2.0_three@0.153.0_vue@3.3.4/node_modules/@tresjs/core/dist/tres.js",
+      "src": "../../../../node_modules/.pnpm/@tresjs+core@3.2.2_three@0.153.0_vue@3.3.4/node_modules/@tresjs/core/dist/tres.js",
       "file": "@tresjs_core.js",
-      "fileHash": "ca8e11e5",
+      "fileHash": "9c5dc3eb",
+      "needsInterop": false
+    },
+    "@tresjs/cientos": {
+      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@3.0.1_three@0.153.0_vue@3.3.4/node_modules/@tresjs/cientos/dist/trescientos.js",
+      "file": "@tresjs_cientos.js",
+      "fileHash": "78832832",
       "needsInterop": false
     },
     "postprocessing": {
       "src": "../../../../node_modules/.pnpm/postprocessing@6.32.1_three@0.153.0/node_modules/postprocessing/build/index.js",
       "file": "postprocessing.js",
-      "fileHash": "c6814e95",
-      "needsInterop": false
-    },
-    "three": {
-      "src": "../../../../node_modules/.pnpm/three@0.153.0/node_modules/three/build/three.module.js",
-      "file": "three.js",
-      "fileHash": "f62097f4",
-      "needsInterop": false
-    },
-    "three-stdlib": {
-      "src": "../../../../node_modules/.pnpm/three-stdlib@2.23.10_three@0.153.0/node_modules/three-stdlib/index.js",
-      "file": "three-stdlib.js",
-      "fileHash": "7ac9d392",
-      "needsInterop": false
-    },
-    "@tresjs/cientos": {
-      "src": "../../../../node_modules/.pnpm/@tresjs+cientos@2.1.4_@tresjs+core@2.3.0_three@0.153.0_vue@3.3.4/node_modules/@tresjs/cientos/dist/trescientos.js",
-      "file": "@tresjs_cientos.js",
-      "fileHash": "951de2d7",
+      "fileHash": "a69392b7",
       "needsInterop": false
     }
   },
   "chunks": {
-    "chunk-CLNIDPOB": {
-      "file": "chunk-CLNIDPOB.js"
-    },
-    "chunk-MWU5CND6": {
-      "file": "chunk-MWU5CND6.js"
+    "chunk-UXYWE37G": {
+      "file": "chunk-UXYWE37G.js"
     },
-    "chunk-HEVM5OMM": {
-      "file": "chunk-HEVM5OMM.js"
+    "chunk-NQEDJL6T": {
+      "file": "chunk-NQEDJL6T.js"
     },
-    "chunk-JKV2V35Q": {
-      "file": "chunk-JKV2V35Q.js"
+    "chunk-64YHRCBQ": {
+      "file": "chunk-64YHRCBQ.js"
     },
-    "chunk-4EOJPDL2": {
-      "file": "chunk-4EOJPDL2.js"
+    "chunk-SSYGV25P": {
+      "file": "chunk-SSYGV25P.js"
     }
   }
 }

docs/.vitepress/config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from 'vitepress'
 import Unocss from 'unocss/vite'
 import svgLoader from 'vite-svg-loader'
 import { resolve } from 'pathe'
+import { templateCompilerOptions } from '@tresjs/core'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -28,6 +29,7 @@ export default defineConfig({
         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: 'Outline', link: '/guide/effects/outline' },
         ],
@@ -40,11 +42,23 @@ export default defineConfig({
     ],
   },
   vite: {
-    plugins: [svgLoader(), Unocss()],
+    optimizeDeps: {
+      exclude: ['vitepress'],
+      include: ['three'],
+    },
+    server: {
+      hmr: {
+        overlay: false,
+      },
+    },
     resolve: {
       alias: {
-        '/@': resolve(__dirname, '../../src'),
+        '@tresjs/post-processing': resolve(__dirname, '../../dist/tres-postprocessing.js'),
       },
+      dedupe: ['three'],
     },
   },
+  vue: {
+    ...templateCompilerOptions,
+  },
 })

docs/.vitepress/theme/components/BloomDemo.vue

@@ -3,7 +3,7 @@ import { Color } from 'three'
 import { reactive } from 'vue'
 import { TresCanvas } from '@tresjs/core'
 import { BlendFunction } from 'postprocessing'
-import { EffectComposer, Bloom } from '/@'
+import { EffectComposer, Bloom } from '@tresjs/post-processing'
 
 const gl = {
   clearColor: '#121212',