Chromatic Aberration

Demo code

<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.

<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]" />

    <!-- 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

INFO

The modulationOffset property is functional only when radialModulation is enabled.

Further Reading

For more details, see the ChromaticAberrationEffect documentation