Skip to content

Commit e033655

Browse files
damienmontastierdamienmontastier
committed
add doc and modify source effect
1 parent aa6f12c commit e033655

File tree

5 files changed

+186
-3
lines changed

5 files changed

+186
-3
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export default defineConfig({
6161
{ text: 'Hue & Saturation', link: '/guide/pmndrs/hue-saturation' },
6262
{ text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },
6363
{ text: 'Grid', link: '/guide/pmndrs/grid' },
64+
{ text: 'ASCII', link: '/guide/pmndrs/ascii' },
6465
{ text: 'FXAA', link: '/guide/pmndrs/fxaa' },
6566
{ text: 'SMAA', link: '/guide/pmndrs/smaa' },
6667
{ text: 'Kuwahara', link: '/guide/pmndrs/kuwahara' },

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
<script setup lang="ts">
2+
import { Environment, Levioso, 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 { ASCIIPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
8+
9+
import '@tresjs/leches/styles'
10+
11+
const gl = {
12+
clearColor: '#ffffff',
13+
toneMapping: NoToneMapping,
14+
}
15+
16+
const glComposer = {
17+
multisampling: 4,
18+
}
19+
20+
const leviosoProps = {
21+
speed: 2,
22+
rotationFactor: 2,
23+
range: [-1, 1] as [number, number],
24+
}
25+
26+
const { size: textureSize, characters, font, fontSize, cellCount, enabled, blendFunction, opacity, cellSize, inverted, color, useSceneColor } = useControls({
27+
enabled: true,
28+
cellSize: { value: 10, step: 1, min: 2, max: 64 },
29+
useSceneColor: false,
30+
color: '#ffffff',
31+
inverted: false,
32+
characters: { value: ' .,:-~+=*≡TRESJCIENTOSLECHESPOSTPROCESSING3D#░▒▓█■▲◼◾' },
33+
font: { value: 'Arial' },
34+
fontSize: { value: 44, step: 1, min: 10, max: 100 },
35+
size: { value: 1024, step: 128, min: 256, max: 2048, label: 'textureSize' },
36+
cellCount: { value: 16, step: 1, min: 4, max: 64 },
37+
opacity: { value: 1, step: 0.1, min: 0.0, max: 1.0 },
38+
blendFunction: {
39+
options: Object.keys(BlendFunction).map(key => ({
40+
text: key,
41+
value: BlendFunction[key as keyof typeof BlendFunction],
42+
})),
43+
value: BlendFunction.LINEAR_BURN,
44+
},
45+
})
46+
</script>
47+
48+
<template>
49+
<div class="aspect-16/9">
50+
<TresCanvas
51+
v-bind="gl"
52+
>
53+
<TresPerspectiveCamera :position="[5, 3, 7]" />
54+
<OrbitControls auto-rotate />
55+
56+
<Levioso v-bind="leviosoProps">
57+
<TresMesh :position="[-2, .5, 0]">
58+
<TresBoxGeometry :args="[2, 2, 2]" />
59+
<TresMeshPhysicalMaterial color="white" />
60+
</TresMesh>
61+
</Levioso>
62+
63+
<Levioso v-bind="leviosoProps">
64+
<TresMesh :position="[3, .5, 0]">
65+
<TresSphereGeometry :args="[1.5, 32, 32]" />
66+
<TresMeshPhysicalMaterial color="white" />
67+
</TresMesh>
68+
</Levioso>
69+
70+
<Suspense>
71+
<Environment background :blur="0.2" preset="snow" />
72+
</Suspense>
73+
74+
<Suspense>
75+
<EffectComposerPmndrs v-bind="glComposer">
76+
<ASCIIPmndrs
77+
:blendFunction="enabled ? Number(blendFunction) : Number(BlendFunction.SKIP)"
78+
:opacity="opacity"
79+
:cellSize="cellSize"
80+
:inverted="inverted"
81+
:color="color"
82+
:useSceneColor="useSceneColor"
83+
:asciiTexture="{
84+
characters,
85+
font,
86+
fontSize,
87+
size: textureSize,
88+
cellCount,
89+
}"
90+
/>
91+
</EffectComposerPmndrs>
92+
</Suspense>
93+
</TresCanvas>
94+
</div>
95+
<TresLeches :float="false" />
96+
</template>

‎docs/components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export {}
77
/* prettier-ignore */
88
declare module 'vue' {
99
export interface GlobalComponents {
10+
ASCIIDemo: typeof import('./.vitepress/theme/components/pmdrs/ASCIIDemo.vue')['default']
1011
BarrelBlurDemo: typeof import('./.vitepress/theme/components/pmdrs/BarrelBlurDemo.vue')['default']
1112
BlenderCube: typeof import('./.vitepress/theme/components/BlenderCube.vue')['default']
1213
BloomDemo: typeof import('./.vitepress/theme/components/pmdrs/BloomDemo.vue')['default']

‎docs/guide/pmndrs/ascii.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
# ASCII
2+
3+
<DocsDemoGUI>
4+
<ASCIIDemo />
5+
</DocsDemoGUI>
6+
7+
<details>
8+
<summary>Demo code</summary>
9+
10+
<<< @/.vitepress/theme/components/pmdrs/ASCIIDemo.vue{0}
11+
</details>
12+
13+
The `ASCIIEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html) package.
14+
This effect transforms the visual output into a grid of ASCII characters, offering a unique and artistic way to display 3D content. The ASCII characters used can be customized, allowing for a wide range of creative possibilities.
15+
16+
## Usage
17+
18+
The `<ASCIIPmndrs>` component is straightforward to integrate and offers a variety of customizable properties, allowing you to adapt it to diverse artistic and visual requirements.
19+
20+
```vue{2,12-17,29-33}
21+
<script setup lang="ts">
22+
import { EffectComposerPmndrs, ASCIIPmndrs } from '@tresjs/post-processing/pmndrs'
23+
24+
const gl = {
25+
toneMapping: NoToneMapping,
26+
}
27+
28+
const glComposer = {
29+
multisampling: 4,
30+
}
31+
32+
const effectProps = {
33+
blendFunction: BlendFunction.NORMAL,
34+
asciiTexture: {
35+
characters: ' .,:-~+=*≡HELLOWORLD#░▒▓█■▲◼◾',
36+
}
37+
}
38+
</script>
39+
40+
<template>
41+
<TresCanvas v-bind="gl">
42+
<TresPerspectiveCamera />
43+
44+
<TresMesh :position="[0, .5, 0]">
45+
<TresBoxGeometry :args="[2, 2, 2]" />
46+
<TresMeshToonMaterial color="black" />
47+
</TresMesh>
48+
49+
<Suspense>
50+
<EffectComposerPmndrs v-bind="glComposer">
51+
<ASCIIPmndrs v-bind="effectProps" />
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+
| opacity | The opacity of the effect. | `1.0` |
64+
| cellSize | The size of the ASCII grid cells. | `16` |
65+
| inverted | Controls whether the effect should be inverted. | `false` |
66+
| color | The color of the effect. Can be a [`Color`](https://threejs.org/docs/#api/en/math/Color), `string`, `number`, or `null`. If set to `null`, the colors of the scene will be used. | `null` |
67+
| useSceneColor | Controls whether the effect should use the scene color. If `true`, overrides the `color` prop. | `false` |
68+
| asciiTexture | Options for creating an ASCIITexture instance. | See the [`ASCIITexture`](https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html) documentation. |
69+
70+
## Further Reading
71+
For more details, see the [ASCIIEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html)

‎src/core/pmndrs/ASCIIPmndrs.vue‎

Lines changed: 17 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@ import { useEffectPmndrs } from './composables/useEffectPmndrs'
66
import { onUnmounted, watch } from 'vue'
77
import type { Color } from 'three'
88
9+
type ASCIITextureOptions = ConstructorParameters<typeof ASCIITexture>[0]
10+
911
export interface ASCIIPmndrsProps {
1012
/**
1113
* The blend function.
@@ -33,17 +35,19 @@ export interface ASCIIPmndrsProps {
3335
*/
3436
useSceneColor?: boolean
3537
/**
36-
* The ASCII texture to use or a custom configuration for it.
38+
* The ASCII texture options to use for creating an ASCIITexture instance.
3739
* https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html
3840
*/
39-
asciiTexture?: ASCIITexture
41+
asciiTexture?: ASCIITextureOptions
4042
}
4143
4244
const props = defineProps<ASCIIPmndrsProps>()
4345
4446
const plainEffect = new ASCIIEffect()
4547
46-
const { pass, effect } = useEffectPmndrs(() => new ASCIIEffect(), props)
48+
const { asciiTexture, ...asciiEffectProps } = props
49+
50+
const { pass, effect } = useEffectPmndrs(() => new ASCIIEffect(asciiEffectProps), props)
4751
4852
defineExpose({ pass, effect })
4953
@@ -111,4 +115,14 @@ watch(
111115
},
112116
{ immediate: true },
113117
)
118+
119+
watch(
120+
[effect, () => props.blendFunction],
121+
() => {
122+
if (!effect.value) { return }
123+
124+
effect.value.blendMode.blendFunction = props.blendFunction ? Number(props.blendFunction) : Number(plainEffect.blendMode.blendFunction)
125+
},
126+
{ immediate: true },
127+
)
114128
</script>

0 commit comments

Comments
 (0)