Skip to content

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

PropDescriptionDefault
blendFunctionDefines how the effect blends with the original scene. See the BlendFunction options.BlendFunction.SRC
offsetThe color offset vector determining the intensity and direction of chromatic aberration.Vector2(0.01, 0.01)
radialModulationEnables radial modulation to vary the effect intensity based on distance from the center.false
modulationOffsetSpecifies 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