Skip to content

Commit ba3f53e

Browse files
damienmontastierdamienmontastier
committed
modify doc, examples
1 parent 526f8d0 commit ba3f53e

File tree

4 files changed

+194
-54
lines changed

4 files changed

+194
-54
lines changed

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

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,38 @@ const gl = {
1616
toneMapping: NoToneMapping,
1717
}
1818
19-
const { autoRotateSpeed, autoRotate, blendFunction, wireframe, boxColor } = useControls({
19+
const { autoRotateSpeed, blendFunction, wireframe, boxColor, opacity, samples, minEdgeThreshold, maxEdgeThreshold, subpixelQuality } = useControls({
2020
blendFunction: {
2121
options: Object.keys(BlendFunction).map(key => ({
2222
text: key,
2323
value: BlendFunction[key as keyof typeof BlendFunction],
2424
})),
2525
value: BlendFunction.SRC,
2626
},
27-
autoRotate: true,
27+
samples: {
28+
value: 12,
29+
min: 0,
30+
max: 32,
31+
step: 1,
32+
},
33+
minEdgeThreshold: {
34+
value: 0.0312,
35+
min: 0,
36+
max: 1,
37+
step: 0.001,
38+
},
39+
maxEdgeThreshold: {
40+
value: 0.125,
41+
min: 0,
42+
max: 1,
43+
step: 0.001,
44+
},
45+
subpixelQuality: {
46+
value: 0.75,
47+
min: 0,
48+
max: 1,
49+
step: 0.01,
50+
},
2851
autoRotateSpeed: {
2952
value: 1,
3053
min: 0,
@@ -33,6 +56,12 @@ const { autoRotateSpeed, autoRotate, blendFunction, wireframe, boxColor } = useC
3356
},
3457
boxColor: '#ffffff',
3558
wireframe: false,
59+
opacity: {
60+
value: 1,
61+
min: 0,
62+
max: 1,
63+
step: 0.01,
64+
},
3665
})
3766
3867
const wrapperRef = ref<HTMLElement | undefined>(undefined)
@@ -54,8 +83,8 @@ const onChange = (e: { object: PerspectiveCamera }) => {
5483
v-bind="gl"
5584
class="doc-fxaa-canvas-left"
5685
>
57-
<TresPerspectiveCamera :position="[0, 2.5, 3]" />
58-
<OrbitControls :domElement="wrapperRef" :auto-rotate="autoRotate" :auto-rotate-speed="autoRotateSpeed" :target="[0, 0.25, 0]" @change="onChange" />
86+
<TresPerspectiveCamera :position="[0, 2, 3.5]" />
87+
<OrbitControls :domElement="wrapperRef" auto-rotate :auto-rotate-speed="autoRotateSpeed" :target="[0, 0.25, 0]" @change="onChange" />
5988

6089
<TresMesh :position="[0, .5, 0]">
6190
<TresBoxGeometry :args="[2, 2, 2]" />
@@ -69,7 +98,7 @@ const onChange = (e: { object: PerspectiveCamera }) => {
6998
v-bind="gl"
7099
class="doc-fxaa-canvas-right"
71100
>
72-
<TresPerspectiveCamera ref="cameraRef" :position="[0, 2.5, 3]" />
101+
<TresPerspectiveCamera ref="cameraRef" :position="[0, 2, 3.5]" />
73102

74103
<TresMesh :position="[0, .5, 0]">
75104
<TresBoxGeometry :args="[2, 2, 2]" />
@@ -80,13 +109,18 @@ const onChange = (e: { object: PerspectiveCamera }) => {
80109
<EffectComposerPmndrs>
81110
<FXAAPmndrs
82111
:blendFunction="Number(blendFunction)"
112+
:opacity="opacity"
113+
:samples="samples"
114+
:maxEdgeThreshold="maxEdgeThreshold"
115+
:minEdgeThreshold="minEdgeThreshold"
116+
:subpixelQuality="subpixelQuality"
83117
/>
84118
</EffectComposerPmndrs>
85119
</Suspense>
86120
</TresCanvas>
87121

88-
<p class="doc-fxaa-info doc-fxaa-info-left text-l font-semibold">⬅️ No FXAA</p>
89-
<p class="doc-fxaa-info doc-fxaa-info-right text-l font-semibold">With FXAA ➡️</p>
122+
<p class="doc-fxaa-info doc-fxaa-info-left text-xs font-semibold">⬅️ No FXAA</p>
123+
<p class="doc-fxaa-info doc-fxaa-info-right text-xs font-semibold">With FXAA ➡️</p>
90124
</div>
91125

92126
<TresLeches :float="false" />
@@ -124,7 +158,7 @@ const onChange = (e: { object: PerspectiveCamera }) => {
124158
.doc-fxaa-info {
125159
position: absolute;
126160
bottom: 0;
127-
padding: 0.65rem 0.85rem;
161+
padding: 0.45rem 0.75rem;
128162
margin: 0;
129163
text-align: center;
130164
color: #fff;

‎docs/guide/pmndrs/fxaa.md‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -20,23 +20,29 @@ FXAA offers a performance-optimized anti-aliasing solution that smooths jagged e
2020
</span>
2121
</a>
2222

23-
:::info
24-
When using the `<EffectComposerPmndrs>` pipeline, enabling native antialiasing with the [`antialias`](https://docs.tresjs.org/api/tres-canvas.html#props) props on `<TresCanvas>` is unnecessary.
25-
:::
26-
2723
## Usage
2824

2925
The `<FXAAPmndrs>` component is easy to use and provides customizable options to suit different visual styles.
3026

31-
```vue{2,17-21}
27+
:::info
28+
When using the `<EffectComposerPmndrs>` pipeline, enabling native antialiasing with the [`antialias`](https://docs.tresjs.org/api/tres-canvas.html#props) props on `<TresCanvas>` is unnecessary.
29+
:::
30+
31+
```vue{2,12-14,23-27}
3232
<script setup lang="ts">
3333
import { EffectComposerPmndrs, FXAAPmndrs } from '@tresjs/post-processing/pmndrs'
3434
3535
const gl = {
36-
antialias: false,
3736
toneMapping: NoToneMapping,
37+
antialias: false,
3838
}
39+
// It is not required to add `antialias: false` for
40+
// the <TresCanvas> context, as it is automatically
41+
// disabled when using `<EffectComposerPmndrs>`.
3942
43+
const effectProps = {
44+
samples: 24
45+
}
4046
</script>
4147
4248
<template>
@@ -47,7 +53,7 @@ const gl = {
4753
4854
<Suspense>
4955
<EffectComposerPmndrs>
50-
<FXAAPmndrs />
56+
<FXAAPmndrs v-bind="effectProps" />
5157
</EffectComposerPmndrs>
5258
</Suspense>
5359
</TresCanvas>
@@ -59,6 +65,11 @@ const gl = {
5965
| Prop | Description | Default |
6066
| ------------- | ------------------------------------------------------------------- | --------------------------- |
6167
| 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` |
68+
| opacity | The opacity of the effect. | `1` |
69+
| samples | The maximum amount of edge detection samples. | `12` |
70+
| minEdgeThreshold | The minimum edge detection threshold. <br> Range: `[0.0, 1.0]`. | `0.0312` |
71+
| maxEdgeThreshold | The maximum edge detection threshold. <br> Range: `[0.0, 1.0]`. | `0.125` |
72+
| subpixelQuality | The subpixel blend quality. Range: `[0.0, 1.0]`. | `0.75` |
6273

6374
## Further Reading
6475
For more details, see the [FXAAEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html)

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

Lines changed: 92 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -16,20 +16,55 @@ const gl = {
1616
toneMapping: NoToneMapping,
1717
}
1818
19+
const wrapperRef = ref<HTMLElement | undefined>(undefined)
1920
const cameraRef = ref<PerspectiveCamera | null>(null)
2021
21-
const { blendFunction } = useControls({
22+
const { blendFunction, autoRotateSpeed, opacity, samples, minEdgeThreshold, maxEdgeThreshold, subpixelQuality } = useControls({
2223
blendFunction: {
2324
options: Object.keys(BlendFunction).map(key => ({
2425
text: key,
2526
value: BlendFunction[key as keyof typeof BlendFunction],
2627
})),
2728
value: BlendFunction.SRC,
2829
},
30+
autoRotateSpeed: {
31+
value: 0.5,
32+
min: 0,
33+
max: 10,
34+
step: 0.1,
35+
},
36+
opacity: {
37+
value: 1,
38+
min: 0,
39+
max: 1,
40+
step: 0.01,
41+
},
42+
samples: {
43+
value: 12,
44+
min: 0,
45+
max: 32,
46+
step: 1,
47+
},
48+
minEdgeThreshold: {
49+
value: 0.0312,
50+
min: 0,
51+
max: 1,
52+
step: 0.001,
53+
},
54+
maxEdgeThreshold: {
55+
value: 0.125,
56+
min: 0,
57+
max: 1,
58+
step: 0.001,
59+
},
60+
subpixelQuality: {
61+
value: 0.75,
62+
min: 0,
63+
max: 1,
64+
step: 0.01,
65+
},
2966
})
3067
31-
const documentEl = document.documentElement
32-
3368
const onChange = (e: { object: PerspectiveCamera }) => {
3469
if (!cameraRef.value) { return }
3570
@@ -43,42 +78,57 @@ const onChange = (e: { object: PerspectiveCamera }) => {
4378
<template>
4479
<TresLeches />
4580

46-
<TresCanvas
47-
v-bind="gl"
48-
class="playground-fxaa-canvas-left"
49-
window-size
50-
>
51-
<TresPerspectiveCamera :position="[0, 2.5, 3.5]" />
52-
<OrbitControls :domElement="documentEl" auto-rotate :auto-rotate-speed=".35" :target="[0, 0.25, 0]" @change="onChange" />
53-
54-
<TresMesh :position="[0, 0.5, 0]">
55-
<TresBoxGeometry :args="[2, 2, 2]" />
56-
<TresMeshBasicMaterial color="#ffffff" />
57-
</TresMesh>
58-
</TresCanvas>
59-
60-
<TresCanvas
61-
v-bind="gl"
62-
class="playground-fxaa-canvas-right"
63-
window-size
64-
>
65-
<TresPerspectiveCamera ref="cameraRef" :position="[0, 2.5, 3.5]" />
66-
67-
<TresMesh :position="[0, 0.5, 0]">
68-
<TresBoxGeometry :args="[2, 2, 2]" />
69-
<TresMeshBasicMaterial color="#ffffff" />
70-
</TresMesh>
71-
72-
<Suspense>
73-
<EffectComposerPmndrs :multisampling="0">
74-
<FXAAPmndrs :blendFunction="Number(blendFunction)" />
75-
</EffectComposerPmndrs>
76-
</Suspense>
77-
</TresCanvas>
78-
79-
<div class="playground-fxaa-divider"></div>
80-
81-
<p class="playground-fxaa-infos text-xl absolute w-[100%]">Left: No FXAA — Right: FXAA</p>
81+
<div ref="wrapperRef" class="h-[100%] w-[100%] relative">
82+
<p class="playground-fxaa-infos text-xl absolute">Left: No FXAA — Right: FXAA</p>
83+
84+
<TresCanvas
85+
v-bind="gl"
86+
class="playground-fxaa-canvas-left"
87+
window-size
88+
>
89+
<TresPerspectiveCamera :position="[0, 2.5, 3.5]" />
90+
<OrbitControls
91+
auto-rotate
92+
:domElement="wrapperRef"
93+
:auto-rotate-speed="autoRotateSpeed"
94+
:target="[0, 0.25, 0]"
95+
@change="onChange"
96+
/>
97+
98+
<TresMesh :position="[0, 0.5, 0]">
99+
<TresBoxGeometry :args="[2, 2, 2]" />
100+
<TresMeshBasicMaterial color="#ffffff" />
101+
</TresMesh>
102+
</TresCanvas>
103+
104+
<TresCanvas
105+
v-bind="gl"
106+
class="playground-fxaa-canvas-right"
107+
window-size
108+
>
109+
<TresPerspectiveCamera ref="cameraRef" :position="[0, 2.5, 3.5]" />
110+
111+
<TresMesh :position="[0, 0.5, 0]">
112+
<TresBoxGeometry :args="[2, 2, 2]" />
113+
<TresMeshBasicMaterial color="#ffffff" />
114+
</TresMesh>
115+
116+
<Suspense>
117+
<EffectComposerPmndrs :multisampling="0">
118+
<FXAAPmndrs
119+
:blendFunction="Number(blendFunction)"
120+
:opacity="opacity"
121+
:samples="samples"
122+
:maxEdgeThreshold="maxEdgeThreshold"
123+
:minEdgeThreshold="minEdgeThreshold"
124+
:subpixelQuality="subpixelQuality"
125+
/>
126+
</EffectComposerPmndrs>
127+
</Suspense>
128+
</TresCanvas>
129+
130+
<div class="playground-fxaa-divider"></div>
131+
</div>
82132
</template>
83133

84134
<style scoped>
@@ -112,10 +162,13 @@ const onChange = (e: { object: PerspectiveCamera }) => {
112162
113163
.playground-fxaa-infos {
114164
margin: 0 auto;
165+
width: calc(100% - 2rem);
115166
padding: 1rem;
116167
text-align: center;
117168
color: #fff;
118169
background: rgba(0, 0, 0, 0.65);
119170
z-index: 5;
171+
top: 0;
172+
left: 0;
120173
}
121174
</style>

‎src/core/pmndrs/FXAAPmndrs.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,33 @@ import type { BlendFunction } from 'postprocessing'
33
import { FXAAEffect } from 'postprocessing'
44
import { makePropWatchers } from '../../util/prop'
55
import { useEffectPmndrs } from './composables/useEffectPmndrs'
6+
import { watch } from 'vue'
67
78
export interface FXAAPmndrsProps {
89
/**
910
* The blend function.
1011
*/
1112
blendFunction?: BlendFunction
13+
/**
14+
* The opacity of the effect.
15+
*/
16+
opacity?: number
17+
/**
18+
* The maximum amount of edge detection samples.
19+
*/
20+
samples?: number
21+
/**
22+
* The minimum edge detection threshold. Range is [0.0, 1.0].
23+
*/
24+
minEdgeThreshold?: number
25+
/**
26+
* The maximum edge detection threshold. Range is [0.0, 1.0].
27+
*/
28+
maxEdgeThreshold?: number
29+
/**
30+
* The subpixel blend quality. Range is [0.0, 1.0].
31+
*/
32+
subpixelQuality?: number
1233
}
1334
1435
const props = defineProps<FXAAPmndrsProps>()
@@ -20,8 +41,29 @@ defineExpose({ pass, effect })
2041
makePropWatchers(
2142
[
2243
[() => props.blendFunction, 'blendMode.blendFunction'],
44+
[() => props.samples, 'samples'],
45+
[() => props.minEdgeThreshold, 'minEdgeThreshold'],
46+
[() => props.maxEdgeThreshold, 'maxEdgeThreshold'],
47+
[() => props.subpixelQuality, 'subpixelQuality'],
2348
],
2449
effect,
2550
() => new FXAAEffect(),
2651
)
52+
53+
watch(
54+
[effect, () => props.opacity],
55+
() => {
56+
if (!effect.value) { return }
57+
58+
if (props.opacity !== undefined) {
59+
effect.value?.blendMode.setOpacity(props.opacity)
60+
}
61+
else {
62+
const plainEffect = new FXAAEffect()
63+
effect.value?.blendMode.setOpacity(plainEffect.blendMode.getOpacity())
64+
plainEffect.dispose()
65+
}
66+
},
67+
{ immediate: true },
68+
)
2769
</script>

0 commit comments

Comments
 (0)