fix: 67 depth of field and outline effect (#138)

* simplified dof demo

* removed link

* docs: better depth of field demo and docs

* docs: improve outline demo on docs

* chore: lint

---------

Co-authored-by: Tino Koch
Co-authored-by: Alvaro Saburido <alvaro.saburido@gmail.com>

Author: Tinoooo

.github/workflows/actions/pnpm/action.yml

@@ -38,7 +38,6 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Guide', link: '/guide/' },
-      { text: 'Examples', link: 'https://playground.tresjs.org/' },
     ],
 
     sidebar: [

docs/.vitepress/config.ts

@@ -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/BlenderCube.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/Ducky.vue

@@ -1,77 +1,67 @@
 <script lang="ts" setup>
 import { TresCanvas } from '@tresjs/core'
+import { Backdrop } from '@tresjs/cientos'
 import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
-import { gsap } from 'gsap'
-import { 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)
-
-const toggleFocusDistance = () => {
-  gsap.to(dofEffect.value?.effect.circleOfConfusionMaterial, {
-    focusDistance: dofEffect.value?.effect.circleOfConfusionMaterial.focusDistance === 0.0012 ? 0.003 : 0.0012,
-    duration: 0.5,
-    ease: 'power2',
-  })
-}
-
 // 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>
-  <button
-    class="
-      absolute
-      rounded
-      px-2 py-1
-      bg-white/15
-      top-2.5
-      right-2
-      z-10
-      ring-1
-      ring-inset
-      ring-gray-400/50
-      hover:bg-gray-400/40
-      active:bg-gray-400/50
-      font-semibold
-      transition-colors
-    "
-    @click="toggleFocusDistance"
-  >
-    toggle focus
-  </button>
-  <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"
+    <Backdrop
+      :floor="1.5"
+      :scale="[100, 30, 30]"
+      :position="[0, 0, -50]"
+      receive-shadow
+    >
+      <TresMeshPhysicalMaterial
+        :roughness="1"
+        color="#ff9cce"
+        :side="2"
       />
-      <TresMeshNormalMaterial />
-    </TresMesh>
-    <TresMesh :position="[3, 1, 0]">
-      <TresBoxGeometry
-        :width="3"
-        :height="3"
-        :depth="3"
-      />
-      <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="1"
-        :bokeh-scale="8"
-        :focus-range="0.005"
+        :bokeh-scale="effectParams.bokehScale"
+        :focus-distance="effectParams.focusDistance"
+        :focus-range="effectParams.focusRange"
       />
     </EffectComposer>
   </TresCanvas>

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

@@ -1,19 +1,17 @@
 <script lang="ts" setup>
 import { OrbitControls } from '@tresjs/cientos'
 import { TresCanvas } from '@tresjs/core'
-import { TresLeches, useControls } from '@tresjs/leches'
 import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
-import { KernelSize } from 'postprocessing'
+import type { Intersection, Object3D } from 'three'
 import { NoToneMapping } from 'three'
 import { ref } from 'vue'
 
 import { useRouteDisposal } from '../../composables/useRouteDisposal'
 
-import '@tresjs/leches/styles'
-
 const gl = {
   clearColor: '#121212',
   toneMapping: NoToneMapping,
+  multisampling: 8,
 }
 
 const { effectComposer } = useRouteDisposal()
@@ -24,71 +22,50 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
   if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid)) { outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid) }
   else { outlinedObjects.value = [...outlinedObjects.value, object] }
 }
-
-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
     v-bind="gl"
   >
     <TresPerspectiveCamera
-      :position="[1, 3, 3]"
-      :look-at="[2, 2, 2]"
+      :position="[3, 2, 4]"
+      :look-at="[0, 0, 0]"
     />
     <OrbitControls />
-    <template
-      v-for="i in 5"
-      :key="i"
+    <TresMesh
+      :position="[1, 0.5, 1]"
+      @click="toggleMeshSelectionState"
     >
-      <TresMesh
-        :position="[i * 1.1 - 2.8, 1, 0]"
-        @click="toggleMeshSelectionState"
-      >
-        <TresBoxGeometry
-          :width="4"
-          :height="4"
-          :depth="4"
-        />
-        <TresMeshStandardMaterial color="hotpink" />
-      </TresMesh>
-    </template>
+      <TresBoxGeometry />
+      <TresMeshStandardMaterial
+        color="hotpink"
+      />
+    </TresMesh>
+    <TresMesh
+      :position="[-1.5, 0.75, 0]"
+      @click="toggleMeshSelectionState"
+    >
+      <TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
+      <TresMeshStandardMaterial
+        color="aqua"
+      />
+    </TresMesh>
     <TresGridHelper />
-    <TresAmbientLight :intensity="2" />
+    <TresAmbientLight :intensity="1" />
+    <TresDirectionalLight
+      :position="[0, 1, 0]"
+      :intensity="1"
+    />
     <Suspense>
       <EffectComposer ref="effectComposer">
         <Outline
           :outlined-objects="outlinedObjects"
-          :blur="blur.value"
-          :edge-strength="edgeStrength.value"
-          :pulse-speed="pulseSpeed.value"
-          :visible-edge-color="visibleEdgeColor.value"
-          :kernel-size="kernelSize.value"
+
+          :edge-strength="200000"
+          :pulse-speed="2"
+          visible-edge-color="#ffff00"
+          :kernel-size="3"
         />
       </EffectComposer>
     </Suspense>

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

@@ -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']

docs/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/components.d.ts

@@ -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/BlenderCube.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>