Skip to content

Commit 0ee8267

Browse files
damienmontastierTinoooo
damienmontastier
and
Tinoooo
authored
feat: lens distortion effect (#162)
* add lens distortion with doc * update code, props, doc --------- Co-authored-by: Tino Koch <17991193+Tinoooo@users.noreply.github.com>
1 parent 6fa0e3c commit 0ee8267

File tree

10 files changed

+269
-8
lines changed

10 files changed

+269
-8
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -48,22 +48,23 @@ export default defineConfig({
4848
{
4949
text: 'Pmndrs',
5050
items: [
51+
{ text: 'Barrel blur', link: '/guide/pmndrs/barrel-blur' },
5152
{ text: 'Bloom', link: '/guide/pmndrs/bloom' },
53+
{ text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
5254
{ text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' },
55+
{ text: 'Dot Screen', link: '/guide/pmndrs/dot-screen' },
5356
{ text: 'Glitch', link: '/guide/pmndrs/glitch' },
57+
{ text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
58+
{ text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },
5459
{ text: 'Noise', link: '/guide/pmndrs/noise' },
5560
{ text: 'Outline', link: '/guide/pmndrs/outline' },
56-
{ text: 'Tone Mapping', link: '/guide/pmndrs/tone-mapping' },
57-
{ text: 'Chromatic Aberration', link: '/guide/pmndrs/chromatic-aberration' },
58-
{ text: 'Sepia', link: '/guide/pmndrs/sepia' },
61+
{ text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
5962
{ text: 'Scanline', link: '/guide/pmndrs/scanline' },
63+
{ text: 'Sepia', link: '/guide/pmndrs/sepia' },
6064
{ text: 'Shock Wave', link: '/guide/pmndrs/shock-wave' },
61-
{ text: 'Pixelation', link: '/guide/pmndrs/pixelation' },
62-
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },
63-
{ text: 'Barrel blur', link: '/guide/pmndrs/barrel-blur' },
64-
{ text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
6565
{ text: 'Tilt Shift', link: '/guide/pmndrs/tilt-shift' },
66-
{ text: 'Dot Screen', link: '/guide/pmndrs/dot-screen' },
66+
{ text: 'Tone Mapping', link: '/guide/pmndrs/tone-mapping' },
67+
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },
6768
],
6869
},
6970
{

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<script setup lang="ts">
2+
import { Environment, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas, useTexture } from '@tresjs/core'
4+
import { TresLeches, useControls } from '@tresjs/leches'
5+
import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
6+
import { BackSide, NoToneMapping, SRGBColorSpace, Vector2 } from 'three'
7+
8+
import '@tresjs/leches/styles'
9+
10+
const gl = {
11+
toneMapping: NoToneMapping,
12+
multisampling: 8,
13+
}
14+
15+
const { distortion, principalPoint, focalLength, skew } = useControls({
16+
distortion: { value: new Vector2(0.5, 0.5), min: 0, max: 1, step: 0.001 },
17+
principalPoint: { value: new Vector2(0.0, 0.0), min: 0, max: 1, step: 0.001 },
18+
focalLength: { value: new Vector2(0.5, 0.5), min: 0, max: 2, step: 0.001 },
19+
skew: { value: 0, min: -1, max: 1, step: 0.001 },
20+
})
21+
22+
const pbrTexture = await useTexture({
23+
map: '/lens-distortion/room-map.png',
24+
normalMap: '/lens-distortion/room-normal.png',
25+
})
26+
27+
pbrTexture.map.colorSpace = SRGBColorSpace
28+
</script>
29+
30+
<template>
31+
<TresLeches style="left: initial;right:10px; top:10px;" />
32+
33+
<TresCanvas
34+
v-bind="gl"
35+
>
36+
<TresPerspectiveCamera
37+
:position="[-2, 1, 5]"
38+
/>
39+
<OrbitControls auto-rotate />
40+
41+
<TresMesh :position="[0, 2, 0]">
42+
<TresBoxGeometry :args="[8, 8, 8]" />
43+
<TresMeshStandardMaterial :side="BackSide" :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" />
44+
</TresMesh>
45+
46+
<TresMesh :position="[0, 0, 0]">
47+
<TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
48+
<TresMeshNormalMaterial />
49+
</TresMesh>
50+
51+
<TresAmbientLight :intensity="2" />
52+
53+
<Suspense>
54+
<Environment background :blur=".25" preset="snow" />
55+
</Suspense>
56+
57+
<Suspense>
58+
<EffectComposerPmndrs>
59+
<LensDistortionPmndrs
60+
:distortion="distortion.value"
61+
:principalPoint="principalPoint.value"
62+
:focalLength="focalLength.value"
63+
:skew="skew.value"
64+
/>
65+
</EffectComposerPmndrs>
66+
</Suspense>
67+
</TresCanvas>
68+
</template>

‎docs/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ declare module 'vue' {
2020
HalftoneThreeDemo: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo.vue')['default']
2121
HueSaturation: typeof import('./.vitepress/theme/components/pmdrs/HueSaturationDemo.vue')['default']
2222
HueSaturationDemo: typeof import('./.vitepress/theme/components/pmdrs/HueSaturationDemo.vue')['default']
23+
LensDistortionDemo: typeof import('./.vitepress/theme/components/pmdrs/LensDistortionDemo.vue')['default']
2324
LoveVueThreeJS: typeof import('./.vitepress/theme/components/LoveVueThreeJS.vue')['default']
2425
NoiseDemo: typeof import('./.vitepress/theme/components/pmdrs/NoiseDemo.vue')['default']
2526
OutlineDemo: typeof import('./.vitepress/theme/components/pmdrs/OutlineDemo.vue')['default']

‎docs/guide/pmndrs/lens-distortion.md‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
# Lens Distortion
2+
3+
<DocsDemo>
4+
<LensDistortionDemo />
5+
</DocsDemo>
6+
7+
The `LensDistortion` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html) package. It allows you to apply a lens distortion effect to your scene, providing flexibility for creating realistic camera effects.
8+
9+
## Usage
10+
11+
The `<LensDistortionPmndrs>` component is straightforward to use and provides customizable options to fine-tune the distortion effect of your visuals.
12+
13+
```vue{3,12-17,52-56}
14+
<script setup lang="ts">
15+
import { Vector2 } from 'three'
16+
import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
17+
import { Environment, OrbitControls } from '@tresjs/cientos'
18+
import { TresCanvas, useTexture } from '@tresjs/core'
19+
20+
const gl = {
21+
toneMapping: NoToneMapping,
22+
multisampling: 8,
23+
}
24+
25+
const effectProps = {
26+
distortion: new Vector2(0.5, 0.5),
27+
principalPoint: new Vector2(0.0, 0.0),
28+
focalLength: new Vector2(0.5, 0.5),
29+
skew: 0,
30+
}
31+
32+
const pbrTexture = await useTexture({
33+
map: '/lens-distortion/room-map.png',
34+
normalMap: '/lens-distortion/room-normal.png',
35+
})
36+
37+
pbrTexture.map.colorSpace = SRGBColorSpace
38+
</script>
39+
40+
<template>
41+
<TresCanvas
42+
v-bind="gl"
43+
>
44+
<TresPerspectiveCamera
45+
:position="[-2, 1, 5]"
46+
/>
47+
<OrbitControls auto-rotate />
48+
49+
<TresMesh :position="[0, 2, 0]">
50+
<TresBoxGeometry :args="[8, 8, 8]" />
51+
<TresMeshStandardMaterial :side="BackSide" :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" />
52+
</TresMesh>
53+
54+
<TresMesh :position="[0, 0, 0]">
55+
<TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
56+
<TresMeshNormalMaterial />
57+
</TresMesh>
58+
59+
<TresAmbientLight :intensity="2" />
60+
61+
<Suspense>
62+
<Environment background :blur=".25" preset="snow" />
63+
</Suspense>
64+
65+
<Suspense>
66+
<EffectComposerPmndrs>
67+
<LensDistortionPmndrs v-bind="effectProps" />
68+
</EffectComposerPmndrs>
69+
</Suspense>
70+
</TresCanvas>
71+
</template>
72+
```
73+
74+
## Props
75+
76+
| Prop | Description | Default |
77+
| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ |
78+
| **distortion** | The distortion effect strength. <br> Accepts `Vector2` or `[number, number]`. | `[0.0, 0.0]` |
79+
| **principalPoint** | The center point. <br> Accepts `Vector2` or `[number, number]`. | `[0.0, 0.0]` |
80+
| **focalLength** | The focal length. <br> Accepts `Vector2` or `[number, number]`. | `[1.0, 1.0]` |
81+
| **skew** | The skew value. | `0` |
82+
83+
## Further Reading
84+
85+
For more details, see the [LensDistortion documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html).

‎docs/public/lens-distortion/room-map.png‎

21.8 KB
Loading

‎docs/public/lens-distortion/room-normal.png‎

18.8 KB
Loading

‎playground/src/pages/postprocessing/lens-distortion.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<script setup lang="ts">
2+
import { Environment, OrbitControls } from '@tresjs/cientos'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { TresLeches, useControls } from '@tresjs/leches'
5+
import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
6+
import { NoToneMapping, Vector2 } from 'three'
7+
8+
import '@tresjs/leches/styles'
9+
10+
const gl = {
11+
toneMapping: NoToneMapping,
12+
multisampling: 8,
13+
}
14+
15+
const { distortion, principalPoint, focalLength, skew } = useControls({
16+
distortion: { value: new Vector2(0.5, 0.5), min: -1, max: 1, step: 0.001 },
17+
principalPoint: { value: new Vector2(0.0, 0.0), min: -0.5, max: 0.5, step: 0.001 },
18+
focalLength: { value: new Vector2(0.5, 0.5), min: -1, max: 1, step: 0.001 },
19+
skew: { value: 0, min: -1, max: 1, step: 0.001 },
20+
})
21+
</script>
22+
23+
<template>
24+
<TresLeches />
25+
26+
<TresCanvas
27+
v-bind="gl"
28+
>
29+
<TresPerspectiveCamera
30+
:position="[5, 5, 2]"
31+
/>
32+
<OrbitControls auto-rotate :target="[0, 1, 0]" />
33+
34+
<TresMesh :position="[0, 1, 0]">
35+
<TresBoxGeometry :args="[2, 2, 2]" />
36+
<TresMeshPhysicalMaterial color="#0f0f0f" :roughness=".5" />
37+
</TresMesh>
38+
39+
<Suspense>
40+
<Environment background :blur=".25" preset="modern" />
41+
</Suspense>
42+
43+
<Suspense>
44+
<EffectComposerPmndrs>
45+
<LensDistortionPmndrs
46+
:distortion="distortion.value"
47+
:principalPoint="principalPoint.value"
48+
:focalLength="focalLength.value"
49+
:skew="skew.value"
50+
/>
51+
</EffectComposerPmndrs>
52+
</Suspense>
53+
</TresCanvas>
54+
</template>

‎playground/src/router.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export const postProcessingRoutes = [
4343
makeRoute('Bloom', '🌼', false),
4444
makeRoute('Noise', '📟', false),
4545
makeRoute('Chromatic Aberration', '🌈', false),
46+
makeRoute('Lens Distortion', '🔍', false),
4647
makeRoute('Sepia', '🌅', false),
4748
makeRoute('Scanline', '📺', false),
4849
makeRoute('Shock Wave', '🌊', false),

‎src/core/pmndrs/LensDistortionPmndrs.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<script lang="ts" setup>
2+
import { LensDistortionEffect } from 'postprocessing'
3+
import { makePropWatchersUsingAllProps } from '../../util/prop'
4+
import { useEffectPmndrs } from './composables/useEffectPmndrs'
5+
import { Vector2 } from 'three'
6+
7+
export interface LensDistortionPmndrsProps {
8+
/**
9+
* The distortion effect strength.
10+
*/
11+
distortion?: Vector2 | [number, number]
12+
13+
/**
14+
* The center point.
15+
*/
16+
principalPoint?: Vector2 | [number, number]
17+
18+
/**
19+
* The focal length.
20+
*/
21+
focalLength?: Vector2 | [number, number]
22+
23+
/**
24+
* The skew value.
25+
*/
26+
skew?: number
27+
}
28+
29+
const props = defineProps<LensDistortionPmndrsProps>()
30+
31+
const { pass, effect } = useEffectPmndrs(
32+
() => new LensDistortionEffect({
33+
...props,
34+
distortion: props.distortion ? (Array.isArray(props.distortion) ? new Vector2(...props.distortion) : props.distortion) : new Vector2(),
35+
principalPoint: props.principalPoint ? (Array.isArray(props.principalPoint) ? new Vector2(...props.principalPoint) : props.principalPoint) : new Vector2(),
36+
focalLength: props.focalLength ? (Array.isArray(props.focalLength) ? new Vector2(...props.focalLength) : props.focalLength) : new Vector2(),
37+
}),
38+
props,
39+
)
40+
41+
defineExpose({ pass, effect })
42+
43+
makePropWatchersUsingAllProps(
44+
props,
45+
effect,
46+
() => new LensDistortionEffect(),
47+
)
48+
</script>

‎src/core/pmndrs/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ToneMappingPmndrs, { type ToneMappingPmndrsProps } from './ToneMappingPmn
1414
import ChromaticAberrationPmndrs, { type ChromaticAberrationPmndrsProps } from './ChromaticAberrationPmndrs.vue'
1515
import HueSaturationPmndrs, { type HueSaturationPmndrsProps } from './HueSaturationPmndrs.vue'
1616
import ScanlinePmndrs, { type ScanlinePmndrsProps } from './ScanlinePmndrs.vue'
17+
import LensDistortionPmndrs, { type LensDistortionPmndrsProps } from './LensDistortionPmndrs.vue'
1718
import ShockWavePmndrs, { type ShockWavePmndrsProps } from './ShockWavePmndrs.vue'
1819
import DepthPickingPassPmndrs, { type DepthPickingPassPmndrsProps } from './DepthPickingPassPmndrs.vue'
1920
import TiltShiftPmndrs, { type TiltShiftPmndrsProps } from './TiltShiftPmndrs.vue'
@@ -37,6 +38,7 @@ export {
3738
ChromaticAberrationPmndrs,
3839
HueSaturationPmndrs,
3940
ScanlinePmndrs,
41+
LensDistortionPmndrs,
4042
ShockWavePmndrs,
4143
DepthPickingPassPmndrs,
4244
TiltShiftPmndrs,
@@ -56,6 +58,7 @@ export {
5658
ChromaticAberrationPmndrsProps,
5759
HueSaturationPmndrsProps,
5860
ScanlinePmndrsProps,
61+
LensDistortionPmndrsProps,
5962
ShockWavePmndrsProps,
6063
DepthPickingPassPmndrsProps,
6164
TiltShiftPmndrsProps,

0 commit comments

Comments
 (0)