Skip to content

Commit 08f114f

Browse files
author
Tino Koch
committed
Merge remote-tracking branch 'origin/main' into feat/texture-effect
2 parents 3ae45bb + c5dba7c commit 08f114f

File tree

10 files changed

+387
-7
lines changed

10 files changed

+387
-7
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ export default defineConfig({
6262
{ text: 'Lens Distortion', link: '/guide/pmndrs/lens-distortion' },
6363
{ text: 'Grid', link: '/guide/pmndrs/grid' },
6464
{ text: 'Texture', link: '/guide/pmndrs/texture' },
65+
{ text: 'ASCII', link: '/guide/pmndrs/ascii' },
6566
{ text: 'FXAA', link: '/guide/pmndrs/fxaa' },
6667
{ text: 'SMAA', link: '/guide/pmndrs/smaa' },
6768
{ 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)

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
},
5959
"dependencies": {
6060
"@vueuse/core": "^12.5.0",
61-
"postprocessing": "^6.36.6"
61+
"postprocessing": "^6.37.2"
6262
},
6363
"devDependencies": {
6464
"@release-it/conventional-changelog": "^10.0.0",

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
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 { 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 { enabled, blendFunction, opacity, cellSize, inverted, color, useSceneColor, characters, font, fontSize, size, cellCount } = useControls({
17+
enabled: true,
18+
blendFunction: {
19+
options: Object.keys(BlendFunction).map(key => ({
20+
text: key,
21+
value: BlendFunction[key as keyof typeof BlendFunction],
22+
})),
23+
value: BlendFunction.NORMAL,
24+
},
25+
opacity: { value: 1, step: 0.1, min: 0.0, max: 1.0 },
26+
cellSize: { value: 12, step: 1, min: 2, max: 64 },
27+
useSceneColor: false,
28+
color: '#ffffff',
29+
inverted: false,
30+
characters: { value: '@#8&$%*o!;.' },
31+
font: { value: 'Arial' },
32+
fontSize: { value: 54, step: 1, min: 10, max: 100 },
33+
size: { value: 1024, step: 128, min: 256, max: 2048, label: 'textureSize' },
34+
cellCount: { value: 16, step: 1, min: 4, max: 64 },
35+
})
36+
</script>
37+
38+
<template>
39+
<TresLeches />
40+
41+
<TresCanvas
42+
v-bind="gl"
43+
>
44+
<TresPerspectiveCamera
45+
:position="[5, 6.5, 7.5]"
46+
:look-at="[0, 0, 0]"
47+
/>
48+
<OrbitControls auto-rotate />
49+
50+
<TresMesh :position="[0, .5, 0]">
51+
<TresBoxGeometry :args="[2, 2, 2]" />
52+
<TresMeshPhysicalMaterial color="white" />
53+
</TresMesh>
54+
55+
<Suspense>
56+
<Environment background preset="dawn" />
57+
</Suspense>
58+
59+
<Suspense>
60+
<EffectComposerPmndrs>
61+
<ASCIIPmndrs
62+
:blendFunction="enabled ? Number(blendFunction) : Number(BlendFunction.SKIP)"
63+
:opacity="opacity"
64+
:cellSize="cellSize"
65+
:inverted="inverted"
66+
:color="color"
67+
:useSceneColor="useSceneColor"
68+
:asciiTexture="{
69+
characters,
70+
font,
71+
fontSize,
72+
size,
73+
cellCount,
74+
}"
75+
/>
76+
</EffectComposerPmndrs>
77+
</Suspense>
78+
</TresCanvas>
79+
</template>

‎playground/src/router.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ export const postProcessingRoutes = [
5353
makeRoute('Color Depth', '🔳', false),
5454
makeRoute('Grid', '#️⃣', false),
5555
makeRoute('Texture', '🧩', false),
56+
makeRoute('ASCII', '🔡', false),
5657
makeRoute('SMAA', '📐', false),
5758
makeRoute('FXAA', '📐', false),
5859
makeRoute('Shock Wave', '🌊', false),

‎pnpm-lock.yaml‎

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)