Skip to content

Commit 0df3394

Browse files
damienmontastieralvarosabu
damienmontastier
and
alvarosabu
authored
feat: brightness contrast (#184)
* migrate to new tresleches, change devDependencies package.json file * add todo next commit * lint * init brightness constrast * modify doc * try floa false leches * refactor: improve BarrelBlurDemo component layout and styling * leches floatg * doc: change component to GUI component version --------- Co-authored-by: alvarosabu <alvaro.saburido@gmail.com> Co-authored-by: Tino Koch <>
1 parent efddeac commit 0df3394

File tree

8 files changed

+240
-0
lines changed

8 files changed

+240
-0
lines changed

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export default defineConfig({
5353
{ text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
5454
{ text: 'Linocut', link: '/guide/pmndrs/linocut' },
5555
{ text: 'Sepia', link: '/guide/pmndrs/sepia' },
56+
{ text: 'Brightness Contrast', link: '/guide/pmndrs/brightness-contrast' },
5657
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },
5758
{ text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
5859
{ text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },

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

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
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 { BrightnessContrastPmndrs, EffectComposerPmndrs } 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 { brightness, contrast, blendFunction } = useControls({
18+
brightness: { value: 0.25, step: 0.01, min: -1, max: 1 },
19+
contrast: { value: -0.5, step: 0.01, min: -1, max: 1 },
20+
blendFunction: {
21+
options: Object.keys(BlendFunction).map(key => ({
22+
text: key,
23+
value: BlendFunction[key],
24+
})),
25+
value: BlendFunction.SRC,
26+
},
27+
})
28+
</script>
29+
30+
<template>
31+
<div class="aspect-16/9">
32+
<TresCanvas
33+
v-bind="gl"
34+
>
35+
<TresPerspectiveCamera :position="[5, 5, 5]" />
36+
<OrbitControls auto-rotate />
37+
38+
<TresMesh :position="[0, .5, 0]">
39+
<TresBoxGeometry :args="[2, 2, 2]" />
40+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
41+
</TresMesh>
42+
43+
<ContactShadows
44+
:opacity="1"
45+
:position-y="-.5"
46+
/>
47+
48+
<Suspense>
49+
<Environment background preset="sunset" />
50+
</Suspense>
51+
52+
<Suspense>
53+
<EffectComposerPmndrs>
54+
<BrightnessContrastPmndrs
55+
:brightness="brightness"
56+
:contrast="contrast"
57+
:blendFunction="Number(blendFunction)"
58+
/>
59+
</EffectComposerPmndrs>
60+
</Suspense>
61+
</TresCanvas>
62+
</div>
63+
<TresLeches :float="false" />
64+
</template>

‎docs/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
BarrelBlurDemo: typeof import('./.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue')['default']
1111
BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
1212
BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']
13+
BrightnessContrastDemo: typeof import('./.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue')['default']
1314
ChromaticAberrationDemo: typeof import('./.vitepress/theme/components/pmdrs/ChromaticAberrationDemo.vue')['default']
1415
ColorAverageDemo: typeof import('./.vitepress/theme/components/pmdrs/ColorAverageDemo.vue')['default']
1516
copy: typeof import('./.vitepress/theme/components/DocsDemoGUI.vue')['default']

‎docs/guide/pmndrs/brightness-contrast.md

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Brightness & Contrast
2+
3+
<DocsDemoGUI>
4+
<BrightnessContrastDemo />
5+
</DocsDemoGUI>
6+
7+
<details>
8+
<summary>Demo code</summary>
9+
10+
<<< @/.vitepress/theme/components/pmdrs/BrightnessContrastDemo.vue{0}
11+
</details>
12+
13+
The `BrightnessContrast` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html) package.
14+
It adjusts the brightness and contrast of your scene.
15+
16+
## Usage
17+
18+
The `<BrightnessContrastPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
19+
20+
```vue{2,9-13,27-31}
21+
<script setup lang="ts">
22+
import { EffectComposerPmndrs, BrightnessContrastPmndrs } from '@tresjs/post-processing/pmndrs'
23+
24+
const gl = {
25+
toneMapping: NoToneMapping,
26+
multisampling: 8,
27+
}
28+
29+
const effectProps = {
30+
brightness:0.25,
31+
contrast: -0.5,
32+
blendFunction: BlendFunction.SRC,
33+
}
34+
</script>
35+
36+
<template>
37+
<TresCanvas
38+
v-bind="gl"
39+
>
40+
<TresPerspectiveCamera />
41+
42+
<TresMesh :position="[0, .5, 0]">
43+
<TresBoxGeometry :args="[2, 2, 2]" />
44+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
45+
</TresMesh>
46+
47+
<Suspense>
48+
<EffectComposerPmndrs>
49+
<BrightnessContrastPmndrs v-bind="effectProps" />
50+
</EffectComposerPmndrs>
51+
</Suspense>
52+
</TresCanvas>
53+
</template>
54+
```
55+
56+
## Props
57+
58+
| Prop | Description | Default |
59+
| ------------- | ------------------------------------------------------------- | --------------------------- |
60+
| 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.SRC` |
61+
| brightness | The brightness factor, where 0 means no change. <br> Range: `[-1.0, 1.0]` | `0` |
62+
| contrast | The contrast factor, where 0 means no change. <br> Range: `[-1.0, 1.0]` | `0` |
63+
64+
## Further Reading
65+
For more details, see the [BrightnessContrast documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html)

‎playground/src/pages/postprocessing/brightness-contrast.vue

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
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 { BrightnessContrastPmndrs, EffectComposerPmndrs } 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 { brightness, contrast, blendFunction } = useControls({
18+
brightness: { value: 0.25, step: 0.01, min: -1, max: 1 },
19+
contrast: { value: -0.5, step: 0.01, min: -1, max: 1 },
20+
blendFunction: {
21+
options: Object.keys(BlendFunction).map((key: string) => ({
22+
text: key,
23+
value: BlendFunction[key as keyof typeof BlendFunction],
24+
})),
25+
value: Number(BlendFunction.SRC),
26+
},
27+
})
28+
</script>
29+
30+
<template>
31+
<TresLeches />
32+
33+
<TresCanvas
34+
v-bind="gl"
35+
>
36+
<TresPerspectiveCamera
37+
:position="[5, 5, 5]"
38+
:look-at="[0, 0, 0]"
39+
/>
40+
<OrbitControls auto-rotate />
41+
42+
<TresMesh :position="[0, .5, 0]">
43+
<TresBoxGeometry :args="[2, 2, 2]" />
44+
<TresMeshPhysicalMaterial color="black" :roughness=".25" />
45+
</TresMesh>
46+
47+
<ContactShadows
48+
:opacity="1"
49+
:position-y="-.5"
50+
/>
51+
52+
<Suspense>
53+
<Environment background preset="shangai" />
54+
</Suspense>
55+
56+
<Suspense>
57+
<EffectComposerPmndrs>
58+
<BrightnessContrastPmndrs
59+
:blendFunction="Number(blendFunction)"
60+
:brightness="brightness"
61+
:contrast="contrast"
62+
/>
63+
</EffectComposerPmndrs>
64+
</Suspense>
65+
</TresCanvas>
66+
</template>

‎playground/src/router.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ export const postProcessingRoutes = [
5050
makeRoute('Sepia', '🌅', false),
5151
makeRoute('Scanline', '📽️', false),
5252
makeRoute('Shock Wave', '🌊', false),
53+
makeRoute('Brightness Contrast', '🔆', false),
5354
makeRoute('Vignette', '🕶️', false),
5455
makeRoute('Barrel blur', '🌀', false),
5556
makeRoute('On-demand', '🔄', false),

‎src/core/pmndrs/BrightnessContrastPmndrs.vue

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

‎src/core/pmndrs/index.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import DotScreenPmndrs, { type DotScreenPmndrsProps } from './DotScreenPmndrs.vu
2323
import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
2424
import LinocutPmndrs, { type LinocutPmndrsProps } from './LinocutPmndrs.vue'
2525
import DepthPickingPassPmndrs, { type DepthPickingPassPmndrsProps } from './DepthPickingPassPmndrs.vue'
26+
import BrightnessContrastPmndrs, { type BrightnessContrastPmndrsProps } from './BrightnessContrastPmndrs.vue'
2627

2728
export {
2829
BloomPmndrs,
@@ -48,6 +49,7 @@ export {
4849
SepiaPmndrs,
4950
LinocutPmndrs,
5051
DepthPickingPassPmndrs,
52+
BrightnessContrastPmndrs,
5153
BloomPmndrsProps,
5254
DepthOfFieldPmndrsProps,
5355
EffectComposerPmndrsProps,
@@ -70,4 +72,5 @@ export {
7072
SepiaPmndrsProps,
7173
LinocutPmndrsProps,
7274
DepthPickingPassPmndrsProps,
75+
BrightnessContrastPmndrsProps,
7376
}

0 commit comments

Comments
 (0)