Chromatic Aberration
Demo code
vue
<script setup lang="ts">
import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
import { TresCanvas } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { NoToneMapping, Vector2 } from 'three'
import { shallowRef, watchEffect } from 'vue'
import { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
import '@tresjs/leches/styles'
// TODO: Adapt watchEffect to useControls for visibility of modulationOffset
const gl = {
clearColor: '#ffffff',
toneMapping: NoToneMapping,
}
const glComposer = {
multisampling: 4,
}
const chromaticAberrationRef = shallowRef(null)
const { offsetX, offsetY, radialModulation, modulationOffset } = useControls({
offsetX: { value: 0.070, step: 0.001, max: 0.5 },
offsetY: { value: 0.070, step: 0.001, max: 0.5 },
radialModulation: true,
modulationOffset: { value: 0, step: 0.01 },
})
watchEffect(() => {
// modulationOffset.value.visible = radialModulation.value.value
})
</script>
<template>
<div class="aspect-16/9">
<TresCanvas
v-bind="gl"
>
<TresPerspectiveCamera
:position="[5, 5, 5]"
:look-at="[0, 0, 0]"
/>
<OrbitControls auto-rotate />
<template
v-for="i in 4"
:key="i"
>
<TresMesh
:position="[((i - 1) - (4 - 1) / 2) * 1.5, 0, 0]"
>
<TresBoxGeometry
:width="4"
:height="4"
:depth="4"
/>
<TresMeshStandardMaterial color="#1C1C1E" />
</TresMesh>
</template>
<TresAmbientLight color="#ffffff" />
<TresDirectionalLight />
<ContactShadows
:opacity="1"
:position-y="-.5"
:scale="20"
:blur=".85"
/>
<Suspense>
<Environment :intensity="2" :blur="0" preset="snow" />
</Suspense>
<Suspense>
<EffectComposerPmndrs v-bind="glComposer">
<ChromaticAberrationPmndrs ref="chromaticAberrationRef" :offset="new Vector2(offsetX, offsetY)" :radial-modulation="radialModulation" :modulation-offset="modulationOffset" />
</EffectComposerPmndrs>
</Suspense>
</TresCanvas>
</div>
<TresLeches :float="false" />
</template>
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.
vue
<script setup lang="ts">
import { EffectComposerPmndrs, ChromaticAberrationPmndrs } from '@tresjs/post-processing'
import { Vector2 } from 'three'
import { NoToneMapping } 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]" />
<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 |
INFO
The modulationOffset
property is functional only when radialModulation
is enabled.
Further Reading
For more details, see the ChromaticAberration documentation