Skip to content

Commit 70c92da

Browse files
alvarosabuTinoooo
alvarosabu
and
Tinoooo
authored
feat: vignette effect (#75)
* feat: vignette effect * Update docs/guide/effects/vignette.md Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com> --------- Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
1 parent 83f88c1 commit 70c92da

File tree

12 files changed

+200
-4844
lines changed

12 files changed

+200
-4844
lines changed

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ export default defineConfig({
3434
{ text: 'Noise', link: '/guide/effects/noise' },
3535
{ text: 'Outline', link: '/guide/effects/outline' },
3636
{ text: 'Pixelation', link: '/guide/effects/pixelation' },
37+
{ text: 'Vignette', link: '/guide/effects/vignette' },
3738
],
3839
},
3940
],

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { useGLTF } from '@tresjs/cientos'
3+
4+
const { nodes }
5+
= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
6+
const model = nodes.Cube
7+
</script>
8+
9+
<template>
10+
<primitive :object="model" />
11+
</template>

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

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
4+
import { OrbitControls } from '@tresjs/cientos'
5+
import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
6+
import BlenderCube from './BlenderCube.vue'
7+
8+
const gl = {
9+
clearColor: '#4f4f4f',
10+
shadows: true,
11+
alpha: false,
12+
shadowMapType: BasicShadowMap,
13+
outputColorSpace: SRGBColorSpace,
14+
toneMapping: NoToneMapping,
15+
}
16+
</script>
17+
18+
<template>
19+
<TresLeches />
20+
<TresCanvas v-bind="gl">
21+
<TresPerspectiveCamera :position="[3, 3, 3]" />
22+
<OrbitControls />
23+
<Suspense>
24+
<BlenderCube />
25+
</Suspense>
26+
<EffectComposer>
27+
<DepthOfField
28+
:focus-distance="0"
29+
:focal-length="0.02"
30+
:bokeh-scale="2"
31+
/>
32+
<Vignette
33+
:darkness="0.9"
34+
:offset="0.3"
35+
/>
36+
</EffectComposer>
37+
<TresAmbientLight :intensity="1" />
38+
</TresCanvas>
39+
</template>

‎docs/components.d.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10+
BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
1011
BloomDemo: typeof import('./.vitepress/theme/components/BloomDemo.vue')['default']
1112
DepthOfFieldDemo: typeof import('./.vitepress/theme/components/DepthOfFieldDemo.vue')['default']
1213
DocsDemo: typeof import('./.vitepress/theme/components/DocsDemo.vue')['default']
@@ -17,5 +18,6 @@ declare module 'vue' {
1718
PixelationDemo: typeof import('./.vitepress/theme/components/PixelationDemo.vue')['default']
1819
RouterLink: typeof import('vue-router')['RouterLink']
1920
RouterView: typeof import('vue-router')['RouterView']
21+
VignetteDemo: typeof import('./.vitepress/theme/components/VignetteDemo.vue')['default']
2022
}
2123
}

‎docs/guide/effects/vignette.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
# Vignette
2+
3+
<DocsDemo>
4+
<VignetteDemo />
5+
</DocsDemo>
6+
7+
Vignette is an effect that darkens the edges of the scene to make the center pop.
8+
9+
## Usage
10+
11+
```vue
12+
<script setup lang="ts">
13+
import { EffectComposer, Vignette } from '@tresjs/post-processing'
14+
</script>
15+
16+
<template>
17+
<EffectComposer>
18+
<Vignette
19+
:darkness="0.9"
20+
:offset="0.2"
21+
/>
22+
</EffectComposer>
23+
</template>
24+
```
25+
26+
## Props
27+
28+
| Prop | Description | Default |
29+
| ------------- | ----------------------------------------------------------- | -------------------------- |
30+
| technique | Whether the noise should be multiplied with the input color. | VignetteTechnique.DEFAULT |
31+
| blendFunction | The blend function to use. This prop is not reactive. | BlendFunction.NORMAL |
32+
| offset | The offset value. | 0.5 |
33+
| darkness | The darkness value. | 0.5 |
34+
35+
36+
## Further Reading
37+
see [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html)

‎playground/components.d.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export {}
77

