# Introduction

![Post-processing banner](https://post-processing.tresjs.org/tres-post-processing-banner.png)

Post-processing, in simple terms, consists of applying visual effects to your 3D scenes after they have been rendered. It allows you to add beautiful effects such as depth-of-field, bloom, motion blur, and many more.

The `@tresjs/post-processing` package leverages the excellent work done by the pmndrs [postprocessing](https://github.com/pmndrs/postprocessing){rel=""nofollow""} package and native [Three.js post-processing effects](https://threejs.org/examples/?q=postprocessing#webgl_postprocessing){rel=""nofollow""}. Providing you with an easy-to-use, Vue-centric solution that makes the developer experience (DX) smoother and more delightful.

Post-processing used to be a non-trivial task, but fortunately, now it is. 😜

::note
This package is not required to use with the core library, but it can make your DX significantly better, especially for complex scenes.
::

## Basic Usage

You can import post-processing effects from both pmndrs and native Three.js. All effects are available under the unified `@tresjs/post-processing` namespace.

### Using native Three.js effects

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

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />

    <Suspense>
      <EffectComposer>
        <UnrealBloom />
        <Glitch />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

### Using Pmndrs effects

You can also use pmndrs `postprocessing` effects. Use the `EffectComposerPmndrs` component instead of `EffectComposer` and suffix the effects with `Pmndrs`.

```vue
<script setup lang="ts">
import { BloomPmndrs, EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas shadows alpha>
    <TresPerspectiveCamera :args="[45, 1, 0.1, 1000]" />

    <Suspense>
      <EffectComposerPmndrs>
        <BloomPmndrs />
        <GlitchPmndrs />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```


# Installation

Install `@tresjs/post-processing` alongside `@tresjs/core` using your package manager of choice.

::code-group
```bash [pnpm]
pnpm add @tresjs/post-processing
```

```bash [npm]
npm install @tresjs/post-processing
```

```bash [yarn]
yarn add @tresjs/post-processing
```
::

## Requirements

- Vue `^3.4`
- `@tresjs/core` (peer dependency)
- Three.js (installed transitively via `@tresjs/core`)


# ASCII

::docs-demo
:pmndrs-ascii
::

The `ASCIIEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html){rel="&#x22;nofollow&#x22;"} package.
This effect transforms the visual output into a grid of ASCII characters, offering a unique and artistic way to display 3D content. The ASCII characters used can be customized, allowing for a wide range of creative possibilities.

## Usage

The `<ASCIIPmndrs>` component is straightforward to integrate and offers a variety of customizable properties, allowing you to adapt it to diverse artistic and visual requirements.

```vue
<script setup lang="ts">
import { ASCIIPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'

const gl = {
  toneMapping: NoToneMapping,
}

const glComposer = {
  multisampling: 4,
}

const effectProps = {
  blendFunction: BlendFunction.NORMAL,
  asciiTexture: {
    characters: ' .,:-~+=*≡HELLOWORLD#░▒▓█■▲◼◾',
  }
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

    <TresMesh :position="[0, .5, 0]">
      <TresBoxGeometry :args="[2, 2, 2]" />
      <TresMeshToonMaterial color="black" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs v-bind="glComposer">
        <ASCIIPmndrs v-bind="effectProps" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                                                                                                                                                                       |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL`                                                                                                                                                        |
| `opacity`       | The opacity of the effect.                                                                                                                                                                                                   | `1.0`                                                                                                                                                                         |
| `cellSize`      | The size of the ASCII grid cells.                                                                                                                                                                                            | `16`                                                                                                                                                                          |
| `inverted`      | Controls whether the effect should be inverted.                                                                                                                                                                              | `false`                                                                                                                                                                       |
| `color`         | The color of the effect. Can be a [`Color`](https://threejs.org/docs/#api/en/math/Color){rel="&#x22;nofollow&#x22;"}, `string`, `number`, or `null`. If set to `null`, the colors of the scene will be used.                 | `null`                                                                                                                                                                        |
| `useSceneColor` | Controls whether the effect should use the scene color. If `true`, overrides the `color` prop.                                                                                                                               | `false`                                                                                                                                                                       |
| `asciiTexture`  | Options for creating an ASCIITexture instance.                                                                                                                                                                               | See the [`ASCIITexture`](https://pmndrs.github.io/postprocessing/public/docs/class/src/textures/ASCIITexture.js~ASCIITexture.html){rel="&#x22;nofollow&#x22;"} documentation. |

## Further Reading

For more details, see the [ASCIIEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ASCIIEffect.js~ASCIIEffect.html){rel="&#x22;nofollow&#x22;"}.


# Barrel Blur

::docs-demo
:pmndrs-barrel-blur
::

The `Barrel Blur` is a custom effect that applies a barrel distortion with chromatic aberration blur, providing a unique visual effect.

## Usage

The `<BarrelBlurPmndrs>` component is straightforward to use and provides customizable options to fine-tune the barrel blur effect.

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

const gl = {
  clearColor: '#4f4f4f',
  toneMapping: NoToneMapping,
}

const effectProps = {
  amount: 0.25,
  offset: [0.5, 0.5],
}
</script>

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

    <!-- Your scene -->

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

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `amount`        | The intensity of the barrel distortion. A value between 0 (no distortion) and 1 (maximum distortion).                                                                                                                        | `0.1`                  |
| `offset`        | The offset of the barrel distortion center. A `Vector2` value or an array of two numbers where both values are between 0 and 1.                                                                                              | `[0.5, 0.5]`           |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |

## Further Reading

For an example of the barrel blur effect in WebGL, see the [Barrel Blur Effect on Shadertoy](https://www.shadertoy.com/view/lc3BW8){rel="&#x22;nofollow&#x22;"}.


# Bloom

::docs-demo
:pmndrs-bloom
::

Bloom is an effect that simulates the way bright objects in the real world create a "glow" around themselves. The effect works by adding a blurred and brightened version of the scene to the final render, producing a more realistic and visually appealing result.

## Usage

```vue
<script setup lang="ts">
import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <BloomPmndrs
          :radius="0.85"
          :intensity="4.0"
          :luminance-threshold="0.1"
          :luminance-smoothing="0.3"
          mipmap-blur
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop                 | Description                                                                                          | Default                                                                                                                                                                   |
| -------------------- | ---------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction`      | The blend function of this effect.                                                                   | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40){rel="&#x22;nofollow&#x22;"} |
| `intensity`          | The intensity of the bloom effect.                                                                   | `1`                                                                                                                                                                       |
| `kernelSize`         | The kernel size.                                                                                     | `KernelSize.LARGE`                                                                                                                                                        |
| `luminanceThreshold` | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. | `0.9`                                                                                                                                                                     |
| `luminanceSmoothing` | Controls the smoothness of the luminance threshold. Range is [0, 1].                                 | `0.025`                                                                                                                                                                   |
| `mipmapBlur`         | Enables mip map blur.                                                                                | `false`                                                                                                                                                                   |

## Further Reading

For more details, see the [BloomEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BloomEffect.js~BloomEffect.html){rel="&#x22;nofollow&#x22;"}.


# Brightness & Contrast

::docs-demo
:pmndrs-brightness-contrast
::

The `BrightnessContrast` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html){rel="&#x22;nofollow&#x22;"} package.
It adjusts the brightness and contrast of your scene.

## Usage

The `<BrightnessContrastPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

```vue
<script setup lang="ts">
import { BrightnessContrastPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  brightness: 0.25,
  contrast: -0.5,
  blendFunction: BlendFunction.SRC,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

    <!-- Your scene -->

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

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default             |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.SRC` |
| `brightness`    | The brightness factor, where 0 means no change. Range: `[-1.0, 1.0]`                                                                                                                                                         | `0`                 |
| `contrast`      | The contrast factor, where 0 means no change. Range: `[-1.0, 1.0]`                                                                                                                                                           | `0`                 |

## Further Reading

For more details, see the [BrightnessContrastEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/BrightnessContrastEffect.js~BrightnessContrastEffect.html){rel="&#x22;nofollow&#x22;"}.


# Chromatic Aberration

::docs-demo
:pmndrs-chromatic-aberration
::

The `ChromaticAberration` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html){rel="&#x22;nofollow&#x22;"} 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 { ChromaticAberrationPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
import { NoToneMapping, Vector2 } 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`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} 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`                |

::note
The `modulationOffset` property is functional only when `radialModulation` is enabled.
::

## Further Reading

For more details, see the [ChromaticAberrationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ChromaticAberrationEffect.js~ChromaticAberrationEffect.html){rel="&#x22;nofollow&#x22;"}.


# Color Average

::docs-demo
:pmndrs-color-average
::

The `ColorAverage` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html){rel="&#x22;nofollow&#x22;"} package. It averages the colors of the scene, creating a unique visual effect. This effect can be used to achieve a variety of artistic styles.

## Usage

The `<ColorAveragePmndrs>` component is easy to use and provides customizable options to suit different visual styles.

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

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

const effectProps = {
  opacity: 0.5,
}
</script>

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

    <!-- Your scene -->

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

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |
| `opacity`       | Sets the opacity of the color average effect.                                                                                                                                                                                | `1`                    |

## Further Reading

For more details, see the [ColorAverageEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorAverageEffect.js~ColorAverageEffect.html){rel="&#x22;nofollow&#x22;"}.


# Color Depth

::docs-demo
:pmndrs-color-depth
::

The `ColorDepthEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorDepthEffect.js~ColorDepthEffect.html){rel="&#x22;nofollow&#x22;"} 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.

```vue
<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`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} 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](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ColorDepthEffect.js~ColorDepthEffect.html){rel="&#x22;nofollow&#x22;"}.


# Depth of Field

::docs-demo
:pmndrs-depth-of-field
::

Depth of field is an optical effect employed in photography and cinematography to replicate the natural behavior of real-world cameras. When capturing an image or scene with a real camera, it's crucial to understand that only objects at a particular distance from the camera lens will appear in crisp, clear focus. Objects closer or further away from this specific point gradually become progressively blurry or out of focus.

This photographic technique allows photographers and filmmakers to draw attention to specific subjects or areas within a composition while creatively blurring or softening the background or foreground. Depth of field is a powerful tool for storytelling and visual aesthetics, enabling artists to control the viewer's gaze and emphasize narrative elements by manipulating focus and blur to their advantage.

## Usage

```vue
<script setup lang="ts">
import { DepthOfFieldPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <DepthOfFieldPmndrs :focus-range="0.5" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop                 | Description                                         | Default                                                                                                                                                                   |
| -------------------- | --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction`      | The blend function of this effect.                  | [BlendFunction.SCREEN](https://github.com/pmndrs/postprocessing/blob/c3ce388be247916437a314f17748a75329d65df1/src/enums/BlendFunction.js#L40){rel="&#x22;nofollow&#x22;"} |
| `worldFocusDistance` | The focus distance in world units.                  | `0.3`                                                                                                                                                                     |
| `worldFocusRange`    | The focus range in world units.                     | depends on camera                                                                                                                                                         |
| `focusDistance`      | The normalized focus distance. Range is [0.0, 1.0]. | depends on camera                                                                                                                                                         |
| `focusRange`         | The focus range. Range is [0.0, 1.0].               | `0.1`                                                                                                                                                                     |
| `bokehScale`         | The scale of the bokeh blur.                        | `1.0`                                                                                                                                                                     |

## Further Reading

For more details, see the [DepthOfFieldEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DepthOfFieldEffect.js~DepthOfFieldEffect.html){rel="&#x22;nofollow&#x22;"}.


# Dot Screen

::docs-demo
:pmndrs-dot-screen
::

The `DotScreen` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html){rel="&#x22;nofollow&#x22;"} package. It allows you to create a dot screen effect, providing flexibility for artistic effects.

## Usage

The `<DotScreenPmndrs>` component is straightforward to use and provides customizable options to fine-tune the dot screen effect.

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

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

const effectProps = {
  angle: 1.57,
  scale: 1.25,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <DotScreenPmndrs
          :angle="effectProps.angle"
          :scale="effectProps.scale"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `angle`         | The angle of the dot pattern &#x2A;(in radians)*.                                                                                                                                                                            | `1.57`                 |
| `scale`         | The scale of the dot pattern.                                                                                                                                                                                                | `1.0`                  |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |

## Further Reading

For more details, see the [DotScreenEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/DotScreenEffect.js~DotScreenEffect.html){rel="&#x22;nofollow&#x22;"}.


# Fish Eye

::docs-demo
:pmndrs-fish-eye
::

The `FishEye` is a custom effect that simulates the wide-angle distortion of a fish-eye lens. Common in photography and videography, it creates a hemispherical view with a unique, immersive visual experience. The distortion bends the image outward from the center, creating a bubble-like appearance.

## Usage

The `<FishEyePmndrs>` component is straightforward to use and provides customizable options to fine-tune the fish-eye effect.

```vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { EffectComposerPmndrs, FishEyePmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'

const gl = {
  clearColor: '#4f4f4f',
}

const effectProps = {
  blendFunction: BlendFunction.NORMAL,
  lensS: [1.0, 0.65] as [number, number],
  lensF: [0.25, 1.0] as [number, number],
  scale: 0.85,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <FishEyePmndrs
          :blend-function="effectProps.blendFunction"
          :lens-s="effectProps.lensS"
          :lens-f="effectProps.lensF"
          :scale="effectProps.scale"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |
| `lensS`         | The lens scale. A `Vector2` value or an array of two numbers. (ex: `[0.5, .75]`)                                                                                                                                             | `Vector2(1.0, 1.0)`    |
| `lensF`         | The lens factor. A `Vector2` value or an array of two numbers. (ex: `[0.0, 0.5]`)                                                                                                                                            | `Vector2(0.0, 1.0)`    |
| `scale`         | The scale of the effect. A `number`.                                                                                                                                                                                         | `1.0`                  |

## Further Reading

For an example of the fish-eye effect in WebGL, see the [Fish Eye Effect on Shadertoy](https://www.shadertoy.com/view/MXyBRy){rel="&#x22;nofollow&#x22;"}.


# FXAA

::docs-demo
:pmndrs-fxaa
::

The `FXAAEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html){rel="&#x22;nofollow&#x22;"} package.
FXAA offers a performance-optimized anti-aliasing solution that smooths jagged edges while maintaining excellent performance. However, its quality may be modest at times, occasionally resulting in a slightly blurred appearance.

## Usage

The `<FXAAPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

::note
When using the `<EffectComposerPmndrs>` pipeline, enabling native antialiasing with the [`antialias`](https://docs.tresjs.org/api/tres-canvas.html#props){rel=""nofollow""} prop on `<TresCanvas>` is unnecessary.
::

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, FXAAPmndrs } from '@tresjs/post-processing'

const gl = {
  antialias: false,
}
// It is not required to add `antialias: false` for
// the <TresCanvas> context, as it is automatically
// disabled when using `<EffectComposerPmndrs>`.

const effectProps = {
  samples: 24,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <FXAAPmndrs :samples="effectProps.samples" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop               | Description                                                                                                                                                                                                                  | Default             |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `blendFunction`    | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.SRC` |
| `opacity`          | The opacity of the effect.                                                                                                                                                                                                   | `1`                 |
| `samples`          | The maximum amount of edge detection samples.                                                                                                                                                                                | `12`                |
| `minEdgeThreshold` | The minimum edge detection threshold. Range: `[0.0, 1.0]`.                                                                                                                                                                   | `0.0312`            |
| `maxEdgeThreshold` | The maximum edge detection threshold. Range: `[0.0, 1.0]`.                                                                                                                                                                   | `0.125`             |
| `subpixelQuality`  | The subpixel blend quality. Range: `[0.0, 1.0]`.                                                                                                                                                                             | `0.75`              |

## Further Reading

For more details, see the [FXAAEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/FXAAEffect.js~FXAAEffect.html){rel="&#x22;nofollow&#x22;"}.


# Glitch

::docs-demo{:controls='false'}
:pmndrs-glitch
::

Glitch is an effect that simulates digital glitches, which are random or intentional errors that occur in digital media such as images, videos, or audio. The effect can be used to create a distorted or disrupted appearance, with elements of the scene appearing to shift or flicker in a chaotic manner.

The `<GlitchPmndrs />` component in TresJS allows you to add this effect to your 3D scenes, and provides several parameters that can be tweaked to achieve the desired glitchy look, such as delay, duration, strength, mode, and more. The end result can be a unique and striking visual style that adds an extra layer of interest to your 3D scenes.

::warning
This effect may potentially cause epileptic seizures in people with photosensitive epilepsy. Viewer discretion is advised.
::

## Usage

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, GlitchPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <GlitchPmndrs />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop                        | Description                                                                               | Default                                                                                                                                                                   |
| --------------------------- | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `blendFunction`             | The blend function of this effect.                                                        | [BlendFunction.NORMAL](https://github.com/pmndrs/postprocessing/blob/3fbe7b770f826019933b1386d27ebc04315feb00/src/enums/BlendFunction.js#L36){rel="&#x22;nofollow&#x22;"} |
| `delay`                     | The minimum and maximum delay between glitch activations in seconds.                      | `[1.5, 3.5]`                                                                                                                                                              |
| `duration`                  | The minimum and maximum duration of a glitch in seconds.                                  | `[0.6, 1.0]`                                                                                                                                                              |
| `strength`                  | The strength of weak and strong glitches.                                                 | `[0.3, 1.0]`                                                                                                                                                              |
| `mode`                      | The glitch mode. Can be DISABLED, SPORADIC, CONSTANT\_MILD, or CONSTANT\_WILD.            | `GlitchMode.SPORADIC`                                                                                                                                                     |
| `active`                    | Turn the effect on and off.                                                               | `undefined`                                                                                                                                                               |
| `ratio`                     | The threshold for strong glitches.                                                        | `0.85`                                                                                                                                                                    |
| `columns`                   | The scale of the blocky glitch columns.                                                   | `0.05`                                                                                                                                                                    |
| `chromaticAberrationOffset` | A chromatic aberration offset. If provided, the glitch effect will influence this offset. | `undefined`                                                                                                                                                               |
| `perturbationMap`           | A perturbation map. If none is provided, a noise texture will be created.                 | `undefined`                                                                                                                                                               |
| `dtSize`                    | The size of the generated noise map. Will be ignored if a perturbation map is provided.   | `64`                                                                                                                                                                      |

## Further Reading

For more details, see the [GlitchEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GlitchEffect.js~GlitchEffect.html){rel="&#x22;nofollow&#x22;"}.


# God Rays

::docs-demo
:pmndrs-god-rays
::

The `GodRays` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GodRaysEffect.js~GodRaysEffect.html){rel="&#x22;nofollow&#x22;"} package. It simulates the appearance of light rays shining through objects, creating a volumetric lighting effect. This effect can enhance the visual appeal of your scene by adding a dramatic and realistic lighting effect.

## Usage

The `<GodRaysPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

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

const gl = {
  toneMapping: NoToneMapping,
}

const sphereMeshRef = ref(null)

const effectProps = {
  opacity: 0.8,
  exposure: 0.8,
  resolutionScale: 0.65,
}
</script>

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

    <!-- The lightSource (in this case a Sphere) -->
    <TresMesh ref="sphereMeshRef" :position="[-10, 8, 0]">
      <TresSphereGeometry :args="[2, 32, 32]" />
      <TresMeshBasicMaterial color="#FFDDAA" :transparent="true" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <GodRaysPmndrs
          v-bind="effectProps"
          :light-source="sphereMeshRef"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop              | Description                                                                                                                                                                                                                                                                       | Default                |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction`   | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options.                                                      | `BlendFunction.SCREEN` |
| `lightSource`     | The light source. Must not write depth and has to be flagged as transparent. This can be a [`Mesh`](https://threejs.org/docs/index.html#api/en/objects/Mesh){rel="&#x22;nofollow&#x22;"} or a [`Points`](https://threejs.org/#api/en/objects/Points){rel="&#x22;nofollow&#x22;"}. | `undefined`            |
| `opacity`         | The opacity of the God Rays.                                                                                                                                                                                                                                                      | `1.0`                  |
| `density`         | The density of the light rays.                                                                                                                                                                                                                                                    | `0.96`                 |
| `decay`           | The decay of the light rays.                                                                                                                                                                                                                                                      | `0.9`                  |
| `kernelSize`      | The blur kernel size. Has no effect if `blur` prop is disabled. See the [`KernelSize`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-KernelSize){rel="&#x22;nofollow&#x22;"} options.                                                   | `KernelSize.SMALL`     |
| `resolutionScale` | The resolution scale.                                                                                                                                                                                                                                                             | `0.5`                  |
| `blur`            | Whether the god rays should be blurred to reduce artifacts.                                                                                                                                                                                                                       | `true`                 |
| `resolutionX`     | The horizontal resolution.                                                                                                                                                                                                                                                        | `Resolution.AUTO_SIZE` |
| `resolutionY`     | The vertical resolution.                                                                                                                                                                                                                                                          | `Resolution.AUTO_SIZE` |
| `weight`          | The weight of the light rays.                                                                                                                                                                                                                                                     | `0.4`                  |
| `exposure`        | A constant attenuation coefficient.                                                                                                                                                                                                                                               | `0.6`                  |
| `samples`         | The number of samples per pixel.                                                                                                                                                                                                                                                  | `60`                   |
| `clampMax`        | An upper bound for the saturation of the overall effect.                                                                                                                                                                                                                          | `1.0`                  |

## Further Reading

For more details, see the [GodRaysEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GodRaysEffect.js~GodRaysEffect.html){rel="&#x22;nofollow&#x22;"}.


# Grid

::docs-demo
:pmndrs-grid
::

The `GridEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html){rel="&#x22;nofollow&#x22;"} package.
It renders a grid that can be scaled or adjusted to achieve a variety of visual effects.

## Usage

The `<GridPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, GridPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  blendFunction: BlendFunction.OVERLAY,
  scale: 0.25,
  lineWidth: 0.1,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <GridPmndrs
          :blend-function="effectProps.blendFunction"
          :scale="effectProps.scale"
          :line-width="effectProps.lineWidth"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                 |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.OVERLAY` |
| `scale`         | The grid scale, which can be used to adjust the spacing effect.                                                                                                                                                              | `1.0`                   |
| `lineWidth`     | The width of the lines in the grid pattern.                                                                                                                                                                                  | `1.0`                   |

## Further Reading

For more details, see the [GridEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/GridEffect.js~GridEffect.html){rel="&#x22;nofollow&#x22;"}.


# Hue & Saturation

::docs-demo
:pmndrs-hue-saturation
::

The `HueSaturation` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html){rel="&#x22;nofollow&#x22;"} package. It allows you to adjust the hue and saturation of your scene, providing flexibility for color grading and artistic effects.

## Usage

The `<HueSaturationPmndrs>` component is straightforward to use and provides customizable options to fine-tune the hue and saturation of your visuals.

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, HueSaturationPmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'
import { NoToneMapping } from 'three'

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  saturation: 1,
  hue: -Math.PI,
  blendFunction: BlendFunction.SRC,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <HueSaturationPmndrs
          :blend-function="effectProps.blendFunction"
          :hue="effectProps.hue"
          :saturation="effectProps.saturation"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default             |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------- |
| `saturation`    | The saturation adjustment. A value of `0.0` results in grayscale, while `1.0` leaves saturation unchanged. Range: `[0.0, 1.0]`.                                                                                              | `0.0`               |
| `hue`           | The hue adjustment in radians. Values range from `[-π, π]` (or `[0, 2π]` for a full rotation).                                                                                                                               | `0.0`               |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.SRC` |

## Further Reading

For more details, see the [HueSaturationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/HueSaturationEffect.js~HueSaturationEffect.html){rel="&#x22;nofollow&#x22;"}.


# Pmndrs Effects

Pmndrs effects wrap the excellent [pmndrs/postprocessing](https://github.com/pmndrs/postprocessing){rel="&#x22;nofollow&#x22;"} library. They are composed inside `<EffectComposerPmndrs>` and use the `Pmndrs` suffix to distinguish them from native Three.js effects.

```vue
<script setup lang="ts">
import { BloomPmndrs, EffectComposerPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <Suspense>
      <EffectComposerPmndrs>
        <BloomPmndrs />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```


# Kuwahara

::docs-demo
:pmndrs-kuwahara
::

The `Kuwahara` effect applies a Kuwahara filter to your scene, providing a painterly effect. It smooths out an image while keeping the edges sharp by splitting the image into small sectors, checking each for differences, and using the part with the least variance — making the image look like a painting while preserving important detail.

## Usage

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

const gl = {
  clearColor: '#0ff000',
  toneMapping: NoToneMapping,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <KuwaharaPmndrs :radius="1" :sector-count="4" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                     | Default                |
| --------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | Defines how the effect blends with the original scene.                                                          | `BlendFunction.NORMAL` |
| `radius`        | The radius of the Kuwahara filter.                                                                              | `1`                    |
| `sectorCount`   | The number of sectors used in the filter. Higher values improve quality but reduce performance. Maximum is `8`. | `4`                    |

::warning
It is normal to experience a drastic drop in FPS when you significantly increase the `radius`. A higher radius increases the number of calculations per pixel. Use `sectorCount` to find a balance between quality and performance — reduce `sectorCount` when increasing `radius`.
::

## Further Reading

For more details, see the [KuwaharaEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/KuwaharaEffect.js~KuwaharaEffect.html){rel="&#x22;nofollow&#x22;"}.


# Lens Distortion

::docs-demo
:pmndrs-lens-distortion
::

The `LensDistortion` effect applies a lens distortion effect to your scene, providing flexibility for creating realistic camera effects.

## Usage

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

const gl = {
  toneMapping: NoToneMapping,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <LensDistortionPmndrs
          :distortion="new Vector2(0.5, 0.5)"
          :principal-point="new Vector2(0.0, 0.0)"
          :focal-length="new Vector2(0.5, 0.5)"
          :skew="0"
        />
      </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](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/LensDistortionEffect.js~LensDistortionEffect.html){rel="&#x22;nofollow&#x22;"}.


# Linocut

::docs-demo
:pmndrs-linocut
::

The `Linocut` effect is a custom shader inspired by traditional linocut and woodcut printmaking. It transforms the scene into a high-contrast black-and-white composition, featuring bold lines and intricate patterns that replicate the handcrafted aesthetic of relief printing techniques.

## Usage

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

const gl = {
  clearColor: '#4f4f4f',
  toneMapping: NoToneMapping,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <LinocutPmndrs
          :scale="0.85"
          :noise-scale="0.0"
          :center="[0.5, 0.5]"
          :rotation="0.0"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                           | Default                |
| --------------- | ------------------------------------------------------------------------------------- | ---------------------- |
| `scale`         | Line width control. A value between 0 and 1.                                          | `0.85`                 |
| `noiseScale`    | Noise intensity. A value between 0 and 1.                                             | `0.0`                  |
| `center`        | Center of rotation (normalized coordinates). Accepts `Vector2` or `[number, number]`. | `[0.5, 0.5]`           |
| `rotation`      | Rotation angle in radians. A value between -π and π.                                  | `0.0`                  |
| `blendFunction` | Defines how the effect blends with the original scene.                                | `BlendFunction.NORMAL` |

## Further Reading

For an example of the linocut effect in WebGL, see the [Linocut Effect on Shadertoy](https://www.shadertoy.com/view/4XVcDV){rel="&#x22;nofollow&#x22;"}.


# Noise

::docs-demo{:controls='false'}
:pmndrs-noise
::

Noise is an effect that adds Gaussian noise to the scene. This can be used to simulate a variety of effects, such as static on a TV or film grain.

## Usage

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, NoisePmndrs } from '@tresjs/post-processing'
import { BlendFunction } from 'postprocessing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <NoisePmndrs
          premultiply
          :blend-function="BlendFunction.SCREEN"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                         | Default                |
| --------------- | ----------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | The blend function of this effect.                                                  | `BlendFunction.SCREEN` |
| `premultiply`   | Indicates whether noise will be multiplied with the input colors prior to blending. | `false`                |

## Further Reading

For more details, see the [NoiseEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/NoiseEffect.js~NoiseEffect.html){rel="&#x22;nofollow&#x22;"}.


# Outline

::docs-demo{:controls='false'}
:pmndrs-outline
::

Outline is an effect that applies an outline to objects in your scene. This effect is commonly used to highlight objects. Click a mesh in the demo to toggle its outline.

## Usage

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, OutlinePmndrs } from '@tresjs/post-processing'
import type { Intersection, Object3D } from 'three'

const outlinedObjects = ref<Object3D[]>([])

const toggleMeshSelectionState = ({ object }: Intersection) => {
  if (outlinedObjects.value.some(({ uuid }) => uuid === object.uuid)) {
    outlinedObjects.value = outlinedObjects.value.filter(({ uuid }) => uuid !== object.uuid)
  }
  else {
    outlinedObjects.value = [...outlinedObjects.value, object]
  }
}
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->
    <TresMesh @click="toggleMeshSelectionState">
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="hotpink" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <OutlinePmndrs :outlined-objects="outlinedObjects" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop               | Description                                                      | Default                 |
| ------------------ | ---------------------------------------------------------------- | ----------------------- |
| `outlinedObjects`  | The objects to highlight.                                        | `[]`                    |
| `blur`             | Whether the outline should be blurred.                           | `false`                 |
| `xRay`             | Whether occluded parts of selected objects should be visible.    | `true`                  |
| `kernelSize`       | The blur kernel size. Use together with `blur`.                  | `KernelSize.VERY_SMALL` |
| `pulseSpeed`       | The pulse speed. A value of zero disables the pulse effect.      | `0.0`                   |
| `resolutionX`      | The horizontal resolution.                                       | `Resolution.AUTO_SIZE`  |
| `resolutionY`      | The vertical resolution.                                         | `Resolution.AUTO_SIZE`  |
| `edgeStrength`     | The edge strength.                                               | `1.0`                   |
| `patternScale`     | The pattern scale.                                               | `1.0`                   |
| `multisampling`    | The number of samples used for MSAA. Requires WebGL 2.           | `0`                     |
| `blendFunction`    | The blend function. Use `BlendFunction.ALPHA` for dark outlines. | `BlendFunction.SCREEN`  |
| `patternTexture`   | A pattern texture.                                               | `null`                  |
| `resolutionScale`  | The resolution scale.                                            | `0.5`                   |
| `hiddenEdgeColor`  | The color of hidden edges.                                       | `0x22090a`              |
| `visibleEdgeColor` | The color of visible edges.                                      | `0xffffff`              |

## Further Reading

For more details, see the [OutlineEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/OutlineEffect.js~OutlineEffect.html){rel="&#x22;nofollow&#x22;"}.


# Pixelation

::docs-demo{:controls='false'}
:pmndrs-pixelation
::

Pixelation is an effect that pixelates the scene.

## Usage

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, PixelationPmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <PixelationPmndrs :granularity="15" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop          | Description                    | Default |
| ------------- | ------------------------------ | ------- |
| `granularity` | The granularity of the pixels. | `30`    |

## Further Reading

For more details, see the [PixelationEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/PixelationEffect.js~PixelationEffect.html){rel="&#x22;nofollow&#x22;"}.


# Scanline

::docs-demo
:pmndrs-scanline
::

The `Scanline` effect simulates scanlines reminiscent of old CRT displays, creating a nostalgic or stylized visual effect for your scene. This effect can enhance the retro aesthetic of your project or add a unique visual touch.

## Usage

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

const gl = {
  clearColor: '#0ff000',
  toneMapping: NoToneMapping,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <ScanlinePmndrs
          :density="1.25"
          :opacity="0.65"
          :scroll-speed="0.05"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                          | Default                 |
| --------------- | ------------------------------------------------------------------------------------ | ----------------------- |
| `blendFunction` | Defines how the effect blends with the original scene.                               | `BlendFunction.OVERLAY` |
| `density`       | The density of the scanlines. Higher values increase the frequency of lines.         | `1.25`                  |
| `opacity`       | The opacity of the scanlines.                                                        | `1.0`                   |
| `scrollSpeed`   | The speed at which the scanlines scroll vertically. Set to `0` for static scanlines. | `0.0`                   |

## Further Reading

For more details, see the [ScanlineEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ScanlineEffect.js~ScanlineEffect.html){rel="&#x22;nofollow&#x22;"}.


# Sepia

::docs-demo
:pmndrs-sepia
::

The `Sepia` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html){rel="&#x22;nofollow&#x22;"} package. It applies a sepia tone to the scene, giving it a warm, antique appearance. This effect can enhance the visual appeal of your scene by adding a vintage or stylized touch.

## Usage

The `<SepiaPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

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

const gl = {
  toneMapping: NoToneMapping,
}
</script>

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

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <SepiaPmndrs :intensity="2" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |
| `intensity`     | The intensity of the sepia effect.                                                                                                                                                                                           | `1.0`                  |

## Further Reading

For more details, see the [SepiaEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SepiaEffect.js~SepiaEffect.html){rel="&#x22;nofollow&#x22;"}.


# Shock Wave

::docs-demo
:pmndrs-shock-wave
::

The `ShockWave` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html){rel="&#x22;nofollow&#x22;"} package. It simulates a shockwave effect originating from a center point, creating a ripple-like distortion in the scene. This effect can add dramatic impact to your scene by simulating explosions or other shockwave phenomena.

## Usage

The `<ShockWavePmndrs>` component is easy to use and provides customizable options to suit different visual styles. There are several possible techniques to achieve this. See [Events](https://post-processing.tresjs.org/#events) and [DepthPickingPass](https://post-processing.tresjs.org/#depthpickingpass) for more details.

The main difference between `Events` and `DepthPickingPass` lies in the scope you want. `Events` is more suited for being used on a specific element, while `DepthPickingPass` is intended to be used for an entire scene (depth is calculated globally).

### Events

To determine the position of the shockwave effect, you can use Tres.js events. Tres.js allows you to handle user interactions directly and find the intersection point with objects in the scene. This technique is useful when you need to interact with specific objects based on user input.

You can use various Tres.js events such as `click`, `pointer-enter`, etc., to trigger the shockwave effect. For more details about available events, see the [documentation](https://docs.tresjs.org/api/events.html){rel="&#x22;nofollow&#x22;"}.

Here is an example of how to use events to trigger the shockwave effect:

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
import { useMouse, useWindowSize } from '@vueuse/core'
import { NoToneMapping, Vector3 } from 'three'
import { TresCanvas } from '@tresjs/core'

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  speed: 0.2,
}

const shockWaveEffectRef = ref(null)
const mousePosition = ref(new Vector3(0, 0, 0))

const { x, y } = useMouse()
const { width, height } = useWindowSize()

const cursorX = computed(() => (x.value / width.value) * 2.0 - 1.0)
const cursorY = computed(() => -(y.value / height.value) * 2.0 + 1.0)

function updateMousePosition({ point }) {
  mousePosition.value.copy(point)
}

function triggerShockWave() {
  if (!shockWaveEffectRef.value) { return }

  updateMousePosition()

  shockWaveEffectRef.value.effect.explode()
}
</script>

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

    <TresMesh @click="triggerShockWave">
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="#1C1C1E" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <ShockWavePmndrs
          ref="shockWaveEffectRef"
          :position="mousePosition"
          v-bind="effectProps"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

### DepthPickingPass

The `DepthPickingPassPmndrs` component reads depth information from the scene. This is particularly useful for interacting with 3D objects based on their depth, such as triggering effects at specific points in 3D space.

In the example above, `DepthPickingPassPmndrs` determines the depth of the point where the shockwave effect should originate, allowing accurate interaction with 3D objects.

```vue
<script setup lang="ts">
import { DepthPickingPassPmndrs, EffectComposerPmndrs, ShockWavePmndrs } from '@tresjs/post-processing'
import { useMouse, useWindowSize } from '@vueuse/core'
import { NoToneMapping, Vector3 } from 'three'
import { TresCanvas } from '@tresjs/core'

/**
 * The camera value is retrieved via a ref here (elCanvasRef) because using
 * https://docs.tresjs.org/api/composables.html#usetrescontext
 * is not possible at the same level as <TresCanvas>.
 */

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  speed: 0.2,
}

const mousePosition = ref(new Vector3(0, 0, 0))
const depthPickingPassRef = ref(null)
const shockWaveEffectRef = ref(null)
const elCanvasRef = ref(null)

const { x, y } = useMouse()
const { width, height } = useWindowSize()

const cursorX = computed(() => (x.value / width.value) * 2.0 - 1.0)
const cursorY = computed(() => -(y.value / height.value) * 2.0 + 1.0)

async function updateMousePosition() {
  if (!elCanvasRef.value || !depthPickingPassRef.value) { return }

  const ndcPosition = new Vector3(cursorX.value, cursorY.value, 0)

  ndcPosition.z = await depthPickingPassRef.value.pass.readDepth(ndcPosition)
  ndcPosition.z = ndcPosition.z * 2.0 - 1.0

  mousePosition.value.copy(ndcPosition.unproject(elCanvasRef.value.context.camera.value))
}

function triggerShockWave() {
  if (!shockWaveEffectRef.value) { return }

  updateMousePosition()

  shockWaveEffectRef.value.effect.explode()
}
</script>

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

    <TresMesh @click="triggerShockWave">
      <TresBoxGeometry />
      <TresMeshStandardMaterial color="#1C1C1E" />
    </TresMesh>

    <Suspense>
      <EffectComposerPmndrs>
        <DepthPickingPassPmndrs ref="depthPickingPassRef" />
        <ShockWavePmndrs
          ref="shockWaveEffectRef"
          :position="mousePosition"
          v-bind="effectProps"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

For more details about DepthPickingPass, see the [documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/passes/DepthPickingPass.js~DepthPickingPass.html){rel="&#x22;nofollow&#x22;"}.

## Props

| Prop        | Description                      | Default            |
| ----------- | -------------------------------- | ------------------ |
| `position`  | The position of the shockwave.   | `Vector3(0, 0, 0)` |
| `amplitude` | The amplitude of the shockwave.  | `0.05`             |
| `waveSize`  | The wave size of the shockwave.  | `0.2`              |
| `speed`     | The speed of the shockwave.      | `2.0`              |
| `maxRadius` | The max radius of the shockwave. | `1.0`              |

## Further Reading

For more details, see the [ShockWaveEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ShockWaveEffect.js~ShockWaveEffect.html){rel="&#x22;nofollow&#x22;"}.


# SMAA

::docs-demo
:pmndrs-smaa
::

The `SMAAEffect` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SMAAEffect.js~SMAAEffect.html){rel="&#x22;nofollow&#x22;"} package. **SMAA** (Subpixel Morphological Antialiasing) is a post-processing antialiasing technique that uses look-up tables to detect edges accurately, preserving texture details while minimizing false positives.

::note
**SMAA** generally provides superior visual quality compared to [FXAA](https://post-processing.tresjs.org/api/pmndrs/fxaa), though it is slightly less performant. Note that **SMAA** is distinct from **MSAA**.
::

## Usage

The `<SMAAPmndrs>` component is easy to use and provides customizable options to suit different visual styles.

::note
When using the `<EffectComposerPmndrs>` pipeline, enabling native antialiasing with the [`antialias`](https://docs.tresjs.org/api/tres-canvas.html#props){rel=""nofollow""} prop on `<TresCanvas>` is unnecessary.
::

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, SMAAPmndrs } from '@tresjs/post-processing'
import type { SMAAPreset } from 'postprocessing'

const gl = {
  toneMapping: NoToneMapping,
  antialias: false,
}
// It is not required to add `antialias: false` for
// the <TresCanvas> context, as it is automatically
// disabled when using `<EffectComposerPmndrs>`.

const effectProps = {
  preset: SMAAPreset.HIGH,
}
</script>

<template>
  <TresCanvas v-bind="gl">
    <TresPerspectiveCamera />

    <!-- Your scene -->

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

## Props

| Prop                | Description                                                                                                                                                                                                                  | Default                    |
| ------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| `blendFunction`     | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.SRC`        |
| `opacity`           | The opacity of the effect.                                                                                                                                                                                                   | `1`                        |
| `preset`            | Define the quality and performance trade-offs. See the [`SMAAPreset`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-SMAAPreset){rel="&#x22;nofollow&#x22;"} options.               | `SMAAPreset.MEDIUM`        |
| `edgeDetectionMode` | Define the edge detection modes. See the [`EdgeDetectionMode`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-EdgeDetectionMode){rel="&#x22;nofollow&#x22;"} options.               | `EdgeDetectionMode.COLOR`  |
| `predicationMode`   | Define the predication modes. See the [`PredicationMode`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-PredicationMode){rel="&#x22;nofollow&#x22;"} options.                      | `PredicationMode.DISABLED` |
| `debug`             | Define the debug mode. Options: `0` (OFF), `1` (EDGES), `2` (WEIGHTS).                                                                                                                                                       | `0`                        |

## Further Reading

For more details, see the [SMAAEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/SMAAEffect.js~SMAAEffect.html){rel="&#x22;nofollow&#x22;"}.


# Texture

::docs-demo
:pmndrs-texture
::

The `TextureEffect` component is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TextureEffect.js~TextureEffect.html){rel="&#x22;nofollow&#x22;"} package.
It allows rendering a texture with customizable options to create various visual effects.

## Usage

The `<TexturePmndrs>` component is easy to use and provides customizable options to suit different visual styles.

::note
This component is designed to work with a provided texture and **does not** include built-in functionality to modify the texture itself.

If you need to adjust properties such as **rotation**, **repeat**, or **other attributes**, you should modify them directly on the texture that you pass to the `<TexturePmndrs />` component.
::

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, TexturePmndrs } from '@tresjs/post-processing'
import { TresCanvas, useTexture } from '@tresjs/core'
import { NoToneMapping, RepeatWrapping, SRGBColorSpace } from 'three'
import { BlendFunction, ColorChannel } from 'postprocessing'

const gl = {
  toneMapping: NoToneMapping,
}

const effectProps = {
  blendFunction: BlendFunction.OVERLAY,
  opacity: 0.65,
}

const texture = await useTexture(['your-path-to-texture'])
texture.colorSpace = SRGBColorSpace
texture.wrapS = texture.wrapT = RepeatWrapping
texture.rotation = Math.PI / 2
texture.repeat.set(2, 2)

function setTextureSwizzleRGBA(red, green, blue, alpha) {
  // This is an example of using a function belonging to the TextureEffect class.
  // https://pmndrs.github.io/postprocessing/public/docs/file/src/effects/TextureEffect.js.html#lineNumber192
  textureEffectRef.value?.effect.setTextureSwizzleRGBA(red, green, blue, alpha)
}

// Example how to mix texture's color channels.
setTextureSwizzleRGBA(ColorChannel.GREEN, ColorChannel.BLUE, ColorChannel.RED, ColorChannel.ALPHA)

// Example how to reset the texture's color channels (default).
setTextureSwizzleRGBA(ColorChannel.RED, ColorChannel.BLUE, ColorChannel.GREEN, ColorChannel.ALPHA)
</script>

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

    <!-- Your Scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <TexturePmndrs v-bind="effectProps" :texture="texture" />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                                                                                                                                                                                  | Default                |
| --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction` | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |
| `texture`       | The texture used for the effect. See the [`Texture`](https://threejs.org/docs/#api/en/textures/Texture){rel="&#x22;nofollow&#x22;"} documentation.                                                                           | `null`                 |
| `opacity`       | The opacity of the texture.                                                                                                                                                                                                  | `1.0`                  |

## Further Reading

For more details, see the [TextureEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TextureEffect.js~TextureEffect.html){rel="&#x22;nofollow&#x22;"}.


# Tilt Shift

::docs-demo
:pmndrs-tilt-shift
::

The `TiltShift` effect is part of the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html){rel="&#x22;nofollow&#x22;"} package. It allows you to create a tilt-shift effect, simulating a shallow depth of field.

## Usage

The `<TiltShiftPmndrs>` component is straightforward to use and provides customizable options to fine-tune the tilt-shift effect.

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

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

const effectProps = {
  focusArea: 0.7,
  feather: 0.1,
}
</script>

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

    <!-- Your scene -->

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

## Props

| Prop              | Description                                                                                                                                                                                                                  | Default                |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |
| `blendFunction`   | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.NORMAL` |
| `offset`          | The relative offset of the focus area. A positive value shifts the focus area upwards, while a negative value shifts it downwards. Range: `[-0.5, 0.5]`.                                                                     | `0.0`                  |
| `rotation`        | The rotation of the focus area in radians. A positive rotation turns the focus area clockwise. Range: `[-π, π]`.                                                                                                             | `0.0`                  |
| `focusArea`       | The relative size of the focus area. Range: `[0, 1]`.                                                                                                                                                                        | `0.4`                  |
| `feather`         | The softness of the focus area edges. Range: `[0, 1]`.                                                                                                                                                                       | `0.3`                  |
| `kernelSize`      | The blur kernel size. See the [`KernelSize`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-KernelSize){rel="&#x22;nofollow&#x22;"} options.                                        | `KernelSize.MEDIUM`    |
| `resolutionScale` | The resolution scale. Range: `[0.1, 1]`.                                                                                                                                                                                     | `0.5`                  |
| `resolutionX`     | The horizontal resolution. Use `Resolution.AUTO_SIZE` for automatic sizing.                                                                                                                                                  | `Resolution.AUTO_SIZE` |
| `resolutionY`     | The vertical resolution. Use `Resolution.AUTO_SIZE` for automatic sizing.                                                                                                                                                    | `Resolution.AUTO_SIZE` |

## Further Reading

For more details, see the [TiltShiftEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/TiltShiftEffect.js~TiltShiftEffect.html){rel="&#x22;nofollow&#x22;"}.


# ToneMapping

::docs-demo
:pmndrs-tone-mapping
::

The `ToneMapping` effect from the [`postprocessing`](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html){rel="&#x22;nofollow&#x22;"} package provides an abstraction for various tone mapping algorithms to improve the visual rendering of HDR (high dynamic range) content. Tone mapping is used to map high-range brightness values to a range that is displayable on standard screens. This effect contributes significantly to the visual quality of your scene by controlling luminance and color balance.

::note
If the colors in your scene look incorrect after adding the EffectComposer, it might be because tone mapping is deactivated by default, which is normal behavior. Add `<ToneMappingPmndrs>` manually as an effect at the end of the `<EffectComposerPmndrs>` to fix this.
::

## Usage

The `<ToneMappingPmndrs>` component is easy to set up and comes with multiple tone mapping modes to suit different visual requirements.

```vue
<script setup lang="ts">
import { TresCanvas } from '@tresjs/core'
import { EffectComposerPmndrs, ToneMappingPmndrs } from '@tresjs/post-processing'
import { NoToneMapping } from 'three'
import { ToneMappingMode } from 'postprocessing'

const gl = {
  toneMappingExposure: 1,
  toneMapping: NoToneMapping,
}

const effectProps = {
  mode: ToneMappingMode.AGX,
}
</script>

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

    <!-- Your scene -->

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

## Props

| Prop               | Description                                                                                                                                                                                                                  | Default               |
| ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- |
| `mode`             | Tone mapping mode used, defined by [`ToneMappingMode`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-ToneMappingMode){rel="&#x22;nofollow&#x22;"}.                                 | `ToneMappingMode.AGX` |
| `blendFunction`    | Defines how the effect blends with the original scene. See the [`BlendFunction`](https://pmndrs.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction){rel="&#x22;nofollow&#x22;"} options. | `BlendFunction.SRC`   |
| `resolution`       | Resolution of the luminance texture (must be a power of two, e.g. 256, 512).                                                                                                                                                 | `256`                 |
| `averageLuminance` | Average luminance value used in adaptive calculations. Only applicable to `ToneMappingMode.REINHARD2`.                                                                                                                       | `1.0`                 |
| `middleGrey`       | Factor to adjust the balance of grey in luminance calculations. Only applicable to `ToneMappingMode.REINHARD2`.                                                                                                              | `0.6`                 |
| `minLuminance`     | Lower luminance limit, used to avoid overexposure effects in dark scenes. Only applicable to `ToneMappingMode.REINHARD2`.                                                                                                    | `0.01`                |
| `whitePoint`       | White point for tone mapping, used to balance luminance values. Only applicable to `ToneMappingMode.REINHARD2`.                                                                                                              | `4.0`                 |

## Further Reading

For more details, see the [ToneMappingEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/ToneMappingEffect.js~ToneMappingEffect.html){rel="&#x22;nofollow&#x22;"}.


# Vignette

::docs-demo{:controls='false'}
:pmndrs-vignette
::

Vignette is an effect that darkens the edges of the scene to make the center pop.

## Usage

```vue
<script setup lang="ts">
import { EffectComposerPmndrs, VignettePmndrs } from '@tresjs/post-processing'
</script>

<template>
  <TresCanvas>
    <TresPerspectiveCamera :position="[5, 5, 5]" />

    <!-- Your scene -->

    <Suspense>
      <EffectComposerPmndrs>
        <VignettePmndrs
          :darkness="0.9"
          :offset="0.2"
        />
      </EffectComposerPmndrs>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop            | Description                                                  | Default                     |
| --------------- | ------------------------------------------------------------ | --------------------------- |
| `technique`     | Whether the noise should be multiplied with the input color. | `VignetteTechnique.DEFAULT` |
| `blendFunction` | The blend function to use.                                   | `BlendFunction.NORMAL`      |
| `offset`        | The offset value.                                            | `0.5`                       |
| `darkness`      | The darkness value.                                          | `0.5`                       |

## Further Reading

For more details, see the [VignetteEffect documentation](https://pmndrs.github.io/postprocessing/public/docs/class/src/effects/VignetteEffect.js~VignetteEffect.html){rel="&#x22;nofollow&#x22;"}.


# Glitch

::docs-demo{:controls='false'}
:three-glitch
::

Glitch is an effect that simulates digital glitches, which are random or intentional errors that occur in digital media. The effect can be used to create a distorted or disrupted appearance, with elements of the scene appearing to shift or flicker in a chaotic manner.

The native `<Glitch />` component allows you to add this effect to your 3D scenes, and provides several parameters that can be tweaked to achieve the desired glitchy look, such as delay, duration, strength, mode, and more. The end result can be a unique and striking visual style that adds an extra layer of interest to your 3D scenes.

::warning
This effect may potentially cause epileptic seizures in people with photosensitive epilepsy. Viewer discretion is advised.
::

## Usage

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

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

    <Suspense>
      <EffectComposer>
        <Glitch />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop     | Description                                                                             | Default |
| -------- | --------------------------------------------------------------------------------------- | ------- |
| `dtSize` | The size of the generated noise map. Will be ignored if a perturbation map is provided. | `64`    |
| `goWild` | If true, the glitch effect will be more wild.                                           | `false` |

## Further Reading

See the [Three.js example](https://threejs.org/examples/?q=glit#webgl_postprocessing_glitch){rel="&#x22;nofollow&#x22;"}.


# Halftone

::docs-demo{:controls='false'}
:three-halftone
::

Halftone is an effect that simulates the halftone printing technique, which uses dots of varying sizes and spacing to create the illusion of continuous tone images. This effect can be used to give your 3D scenes a unique, comic book-like appearance.

## Usage

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

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

    <Suspense>
      <EffectComposer>
        <Halftone :shape="1" :radius="4" :rotate-r="Math.PI / 12" :rotate-g="Math.PI / 3" :rotate-b="Math.PI / 6" :scatter="0" :blending="1" :greyscale="false" />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop           | Description                                                                                | Default |
| -------------- | ------------------------------------------------------------------------------------------ | ------- |
| `shape`        | The shape of the halftone dots. Can be `1` (Dot), `2` (Ellipse), `3` (Line), `4` (Square). | `1`     |
| `radius`       | The radius of the halftone dots.                                                           | `4`     |
| `rotateR`      | The rotation of the red channel.                                                           | `0`     |
| `rotateG`      | The rotation of the green channel.                                                         | `0`     |
| `rotateB`      | The rotation of the blue channel.                                                          | `0`     |
| `scatter`      | The scatter of the halftone dots.                                                          | `0`     |
| `blending`     | The blending mode of the halftone effect.                                                  | `1`     |
| `greyscale`    | If true, the halftone effect will be in greyscale.                                         | `false` |
| `blendingMode` | The blending mode used for the halftone effect.                                            | `1`     |

## Further Reading

See the [Three.js example](https://threejs.org/examples/?q=halftone#webgl_postprocessing_rgb_halftone){rel="&#x22;nofollow&#x22;"}.


# Three Native Effects

Native Three.js effects are composed inside `<EffectComposer>`. They include the canonical passes shipped with Three.js itself (Unreal Bloom, Halftone, Glitch, Output, SMAA, Pixelation).

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

<template>
  <TresCanvas>
    <Suspense>
      <EffectComposer>
        <UnrealBloom />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```


# Output

The `<Output />` is usually the last pass in the chain and performs sRGB color space conversion and tone mapping.

## Usage

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

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

    <Suspense>
      <EffectComposer>
        <!-- other passes -->
        <Output />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

## Further Reading

See the [Three.js docs](https://threejs.org/docs/#manual/en/introduction/How-to-use-post-processing){rel="&#x22;nofollow&#x22;"}.


# Pixelation

::docs-demo{:controls='false'}
:three-pixelation
::

Pixelation is an effect that pixelates the scene.

## Usage

```vue
<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

| Prop                 | Description                                                                  | Default |
| -------------------- | ---------------------------------------------------------------------------- | ------- |
| `pixelSize`          | The size of the pixels. Larger values result in a more pixelated appearance. | `30`    |
| `depthEdgeStrength`  | The strength of the depth edges.                                             | `1.0`   |
| `normalEdgeStrength` | The strength of the normal edges.                                            | `0.5`   |

## Further Reading

See the [Three.js example](https://threejs.org/examples/?q=pixe#webgl_postprocessing_pixel){rel="&#x22;nofollow&#x22;"}.


# SMAA

::docs-demo{:controls='false'}
:three-smaa
::

SMAA (Subpixel Morphological Antialiasing) is an antialiasing technique that aims to reduce the visual defects that occur when high-frequency detail is displayed on a lower-resolution screen. This effect can be used to smooth out jagged edges in your 3D scenes.

## Usage

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

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

    <Suspense>
      <EffectComposer>
        <SMAA :width="1024" :height="768" />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop     | Description                                                                               | Default |
| -------- | ----------------------------------------------------------------------------------------- | ------- |
| `width`  | The width of the render target. If not provided, defaults to the width of the renderer.   |         |
| `height` | The height of the render target. If not provided, defaults to the height of the renderer. |         |

## Further Reading

See the [Three.js example](https://threejs.org/examples/?q=smaa#webgl_postprocessing_smaa){rel="&#x22;nofollow&#x22;"}.


# Unreal Bloom

::docs-demo{:controls='false'}
:three-unreal-bloom
::

Unreal Bloom is an effect that simulates the bloom effect seen in many modern video games. It creates a glow around bright areas of the scene, giving it a more vibrant and dynamic look.

## Usage

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

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

    <Suspense>
      <EffectComposer>
        <UnrealBloom :radius="0.5" :strength="1.5" :threshold="0.8" />
      </EffectComposer>
    </Suspense>
  </TresCanvas>
</template>
```

## Props

| Prop        | Description                                   | Default |
| ----------- | --------------------------------------------- | ------- |
| `radius`    | The radius of the bloom effect.               | `0`     |
| `strength`  | The strength of the bloom effect.             | `1`     |
| `threshold` | The threshold luminance for the bloom effect. | `0`     |

## Further Reading

See the [Three.js example](https://threejs.org/examples/?q=bloom#webgl_postprocessing_unreal_bloom){rel="&#x22;nofollow&#x22;"}.


# API Reference

`@tresjs/post-processing` exposes two families of effects:

- **[Pmndrs](https://post-processing.tresjs.org/api/pmndrs)** — 28 effects powered by [pmndrs/postprocessing](https://github.com/pmndrs/postprocessing){rel="&#x22;nofollow&#x22;"}.
- **[Three](https://post-processing.tresjs.org/api/three)** — 6 native Three.js post-processing effects.

Pick the one that matches your effect. Pmndrs effects use `<EffectComposerPmndrs>`, three native effects use `<EffectComposer>`.


# Advanced

Advanced topics for teams using `@tresjs/post-processing` in production.

- [You might not need post-processing](https://post-processing.tresjs.org/advanced/you-might-not-need-post-processing)


# You might not need post-processing

Please note that you can use [TresJS's attach feature](https://docs.tresjs.org/advanced/attach.html#arrays){rel="&#x22;nofollow&#x22;"} instead of this module. It enables you to utilize any effect provided by Three.js, even if there is no corresponding component in post-processing.

We recommend using post-processing because the props of the effects are reactive. The attach feature does not offer prop reactivity. However, if you do not require that advantage, it is a valid option to achieve equal results.