Skip to content

Commit 3112305

Browse files
Tinooooalvarosabu
Tinoooo
and
alvarosabu
authored
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>
1 parent 51b5819 commit 3112305

File tree

13 files changed

+165
-163
lines changed

13 files changed

+165
-163
lines changed

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

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎docs/.vitepress/config.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@ export default defineConfig({
3838
// https://vitepress.dev/reference/default-theme-config
3939
nav: [
4040
{ text: 'Guide', link: '/guide/' },
41-
{ text: 'Examples', link: 'https://playground.tresjs.org/' },
4241
],
4342

4443
sidebar: [

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import { useGLTF } from '@tresjs/cientos'
44
const { nodes }
55
= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
66
const model = nodes.Cube
7+
8+
model.traverse((child) => {
9+
if (child.isMesh) {
10+
child.castShadow = true
11+
}
12+
})
713
</script>
814

915
<template>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<script setup lang="ts">
2+
import { useGLTF } from '@tresjs/cientos'
3+
4+
const { scene: model }
5+
= await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
6+
</script>
7+
8+
<template>
9+
<primitive :object="model" />
10+
</template>

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

Lines changed: 48 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,67 @@
11
<script lang="ts" setup>
22
import { TresCanvas } from '@tresjs/core'
3+
import { Backdrop } from '@tresjs/cientos'
34
import { DepthOfField, EffectComposer } from '@tresjs/post-processing/pmndrs'
4-
import { gsap } from 'gsap'
5-
import { ref } from 'vue'
5+
import '@tresjs/leches/styles'
66
7+
import Ducky from '../Ducky.vue'
78
import { useRouteDisposal } from '../../composables/useRouteDisposal'
89
9-
const dofEffect = ref<InstanceType<typeof DepthOfField> | null>(null)
10-
11-
const toggleFocusDistance = () => {
12-
gsap.to(dofEffect.value?.effect.circleOfConfusionMaterial, {
13-
focusDistance: dofEffect.value?.effect.circleOfConfusionMaterial.focusDistance === 0.0012 ? 0.003 : 0.0012,
14-
duration: 0.5,
15-
ease: 'power2',
16-
})
17-
}
18-
1910
// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
2011
const { effectComposer } = useRouteDisposal()
12+
13+
const effectParams = ref({
14+
focusDistance: 0.001,
15+
bokehScale: 5.9,
16+
focusRange: 0.011,
17+
})
2118
</script>
2219

2320
<template>
24-
<button
25-
class="
26-
absolute
27-
rounded
28-
px-2 py-1
29-
bg-white/15
30-
top-2.5
31-
right-2
32-
z-10
33-
ring-1
34-
ring-inset
35-
ring-gray-400/50
36-
hover:bg-gray-400/40
37-
active:bg-gray-400/50
38-
font-semibold
39-
transition-colors
40-
"
41-
@click="toggleFocusDistance"
42-
>
43-
toggle focus
44-
</button>
45-
<TresCanvas>
21+
<TresCanvas clear-color="#ff9cce" shadows>
4622
<TresPerspectiveCamera
47-
:rotation="[-0.89, 1.28, 0.87]"
48-
:position="[5.55, 1.57, 1.02]"
23+
:position="[0, 1, 3]"
24+
:look-at="[0, 0.75, 2]"
4925
/>
50-
<TresMesh :position="[-2, 1, 0]">
51-
<TresBoxGeometry
52-
:width="3"
53-
:height="3"
54-
:depth="3"
26+
<Backdrop
27+
:floor="1.5"
28+
:scale="[100, 30, 30]"
29+
:position="[0, 0, -50]"
30+
receive-shadow
31+
>
32+
<TresMeshPhysicalMaterial
33+
:roughness="1"
34+
color="#ff9cce"
35+
:side="2"
5536
/>
56-
<TresMeshNormalMaterial />
57-
</TresMesh>
58-
<TresMesh :position="[3, 1, 0]">
59-
<TresBoxGeometry
60-
:width="3"
61-
:height="3"
62-
:depth="3"
63-
/>
64-
<TresMeshNormalMaterial />
65-
</TresMesh>
66-
<TresGridHelper />
37+
</Backdrop>
38+
<TresGroup
39+
:position="[-5, 0.5, -10]"
40+
:scale="0.5"
41+
>
42+
<Suspense>
43+
<Ducky />
44+
</Suspense>
45+
</TresGroup>
46+
<TresGroup
47+
:position="[0, 0.5, 0]"
48+
:scale="0.5"
49+
>
50+
<Suspense>
51+
<BlenderCube />
52+
</Suspense>
53+
</TresGroup>
54+
<TresAmbientLight />
55+
<TresDirectionalLight
56+
:position="[5, 5, 5]"
57+
cast-shadow
58+
/>
59+
6760
<EffectComposer ref="effectComposer">
6861
<DepthOfField
69-
ref="dofEffect"
70-
:focus-distance="0.0012"
71-
:world-focus-distance="2"
72-
:world-focus-range="1"
73-
:bokeh-scale="8"
74-
:focus-range="0.005"
62+
:bokeh-scale="effectParams.bokehScale"
63+
:focus-distance="effectParams.focusDistance"
64+
:focus-range="effectParams.focusRange"
7565
/>
7666
</EffectComposer>
7767
</TresCanvas>

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

Lines changed: 31 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,17 @@
11
<script lang="ts" setup>
22
import { OrbitControls } from '@tresjs/cientos'
33
import { TresCanvas } from '@tresjs/core'
4-
import { TresLeches, useControls } from '@tresjs/leches'
54
import { EffectComposer, Outline } from '@tresjs/post-processing/pmndrs'
6-
import { KernelSize } from 'postprocessing'
5+
import type { Intersection, Object3D } from 'three'
76
import { NoToneMapping } from 'three'
87
import { ref } from 'vue'
98
109
import { useRouteDisposal } from '../../composables/useRouteDisposal'
1110
12-
import '@tresjs/leches/styles'
13-
1411
const gl = {
1512
clearColor: '#121212',
1613
toneMapping: NoToneMapping,
14+
multisampling: 8,
1715
}
1816
1917
const { effectComposer } = useRouteDisposal()
@@ -24,71 +22,50 @@ const toggleMeshSelectionState = ({ object }: Intersection) => {
2422
if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid)) { outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid) }
2523
else { outlinedObjects.value = [...outlinedObjects.value, object] }
2624
}
27-
28-
const { edgeStrength, pulseSpeed, visibleEdgeColor, blur, kernelSize } = useControls({
29-
edgeStrength: {
30-
value: 8000,
31-
min: 0,
32-
max: 8000,
33-
step: 10,
34-
},
35-
pulseSpeed: {
36-
value: 0,
37-
min: 0,
38-
max: 2,
39-
step: 0.01,
40-
},
41-
visibleEdgeColor: '#ffffff',
42-
blur: false,
43-
kernelSize: {
44-
value: 0,
45-
min: KernelSize.VERY_SMALL,
46-
max: KernelSize.VERY_LARGE,
47-
step: 1,
48-
},
49-
})
50-
51-
// Need to dispose of the effect composer when the route changes because Vitepress doesnt unmount the components
52-
useRouteDisposal(effectComposer)
5325
</script>
5426

