Skip to content

Commit 212312e

Browse files
damienmontastieralvarosabu
damienmontastier
and
alvarosabu
authored
feat: grid (#185)
* migrate to new tresleches, change devDependencies package.json file * add todo next commit * lint * init grid effect * modify doc * try floa false leches * refactor: improve BarrelBlurDemo component layout and styling * leches floatg * grid: modify doc and add float params for leches --------- Co-authored-by: alvarosabu <alvaro.saburido@gmail.com> Co-authored-by: Tino Koch <>
1 parent 826d832 commit 212312e

File tree

8 files changed

+238
-0
lines changed

8 files changed

+238
-0
lines changed

‎docs/.vitepress/config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@ export default defineConfig({
5858
{ text: 'Vignette', link: '/guide/pmndrs/vignette' },
5959
{ text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
6060
{ text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },
61+
{ text: 'Grid', link: '/guide/pmndrs/grid' },
6162
{ text: 'Kuwahara', link: '/guide/pmndrs/kuwahara' },
6263
{ text: 'Color Average', link: '/guide/pmndrs/color-average' },
6364
{ text: 'Depth of Field', link: '/guide/pmndrs/depth-of-field' },

‎docs/.vitepress/theme/components/pmdrs/GridDemo.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 { BlendFunction } from 'postprocessing'
7+
import { EffectComposerPmndrs, GridPmndrs } 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 { blendFunction, scale, lineWidth } = useControls({
18+
blendFunction: {
19+
options: Object.keys(BlendFunction).map(key => ({
20+
text: key,
21+
value: BlendFunction[key as keyof typeof BlendFunction],
22+
})),
23+
value: BlendFunction.OVERLAY,
24+
},
25+
scale: { value: 0.25, step: 0.01, min: 0.0, max: 2.0 },
26+
lineWidth: { value: 0.1, step: 0.01, max: 2.0 },
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 :blur=".5" preset="snow" />
50+
</Suspense>
51+
52+
<Suspense>
53+
<EffectComposerPmndrs>
54+
<GridPmndrs
55+
:blendFunction="Number(blendFunction)"
56+
:scale="scale"
57+
:lineWidth="lineWidth"
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
@@ -22,6 +22,7 @@ declare module 'vue' {
2222
FishEyeDemo: typeof import('./.vitepress/theme/components/pmdrs/FishEyeDemo.vue')['default']
2323
GlitchDemo: typeof import('./.vitepress/theme/components/pmdrs/GlitchDemo.vue')['default']
2424
GlitchThreeDemo: typeof import('./.vitepress/theme/components/three/GlitchThreeDemo.vue')['default']
25+
GridDemo: typeof import('./.vitepress/theme/components/pmdrs/GridDemo.vue')['default']
2526
HalftoneThreeDemo: typeof import('./.vitepress/theme/components/three/HalftoneThreeDemo.vue')['default']
2627
HueSaturation: typeof import('./.vitepress/theme/components/pmdrs/HueSaturationDemo.vue')['default']
2728
HueSaturationDemo: typeof import('./.vitepress/theme/components/pmdrs/HueSaturationDemo.vue')['default']

‎docs/guide/pmndrs/grid.md

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
# Grid
2+
3+
<DocsDemoGUI>
4+
<GridDemo />
5+
</DocsDemoGUI>
6+
7+
<details>
8+
<summary>Demo code</summary>
9+
10+
<<< @/.vitepress/theme/components/pmdrs/GridDemo.vue{0}
11+
</details>
12+
13+
The `GridEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html) package.
14+
It renders a grid that can be scaled or adjusted to achieve a variety of visual effects.
15+
16+
## Usage
17+
18+
The `<GridPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
19+
20+
```vue{2,9-13,25-29}
21+
<script setup lang="ts">
22+
import { EffectComposerPmndrs, GridPmndrs } from '@tresjs/post-processing/pmndrs'
23+
24+
const gl = {
25+
toneMapping: NoToneMapping,
26+
multisampling: 8,
27+
}
28+
29+
const effectProps = {
30+
blendFunction: BlendFunction.OVERLAY,
31+
scale: 0.25,
32+
lineWidth: 0.1,
33+
}
34+
</script>
35+
36+
<template>
37+
<TresCanvas v-bind="gl">
38+
<TresPerspectiveCamera />
39+
40+
<TresMesh :position="[0, .5, 0]">
41+
<TresBoxGeometry :args="[2, 2, 2]" />
42+
<TresMeshToonMaterial color="black" />
43+
</TresMesh>
44+
45+
<Suspense>
46+
<EffectComposerPmndrs>
47+
<GridPmndrs v-bind="effectProps" />
48+
</EffectComposerPmndrs>
49+
</Suspense>
50+
</TresCanvas>
51+
</template>
52+
```
53+
54+
## Props
55+
56+
| Prop | Description | Default |
57+
| ------------- | ------------------------------------------------------------------- | --------------------------- |
58+
| 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.OVERLAY` |
59+
| scale | The grid scale, which can be used to adjust the spacing effect. | `1.0` |
60+
| lineWidth | The width of the lines in the grid pattern. | `1.0` |
61+
62+
## Further Reading
63+
For more details, see the [GridEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html)

‎playground/src/pages/postprocessing/grid.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 { EffectComposerPmndrs, GridPmndrs } 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 { blendFunction, scale, lineWidth } = useControls({
18+
blendFunction: {
19+
options: Object.keys(BlendFunction).map(key => ({
20+
text: key,
21+
value: BlendFunction[key as keyof typeof BlendFunction],
22+
})),
23+
value: BlendFunction.OVERLAY,
24+
},
25+
scale: { value: 0.25, step: 0.01, min: 0.0, max: 2.0 },
26+
lineWidth: { value: 0.1, step: 0.01, max: 2.0 },
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 :blur=".5" preset="snow" />
54+
</Suspense>
55+
56+
<Suspense>
57+
<EffectComposerPmndrs>
58+
<GridPmndrs
59+
:blendFunction="Number(blendFunction)"
60+
:scale="scale"
61+
:lineWidth="lineWidth"
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
@@ -49,6 +49,7 @@ export const postProcessingRoutes = [
4949
makeRoute('Lens Distortion', '🌐', false),
5050
makeRoute('Sepia', '🌅', false),
5151
makeRoute('Scanline', '📽️', false),
52+
makeRoute('Grid', '#️⃣', false),
5253
makeRoute('Shock Wave', '🌊', false),
5354
makeRoute('Brightness Contrast', '🔆', false),
5455
makeRoute('Vignette', '🕶️', false),

‎src/core/pmndrs/GridPmndrs.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 { GridEffect } from 'postprocessing'
4+
import { makePropWatchers } from '../../util/prop'
5+
import { useEffectPmndrs } from './composables/useEffectPmndrs'
6+
7+
export interface GridPmndrsProps {
8+
/**
9+
* The blend function.
10+
*/
11+
blendFunction?: BlendFunction
12+
13+
/**
14+
* The scale.
15+
*/
16+
scale?: number
17+
18+
/**
19+
* The line width.
20+
*/
21+
lineWidth?: number
22+
}
23+
24+
const props = defineProps<GridPmndrsProps>()
25+
26+
const { pass, effect } = useEffectPmndrs(() => new GridEffect(props), props)
27+
28+
defineExpose({ pass, effect })
29+
30+
makePropWatchers(
31+
[
32+
[() => props.blendFunction, 'blendMode.blendFunction'],
33+
[() => props.scale, 'scale'],
34+
[() => props.lineWidth, 'lineWidth'],
35+
],
36+
effect,
37+
() => new GridEffect(),
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 GridPmndrs, { type GridPmndrsProps } from './GridPmndrs.vue'
2627
import FishEyePmndrs, { type FishEyePmndrsProps } from './FishEyePmndrs.vue'
2728
import BrightnessContrastPmndrs, { type BrightnessContrastPmndrsProps } from './BrightnessContrastPmndrs.vue'
2829

@@ -50,6 +51,7 @@ export {
5051
SepiaPmndrs,
5152
LinocutPmndrs,
5253
DepthPickingPassPmndrs,
54+
GridPmndrs,
5355
FishEyePmndrs,
5456
BrightnessContrastPmndrs,
5557
BloomPmndrsProps,
@@ -74,6 +76,7 @@ export {
7476
SepiaPmndrsProps,
7577
LinocutPmndrsProps,
7678
DepthPickingPassPmndrsProps,
79+
GridPmndrsProps,
7780
FishEyePmndrsProps,
7881
BrightnessContrastPmndrsProps,
7982
}

0 commit comments

Comments
 (0)