### Install react-postprocessing

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/getting-started.md

Install the library using npm or yarn.

```bash
npm install @react-three/postprocessing
# or
yarn add @react-three/postprocessing
```

--------------------------------

### Install react-postprocessing

Source: https://github.com/pmndrs/react-postprocessing/blob/master/README.md

Install the library using npm. This is the first step to integrating post-processing effects into your React Three Fiber project.

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

--------------------------------

### Install Peer Dependencies

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/getting-started.md

Ensure you have the required versions of react, react-dom, three, and @react-three/fiber installed.

```bash
npm install react@^19.0 react-dom@^19.0 three@>=0.156.0 @react-three/fiber@^9.0
```

--------------------------------

### Basic God Rays Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-god-rays.md

Demonstrates a basic setup for the GodRays effect within a React Three Fiber canvas. It requires a light source (represented by a mesh in this case) and configures the GodRays component with several parameters.

```jsx
import { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { EffectComposer, GodRays } from '@react-three/postprocessing'

function Scene() {
  const sunRef = useRef()
  
  return (
    <Canvas>
      {/* Sun geometry that rays emanate from */}
      <mesh ref={sunRef} position={[10, 10, 10]}>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshBasicMaterial color="yellow" />
      </mesh>
      
      {/* Some geometry for rays to interact with */}
      <mesh position={[0, 0, 0]}>
        <boxGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <GodRays
          sun={sunRef}
          samples={60}
          density={0.96}
          decay={0.92}
          weight={0.4}
          exposure={0.6}
        />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### Basic Effect Composer Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/README.md

Demonstrates a basic setup for applying multiple post-processing effects within a React Three Fiber scene. Ensure your scene is wrapped in a Canvas component.

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

--------------------------------

### Using Wrapped Effects Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/effects-simple-wrapper.md

Example demonstrating how to use wrapped effects like Bloom within an EffectComposer, including constructor parameters and blend options.

```APIDOC
## Using Wrapped Effects

All wrapped effects support:

1. **Constructor parameters**: All props accepted by the underlying Effect class
2. **Blend function**: Optional `blendFunction` prop
3. **Opacity**: Optional `opacity` prop for transparency

```jsx
<EffectComposer>
  <Bloom
    luminanceThreshold={0.1}
    luminanceSmoothing={0.9}
    intensity={1.5}
    blendFunction={BlendFunction.SCREEN}
    opacity={0.8}
  />
</EffectComposer>
```
```

--------------------------------

### Basic Setup with EffectComposer and Bloom

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/getting-started.md

Wrap your Canvas with EffectComposer and add effects like Bloom to your scene.

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

function Scene() {
  return (
    <Canvas>
      {/* Your 3D scene */}
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>

      {/* Postprocessing effects */}
      <EffectComposer>
        <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### Selection Component Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selection.md

Demonstrates how to set up the Selection context and use the Select component to target a mesh for an Outline effect.

```jsx
import { Selection, Select, Outline } from '@react-three/postprocessing'

function Scene() {
  return (
    <Selection enabled={true}>
      <Select enabled={true}>
        <mesh>
          <sphereGeometry />
          <meshStandardMaterial />
        </mesh>
      </Select>
      
      <EffectComposer>
        <Outline visibleEdgeColor={0xff0000} />
      </EffectComposer>
    </Selection>
  )
}
```

--------------------------------

### Basic Lens Flare Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

A simple implementation of the LensFlare component with essential properties.

```APIDOC
### Example: Basic Lens Flare

```jsx
import { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { EffectComposer, LensFlare } from '@react-three/postprocessing'

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[-25, 6, -60]} intensity={1} />
      
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <LensFlare
          lensPosition={[-25, 6, -60]}
          glareSize={0.2}
          starPoints={6}
        />
      </EffectComposer>
    </Canvas>
  )
}
```
```

--------------------------------

### Select Component Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selection.md

Shows how to use the Select component to group multiple meshes for selection, which are then targeted by an Outline effect.

```jsx
<Selection>
  <Select enabled={true} position={[0, 0, 0]}>
    <mesh>
      <sphereGeometry args={[1, 32, 32]} />
      <meshStandardMaterial color="blue" />
    </mesh>
    <mesh position={[2, 0, 0]}>
      <boxGeometry />
      <meshStandardMaterial color="red" />
    </mesh>
  </Select>
  
  <EffectComposer>
    <Outline 
      visibleEdgeColor={0xffffff}
      hiddenEdgeColor={0x000000}
    />
  </EffectComposer>
</Selection>
```

--------------------------------

### Example: Manual Control

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-autofocus.md

Configures Autofocus for manual updates using `useImperativeHandle` and `useFrame`. The `update` method is called each frame.

```jsx
const autofocusRef = useRef()