5527
<template>
56-
<TresLeches />
5728
<TresCanvas
5829
v-bind="gl"
5930
>
6031
<TresPerspectiveCamera
61-
:position="[1, 3, 3]"
62-
:look-at="[2, 2, 2]"
32+
:position="[3, 2, 4]"
33+
:look-at="[0, 0, 0]"
6334
/>
6435
<OrbitControls />
65-
<template
66-
v-for="i in 5"
67-
:key="i"
36+
<TresMesh
37+
:position="[1, 0.5, 1]"
38+
@click="toggleMeshSelectionState"
6839
>
69-
<TresMesh
70-
:position="[i * 1.1 - 2.8, 1, 0]"
71-
@click="toggleMeshSelectionState"
72-
>
73-
<TresBoxGeometry
74-
:width="4"
75-
:height="4"
76-
:depth="4"
77-
/>
78-
<TresMeshStandardMaterial color="hotpink" />
79-
</TresMesh>
80-
</template>
40+
<TresBoxGeometry />
41+
<TresMeshStandardMaterial
42+
color="hotpink"
43+
/>
44+
</TresMesh>
45+
<TresMesh
46+
:position="[-1.5, 0.75, 0]"
47+
@click="toggleMeshSelectionState"
48+
>
49+
<TresConeGeometry :args="[1, 1.5, 4, 1, false, Math.PI * 0.25]" />
50+
<TresMeshStandardMaterial
51+
color="aqua"
52+
/>
53+
</TresMesh>
8154
<TresGridHelper />
82-
<TresAmbientLight :intensity="2" />
55+
<TresAmbientLight :intensity="1" />
56+
<TresDirectionalLight
57+
:position="[0, 1, 0]"
58+
:intensity="1"
59+
/>
8360
<Suspense>
8461
<EffectComposer ref="effectComposer">
8562
<Outline
8663
:outlined-objects="outlinedObjects"
87-
:blur="blur.value"
88-
:edge-strength="edgeStrength.value"
89-
:pulse-speed="pulseSpeed.value"
90-
:visible-edge-color="visibleEdgeColor.value"
91-
:kernel-size="kernelSize.value"
64+
65+
:edge-strength="200000"
66+
:pulse-speed="2"
67+
visible-edge-color="#ffff00"
68+
:kernel-size="3"
9269
/>
9370
</EffectComposer>
9471
</Suspense>

‎docs/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ declare module 'vue' {
1212
copy: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo copy.vue')['default']
1313
DepthOfFieldDemo: typeof import('./.vitepress/theme/components/pmdrs/DepthOfFieldDemo.vue')['default']
1414
DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
15+
Ducky: typeof import('./.vitepress/theme/components/Ducky.vue')['default']
1516
GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
1617
GlitchThreeDemo: typeof import('./.vitepress/theme/components/three/GlitchThreeDemo.vue')['default']
1718
GlitchTreeDemo: typeof import('./.vitepress/theme/components/three/GlitchTreeDemo.vue')['default']

‎playground/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ declare module 'vue' {
1010
BasicScene: typeof import('./src/components/BasicScene.vue')['default']
1111
BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
1212
copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
13+
Ducky: typeof import('./src/components/Ducky.vue')['default']
1314
EffectListItem: typeof import('./src/components/EffectListItem.vue')['default']
1415
GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
1516
GraphPane: typeof import('./src/components/GraphPane.vue')['default']

‎playground/src/components/BlenderCube.vue‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@ import { useGLTF } from '@tresjs/cientos'
44
const { nodes }
55
= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
66
const model = nodes.Cube
7+
8+
model.traverse((child) => {
9+
if (child.isMesh) {
10+
child.castShadow = true
11+
}
12+
})
713
</script>
814

915
<template>

‎playground/src/components/Ducky.vue‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
import { useGLTF } from '@tresjs/cientos'
3+
4+
const { scene: model }
5+
= await useGLTF('https://vazxmixjsiawhamofees.supabase.co/storage/v1/object/public/models/duck/model.gltf', { draco: true })
6+
7+
model.traverse((child) => {
8+
if (child.isMesh) {
9+
child.castShadow = true
10+
}
11+
})
12+
</script>
13+
14+
<template>
15+
<primitive :object="model" />
16+
</template>

0 commit comments

Comments
 (0)