SMAA
Subpixel Morphological Antialiasing — a post-processing antialiasing technique using look-up tables for accurate edge detection.
The SMAAEffect effect is part of the postprocessing package. SMAA (Subpixel Morphological Antialiasing) is a post-processing antialiasing technique that uses look-up tables to detect edges accurately, preserving texture details while minimizing false positives.
SMAA generally provides superior visual quality compared to FXAA, though it is slightly less performant. Note that SMAA is distinct from MSAA.
Usage
The <SMAAPmndrs> component is easy to use and provides customizable options to suit different visual styles.
When using the
<EffectComposerPmndrs> pipeline, enabling native antialiasing with the antialias prop on <TresCanvas> is unnecessary.<script setup lang="ts">
import { EffectComposerPmndrs, SMAAPmndrs } from '@tresjs/post-processing'
import type { SMAAPreset } from 'postprocessing'
const gl = {
toneMapping: NoToneMapping,
antialias: false,
}
// It is not required to add `antialias: false` for
// the <TresCanvas> context, as it is automatically
// disabled when using `<EffectComposerPmndrs>`.
const effectProps = {
preset: SMAAPreset.HIGH,
}
</script>
<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera />
<!-- Your scene -->
<Suspense>
<EffectComposerPmndrs>
<SMAAPmndrs v-bind="effectProps" />
</EffectComposerPmndrs>
</Suspense>
</TresCanvas>
</template>
Props
| Prop | Description | Default |
|---|---|---|
blendFunction | Defines how the effect blends with the original scene. See the BlendFunction options. | BlendFunction.SRC |
opacity | The opacity of the effect. | 1 |
preset | Define the quality and performance trade-offs. See the SMAAPreset options. | SMAAPreset.MEDIUM |
edgeDetectionMode | Define the edge detection modes. See the EdgeDetectionMode options. | EdgeDetectionMode.COLOR |
predicationMode | Define the predication modes. See the PredicationMode options. | PredicationMode.DISABLED |
debug | Define the debug mode. Options: 0 (OFF), 1 (EDGES), 2 (WEIGHTS). | 0 |
Further Reading
For more details, see the SMAAEffect documentation.