Pixelation

Pixelate the scene for a retro pixel art look.

Pixelation is an effect that pixelates the scene.

Usage

<script setup lang="ts">
import { EffectComposer, Pixelation } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <!-- Your scene -->

    <Suspense>
      <EffectComposer>
        <Pixelation :pixel-size="8" />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>

Props

PropDescriptionDefault
pixelSizeThe size of the pixels. Larger values result in a more pixelated appearance.30
depthEdgeStrengthThe strength of the depth edges.1.0
normalEdgeStrengthThe strength of the normal edges.0.5

Further Reading

See the Three.js example.