Sepia Demo

Vignette Demo

Noise Demo

Grid Demo

Glitch Demo

DepthOfField Demo

Autofocus (TS + refApi)

Pixelation Demo

ToneMapping demo

Scanline

HueSaturation Demo

react-postprocessing SSAO, SMAA and Bloom demo

Brightness Contrast

ColorAverage Demo

ChromaticAberration

DotScreen Demo

SMAA

EffectComposer

What is React Postprocessing and how you can use it


`react-postprocessing` is a
[postprocessing](https://github.com/pmndrs/postprocessing) wrapper for
[@react-three/fiber](https://github.com/pmndrs/react-three-fiber). This is not
(yet) meant for complex orchestration of effects, but can save you
[hundreds of LOC](https://twitter.com/0xca0a/status/1289501594698960897) for a
straight forward effects-chain.

```bash
npm install @react-three/postprocessing
```

[![Bubbles](https://github.com/pmndrs/react-postprocessing/raw/master/docs/bubbles.jpg)](https://m94xb.csb.app)

[![Control](https://github.com/pmndrs/react-postprocessing/raw/master/docs/control.jpg)](https://5jgjz.csb.app)

#### Why postprocessing and not three/examples/jsm/postprocessing?

From
[https://github.com/pmndrs/postprocessing](https://github.com/pmndrs/postprocessing#performance)

> This library provides an EffectPass which automatically organizes and merges
> any given combination of effects. This minimizes the amount of render
> operations and makes it possible to combine many effects without the
> performance penalties of traditional pass chaining. Additionally, every effect
> can choose its own blend function.
>
> All fullscreen render operations also use a single triangle that fills the
> screen. Compared to using a quad, this approach harmonizes with modern GPU
> rasterization patterns and eliminates unnecessary fragment calculations along
> the screen diagonal. This is especially beneficial for GPGPU passes and
> effects that use complex fragment shaders.

Postprocessing also supports srgb-encoding out of the box, as well as WebGL2
MSAA (multi sample anti aliasing), which is react-postprocessing's default, you
get high performance crisp results w/o jagged edges.

#### What does it look like?

Here's an example combining a couple of effects
([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).

<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
  <img src="https://github.com/pmndrs/react-postprocessing/raw/master/docs/bubbles.jpg" alt="Bubbles Demo" />
</a>

```jsx
import React from 'react'
import { Bloom, DepthOfField, EffectComposer, Noise, Vignette } from '@react-three/postprocessing'
import { Canvas } from '@react-three/fiber'

function App() {
  return (
    <Canvas>
      {/* Your regular scene contents go here, like always ... */}
      <EffectComposer>
        <DepthOfField focusDistance={0} focalLength={0.02} bokehScale={2} height={480} />
        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} height={300} />
        <Noise opacity={0.02} />
        <Vignette eskil={false} offset={0.1} darkness={1.1} />
      </EffectComposer>
    </Canvas>
  )
}
```

## Documentation

- [react-postprocessing docs](https://docs.pmnd.rs/react-postprocessing)
- [postprocessing docs](https://pmndrs.github.io/postprocessing/public/docs/)


From
https://github.com/pmndrs/postprocessing

Why postprocessing and not three/examples/jsm/postprocessing?

Here's an example combining a couple of effects
(live demo).

What does it look like?

Documentation

Introduction

Selection


An auto-focus effect, that extends `<DepthOfField>`.

Based on [ektogamat/AutoFocusDOF](https://github.com/ektogamat/AutoFocusDOF).

```tsx
export type AutofocusProps = typeof DepthOfField & {
  target?: [number, number, number] // undefined
  mouse?: boolean // false
  debug?: number // undefined
  manual?: boolean // false
  smoothTime?: number // .25
}
```

```tsx
<EffectComposer>
  <Autofocus />
</EffectComposer>
```

Ref-api:

```tsx
type AutofocusApi = {
  dofRef: RefObject<DepthOfFieldEffect>
  hitpoint: THREE.Vector3
  update: (delta: number, updateTarget: boolean) => void
}
```

```tsx
<Autofocus ref={autofocusRef} />
```

Associated with `manual` prop, you can for example, animate the DOF target yourself:

```tsx
useFrame((_, delta) => {
  const api = autofocusRef.current
  api.update(delta, false) // update hitpoint only
  easing.damp3(api.dofRef.curent.target, api.hitpoint, 0.5, delta) // custom easing
})
```

## Example

<Codesandbox id="dfw6w4" />


Example

Autofocus


A bloom effect.

```jsx
import { Bloom } from '@react-three/postprocessing'
import { BlurPass, Resizer, KernelSize, Resolution } from 'postprocessing'

return (
  <Bloom
    intensity={1.0} // The bloom intensity.
    blurPass={undefined} // A blur pass.
    kernelSize={KernelSize.LARGE} // blur kernel size
    luminanceThreshold={0.9} // luminance threshold. Raise this value to mask out darker elements in the scene.
    luminanceSmoothing={0.025} // smoothness of the luminance threshold. Range is [0, 1]
    mipmapBlur={false} // Enables or disables mipmap blur.
    resolutionX={Resolution.AUTO_SIZE} // The horizontal resolution.
    resolutionY={Resolution.AUTO_SIZE} // The vertical resolution.
  />
)
```

Bloom is selective by default, you control it not on the effect pass but on the
materials by lifting their colors out of 0-1 range. a `luminanceThreshold` of 1
ensures that ootb nothing will glow, only the materials you pick. For this to
work `toneMapped` has to be false on the materials, because it would otherwise
clamp colors between 0 and 1 again.

```jsx
<Bloom mipmapBlur luminanceThreshold={1} />

// ❌ will not glow, same as RGB [1,0,0]
<meshStandardMaterial color="red"/>

// ✅ will glow, same as RGB [2,0,0]
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />

// ❌ will not glow, same as RGB [1,0,0]
<meshBasicMaterial color="red" />

// ❌ will not glow, same as RGB [1,0,0], tone-mapping will clamp colors between 0 and 1
<meshBasicMaterial color={[2,0,0]} />

// ✅ will glow, same as RGB [2,0,0]
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />
```

## Example

<Codesandbox id="r9ujf" />

## Props

| Name               | Type                                                                                                         | Default              | Description                                                                                          |
| ------------------ | ------------------------------------------------------------------------------------------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------- |
| luminanceThreshold | Number                                                                                                       | 0.9                  | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. |
| luminanceSmoothing | Number                                                                                                       | 0.025                | Controls the smoothness of the luminance threshold. Range is [0, 1].                                 |
| blendFunction      | BlendFunction                                                                                                | BlendFunction.SCREEN | The blend function of this effect.                                                                   |
| intensity          | Number                                                                                                       | 1                    | The intensity.                                                                                       |
| resolutionX        | Number                                                                                                       | Resizer.AUTO_SIZE    | The render width.                                                                                    |
| resolutionY        | Number                                                                                                       | Resizer.AUTO_SIZE    | The render height.                                                                                   |
| kernelSize         | Number                                                                                                       | KernelSize.LARGE     | The blur kernel size.                                                                                |
| blurPass           | [BlurPass](https://vanruesc.github.io/postprocessing/public/docs/class/src/passes/BlurPass.js~BlurPass.html) | null                 | An efficient, incremental blur pass.                                                                 |
| mipMap             | Boolean                                                                                                      |


Props

Bloom


Alter brightness and contrast of your scene

```jsx
import { BrightnessContrast } from '@react-three/postprocessing'

return (
  <BrightnessContrast
    brightness={0} // brightness. min: -1, max: 1
    contrast={0} // contrast: min -1, max: 1
  />
)
```

## Example

<Codesandbox id="rrev1" />

## Props

| Name       | Type   | Default | Description            |
| ---------- | ------ | ------- | ---------------------- |
| brightness | Number | 0       | Scene brightness shift |
| contrast   | Number | 0       | Scene contrast shift   |


BrightnessContrast


A chromatic aberration effect.

```jsx
import { ChromaticAberration } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <ChromaticAberration
    blendFunction={BlendFunction.NORMAL} // blend mode
    offset={[0.02, 0.002]} // color offset
  />
)
```

## Example

<Codesandbox id="uoyge" />

## Props

| Name          | Type          | Default              | Description                        |
| ------------- | ------------- | -------------------- | ---------------------------------- |
| offset        | Vector2       |                      | The color offset.                  |
| blendFunction | BlendFunction | BlendFunction.Normal | The blend function of this effect. |



A color average effect.

```jsx
import { ColorAverage } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <ColorAverage
    blendFunction={BlendFunction.NORMAL} // blend mode
  />
)
```

## Example

<Codesandbox id="ulsyy" />

## Props

| Name          | Type          | Default              | Description                        |
| ------------- | ------------- | -------------------- | ---------------------------------- |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |


ColorAverage


A depth of field effect.

Based on a graphics study by Adrian Courrèges and an article by Steve Avery: https://www.adriancourreges.com/blog/2016/09/09/doom-2016-graphics-study/ https://pixelmischiefblog.wordpress.com/2016/11/25/bokeh-depth-of-field/

```jsx
import { DepthOfField } from '@react-three/postprocessing'

return (
  <DepthOfField
    focusDistance={0} // where to focus
    focalLength={0.02} // focal length
    bokehScale={2} // bokeh size
  />
)
```

## Example

<Codesandbox id="bu796" />

## Props

| Name          | Type          | Default              | Description                                         |
| ------------- | ------------- | -------------------- | --------------------------------------------------- |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect.                  |
| focusDistance | Number        | 0                    | The normalized focus distance. Range is [0.0, 1.0]. |
| focalLength   | Number        | 0.1                  | The focal length. Range is [0.0, 1.0].              |
| bokehScale    | Number        | 1.0                  | The scale of the bokeh blur.                        |
| width         | Number        | Resizer.width        | The render width.                                   |
| height        | Number        | Resizer.height       | The render height.                                  |


DepthOfField


A dot screen effect.

```jsx
import { DotScreen } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <DotScreen
    blendFunction={BlendFunction.NORMAL} // blend mode
    angle={Math.PI * 0.5} // angle of the dot pattern
    scale={1.0} // scale of the dot pattern
  />
)
```

## Example

<Codesandbox id="xt3fb" />

## Props

| Name          | Type          | Default              | Description                        |
| ------------- | ------------- | -------------------- | ---------------------------------- |
| angle         | Number        | 1 .57                | The angle of the dot pattern.      |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |
| scale         | Number        | 1 .57                | The scale of the dot pattern.      |


Dot Screen


A glitch effect.

```jsx
import { Glitch } from '@react-three/postprocessing'
import { GlitchMode } from 'postprocessing'

return (
  <Glitch
    delay={[1.5, 3.5]} // min and max glitch delay
    duration={[0.6, 1.0]} // min and max glitch duration
    strength={[0.3, 1.0]} // min and max glitch strength
    mode={GlitchMode.SPORADIC} // glitch mode
    active // turn on/off the effect (switches between "mode" prop and GlitchMode.DISABLED)
    ratio={0.85} // Threshold for strong glitches, 0 - no weak glitches, 1 - no strong glitches.
  />
)
```

## Example

<Codesandbox id="bs1i1" />

## Props

| Name                      | Type          | Default              | Description                                                                               |
| ------------------------- | ------------- | -------------------- | ----------------------------------------------------------------------------------------- |
| active                    | Boolean       | true                 | Turn the effect on and off                                                                |
| blendFunction             | BlendFunction | BlendFunction.NORMAL | The blend function of this effect.                                                        |
| chromaticAberrationOffset | Vector2       |                      | A chromatic aberration offset. If provided, the glitch effect will influence this offset. |
| delay                     | Vector2       |                      | The minimum and maximum delay between glitch activations in seconds.                      |
| duration                  | Vector2       |                      | The minimum and maximum duration of a glitch in seconds.                                  |
| strength                  | Vector2       |                      | The strength of weak and strong glitches.                                                 |
| perturbationMap           | Texture       |                      | A perturbation map. If none is provided, a noise texture will be created.                 |
| dtSize                    | Number        | 64                   | The size of the generated noise map. Will be ignored if a perturbation map is provided.   |
| columns                   | Number        | 0.05                 | The scale of the blocky glitch columns.                                                   |
| ratio                     | Number        | 0.85                 | The threshold for strong glitches.                                                        |


Glitch


The GodRays effect requires a mesh that will be used as an origin point for the rays. Refer to this [example](https://github.com/pmndrs/react-postprocessing/tree/2d7edcc2ef7cc2571a86f30ede2b9ee25b38987e/examples/src/demos/TakeControl) for more details.

```jsx
import { GodRays } from '@react-three/postprocessing'

return (
  <GodRays
    sun={sunRef}
    blendFunction={BlendFunction.Screen} // The blend function of this effect.
    samples={60} // The number of samples per pixel.
    density={0.96} // The density of the light rays.
    decay={0.9} // An illumination decay factor.
    weight={0.4} // A light ray weight factor.
    exposure={0.6} // A constant attenuation coefficient.
    clampMax={1} // An upper bound for the saturation of the overall effect.
    width={Resizer.AUTO_SIZE} // Render width.
    height={Resizer.AUTO_SIZE} // Render height.
    kernelSize={KernelSize.SMALL} // The blur kernel size. Has no effect if blur is disabled.
    blur={true} // Whether the god rays should be blurred to reduce artifacts.
  />
)
```

## Props

| Name          | Type                                                                                                               | Default              | Description                                                                  |
| ------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------- | ---------------------------------------------------------------------------- |
| sun           | Ref                                                                                                                |                      | The light source. Must not write depth and has to be flagged as transparent. |
| blendFunction | BlendFunction                                                                                                      | BlendFunction.Screen | The blend function of this effect.                                           |
| samples       | Number                                                                                                             | 60                   | The number of samples per pixel.                                             |
| density       | Number                                                                                                             | 0.96                 | The density of the light rays.                                               |
| decay         | Number                                                                                                             | 0.9                  | An illumination decay factor.                                                |
| weight        | Number                                                                                                             | 0.4                  | A light ray weight factor.                                                   |
| exposure      | Number                                                                                                             | 0.6                  | A constant attenuation coefficient.                                          |
| clampMax      | Number                                                                                                             | 1                    | An upper bound for the saturation of the overall effect.                     |
| width         | Number                                                                                                             | Resizer.AUTO_SIZE    | The render width.                                                            |
| height        | Number                                                                                                             | Resizer.AUTO_SIZE    | The render height.                                                           |
| kernelSize    | [KernelSize](https://vanruesc.github.io/postprocessing/public/docs/variable/index.html#static-variable-KernelSize) | KernelSize.SMALL     | The blur kernel size. Has no effect if blur is disabled.                     |
| blur          | Boolean                                                                                                            | true                 | Whether the god rays should be blurred to reduce artifacts                   |


GodRays


A Grid effect

```jsx
import { Grid } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <Grid
    blendFunction={BlendFunction.OVERLAY} // blend mode
    scale={1.0} // grid pattern scale
    lineWidth={0.0} // grid pattern line width
    size={{ width, height }} // overrides the default pass width and height
  />
)
```

## Example

<Codesandbox id="9ebpg" />

## Props

| Name          | Type          | Default              | Description                        |
| ------------- | ------------- | -------------------- | ---------------------------------- |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |
| scale         | Number        | 1                    | The scale of the grid pattern.     |
| lineWidth     | Number        | 0                    | The blend function of this effect. |
| width         | Number        |                      | Overrides the default pass width   |
| height        | Number        |                      | Overrides the default pass height  |


Grid


A hue/saturation effect.

```jsx
import { HueSaturation } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <HueSaturation
    blendFunction={BlendFunction.NORMAL} // blend mode
    hue={0} // hue in radians
    saturation={0} // saturation in radians
  />
)
```

## Example

<Codesandbox id="m9min" />

## Props

| Name          | Type          | Default | Description                        |
| ------------- | ------------- | ------- | ---------------------------------- |
| hue           | Number        | 0       | Hue shift in radians               |
| saturation    | Number        | 0       | Saturation value in radians        |
| blendFunction | BlendFunction |         | The blend function of this effect. |


HueSaturation


A Lens Flare adds the optical aberration caused by the dispersion of light entering the lens through its edges.

Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare).

```jsx
import { LensFlare } from '@react-three/postprocessing'

return (
  <LensFlare
    blendFunction={BlendFunction.Screen} // The blend function of this effect.
    enabled={true} // Boolean to enable/disable the effect.
    opacity={1.0} // The opacity for this effect. Default: 1.0
    starBurst={true} // Boolean to enable/disable the start burst effect. Can be disabled to improve performance.
    glareSize={0.96} // The glare size. Default: 0.2
    followMouse={false} // Set it to follow the mouse, ignoring the lens position. Default: false
    lensPosition={[0, 0.5, 0]} // The position of the lens flare in 3d space.
    starPoints={6} // The number of points for the star. Default: 6
    flareSize={0.01} // The flare side. Default 0.01
    flareSpeed={0.01} // The flare animation speed. Default 0.01
    flareShape={0.01} // Changes the appearance to anamorphic. Default 0.01
    animated={true} // Animated flare. Default: true
    anamorphic={false} //Set the appearance to full anamorphic. Default: false
    colorGain={new THREE.Color(70, 70, 70)} // Set the color gain for the lens flare. Must be a THREE.Color in RBG format.
    lensDirtTexture={'/lensDirtTexture.png'} // Texture to be used as color dirt for starburst effect.
    haloScale={0.5} // The halo scale. Default: 0.5
    secondaryGhosts={true} // Option to enable/disable secondary ghosts. Default: true.
    ghostScale={0.0} // Option to enable/disable secondary ghosts. Default: true.
    aditionalStreaks={true} // Option to enable/disable aditional streaks. Default: true.
    smoothTime={0.07} // The time that it takes to fade the occlusion. Default: 0.07
  />
)
```

#### Ignoring occlusion on some objects

To disable the occlusion effect, simply add `userData={{ lensflare: 'no-occlusion' }}` to your object/mesh props.

#### Improving performance

Use bvh `<bvh><Scene></bvh>` to enhance the internal raycaster performance.

#### Limitations

The Ultimate Lens Flare leverages the raycaster to examine the material type of objects and determine if they are `MeshTransmissionMaterial` or `MeshPhysicalMaterial`. It checks for the transmission parameter to identify glass-like materials. Therefore, for an object to behave like glass, its material should have either `transmission = 1` or `transparent = true` and `opacity = NUMBER`. The effect automatically interprets the opacity `NUMBER` value to determine the brightness of the flare.

#### Credits

- https://www.shadertoy.com/view/4sK3W3
- https://www.shadertoy.com/view/4sX3Rs
- https://www.shadertoy.com/view/dllSRX
- https://www.shadertoy.com/view/Xlc3D2
- https://www.shadertoy.com/view/XtKfRV


To disable the occlusion effect, simply add userData={{ lensflare: 'no-occlusion' }} to your object/mesh props.

Ignoring occlusion on some objects

Use bvh <bvh><Scene></bvh> to enhance the internal raycaster performance.

Improving performance

The Ultimate Lens Flare leverages the raycaster to examine the material type of objects and determine if they are MeshTransmissionMaterial or MeshPhysicalMaterial. It checks for the transmission parameter to identify glass-like materials. Therefore, for an object to behave like glass, its material should have either transmission = 1 or transparent = true and opacity = NUMBER. The effect automatically interprets the opacity NUMBER value to determine the brightness of the flare.

Limitations

Credits

Lensflare


A noise effect.

```jsx
import { Noise } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <Noise
    premultiply // enables or disables noise premultiplication
    blendFunction={BlendFunction.ADD} // blend mode
  />
)
```

## Example

<Codesandbox id="8l8hi" />

## Props

| Name          | Type          | Default              | Description                                                  |
| ------------- | ------------- | -------------------- | ------------------------------------------------------------ |
| premultiply   | Boolean       | false                | Whether the noise should be multiplied with the input color. |
| blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect.                           |


Noise


An outline effect.

```jsx
import { Outline } from '@react-three/postprocessing'
import { BlendFunction, Resizer, KernelSize } from 'postprocessing'

return (
  <Outline
    selection={[meshRef1, meshRef2]} // selection of objects that will be outlined
    selectionLayer={10} // selection layer
    blendFunction={BlendFunction.SCREEN} // set this to BlendFunction.ALPHA for dark outlines
    patternTexture={null} // a pattern texture
    edgeStrength={2.5} // the edge strength
    pulseSpeed={0.0} // a pulse speed. A value of zero disables the pulse effect
    visibleEdgeColor={0xffffff} // the color of visible edges
    hiddenEdgeColor={0x22090a} // the color of hidden edges
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    blur={false} // whether the outline should be blurred
    xRay={true} // indicates whether X-Ray outlines are enabled
  />
)
```

## Props

| Name             | Type          | Default               | Description                                                   |
| ---------------- | ------------- | --------------------- | ------------------------------------------------------------- |
| selection        | Objects       |                       | Selection of objects that will be outlined                    |
| blendFunction    | BlendFunction | BlendFunction.SCREEN  | The blend function of this effect.                            |
| width            | Number        | Resizer.AUTO_SIZE     | The render width.                                             |
| height           | Number        | Resizer.AUTO_SIZE     | The render height.                                            |
| selectionLayer   | Number        |                       | The selection layer                                           |
| patternTexture   | Number        | null                  | A pattern texture                                             |
| edgeStrength     | Number        | 1                     | The edge strength                                             |
| pulseSpeed       | Number        | 0                     | The pulse speed. A value of zero disables the pulse effect.   |
| visibleEdgeColor | Number        | 0xffffff              | The color of visible edges.                                   |
| hiddenEdgeColor  | Number        | 0x22090a              | The color of hidden edges.                                    |
| kernelSize       | KernelSize    | KernelSize.VERY_SMALL | The blur kernel size.                                         |
| blur             | Boolean       | false                 | Whether the outline should be blurred.                        |
| xray             | Boolean       | true                  | Whether occluded parts of selected objects should be visible. |


Outline


A pixelation effect.

Warning: This effect cannot be merged with convolution effects.

```jsx
import { Pixelation } from '@react-three/postprocessing'

return (
  <Pixelation
    granularity={5} // pixel granularity
  />
)
```

## Example

<Codesandbox id="ed9yo" />

## Props

| Name        | Type   | Default | Description |
| ----------- | ------ | ------- | ----------- |
| granularity | Number | 30      | Pixel Size  |


Pixelation


A scanline effect.

Based on an implementation by Georg 'Leviathan' Steinrohder (CC BY 3.0): http://www.truevision3d.com/forums/showcase/staticnoise_colorblackwhite_scanline_shaders-t18698.0.html

```jsx
import { Scanline } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <Scanline
    blendFunction={BlendFunction.OVERLAY} // blend mode
    density={1.25} // scanline density
  />
)
```

## Example

<Codesandbox id="iy14d" />

## Props

| Name          | Type          | Default               | Description                        |
| ------------- | ------------- | --------------------- | ---------------------------------- |
| density       | Number        | 1.25                  | The scanline density.              |
| blendFunction | BlendFunction | BlendFunction.OVERLAY | The blend function of this effect. |



A selective bloom effect.

This effect applies bloom to selected objects only.

Attention: If you don't need to limit bloom to a subset of objects, consider using the BloomEffect instead for better performance.

```jsx
import { SelectiveBloom } from '@react-three/postprocessing'
import { BlurPass, Resizer, KernelSize } from 'postprocessing'

return (
  <SelectiveBloom
    lights={[lightRef1, lightRef2]} // ⚠️ REQUIRED! all relevant lights
    selection={[meshRef1, meshRef2]} // selection of objects that will have bloom effect
    selectionLayer={10} // selection layer
    intensity={1.0} // The bloom intensity.
    blurPass={undefined} // A blur pass.
    width={Resizer.AUTO_SIZE} // render width
    height={Resizer.AUTO_SIZE} // render height
    kernelSize={KernelSize.LARGE} // blur kernel size
    luminanceThreshold={0.9} // luminance threshold. Raise this value to mask out darker elements in the scene.
    luminanceSmoothing={0.025} // smoothness of the luminance threshold. Range is [0, 1]
  />
)
```

## Props

| Name               | Type                                                                                                         | Default              | Description                                                                                          |
| ------------------ | ------------------------------------------------------------------------------------------------------------ | -------------------- | ---------------------------------------------------------------------------------------------------- |
| selection          | Objects                                                                                                      |                      | Selection of objects that will be outlined                                                           |
| lights             | Lights                                                                                                       |                      | All lights that will affect the effect                                                               |
| blendFunction      | BlendFunction                                                                                                | BlendFunction.SCREEN | The blend function of this effect.                                                                   |
| width              | Number                                                                                                       | Resizer.AUTO_SIZE    | The render width.                                                                                    |
| height             | Number                                                                                                       | Resizer.AUTO_SIZE    | The render height.                                                                                   |
| selectionLayer     | Number                                                                                                       |                      | The selection layer                                                                                  |
| blurPass           | [BlurPass](https://vanruesc.github.io/postprocessing/public/docs/class/src/passes/BlurPass.js~BlurPass.html) | null                 | An efficient, incremental blur pass.                                                                 |
| kernelSize         | KernelSize                                                                                                   | KernelSize.LARGE     | The blur kernel size.                                                                                |
| luminanceThreshold | Number                                                                                                       | 0.9                  | The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1]. |
| luminanceSmoothing | Number                                                                                                       | 0.025                | Controls the smoothness of the luminance threshold. Range is [0, 1].                                 |
| intensity          | Number                                                                                                       | 1                    | Intensity of the effect                                                                              |


SelectiveBloom


A sepia effect.

```jsx
import { Sepia } from '@react-three/postprocessing'

return (
  <Sepia
    intensity={1.0} // sepia intensity
    blendFunction={BlendFunction.NORMAL} // blend mode
  />
)
```

## Example

<Codesandbox id="6jyby" />

## Props

| Name          | Type          | Default              | Description                        |
| ------------- | ------------- | -------------------- | ---------------------------------- |
| intensity     | Boolean       | 1                    | The intensity of the effect        |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |


Sepia


A Screen Space Ambient Occlusion (SSAO) effect.
For high quality visuals use two SSAO effect instances in a row with different radii, one for rough AO and one for fine details.

This effect supports depth-aware upsampling and should be rendered at a lower resolution. The resolution should match that of the downsampled normals and depth. If you intend to render SSAO at full resolution, do not provide a downsampled normalDepthBuffer and make sure to disable depthAwareUpsampling.

```jsx
import { SSAO } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <SSAO
    blendFunction={BlendFunction.MULTIPLY} // blend mode
    samples={30} // amount of samples per pixel (shouldn't be a multiple of the ring count)
    rings={4} // amount of rings in the occlusion sampling pattern
    distanceThreshold={1.0} // global distance threshold at which the occlusion effect starts to fade out. min: 0, max: 1
    distanceFalloff={0.0} // distance falloff. min: 0, max: 1
    rangeThreshold={0.5} // local occlusion range threshold at which the occlusion starts to fade out. min: 0, max: 1
    rangeFalloff={0.1} // occlusion range falloff. min: 0, max: 1
    luminanceInfluence={0.9} // how much the luminance of the scene influences the ambient occlusion
    radius={20} // occlusion sampling radius
    scale={0.5} // scale of the ambient occlusion
    bias={0.5} // occlusion bias
  />
)
```

## Props

<table class="params">
  <thead>
    <tr>
      <td>Name</td>
      <td>Type</td>
      <td>Default</td>
      <td>Description</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>blendFunction</td>
      <td>
        <a href="https://vanruesc.github.io/postprocessing/public/docs/variable/index.html#static-variable-BlendFunction">
          BlendFunction
        </a>
      </td>
      <td>BlendFunction.MULTIPLY</td>
      <td>The blend function of this effect.</td>
    </tr>
    <tr>
      <td>distanceScaling</td>
      <td>Boolean</td>
      <td>true</td>
      <td>Enables or disables distance-based radius scaling.</td>
    </tr>
    <tr>
      <td>depthAwareUpsampling</td>
      <td>Boolean</td>
      <td>true</td>
      <td>Enables or disables depth-aware upsampling. Has no effect if WebGL 2 is not supported.</td>
    </tr>
    <tr>
      <td>normalDepthBuffer</td>
      <td>Texture</td>
      <td>null</td>
      <td>
        A texture that contains downsampled scene normals and depth. See
        <a href="https://vanruesc.github.io/postprocessing/public/docs/class/src/passes/DepthDownsamplingPass.js~DepthDownsamplingPass.html">
          DepthDownsamplingPass
        </a>
      </td>
    </tr>
    <tr>
      <td>samples</td>
      <td>Number</td>
      <td>9</td>
      <td>The amount of samples per pixel. Should not be a multiple of the ring count.</td>
    </tr>
    <tr>
      <td>rings</td>
      <td>Number</td>
      <td>7</td>
      <td>The amount of spiral turns in the occlusion sampling pattern. Should be a prime number.</td>
    </tr>
    <tr>
      <td>distanceThreshold</td>
      <td>Number</td>
      <td>0.97</td>
      <td>A global distance threshold at which the occlusion effect starts to fade out. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>distanceFalloff</td>
      <td>Number</td>
      <td>0.03</td>
      <td>The distance falloff. Influences the smoothness of the overall occlusion cutoff. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>rangeThreshold</td>
      <td>Number</td>
      <td>0.0005</td>
      <td>A local occlusion range threshold at which the occlusion starts to fade out. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>rangeFalloff</td>
      <td>Number</td>
      <td>0.001</td>
      <td>The occlusion range falloff. Influences the smoothness of the proximity cutoff. Range [0.0, 1.0].</td>
    </tr>
    <tr>
      <td>minRadiusScale</td>
      <td>Number</td>
      <td>0.33</td>
      <td>The minimum radius scale. Has no effect if distance scaling is disabled.</td>
    </tr>
    <tr>
      <td>luminanceInfluence</td>
      <td>Number</td>
      <td>0.7</td>
      <td>Determines how much the luminance of the scene influences the ambient occlusion.</td>
    </tr>
    <tr>
      <td>radius</td>
      <td>Number</td>
      <td>0.1825</td>
      <td>The occlusion sampling radius, expressed as a resolution independent scale. Range [1e-6, 1.0].</td>
    </tr>
    <tr>
      <td>intensity</td>
      <td>Number</td>
      <td>1.0</td>
      <td>The intensity of the ambient occlusion.</td>
    </tr>
    <tr>
      <td>bias</td>
      <td>Number</td>
      <td>0.025</td>
      <td>An occlusion bias. Eliminates artifacts caused by depth discontinuities.</td>
    </tr>
    <tr>
      <td>fade</td>
      <td>Number</td>
      <td>0.01</td>
      <td>Influences the smoothness of the shadows. A lower value results in higher contrast.</td>
    </tr>
    <tr>
      <td>color</td>
      <td>Color</td>
      <td>null</td>
      <td>The color of the ambient occlusion.</td>
    </tr>
    <tr>
      <td>resolutionScale</td>
      <td>Number</td>
      <td>1.0</td>
      <td>The resolution scale.</td>
    </tr>
    <tr>
      <td>width</td>
      <td>Number</td>
      <td>Resizer.AUTO_SIZE</td>
      <td>The render width.</td>
    </tr>
    <tr>
      <td>height</td>
      <td>Number</td>
      <td>Resizer.AUTO_SIZE</td>
      <td>The render height.</td>
    </tr>
  </tbody>
</table>


SSAO


A tone mapping effect.

```jsx
import { ToneMapping } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <ToneMapping
    blendFunction={BlendFunction.NORMAL} // blend mode
    adaptive={true} // toggle adaptive luminance map usage
    resolution={256} // texture resolution of the luminance map
    middleGrey={0.6} // middle grey factor
    maxLuminance={16.0} // maximum luminance
    averageLuminance={1.0} // average luminance
    adaptationRate={1.0} // luminance adaptation rate
  />
)
```

## Example

<Codesandbox id="fjb06" />

## Props

| Name             | Type          | Default | Description                                                         |
| ---------------- | ------------- | ------- | ------------------------------------------------------------------- |
| resolution       | Number        | 256     | The resolution of the luminance texture. Must be a power of two.    |
| adaptive         | boolean       | true    | Toggle adaptive luminance map usage                                 |
| blendFunction    | BlendFunction |         | The blend function of this effect.                                  |
| middleGrey       | Number        | 0.6     | The middle grey factor.                                             |
| maxLuminance     | Number        | 16      | Maximum luminance                                                   |
| minLuminance     | Number        | 0.01    | The minimum luminance. Prevents very high exposure in dark scenes.  |
| averageLuminance | Number        | 1       | The average luminance. Used for the non-adaptive Reinhard operator. |
| adaptationRate   | Number        | 1       | The luminance adaptation rate.                                      |


ToneMapping


A vignette effect.

```jsx
import { Vignette } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

return (
  <Vignette
    offset={0.5} // vignette offset
    darkness={0.5} // vignette darkness
    eskil={false} // Eskil's vignette technique
    blendFunction={BlendFunction.NORMAL} // blend mode
  />
)
```

## Example

<Codesandbox id="851sn" />

## Props

| Name          | Type          | Default              | Description                         |
| ------------- | ------------- | -------------------- | ----------------------------------- |
| eskil         | Boolean       | false                | Enables Eskil's vignette technique. |
| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect.  |
| offset        | Number        | 0.5                  | The vignette offset.                |
| darkness      | Number        | 0.5                  | The vignette darkness.              |