useFrame((state, delta) => {
  if (autofocusRef.current) {
    // Manually update focus once per frame
    autofocusRef.current.update(delta, true)
  }
})

return (
  <EffectComposer>
    <Autofocus
      ref={autofocusRef}
      manual={true}
      focalLength={0.02}
      bokehScale={2}
    />
  </EffectComposer>
)
```

--------------------------------

### Basic Pixelation Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/pixelation.mdx

Import and apply the Pixelation effect with a specified granularity. This effect cannot be merged with convolution effects.

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

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

--------------------------------

### Selection Context Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selective-bloom.md

Shows how to use SelectiveBloom with the Selection context for declarative object selection. The 'lights' prop is still required.

```jsx
import { Selection, Select, SelectiveBloom, EffectComposer } from '@react-three/postprocessing'

function Scene() {
  const lightRef = useRef()
  
  return (
    <Selection>
      <directionalLight ref={lightRef} position={[5, 5, 5]} />
      
      <Select enabled={true}>
        <mesh>
          <sphereGeometry />
          <meshStandardMaterial color="white" />
        </mesh>
      </Select>
      
      <EffectComposer>
        <SelectiveBloom
          lights={[lightRef]}
          luminanceThreshold={0}
          luminanceSmoothing={0.9}
        />
      </EffectComposer>
    </Selection>
  )
}
```

--------------------------------

### Lens Dirt Texture Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Integrates a custom texture to simulate lens dirt or dust.

```APIDOC
### Example: With Lens Dirt

```jsx
import { useTexture } from '@react-three/drei'

function Scene() {
  const lensDirt = useTexture('/lens-dirt.jpg')
  
  return (
    <EffectComposer>
      <LensFlare
        lensPosition={[-25, 6, -60]}
        lensDirtTexture={lensDirt}
        glareSize={0.2}
      />
    </EffectComposer>
  )
}
```
```

--------------------------------

### Configure Lens Flare Headlight/Flashlight

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Example for a headlight or flashlight use case. Configure lensPosition, glareSize, starPoints, anamorphic, and flareSize.

```jsx
<LensFlare
  lensPosition={lightPos}
  glareSize={0.1}
  starPoints={4}
  anamorphic={true}
  flareSize={0.005}
/>
```

--------------------------------

### Default N8AO Settings Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-n8ao.md

Demonstrates how to use the N8AO component with its default settings within an EffectComposer. Ensure EffectComposer and Canvas are imported.

```jsx
import { EffectComposer, N8AO } from '@react-three/postprocessing'

