docs: better depth of field demo and docs

docs/.vitepress/theme/components/BlenderCube.vue

@@ -4,6 +4,12 @@ import { useGLTF } from '@tresjs/cientos'
 const { nodes }
 = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube
+
+model.traverse((child) => {
+  if (child.isMesh) {
+    child.castShadow = true
+  }
+})
 </script>
 
 <template>

docs/.vitepress/theme/components/Ducky.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene: model }
+  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

docs/.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue

@@ -1,47 +1,70 @@
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { Backdrop, OrbitControls } from '@tresjs/cientos'
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
-import { ref } from 'vue'
+import type { Ref } from 'vue'
+import { computed, ref } from 'vue'
+import '@tresjs/leches/styles'
 
+import Ducky from '../Ducky.vue'
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
-const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
-
 // Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
 const { effectComposer } = useRouteDisposal()
+
+const effectParams = ref({
+  focusDistance: 0.001,
+  bokehScale: 5.9,
+  focusRange: 0.011,
+})
 </script>
 
 <template>
-  <TresCanvas>
+  <TresCanvas clear-color="#ff9cce" shadows>
     <TresPerspectiveCamera
-      :rotation="[-0.89, 1.28, 0.87]"
-      :position="[5.55, 1.57, 1.02]"
+      :position="[0, 1, 3]"
+      :look-at="[0, 0.75, 2]"
     />
-    <TresMesh :position="[-2, 1, 0]">
-      <TresBoxGeometry
-        :width="3"
-        :height="3"
-        :depth="3"
-      />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-    <TresMesh :position="[3, 1, 0]">
-      <TresBoxGeometry
-        :width="3"
-        :height="3"
-        :depth="3"
+    <Backdrop
+      :floor="1.5"
+      :scale="[100, 30, 30]"
+      :position="[0, 0, -50]"
+      receive-shadow
+    >
+      <TresMeshPhysicalMaterial
+        :roughness="1"
+        color="#ff9cce"
+        :side="2"
       />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-    <TresGridHelper />
+    </Backdrop>
+    <TresGroup
+      :position="[-5, 0.5, -10]"
+      :scale="0.5"
+    >
+      <Suspense>
+        <Ducky />
+      </Suspense>
+    </TresGroup>
+    <TresGroup
+      :position="[0, 0.5, 0]"
+      :scale="0.5"
+    >
+      <Suspense>
+        <BlenderCube />
+      </Suspense>
+    </TresGroup>
+    <TresAmbientLight />
+    <TresDirectionalLight
+      :position="[5, 5, 5]"
+      cast-shadow
+    />
+
     <EffectComposer ref="effectComposer">
       <DepthOfField
-        ref="dofEffect"
-        :focus-distance="0.0012"
-        :world-focus-distance="2"
-        :world-focus-range="2"
-        :bokeh-scale="8"
-        :focus-range="0.0055"
+        :bokeh-scale="effectParams.bokehScale"
+        :focus-distance="effectParams.focusDistance"
+        :focus-range="effectParams.focusRange"
       />
     </EffectComposer>
   </TresCanvas>

docs/components.d.ts

