@react-three/postprocessing

If you need an effect that is not provided by the postprocessing library, you can create one by extending the Effect class.

1. Implement the Class: Create a class that extends Effect. Pass a unique name and your fragment shader to super(). Define your uniforms using a Map of three Uniform objects.
2. Implement update: Use the update(renderer, inputBuffer, deltaTime) method to update uniform values every frame.
3. Wrap in a Component: Create a React component using forwardRef and useMemo that returns the effect instance via a <primitive /> component.

import React, { forwardRef, useMemo } from 'react'
import { Uniform } from 'three'
import { Effect } from 'postprocessing'

const fragmentShader = `some_shader_code`

let _uParam

// Effect implementation
class MyCustomEffectImpl extends Effect {
  constructor({ param = 0.1 } = {}) {
    super('MyCustomEffect', fragmentShader, {
      uniforms: new Map([['param', new Uniform(param)]]),
    })

    _uParam = param
  }

  update(renderer, inputBuffer, deltaTime) {
    this.uniforms.get('param').value = _uParam
  }
}

// Effect component
export const MyCustomEffect = forwardRef(({ param }, ref) => {
  const effect = useMemo(() => new MyCustomEffectImpl(param), [param])
  return <primitive ref={ref} object={effect} dispose={null} />
})

To apply post-processing effects to your scene, wrap your desired effects inside an <EffectComposer /> component within your <Canvas />. The <EffectComposer /> manages the effect chain and optimizes rendering by merging effects where possible.

Commonly used effects include <Bloom />, <DepthOfField />, <Noise />, and <Vignette />.

Note: This library uses WebGL2 MSAA (multi-sample anti-aliasing) by default for high-performance, crisp results.

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>
  )
}

To apply post-processing effects to your scene, wrap your desired effects inside an <EffectComposer /> component within your <Canvas />. The EffectComposer acts as a wrapper that manages the effects chain.

This approach is more efficient than traditional pass chaining because it uses an EffectPass that automatically organizes and merges effects, minimizing render operations. It also uses a single triangle to fill the screen instead of a quad, which optimizes GPU rasterization and fragment shader performance.

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>
  )
}

The SelectiveBloom effect applies bloom only to a specific subset of objects in your scene. This is useful when you want to prevent the entire scene from glowing and only want certain elements to bloom.

Performance Note: If you do not need to limit bloom to specific objects, use the BloomEffect instead, as it is more performant.

To use SelectiveBloom, you must provide both a lights array (containing all lights that affect the effect) and a selection array (containing the objects that should bloom). You can also use a selectionLayer to define which layer the selected objects reside on.

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]
  />
)