function Scene() {
  return (
    <Canvas>
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <N8AO
          aoRadius={5}
          intensity={1}
          aoSamples={16}
        />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### Create Custom Effect Wrapper

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/utilities.md

Build a custom wrapper for more control over effects. This example shows creating a custom effect with camera and prop dependencies, and handling disposal.

```jsx
import { forwardRef, useMemo, useEffect } from 'react'
import { useThree } from '@react-three/fiber'
import { CustomEffect } from 'postprocessing'

export const Custom = forwardRef(({ customProp, ...props }, ref) => {
  const { camera } = useThree()
  
  const effect = useMemo(() => {
    return new CustomEffect(camera, customProp)
  }, [camera, customProp])
  
  useEffect(() => {
    return () => {
      effect.dispose()
    }
  }, [effect])
  
  return <primitive ref={ref} object={effect} {...props} />
})
```

--------------------------------

### Basic Tone Mapping Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/tone-mapping.mdx

Configure the ToneMapping effect with essential properties like blend mode, adaptive luminance, and texture resolution. Adjust parameters such as middle grey, max luminance, and adaptation rate for fine-tuning.

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

--------------------------------

### Ramp Component Usage

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/ramp.mdx

Example of how to use the Ramp component with various props to define a gradient or mask.

```APIDOC
## Ramp Component

### Description

The Ramp component creates linear or radial color gradients and can function as a mask for other effects. It's configurable with properties defining the gradient's type, start and end points, colors, and interpolation behavior.

### Props

#### rampType
- **Type**: RampType
- **Default**: RampType.Linear
- **Description**: Specifies the type of ramp gradient (e.g., Linear, Radial).

#### rampStart
- **Type**: [x: number, y: number]
- **Default**: [0.5, 0.5]
- **Description**: The starting point of the ramp gradient in normalized coordinates.

#### rampEnd
- **Type**: [x: number, y: number]
- **Default**: [1.0, 1.0]
- **Description**: The ending point of the ramp gradient in normalized coordinates.

#### startColor
- **Type**: [r: number, g: number, b: number, a: number]
- **Default**: [0, 0, 0, 1]
- **Description**: The color at the starting point of the gradient.

#### endColor
- **Type**: [r: number, g: number, b: number, a: number]
- **Default**: [1, 1, 1, 1]
- **Description**: The color at the ending point of the gradient.

#### rampBias
- **Type**: number
- **Default**: 0.5
- **Description**: Bias for the interpolation curve.

#### rampGain
- **Type**: number
- **Default**: 0.5
- **Description**: Gain for the interpolation curve.

#### rampMask
- **Type**: boolean
- **Default**: false
- **Description**: If true, the ramp gradient is used as an effect mask, and colors are ignored.

#### rampInvert
- **Type**: boolean
- **Default**: false
- **Description**: Controls whether the ramp gradient is inverted. When disabled, rampStart is transparent and rampEnd is opaque.
```

--------------------------------

### Example: Mouse-Driven Focus

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-autofocus.md

Configures the Autofocus component to follow the mouse pointer for dynamic depth of field adjustments. Includes common DepthOfField props.

```jsx
import { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { Autofocus, EffectComposer } from '@react-three/postprocessing'

function Scene() {
  return (
    <Canvas>
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <Autofocus
          mouse={true}
          smoothTime={0.3}
          focusDistance={0}
          focalLength={0.02}
          bokehScale={2}
          height={480}
        />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### Configure Lens Flare Candlelight

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Example for a candlelight effect. Customize lensPosition, colorGain, glareSize, starBurst, and secondaryGhosts.

```jsx
<LensFlare
  lensPosition={candlePos}
  colorGain={new Color(255, 150, 50)}
  glareSize={0.15}
  starBurst={false}
  secondaryGhosts={false}
/>
```

--------------------------------

### Referencing Effect Instances Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/effects-simple-wrapper.md

Demonstrates how to reference effect instances created with wrapEffect using `useRef()` for imperative control over their properties.

```APIDOC
## Referencing Effect Instances

Effects created with `wrapEffect` can be referenced with `useRef()` for imperative control:

```jsx
import { useRef, useEffect } from 'react'
import { Bloom } from '@react-three/postprocessing'

function MyComponent() {
  const bloomRef = useRef()
  
  useEffect(() => {
    if (bloomRef.current) {
      bloomRef.current.luminanceThreshold = 0.2
    }
  }, [])
  
  return <Bloom ref={bloomRef} luminanceThreshold={0} />
}
```
```

--------------------------------

### Basic Lens Flare Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Demonstrates a basic LensFlare effect within a React Three Fiber Canvas and EffectComposer. Ensure the light source matches the `lensPosition` prop for accurate occlusion.

```jsx
import { useRef } from 'react'
import { Canvas } from '@react-three/fiber'
import { EffectComposer, LensFlare } from '@react-three/postprocessing'

function Scene() {
  return (
    <Canvas>
      <ambientLight />
      <pointLight position={[-25, 6, -60]} intensity={1} />
      
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <LensFlare
          lensPosition={[-25, 6, -60]}
          glareSize={0.2}
          starPoints={6}
        />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### DepthOfField: Ref Control Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-depth-of-field.md

Demonstrates imperative control over the DepthOfField effect using a ref to set the target and focus distance after component mount.

```jsx
const dofRef = useRef()

useEffect(() => {
  if (dofRef.current) {
    dofRef.current.target = new Vector3(0, 0, 0)
    dofRef.current.focusDistance = 2
  }
}, [])

return (
  <EffectComposer>
    <DepthOfField
      ref={dofRef}
      focalLength={0.02}
      bokehScale={2}
    />
  </EffectComposer>
)
```

--------------------------------

### Logging Effect State with Refs

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/best-practices.md

Inspect effect state by using refs. This example logs Bloom properties like luminanceThreshold and luminanceSmoothing.

```jsx
const bloomRef = useRef()

useEffect(() => {
  console.log('Bloom properties:', {
    threshold: bloomRef.current.luminanceThreshold,
    smoothing: bloomRef.current.luminanceSmoothing,
  })
}, [bloomRef])

return <Bloom ref={bloomRef} />
```

--------------------------------

### Example Usage of resolveRef

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/utilities.md

Demonstrates how resolveRef works with both a ref object and a direct value. It returns the current value of the ref or the value itself.

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

const meshRef = useRef()
const mesh = resolveRef(meshRef)  // Gets meshRef.current

const directMesh = mesh
const sameResult = resolveRef(directMesh)  // Returns directMesh unchanged
```

--------------------------------

### Toggle Glitch On/Off Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-glitch.md

Demonstrates how to toggle the glitch effect on and off using a boolean state variable and a button. Ensure EffectComposer is set up.

```jsx
const { nodes } = useGLTF('model.glb')
const [glitchEnabled, setGlitchEnabled] = useState(false)

return (
  <>
    <button onClick={() => setGlitchEnabled(!glitchEnabled)}>
      Toggle Glitch
    </button>
    
    <EffectComposer>
      <Glitch
        active={glitchEnabled}
        delay={[0.5, 1.5]}
        duration={[0.4, 0.8]}
        strength={[0.2, 0.5]}
      />
    </EffectComposer>
  </>
)
```

--------------------------------

### Scanline Effect Setup

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/scanline.mdx

Import and use the Scanline effect with customizable blend function and density. Ensure BlendFunction is imported from 'postprocessing'.

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

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

--------------------------------

### Outline Component: With Selection Context Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-outline.md

Shows how to use the Outline component within a Selection context to outline multiple objects. The Select component is used to group objects for selection.

```jsx
import { Selection, Select, Outline, EffectComposer } from '@react-three/postprocessing'

function Scene() {
  return (
    <Selection enabled={true}>
      <Select enabled={true}>
        <mesh>
          <sphereGeometry />
          <meshStandardMaterial />
        </mesh>
        <mesh position={[2, 0, 0]}>
          <boxGeometry />
          <meshStandardMaterial />
        </mesh>
      </Select>
      
      <EffectComposer>
        <Outline
          visibleEdgeColor={0xffff00}
          hiddenEdgeColor={0xff6600}
          edgeStrength={100}
          xRay={true}
        />
      </EffectComposer>
    </Selection>
  )
}
```

--------------------------------

### Configure Lens Flare Sun/Bright Sky

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Example of setting up a Lens Flare for a sun or bright sky scenario. Adjust lensPosition, glareSize, starPoints, animated, and secondaryGhosts for desired effect.

```jsx
<LensFlare
  lensPosition={[50, 100, 50]}
  glareSize={0.3}
  starPoints={6}
  animated={true}
  secondaryGhosts={true}
/>
```

--------------------------------

### Basic Lens Flare Implementation

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/lensflare.mdx

Import and render the LensFlare component to add the effect to your scene. No additional setup is required for basic usage.

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

return <LensFlare />
```

--------------------------------

### Imperative Selection Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selective-bloom.md

Demonstrates how to use SelectiveBloom with imperative object selection using useRef. Ensure to pass the refs to the 'selection' prop and the light ref to the 'lights' prop.

```jsx
import { useRef } from 'react'
import { EffectComposer, SelectiveBloom } from '@react-three/postprocessing'

function Scene() {
  const sphereRef = useRef()
  const lightRef = useRef()
  
  return (
    <>
      <directionalLight ref={lightRef} position={[5, 5, 5]} intensity={1} />
      
      <mesh ref={sphereRef}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="white" />
      </mesh>
      
      <EffectComposer>
        <SelectiveBloom
          selection={[sphereRef]}
          lights={[lightRef]}
          luminanceThreshold={0}
          luminanceSmoothing={0.9}
          intensity={1}
        />
      </EffectComposer>
    </>
  )
}
```

--------------------------------

### Outline Component: Single Object Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-outline.md

Demonstrates how to use the Outline component to draw an outline around a single mesh. Ensure the mesh is passed as a ref to the selection prop.

```jsx
import { useRef } from 'react'
import { EffectComposer, Outline } from '@react-three/postprocessing'

function Scene() {
  const meshRef = useRef()
  
  return (
    <>
      <mesh ref={meshRef}>
        <sphereGeometry args={[1, 32, 32]} />
        <meshStandardMaterial color="white" />
      </mesh>
      
      <EffectComposer>
        <Outline
          selection={[meshRef]}
          visibleEdgeColor={0xff0000}
          hiddenEdgeColor={0x000000}
          edgeStrength={100}
        />
      </EffectComposer>
    </>
  )
}
```

--------------------------------

### Nested Selections for Grouping

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/selection.mdx

Demonstrates how Selection components can be nested to group multiple objects. Higher-level selections take precedence. This example selects all meshes.

```jsx
<Select enabled>
  <Select enabled>
    <mesh />
    <mesh />
  </Select>
  <Select>
    <mesh />
  </Select>
</Select>
```

--------------------------------

### Continuous Glitch Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-glitch.md

Applies a continuous glitch effect with specified chromatic aberration offset and distortion strength. Requires EffectComposer.

```jsx
<EffectComposer>
  <Glitch
    active={true}
    mode={GlitchMode.CONSTANT}
    chromaticAberrationOffset={[0.002, 0.005]}
    strength={[0.1, 0.3]}
  />
</EffectComposer>
```

--------------------------------

### Example: Debug Mode

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-autofocus.md

Enables debug visualization for the Autofocus effect, showing hitpoint spheres to indicate focus tracking. Mouse tracking is enabled.

```jsx
<EffectComposer>
  <Autofocus
    mouse={true}
    debug={0.1}  // Show hitpoint sphere
    smoothTime={0.25}
    focalLength={0.02}
    bokehScale={2}
  />
</EffectComposer>
```

--------------------------------

### Integration with Outline Effect

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selection.md

A complete example showing the Selection and Select components used in conjunction with EffectComposer and Outline to draw outlines around specific objects.

```jsx
<Selection enabled={true}>
  <Select enabled={true}>
    <mesh>
      <sphereGeometry />
      <meshStandardMaterial />
    </mesh>
  </Select>
  
  <EffectComposer>
    <Outline 
      visibleEdgeColor={0xffff00}
      hiddenEdgeColor={0xff0000}
      edgeStrength={100}
    />
  </EffectComposer>
</Selection>
```

--------------------------------

### Outline Component: Multiple Objects Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-outline.md

Demonstrates outlining multiple distinct objects by passing an array of refs to the `selection` prop. Each object will receive an outline based on the specified properties.

```jsx
const sphere = useRef()
const box = useRef()
const cylinder = useRef()

return (
  <>
    <mesh ref={sphere}>
      <sphereGeometry />
      <meshStandardMaterial />
    </mesh>
    <mesh ref={box} position={[2, 0, 0]}>
      <boxGeometry />
      <meshStandardMaterial />
    </mesh>
    <mesh ref={cylinder} position={[-2, 0, 0]}>
      <cylinderGeometry />
      <meshStandardMaterial />
    </mesh>
    
    <EffectComposer>
      <Outline
        selection={[sphere, box, cylinder]}
        visibleEdgeColor={0x00ff00}
        hiddenEdgeColor={0x0088ff}
        edgeStrength={80}
      />
    </EffectComposer>
  </>
)
```

--------------------------------

### Glitch with Chromatic Aberration Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-glitch.md

Applies glitch effects with custom delay, duration, strength, and chromatic aberration offset. Requires EffectComposer.

```jsx
<EffectComposer>
  <Glitch
    active={true}
    delay={[1, 3]}
    duration={[0.5, 1.0]}
    strength={[0.4, 0.8]}
    chromaticAberrationOffset={[0.002, 0.01]}
  />
</EffectComposer>
```

--------------------------------

### Example: Fixed Target Focus

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-autofocus.md

Sets a fixed world position for the Autofocus component to maintain focus on. Adjusts smoothing time for focus transitions.

```jsx
<EffectComposer>
  <Autofocus
    target={[0, 0, -5]}
    smoothTime={0.5}
    focusDistance={0}
    focalLength={0.02}
    bokehScale={2}
  />
</EffectComposer>
```

--------------------------------

### Use Refs for One-Time Initialization

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/best-practices.md

Employ refs for initializing properties that are set once and do not change frequently. This is useful for configuring effects during component mount or setup.

```jsx
const bloomRef = useRef()
useEffect(() => {
  bloomRef.current.luminanceThreshold = 0.8
}, [])
<Bloom ref={bloomRef} />
```

--------------------------------

### Outline Component: X-Ray Outlines Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-outline.md

Configures the Outline component to render X-Ray outlines, which show edges through occlusion. Requires `hiddenEdgeColor` to be set and `xRay` prop to be true. Enabling `blur` can soften the edges.

```jsx
<EffectComposer>
  <Outline
    selection={[meshRef]}
    visibleEdgeColor={0x00ff00}
    hiddenEdgeColor={0xff0000}
    edgeStrength={50}
    xRay={true}  // Show outlines through occlusion
    blur={true}
  />
</EffectComposer>
```

--------------------------------

### Inverted Selection Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selective-bloom.md

Demonstrates how to use SelectiveBloom with the 'inverted' prop set to true. This applies the bloom effect to all objects EXCEPT those specified in the 'selection' prop. The 'lights' prop is required.

```jsx
<EffectComposer>
  <SelectiveBloom
    selection={[objectsToExcludeRef]}
    lights={[lightRef]}
    inverted={true}  // Bloom on everything EXCEPT selected
    luminanceThreshold={0.2}
  />
</EffectComposer>
```

--------------------------------

### Anamorphic Lens Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Applies an anamorphic lens effect for a cinematic look.

```APIDOC
### Example: Anamorphic Lens (Cinematic)

```jsx
<EffectComposer>
  <LensFlare
    lensPosition={[5, 5, 5]}
    anamorphic={true}
    glareSize={0.15}
    starPoints={4}
    flareSize={0.01}
    haloScale={0.3}
  />
</EffectComposer>
```
```

--------------------------------

### Custom Color Gain Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Adjusts the color intensity of the lens flare effect.

```APIDOC
### Example: Custom Color

```jsx
import { Color } from 'three'

<EffectComposer>
  <LensFlare
    lensPosition={[0, 0, 0]}
    colorGain={new Color(10, 5, 20)}  // Purple tint
    glareSize={0.25}
    starPoints={6}
  />
</EffectComposer>
```
```

--------------------------------

### Build Command

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/module-organization.md

Execute the build command to compile the package. Outputs are generated in the ./dist/ directory.

```bash
npm run build
# Outputs to ./dist/ directory
```

--------------------------------

### Subtle Effect Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Applies a more understated lens flare effect by adjusting various parameters.

```APIDOC
### Example: Subtle Effect

```jsx
<EffectComposer>
  <LensFlare
    lensPosition={[-25, 6, -60]}
    glareSize={0.1}
    flareSize={0.005}
    starPoints={4}
    secondaryGhosts={false}
    aditionalStreaks={false}
  />
</EffectComposer>
```
```

--------------------------------

### Star Burst Effect Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-lens-flare.md

Configures the LensFlare component to include a star burst effect.

```APIDOC
### Example: With Star Burst

```jsx
<EffectComposer>
  <LensFlare
    lensPosition={[0, 10, 0]}
    enabled={true}
    starBurst={true}
    glareSize={0.3}
    starPoints={8}
    flareSize={0.02}
  />
</EffectComposer>
```
```

--------------------------------

### Nested Canvases with EffectComposers

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/context-api.md

In nested Canvas structures, each EffectComposer gets its own context, ensuring isolation of effects.

```jsx
<Canvas>
  <EffectComposer>
    <Bloom />
  </EffectComposer>
  
  <View index={1}>
    <Canvas>
      <EffectComposer>
        <Vignette />
      </EffectComposer>
    </Canvas>
  </View>
</Canvas>
```

--------------------------------

### Directory Structure

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/module-organization.md

Illustrates the file and folder organization within the src directory of the react-postprocessing library.

```bash
src/
├── index.ts                 # Main entry point (re-exports all public API)
├── EffectComposer.tsx       # Core container component
├── Selection.tsx            # Object selection system
├── util.tsx                 # Utility functions
└── effects/                 # All effect components
    ├── Autofocus.tsx
    ├── ASCII.tsx
    ├── Bloom.tsx
    ├── BrightnessContrast.tsx
    ├── ChromaticAberration.tsx
    ├── ColorAverage.tsx
    ├── ColorDepth.tsx
    ├── Depth.tsx
    ├── DepthOfField.tsx
    ├── DotScreen.tsx
    ├── FXAA.tsx
    ├── Glitch.tsx
    ├── GodRays.tsx
    ├── Grid.tsx
    ├── HueSaturation.tsx
    ├── LensFlare.tsx
    ├── LUT.tsx
    ├── N8AO.tsx
    ├── Noise.tsx
    ├── Outline.tsx
    ├── Pixelation.tsx
    ├── Ramp.tsx
    ├── ScanlineEffect.tsx
    ├── SelectiveBloom.tsx
    ├── Sepia.tsx
    ├── SMAA.tsx
    ├── SSAO.tsx
    ├── ShockWave.tsx
    ├── Texture.tsx
    ├── TileShift.tsx
    ├── TiltShift2.tsx
    ├── ToneMapping.tsx
    ├── Vignette.tsx
    └── Water.tsx
```

--------------------------------

### Core Components

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-index.md

These are the fundamental components for setting up the post-processing pipeline.

```APIDOC
## EffectComposer

### Description
Container component for the effect pipeline.

### Type
React.forwardRef

### Module
`src/EffectComposer.tsx`
```

```APIDOC
## Selection

### Description
Declarative selection provider.

### Type
React.FC

### Module
`src/Selection.tsx`
```

```APIDOC
## Select

### Description
Declarative object selection group.

### Type
React.FC

### Module
`src/Selection.tsx`
```

--------------------------------

### Basic Bloom Effect Configuration

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/bloom.mdx

Demonstrates how to apply the Bloom effect with various configuration options. Imports are required from '@react-three/postprocessing'.

```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.
  />
)
```

--------------------------------

### Sporadic Glitches Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-glitch.md

Applies sporadic glitch effects with custom delay, duration, and strength. Ensure EffectComposer is present in the scene.

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

function Scene() {
  return (
    <Canvas>
      <mesh>
        <sphereGeometry />
        <meshStandardMaterial />
      </mesh>
      
      <EffectComposer>
        <Glitch
          active={true}
          mode={GlitchMode.SPORADIC}
          delay={[0.5, 2]}
          duration={[0.6, 1.0]}
          strength={[0.3, 0.7]}
        />
      </EffectComposer>
    </Canvas>
  )
}
```

--------------------------------

### Accessing Selection API via Context

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-selection.md

Illustrates how to access the selection API directly using `useContext` and the `selectionContext`. This allows programmatic control over the selected objects.

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

function MyComponent() {
  const api = useContext(selectionContext)
  
  if (!api) {
    return null // Not inside Selection provider
  }
  
  return (
    <div>
      <p>Selected objects: {api.selected.length}</p>
      <button onClick={() => api.select([])}>
        Clear Selection
      </button>
    </div>
  )
}
```

--------------------------------

### DepthOfField: Auto-Focus on Target Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-depth-of-field.md

Configures DepthOfField to automatically focus on a specified point in 3D space using the 'target' prop.

```jsx
<EffectComposer>
  <DepthOfField
    focusDistance={0}
    focalLength={0.02}
    bokehScale={2}
    target={[0, 0, -5]}  // Focus on point in space
  />
</EffectComposer>
```

--------------------------------

### Importing Postprocessing Components and Utilities

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-index.md

Demonstrates various ways to import components, types, utilities, and contexts from the '@react-three/postprocessing' package. Choose the import style that best suits your project's needs.

```typescript
// Individual imports
import { EffectComposer, Bloom, Vignette } from '@react-three/postprocessing'

// Namespaced import
import * as postprocessing from '@react-three/postprocessing'

// Types
import type { EffectComposerProps, AutofocusProps } from '@react-three/postprocessing'

// Utilities
import { resolveRef, wrapEffect } from '@react-three/postprocessing'

// Context
import { EffectComposerContext, selectionContext } from '@react-three/postprocessing'
```

--------------------------------

### Using selectionContext in a Component

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/context-api.md

Demonstrates how to consume the selectionContext using `useContext` in a React component. It shows how to handle the case where the component is not rendered within a Selection provider and how to access and use the selection API.

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

function MyComponent() {
  const api = useContext(selectionContext)
  
  if (!api) {
    return <div>Not inside Selection provider</div>
  }
  
  return (
    <div>
      <p>Selected: {api.selected.length} objects</p>
      <button onClick={() => api.select([])}>
        Clear Selection
      </button>
    </div>
  )
}
```

--------------------------------

### Bloom Component Usage

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/bloom.mdx

Demonstrates how to use the Bloom component with various configurable props.

```APIDOC
## Bloom Component

### Description

The Bloom component adds a bloom effect to the scene, making bright areas glow.

### Props

#### `intensity` (Number) - Optional - Default: 1.0

The bloom intensity. Controls the overall brightness of the glow.

#### `blurPass` (BlurPass) - Optional - Default: undefined

A custom blur pass to use for the bloom effect. If not provided, a default blur pass is used.

#### `kernelSize` (KernelSize) - Optional - Default: KernelSize.LARGE

The size of the blur kernel. Affects the spread of the bloom.

#### `luminanceThreshold` (Number) - Optional - Default: 0.9

The luminance threshold. Raise this value to mask out darker elements in the scene. Range is [0, 1].

#### `luminanceSmoothing` (Number) - Optional - Default: 0.025

Smoothness of the luminance threshold. Range is [0, 1].

#### `mipmapBlur` (Boolean) - Optional - Default: false

Enables or disables mipmap blur.

#### `resolutionX` (Resolution) - Optional - Default: Resolution.AUTO_SIZE

The horizontal resolution for the bloom effect.

#### `resolutionY` (Resolution) - Optional - Default: Resolution.AUTO_SIZE

The vertical resolution for the bloom effect.

#### `blendFunction` (BlendFunction) - Optional - Default: BlendFunction.SCREEN

The blend function used to combine the bloom effect with the scene.

### Example Usage

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

return (
  <Bloom
    intensity={1.0}
    blurPass={undefined}
    kernelSize={KernelSize.LARGE}
    luminanceThreshold={0.9}
    luminanceSmoothing={0.025}
    mipmapBlur={false}
    resolutionX={Resolution.AUTO_SIZE}
    resolutionY={Resolution.AUTO_SIZE}
  />
)
```

### Selective Bloom

Bloom is selective by default. Control which materials glow by lifting their colors out of the 0-1 range and setting `toneMapped={false}` on the material.

```jsx
// Materials that will glow
<meshStandardMaterial emissive="red" emissiveIntensity={2} toneMapped={false} />
<meshBasicMaterial color={[2,0,0]} toneMapped={false} />

// Materials that will not glow
<meshStandardMaterial color="red"/>
<meshBasicMaterial color="red" />
<meshBasicMaterial color={[1,0,0]} />
```
```

--------------------------------

### Main Entry Point Re-exports

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/module-organization.md

The index.ts file re-exports all public API components and utilities from the react-postprocessing library.

```typescript
export * from './Selection'
export * from './EffectComposer'
export * from './util'
export * from './effects/...'
```

--------------------------------

### resolveRef

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/utilities.md

Resolves either a ref or a direct value to get the actual object. This is useful for parameters that can accept both a ref object or a direct value.

```APIDOC
## resolveRef

### Description
Resolves either a ref or a direct value to get the actual object.

### Parameters
#### Path Parameters
- None

#### Query Parameters
- None

#### Request Body
- None

### Returns
The actual value contained in the ref, or the value itself if not a ref.

### Example
```jsx
import { resolveRef } from '@react-three/postprocessing'

const meshRef = useRef()
const mesh = resolveRef(meshRef)  // Gets meshRef.current

const directMesh = mesh
const sameResult = resolveRef(directMesh)  // Returns directMesh unchanged
```
```

--------------------------------

### HueSaturation Component Usage

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/hue-saturation.mdx

Demonstrates how to use the HueSaturation component with basic properties. Ensure BlendFunction is imported from 'postprocessing'.

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

--------------------------------

### Create Custom Wrapped Effect

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/utilities.md

Example of creating a custom React component for a postprocessing effect using wrapEffect. This component can then be used within an EffectComposer.

```jsx
import { wrapEffect, BlendFunction } from '@react-three/postprocessing'
import { CustomEffect } from 'postprocessing'

const CustomEffectComponent = wrapEffect(CustomEffect, {
  blendFunction: BlendFunction.NORMAL,
})

// Use in EffectComposer
<EffectComposer>
  <CustomEffectComponent prop1="value" prop2={123} />
</EffectComposer>
```

--------------------------------

### Selective Bloom with Material Configuration

Source: https://github.com/pmndrs/react-postprocessing/blob/master/docs/effects/bloom.mdx

Illustrates how to make specific materials glow by adjusting their emissive properties and disabling tone mapping. This allows for selective bloom effects.

```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} />
```

--------------------------------

### Resolve Ref or Value

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/utilities.md

Use this utility to get the actual object from either a React ref or a direct value. It's useful for parameters that can accept both.

```typescript
export const resolveRef = <T,>(ref: T | React.RefObject<T>) => T
```

--------------------------------

### Progressive Glitch with Intensity Control

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-glitch.md

This example shows how to create a progressive glitch effect where the intensity can be adjusted using a range slider. The glitch is continuously active.

```jsx
const glitchRef = useRef()
const [intensity, setIntensity] = useState(0.3)

return (
  <>
    <input
      type="range"
      min="0" max="1" step="0.1"
      value={intensity}
      onChange={(e) => setIntensity(Number(e.target.value))}
    />
    <EffectComposer>
      <Glitch
        ref={glitchRef}
        active={true}
        strength={[intensity * 0.5, intensity]}
        delay={[0.3, 2]}
      />
    </EffectComposer>
  </>
)
```

--------------------------------

### Adding Multiple Effects in Order

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/getting-started.md

Demonstrates how to add multiple effects like Bloom, Vignette, and Noise, with their order of application affecting the final output.

```jsx
<EffectComposer>
  <Bloom luminanceThreshold={0} luminanceSmoothing={0.9} />
  <Vignette darkness={0.5} offset={0.1} />
  <Noise opacity={0.02} />
</EffectComposer>
```

--------------------------------

### DepthOfField: Static Focus Example

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/api-reference-depth-of-field.md

Applies a static depth of field effect with specified focus distance, focal length, bokeh scale, and focus range.

```jsx
<EffectComposer>
  <DepthOfField
    focusDistance={0}
    focalLength={0.02}
    bokehScale={2}
    focusRange={0.1}
  />
</EffectComposer>
```

--------------------------------

### Provide Custom Context with createContext

Source: https://github.com/pmndrs/react-postprocessing/blob/master/_autodocs/context-api.md

Create and provide custom context values using `createContext` and `AppContext.Provider`. This is useful for advanced scenarios where you need to pass down specific values, like the composer instance, to deeply nested components.

```jsx
const AppContext = createContext()

function AppProviders({ children }) {
  const { composer } = useContext(EffectComposerContext)
  
  return (
    <AppContext.Provider value={{ composer }}>
      {children}
    </AppContext.Provider>
  )
}
```