@@ -12,6 +12,7 @@ declare module 'vue' {
     copy: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo copy.vue')['default']
     DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
     DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
+    Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default']
     GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
     GlitchThreeDemo: typeof import('./.vitepress/theme/components/three/GlitchThreeDemo.vue')['default']
     GlitchTreeDemo: typeof import('./.vitepress/theme/components/three/GlitchTreeDemo.vue')['default']

playground/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     BasicScene: typeof import('./src/components/BasicScene.vue')['default']
     BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
     copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
+    Ducky: typeof import('./src/components/Ducky.vue')['default']
     EffectListItem: typeof import('./src/components/EffectListItem.vue')['default']
     GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
     GraphPane: typeof import('./src/components/GraphPane.vue')['default']

playground/src/components/BlenderCube.vue

@@ -4,6 +4,12 @@ import { useGLTF } from '@tresjs/cientos'
 const { nodes }
   = await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
 const model = nodes.Cube
+
+model.traverse((child) => {
+  if (child.isMesh) {
+    child.castShadow = true
+  }
+})
 </script>
 
 <template>

playground/src/components/Ducky.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const { scene: model }
+  = await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
+
+model.traverse((child) => {
+  if (child.isMesh) {
+    child.castShadow = true
+  }
+})
+</script>
+
+<template>
+  <primitive :object="model" />
+</template>

playground/src/pages/postprocessing/depth-of-field.vue

@@ -1,23 +1,25 @@
 <script lang="ts" setup>
 import type { Ref } from 'vue'
-import { OrbitControls } from '@tresjs/cientos'
+import { Backdrop, OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
 import { TresLeches, useControls } from '@tresjs/leches'
 
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
 import { computed } from 'vue'
+import BlenderCube from '../../components/BlenderCube.vue'
 
 import '@tresjs/leches/styles'
+import Ducky from '../../components/Ducky.vue'
 
 useControls('fpsgraph')
 const controls = useControls({
   focusDistance: {
     value: 0.001,
     min: 0,
-    max: 0.1,
+    max: 0.01,
     step: 0.0001,
   },
-  worldFocusDistance: {
+  /* worldFocusDistance: {
     value: 3.8,
     min: 0,
     max: 10,
@@ -28,15 +30,15 @@ const controls = useControls({
     min: 0,
     max: 1,
     step: 0.001,
-  },
+  }, */
   bokehScale: {
-    value: 10,
+    value: 5.9,
     min: 1,
     max: 15,
     step: 0.01,
   },
   focusRange: {
-    value: 0.0018,
+    value: 0.011,
     min: 0,
     max: 1,
     step: 0.001,
@@ -55,30 +57,51 @@ const effectParams = computed(() =>
 
 <template>
   <TresLeches />
-  <TresCanvas>
+  <TresCanvas clear-color="#ff9cce" shadows>
     <TresPerspectiveCamera
-      :position="[5, 2, 1]"
+      :position="[0, 1, 5]"
       :look-at="[0, 1, 2]"
     />
     <OrbitControls />
-    <template
-      v-for="i in 5"
-      :key="i"
+    <Backdrop
+      :floor="1.5"
+      :scale="[100, 30, 30]"
+      :position="[0, 0, -50]"
+      receive-shadow
+    >
+      <TresMeshPhysicalMaterial
+        :roughness="1"
+        color="#ff9cce"
+        :side="2"
+      />
+    </Backdrop>
+    <TresGroup
+      :position="[-5, 0.5, -10]"
+      :scale="0.5"
     >
-      <TresMesh :position="[i * 1.1 - 2.8, 1, 0]">
-        <TresBoxGeometry
-          :width="4"
-          :height="4"
-          :depth="4"
-        />
-        <TresMeshNormalMaterial />
-      </TresMesh>
-    </template>
-    <TresGridHelper />
+      <Suspense>
+        <Ducky />
+      </Suspense>
+    </TresGroup>
+    <TresGroup
+      :position="[0, 0.5, 0]"
+      :scale="0.5"
+    >
+      <Suspense>
+        <BlenderCube />
+      </Suspense>
+    </TresGroup>
+    <TresAmbientLight />
+    <TresDirectionalLight
+      :position="[5, 5, 5]"
+      cast-shadow
+    />
 
     <EffectComposer>
       <DepthOfField
-        v-bind="effectParams"
+        :bokeh-scale="effectParams.bokehScale"
+        :focus-distance="effectParams.focusDistance"
+        :focus-range="effectParams.focusRange"
       />
     </EffectComposer>
   </TresCanvas>

playground/src/pages/postprocessing/outline.vue

@@ -27,7 +27,7 @@ const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useCont
   edgeStrength: {
     value: 2000,
     min: 0,
-    max: 3000,
+    max: 5000,
     step: 10,
   },
   pulseSpeed: {

src/core/pmndrs/DepthOfField.vue

@@ -49,6 +49,8 @@ const { camera } = useTresContext()
 const { pass, effect } = useEffect(() => new DepthOfFieldEffect(camera.value, props), props)
 defineExpose({ pass, effect })
 
+console.log('DepthOfFieldEffect', { pass, effect })
+
 makePropWatchers(
   [
     // blendFunction is not updated, because it has no setter in BloomEffect