88
declare module 'vue' {
99
export interface GlobalComponents {
10+
BlenderCube: typeof import('./src/components/BlenderCube.vue')['default']
1011
copy: typeof import('./src/components/UnrealBloom copy.vue')['default']
1112
GlitchDemo: typeof import('./src/components/GlitchDemo.vue')['default']
1213
NoiseDemo: typeof import('./src/components/NoiseDemo.vue')['default']

‎playground/src/components/BlenderCube.vue

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
import { useGLTF } from '@tresjs/cientos'
3+
4+
const { nodes }
5+
= await useGLTF('https://raw.githubusercontent.com/Tresjs/assets/main/models/gltf/blender-cube.glb', { draco: true })
6+
const model = nodes.Cube
7+
</script>
8+
9+
<template>
10+
<primitive :object="model" />
11+
</template>

‎playground/src/pages/vignette.vue

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<script setup lang="ts">
2+
import { TresCanvas } from '@tresjs/core'
3+
import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
4+
import { OrbitControls } from '@tresjs/cientos'
5+
import { EffectComposer, Vignette, DepthOfField } from '@tresjs/post-processing'
6+
import { TresLeches, useControls } from '@tresjs/leches'
7+
import BlenderCube from '../components/BlenderCube.vue'
8+
import '@tresjs/leches/styles'
9+
10+
const gl = {
11+
clearColor: '#4f4f4f',
12+
shadows: true,
13+
alpha: false,
14+
shadowMapType: BasicShadowMap,
15+
outputColorSpace: SRGBColorSpace,
16+
toneMapping: NoToneMapping,
17+
}
18+
19+
const { darkness, offset } = useControls({
20+
offset: {
21+
value: 0.3,
22+
min: 0,
23+
max: 1,
24+
step: 0.01,
25+
},
26+
darkness: {
27+
value: 0.9,
28+
min: 0,
29+
max: 1,
30+
step: 0.01,
31+
},
32+
})
33+
</script>
34+
35+
<template>
36+
<TresLeches />
37+
<TresCanvas v-bind="gl">
38+
<TresPerspectiveCamera :position="[3, 3, 3]" />
39+
<OrbitControls />
40+
<Suspense>
41+
<BlenderCube />
42+
</Suspense>
43+
<EffectComposer>
44+
<DepthOfField
45+
:focus-distance="0"
46+
:focal-length="0.02"
47+
:bokeh-scale="2"
48+
/>
49+
<Vignette
50+
:darkness="darkness.value"
51+
:offset="offset.value"
52+
/>
53+
</EffectComposer>
54+
<TresAmbientLight :intensity="1" />
55+
</TresCanvas>
56+
</template>

‎playground/src/router.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const routes = [
2626
makeRoute('Pixelation', '👾'),
2727
makeRoute('Bloom', '🌼'),
2828
makeRoute('Noise', '📟'),
29+
makeRoute('Vignette', '🕶️'),
2930
]
3031

3132
export const router = createRouter({

‎src/core/effects/Vignette.vue

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<script lang="ts" setup>
2+
import { BlendFunction, VignetteEffect, VignetteTechnique } from 'postprocessing'
3+
import { useEffect } from '../composables/effect'
4+
import { makePropWatchersUsingAllProps } from '../../util/prop'
5+
import { omit } from '../../util/object'
6+
7+
export interface VignetteProps {
8+
/**
9+
* Whether the noise should be multiplied with the input color.
10+
*/
11+
technique?: VignetteTechnique
12+
blendFunction?: BlendFunction
13+
offset: number
14+
darkness: number
15+
}
16+
17+
const props = withDefaults(defineProps<VignetteProps>(), {
18+
technique: VignetteTechnique.DEFAULT,
19+
blendFunction: BlendFunction.NORMAL,
20+
offset: 0.5,
21+
darkness: 0.5,
22+
})
23+
24+
const { pass, effect } = useEffect(() => new VignetteEffect(props))
25+
defineExpose({ pass, effect }) // to allow users to modify pass and effect via template ref
26+
27+
makePropWatchersUsingAllProps(
28+
omit(props, ['blendFunction']),
29+
effect,
30+
() => new VignetteEffect(),
31+
)
32+
</script>
33+
34+
<template></template>

0 commit comments

Comments
 (0)