Chromatic Aberration
Simulate color fringing at object edges for a realistic lens effect.
The ChromaticAberration effect is part of the postprocessing package. It simulates the dispersion of light as it passes through a lens, creating subtle or dramatic color fringing effects at the edges of objects. This effect can enhance the visual appeal of your scene by adding a realistic lens effect or a stylized touch.
Usage
The <ChromaticAberrationPmndrs> component is easy to use and provides customizable options to suit different visual styles.
<script setup lang="ts">
import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
import { NoToneMapping, Vector2 } from 'three'
const gl = {
toneMapping: NoToneMapping,
}
const effectProps = {
offset: new Vector2(0.07, 0.07),
radialModulation: true,
modulationOffset: 0,
}
</script>
<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera :position="[5, 5, 5]" />
<!-- Your scene -->
<Suspense>
<EffectComposerPmndrs>
<ChromaticAberrationPmndrs 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 |
offset | The color offset vector determining the intensity and direction of chromatic aberration. | Vector2(0.01, 0.01) |
radialModulation | Enables radial modulation to vary the effect intensity based on distance from the center. | false |
modulationOffset | Specifies the modulation offset when radialModulation is enabled. | 0.15 |
The
modulationOffset property is functional only when radialModulation is enabled.Further Reading
For more details, see the ChromaticAberrationEffect documentation.