Color Depth
Reduce the color bit depth to create posterization and dithering effects.
The ColorDepthEffect effect is part of the postprocessing package.
It renders a ColorDepth that can be scaled or adjusted to achieve a variety of visual effects.
Usage
The <ColorDepthPmndrs> component is easy to use and provides customizable options to suit different visual styles.
<script setup lang="ts">
import { ColorDepthPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
const gl = {
toneMapping: NoToneMapping,
}
const effectProps = {
blendFunction: BlendFunction.NORMAL,
bits: 8,
opacity: 0.75,
}
</script>
<template>
<TresCanvas v-bind="gl">
<TresPerspectiveCamera />
<!-- Your scene -->
<Suspense>
<EffectComposerPmndrs>
<ColorDepthPmndrs 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.NORMAL |
bits | The color bit depth. The color bit depth represents the virtual color bits. Each channel uses a quarter of the total, except alpha. | 16 |
opacity | The opacity of the effect. | 1 |
Further Reading
For more details, see the ColorDepthEffect documentation.