Lens Distortion

Demo code

<script setup lang="ts">
import { Environment, OrbitControls } from '@tresjs/cientos'
import { TresCanvas, useTexture } from '@tresjs/core'
import { TresLeches, useControls } from '@tresjs/leches'
import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
import { BackSide, NoToneMapping, SRGBColorSpace, Vector2 } from 'three'

import '@tresjs/leches/styles'

const gl = {
  toneMapping: NoToneMapping,
}

const glComposer = {
  multisampling: 4,
}

const { distortion, principalPoint, focalLength, skew } = useControls({
  distortion: { value: new Vector2(0.5, 0.5), min: 0, max: 1, step: 0.001 },
  principalPoint: { value: new Vector2(0.0, 0.0), min: 0, max: 1, step: 0.001 },
  focalLength: { value: new Vector2(0.5, 0.5), min: 0, max: 2, step: 0.001 },
  skew: { value: 0, min: -1, max: 1, step: 0.001 },
})

const pbrTexture = await useTexture({
  map: '/lens-distortion/room-map.png',
  normalMap: '/lens-distortion/room-normal.png',
})

pbrTexture.map.colorSpace = SRGBColorSpace
</script>

<template>
  <div class="aspect-16/9">
    <TresCanvas
      v-bind="gl"
    >
      <TresPerspectiveCamera
        :position="[-2, 1, 5]"
      />
      <OrbitControls auto-rotate />

      <TresMesh :position="[0, 2, 0]">
        <TresBoxGeometry :args="[8, 8, 8]" />
        <TresMeshStandardMaterial :side="BackSide" :map="pbrTexture.map" :normal-map="pbrTexture.normalMap" />
      </TresMesh>

      <TresMesh :position="[0, 0, 0]">
        <TresBoxGeometry :args="[1.65, 1.65, 1.65]" />
        <TresMeshNormalMaterial />
      </TresMesh>

      <TresAmbientLight :intensity="2" />

      <Suspense>
        <Environment background :blur=".25" preset="snow" />
      </Suspense>

      <Suspense>
        <EffectComposerPmndrs v-bind="glComposer">
          <LensDistortionPmndrs
            :distortion="distortion"
            :principalPoint="principalPoint"
            :focalLength="focalLength"
            :skew="skew"
          />
        </EffectComposerPmndrs>
      </Suspense>
    </TresCanvas>
  </div>

  <TresLeches :float="false" />
</template>

The LensDistortion effect is part of the postprocessing package. It allows you to apply a lens distortion effect to your scene, providing flexibility for creating realistic camera effects.

Usage

The <LensDistortionPmndrs> component is straightforward to use and provides customizable options to fine-tune the distortion effect of your visuals.

<script setup lang="ts">
import { EffectComposerPmndrs, LensDistortionPmndrs } from '@tresjs/post-processing'
import { Vector2 } from 'three'
import { TresCanvas } from '@tresjs/core'
import { NoToneMapping } from 'three'

const gl = {
  clearColor: '#0ff000',
  toneMapping: NoToneMapping,
}

const effectProps = {
  distortion: new Vector2(0.5, 0.5),
  principalPoint: new Vector2(0.0, 0.0),
  focalLength: new Vector2(0.5, 0.5),
  skew: 0,
}
</script>

<template>
   <TresCanvas v-bind="gl">
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <LensDistortionPmndrs v-bind="effectProps" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>

Props

Prop	Description	Default
distortion	The distortion effect strength. Accepts Vector2 or [number, number].	[0.0, 0.0]
principalPoint	The center point. Accepts Vector2 or [number, number].	[0.0, 0.0]
focalLength	The focal length. Accepts Vector2 or [number, number].	[1.0, 1.0]
skew	The skew value.	0

Further Reading

For more details, see the LensDistortionEffect documentation.