Skip to content

Commit 2137673

Browse files
damienmontastierdamienmontastier
authoredJan 10, 2025··
feat: add sepia effect (#161)
·
2.3.12.1.0
1 parent 3bf8273 commit 2137673

File tree

8 files changed

+228
-0
lines changed

8 files changed

+228
-0
lines changed
 

‎docs/.vitepress/config.ts

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export default defineConfig({
5454
{ text: 'Noise', link: '/guide/pmndrs/noise' },
5555
{ text: 'Outline', link: '/guide/pmndrs/outline' },
5656
{ text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
57+
{ text: 'Sepia', link: '/guide/pmndrs/sepia' },
5758
{ text: 'Scanline', link: '/guide/pmndrs/scanline' },
5859
{ text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
5960
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },

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

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script setup lang="ts">
2+
import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { TresLeches, useControls } from '@tresjs/leches'
5+
import { NoToneMapping } from 'three'
6+
import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
7+
import { BlendFunction } from 'postprocessing'
8+
9+
import '@tresjs/leches/styles'
10+
11+
const gl = {
12+
clearColor: '#ffffff',
13+
toneMapping: NoToneMapping,
14+
multisampling: 8,
15+
}
16+
17+
const { intensity, blendFunction } = useControls({
18+
intensity: { value: 1.0, step: 0.1, max: 5.0 },
19+
blendFunction: {
20+
options: Object.keys(BlendFunction).map(key => ({
21+
text: key,
22+
value: BlendFunction[key],
23+
})),
24+
value: BlendFunction.NORMAL,
25+
},
26+
})
27+
</script>
28+
29+
<template>
30+
<TresLeches style="left: initial;right:10px; top:10px;" />
31+
32+
<TresCanvas
33+
v-bind="gl"
34+
>
35+
<TresPerspectiveCamera
36+
:position="[5, 5, 5]"
37+
:look-at="[0, 0, 0]"
38+
/>
39+
<OrbitControls auto-rotate />
40+
41+
<TresMesh :position="[0, .5, 0]">
42+
<TresBoxGeometry :args="[2, 2, 2]" />
43+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
44+
</TresMesh>
45+
46+
<ContactShadows
47+
:opacity="1"
48+
:position-y="-.5"
49+
/>
50+
51+
<Suspense>
52+
<Environment background :blur=".5" preset="snow" />
53+
</Suspense>
54+
55+
<Suspense>
56+
<EffectComposerPmndrs>
57+
<SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
58+
</EffectComposerPmndrs>
59+
</Suspense>
60+
</TresCanvas>
61+
</template>

‎docs/components.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ declare module 'vue' {
2424
PixelationDemo: typeof import('./.vitepress/theme/components/pmdrs/PixelationDemo.vue')['default']
2525
PixelationThreeDemo: typeof import('./.vitepress/theme/components/three/PixelationThreeDemo.vue')['default']
2626
ScanlineDemo: typeof import('./.vitepress/theme/components/pmdrs/ScanlineDemo.vue')['default']
27+
SepiaDemo: typeof import('./.vitepress/theme/components/pmdrs/SepiaDemo.vue')['default']
2728
SMAAThreeDemo: typeof import('./.vitepress/theme/components/three/SMAAThreeDemo.vue')['default']
2829
ToneMappingDemo: typeof import('./.vitepress/theme/components/pmdrs/ToneMappingDemo.vue')['default']
2930
UnrealBloomThreeDemo: typeof import('./.vitepress/theme/components/three/UnrealBloomThreeDemo.vue')['default']

‎docs/guide/pmndrs/sepia.md

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Sepia
2+
3+
<DocsDemo>
4+
<SepiaDemo />
5+
</DocsDemo>
6+
7+
The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html) package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch.
8+
9+
## Usage
10+
11+
The `<SepiaPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
12+
13+
```vue{2,36-40}
14+
<script setup lang="ts">
15+
import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing/pmndrs'
16+
17+
const gl = {
18+
toneMapping: NoToneMapping,
19+
multisampling: 8,
20+
}
21+
22+
</script>
23+
24+
<template>
25+
<TresCanvas
26+
v-bind="gl"
27+
>
28+
<TresPerspectiveCamera
29+
:position="[5, 5, 5]"
30+
:look-at="[0, 0, 0]"
31+
/>
32+
33+
<OrbitControls auto-rotate />
34+
35+
<TresMesh :position="[0, .5, 0]">
36+
<TresBoxGeometry :args="[2, 2, 2]" />
37+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
38+
</TresMesh>
39+
40+
<ContactShadows
41+
:opacity="1"
42+
:position-y="-.5"
43+
/>
44+
45+
<Suspense>
46+
<Environment background :blur=".5" preset="snow" />
47+
</Suspense>
48+
49+
<Suspense>
50+
<EffectComposerPmndrs>
51+
<SepiaPmndrs :intensity="2" />
52+
</EffectComposerPmndrs>
53+
</Suspense>
54+
</TresCanvas>
55+
</template>
56+
```
57+
58+
## Props
59+
60+
| Prop | Description | Default |
61+
| ----------------- | ------------------------------------------------------------------------------------------------------------- | ------------------------- |
62+
| blendFunction | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction) options. | `BlendFunction.NORMAL` |
63+
| intensity | The intensity of the sepia effect. | `1.0` |
64+
65+
## Further Reading
66+
For more details, see the [Sepia documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html)

‎playground/src/pages/postprocessing/sepia.vue

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<script setup lang="ts">
2+
import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { TresLeches, useControls } from '@tresjs/leches'
5+
import { NoToneMapping } from 'three'
6+
import { BlendFunction } from 'postprocessing'
7+
import { EffectComposerPmndrs, SepiaPmndrs } from '@tresjs/post-processing'
8+
9+
import '@tresjs/leches/styles'
10+
11+
const gl = {
12+
clearColor: '#ffffff',
13+
toneMapping: NoToneMapping,
14+
multisampling: 8,
15+
}
16+
17+
const { intensity, blendFunction } = useControls({
18+
intensity: { value: 2.0, step: 0.1, max: 5.0 },
19+
blendFunction: {
20+
options: Object.keys(BlendFunction).map(key => ({
21+
text: key,
22+
value: BlendFunction[key],
23+
})),
24+
value: BlendFunction.NORMAL,
25+
},
26+
})
27+
</script>
28+
29+
<template>
30+
<TresLeches />
31+
32+
<TresCanvas
33+
v-bind="gl"
34+
>
35+
<TresPerspectiveCamera
36+
:position="[5, 5, 5]"
37+
:look-at="[0, 0, 0]"
38+
/>
39+
<OrbitControls auto-rotate />
40+
41+
<TresMesh :position="[0, .5, 0]">
42+
<TresBoxGeometry :args="[2, 2, 2]" />
43+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
44+
</TresMesh>
45+
46+
<ContactShadows
47+
:opacity="1"
48+
:position-y="-.5"
49+
/>
50+
51+
<Suspense>
52+
<Environment background :blur=".5" preset="snow" />
53+
</Suspense>
54+
55+
<Suspense>
56+
<EffectComposerPmndrs>
57+
<SepiaPmndrs :intensity="intensity.value" :blendFunction="Number(blendFunction.value)" />
58+
</EffectComposerPmndrs>
59+
</Suspense>
60+
</TresCanvas>
61+
</template>

‎playground/src/router.ts

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const postProcessingRoutes = [
4040
makeRoute('Bloom', '🌼', false),
4141
makeRoute('Noise', '📟', false),
4242
makeRoute('Chromatic Aberration', '🌈', false),
43+
makeRoute('Sepia', '🌅', false),
4344
makeRoute('Scanline', '📺', false),
4445
makeRoute('Vignette', '🕶️', false),
4546
makeRoute('On-demand', '🔄', false),

‎src/core/pmndrs/SepiaPmndrs.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<script lang="ts" setup>
2+
import type { BlendFunction } from 'postprocessing'
3+
import { SepiaEffect } from 'postprocessing'
4+
import { makePropWatchers } from '../../util/prop'
5+
import { useEffectPmndrs } from './composables/useEffectPmndrs'
6+
7+
export interface SepiaPmndrsProps {
8+
/**
9+
* The blend function.
10+
*/
11+
blendFunction?: BlendFunction
12+
13+
/**
14+
* The intensity of the sepia effect.
15+
*/
16+
intensity?: number
17+
}
18+
19+
const props = defineProps<SepiaPmndrsProps>()
20+
21+
const { pass, effect } = useEffectPmndrs(() => new SepiaEffect(props), props)
22+
23+
defineExpose({ pass, effect })
24+
25+
makePropWatchers(
26+
[
27+
[() => props.blendFunction, 'blendMode.blendFunction'],
28+
[() => props.intensity, 'intensity'],
29+
],
30+
effect,
31+
() => new SepiaEffect(),
32+
)
33+
</script>

‎src/core/pmndrs/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import VignettePmndrs, { type VignettePmndrsProps } from './VignettePmndrs.vue'
1212
import ChromaticAberrationPmndrs, { type ChromaticAberrationPmndrsProps } from './ChromaticAberration.vue'
1313
import HueSaturationPmndrs, { type HueSaturationPmndrsProps } from './HueSaturationPmndrs.vue'
1414
import ScanlinePmndrs, { type ScanlinePmndrsProps } from './ScanlinePmndrs.vue'
15+
import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
1516

1617
export {
1718
BloomPmndrs,
@@ -26,6 +27,8 @@ export {
2627
ChromaticAberrationPmndrs,
2728
HueSaturationPmndrs,
2829
ScanlinePmndrs,
30+
SepiaPmndrs,
31+
2932
BloomPmndrsProps,
3033
DepthOfFieldPmndrsProps,
3134
EffectComposerPmndrsProps,
@@ -37,4 +40,5 @@ export {
3740
ChromaticAberrationPmndrsProps,
3841
HueSaturationPmndrsProps,
3942
ScanlinePmndrsProps,
43+
SepiaPmndrsProps,
4044
}

0 commit comments

Comments
 (0)
Please sign in to comment.