docs: add missing effect pages

docs/effects/ascii.mdx

@@ -0,0 +1,32 @@
+---
+title: ASCII
+nav: 1
+---
+
+Renders the scene as ASCII art, mapping pixel luminance to characters drawn onto a canvas-based character atlas. Adapted from [emilwidlund/ASCII](https://github.com/emilwidlund/ASCII).
+
+```jsx
+import { ASCII } from '@react-three/postprocessing'
+
+return (
+ <ASCII
+ font="arial" // font family used to draw the character atlas
+ characters=" .:,'-^=*+?!|0#X%WM@" // characters to sample from, in order of increasing "weight"
+ fontSize={54} // font size used to draw the character atlas
+ cellSize={16} // size of each character cell, in pixels
+ color="#ffffff" // character color
+ invert={false} // inverts which characters map to bright vs dark pixels
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ---------- | ------- | ----------------------- | ------------------------------------------------------------------ |
+| font | String | 'arial' | The font family used to draw the character atlas. |
+| characters | String | ` .:,'-^=*+?!\|0#X%WM@` | The characters to sample from, ordered from "empty" to "dense". |
+| fontSize | Number | 54 | The font size used to draw the character atlas. |
+| cellSize | Number | 16 | The size of each character cell, in pixels. |
+| color | String | '#ffffff' | The color of the characters. |
+| invert | Boolean | false | Inverts which characters map to bright vs dark pixels. |

docs/effects/color-depth.mdx

@@ -0,0 +1,23 @@
+---
+title: ColorDepth
+nav: 1
+---
+
+Reduces the color depth of the scene, uniformly across all color channels - a posterize-like effect.
+
+```jsx
+import { ColorDepth } from '@react-three/postprocessing'
+
+return (
+ <ColorDepth
+ bits={16} // the virtual color bit depth
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ------------- | -------------- | -------- | --------------------------------------------------------------------------------------------------------- |
+| blendFunction | BlendFunction | | The blend function of this effect. |
+| bits | Number | 16 | The virtual amount of color bits. Each color channel effectively uses a fourth of this total; alpha is unaffected. |

docs/effects/depth.mdx

@@ -0,0 +1,25 @@
+---
+title: Depth
+nav: 1
+---
+
+Visualizes the scene's depth buffer as grayscale - useful for debugging, or as an input for further custom effects.
+
+```jsx
+import { Depth } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+ <Depth
+ blendFunction={BlendFunction.SRC} // the blend function of this effect
+ inverted={false} // whether the depth should be inverted
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ------------- | ------------- | --------------------- | ---------------------------------------- |
+| blendFunction | BlendFunction | BlendFunction.SRC | The blend function of this effect. |
+| inverted | Boolean | false | Whether the depth should be inverted. |

docs/effects/fxaa.mdx

@@ -0,0 +1,31 @@
+---
+title: FXAA
+nav: 1
+---
+
+Fast Approximate Anti-Aliasing - a cheap, single-pass alternative to [SMAA](/effects/smaa) with lower visual quality but better performance.
+
+```jsx
+import { FXAA } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+ <FXAA
+ blendFunction={BlendFunction.SRC} // the blend function of this effect
+ minEdgeThreshold={0.0312} // the minimum edge detection threshold
+ maxEdgeThreshold={0.125} // the maximum edge detection threshold
+ subpixelQuality={0.75} // the subpixel blend quality
+ samples={12} // the maximum amount of edge detection samples
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ----------------- | ------------- | -------------------- | -------------------------------------------------------- |
+| blendFunction | BlendFunction | BlendFunction.SRC | The blend function of this effect. |
+| minEdgeThreshold | Number | 0.0312 | The minimum edge detection threshold. Range [0.0, 1.0]. |
+| maxEdgeThreshold | Number | 0.125 | The maximum edge detection threshold. Range [0.0, 1.0]. |
+| subpixelQuality | Number | 0.75 | The subpixel blend quality. Range [0.0, 1.0]. |
+| samples | Number | 12 | The maximum amount of edge detection samples. |

docs/effects/lut.mdx

@@ -0,0 +1,27 @@
+---
+title: LUT
+nav: 1
+---
+
+Applies 3D LUT-based color grading using a lookup texture (a `THREE.Texture` built from e.g. a `.cube` file or a data texture you construct yourself).
+
+```jsx
+import { LUT } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+ <LUT
+ lut={lutTexture} // the lookup texture
+ blendFunction={BlendFunction.SRC} // the blend function of this effect
+ tetrahedralInterpolation={false} // enables or disables tetrahedral interpolation
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ------------------------ | ------------- | -------------------- | ----------------------------------------------------- |
+| lut | Texture | | The lookup texture. Required. |
+| blendFunction | BlendFunction | BlendFunction.SRC | The blend function of this effect. |
+| tetrahedralInterpolation | Boolean | false | Enables or disables tetrahedral interpolation. |

docs/effects/n8ao.mdx

@@ -0,0 +1,44 @@
+---
+title: N8AO
+nav: 1
+---
+
+A fast, high quality ambient occlusion effect, wrapping [N8python/n8ao](https://github.com/N8python/n8ao). Self-contained - unlike [SSAO](/effects/ssao), it does not need `enableNormalPass` on `<EffectComposer>`.
+
+```jsx
+import { N8AO } from '@react-three/postprocessing'
+
+return (
+ <N8AO
+ aoRadius={5} // ambient occlusion sampling radius
+ distanceFalloff={1} // distance falloff
+ intensity={1} // effect intensity
+ quality="performance" // 'performance' | 'low' | 'medium' | 'high' | 'ultra'
+ aoSamples={16} // amount of ambient occlusion samples per frame
+ denoiseSamples={4} // amount of denoise samples per frame
+ denoiseRadius={12} // denoise sampling radius
+ color={undefined} // tints the occlusion, defaults to black
+ halfRes={false} // renders the effect at half resolution
+ depthAwareUpsampling={true} // enables or disables depth-aware upsampling
+ screenSpaceRadius={false} // scales the sampling radius with distance from the camera
+ renderMode={0} // 0: Combined, 1: AO only, 2: No AO, 3: Split, 4: Split AO
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| -------------------- | ------------------------------------------------------- | ------------- | --------------------------------------------------------- |
+| aoRadius | Number | 5 | The ambient occlusion sampling radius. |
+| distanceFalloff | Number | 1 | The distance falloff. |
+| intensity | Number | 1 | The effect intensity. |
+| quality | 'performance' \| 'low' \| 'medium' \| 'high' \| 'ultra' | 'performance' | The quality preset. |
+| aoSamples | Number | 16 | The amount of ambient occlusion samples per frame. |
+| denoiseSamples | Number | 4 | The amount of denoise samples per frame. |
+| denoiseRadius | Number | 12 | The denoise sampling radius. |
+| color | Color | undefined | Tints the occlusion. Defaults to black. |
+| halfRes | Boolean | false | Renders the effect at half resolution. |
+| depthAwareUpsampling | Boolean | true | Enables or disables depth-aware upsampling. |
+| screenSpaceRadius | Boolean | false | Scales the sampling radius with distance from the camera. |
+| renderMode | 0 \| 1 \| 2 \| 3 \| 4 | 0 | 0: Combined, 1: AO only, 2: No AO, 3: Split, 4: Split AO. |

docs/effects/shockwave.mdx

@@ -0,0 +1,38 @@
+---
+title: ShockWave
+nav: 1
+---
+
+An animated shockwave/distortion effect emanating from a point in 3D space. It doesn't trigger itself - call `explode()` on the effect's ref whenever you want the wave to fire.
+
+```jsx
+import { useRef } from 'react'
+import { ShockWave } from '@react-three/postprocessing'
+import type { ShockWaveEffect } from 'postprocessing'
+
+const ref = useRef<ShockWaveEffect>(null)
+
+return (
+ <>
+ <ShockWave
+ ref={ref}
+ position={[0, 0, 0]} // the world position of the shockwave
+ speed={2.0} // the animation speed
+ maxRadius={1.0} // the extent of the shockwave
+ waveSize={0.2} // the wave size
+ amplitude={0.05} // the distortion amplitude
+ />
+ <button onClick={() => ref.current?.explode()}>Explode</button>
+ </>
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| --------- | ------- | -------- | ------------------------------------- |
+| position | Vector3 | (0,0,0) | The world position of the shockwave. |
+| speed | Number | 2.0 | The animation speed. |
+| maxRadius | Number | 1.0 | The extent of the shockwave. |
+| waveSize | Number | 0.2 | The wave size. |
+| amplitude | Number | 0.05 | The distortion amplitude. |

docs/effects/texture.mdx

@@ -0,0 +1,28 @@
+---
+title: Texture
+nav: 1
+---
+
+Blends a texture over the scene. Give it a URL via `textureSrc` and it loads (and suspends on) the texture itself - pass an already-loaded `THREE.Texture` via `texture` instead if you're loading it yourself.
+
+```jsx
+import { Texture } from '@react-three/postprocessing'
+
+return (
+ <Texture
+ textureSrc="/texture.png" // loads the texture for you
+ opacity={1} // opacity of the texture
+ aspectCorrection={false} // deprecated - adjust the texture's offset/repeat/center instead
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ----------------- | ------- | -------- | ------------------------------------------------------------------------------------- |
+| textureSrc | String | | URL of the texture to load. |
+| texture | Texture | | An already-loaded texture - alternative to `textureSrc`. |
+| blendFunction | BlendFunction | | The blend function of this effect. |
+| opacity | Number | 1 | The opacity of the texture. |
+| aspectCorrection | Boolean | false | Deprecated. Adjust the texture's offset, repeat and center instead. |

docs/effects/tilt-shift-2.mdx

@@ -0,0 +1,35 @@
+---
+title: TiltShift2
+nav: 1
+---
+
+An alternate tilt-shift implementation with direct control over the blurred band's start/end points and blur direction, instead of a single centered focus-area size. For the simpler, centered version, see [TiltShift](/effects/tilt-shift).
+
+```jsx
+import { TiltShift2 } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+ <TiltShift2
+ blendFunction={BlendFunction.NORMAL} // the blend function of this effect
+ blur={0.15} // the blur intensity, [0, 1] (can go beyond 1)
+ taper={0.5} // the size of the sharp/in-focus area, [0, 1] (can go beyond 1)
+ start={[0.5, 0.0]} // start point of the blur band, in screen-space percent [0, 1]
+ end={[0.5, 1.0]} // end point of the blur band, in screen-space percent [0, 1]
+ samples={10} // number of blur samples
+ direction={[1, 1]} // direction of the blur
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ------------- | ------------- | ------------------ | ------------------------------------------------------------ |
+| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |
+| blur | Number | 0.15 | The blur intensity. Range [0, 1] (can exceed 1 for extra). |
+| taper | Number | 0.5 | The size of the sharp/in-focus area. Range [0, 1] (can exceed 1). |
+| start | [Number, Number] | [0.5, 0.0] | Start point of the blur band, in screen-space percent. |
+| end | [Number, Number] | [0.5, 1.0] | End point of the blur band, in screen-space percent. |
+| samples | Number | 10 | The number of blur samples. |
+| direction | [Number, Number] | [1, 1] | The direction of the blur. |

docs/effects/tilt-shift.mdx

@@ -0,0 +1,37 @@
+---
+title: TiltShift
+nav: 1
+---
+
+A tilt-shift blur effect, simulating a shallow depth of field along a band across the screen - the classic "miniature model" look. For a version with more direct control over the band's start/end/direction, see [TiltShift2](/effects/tilt-shift-2).
+
+```jsx
+import { TiltShift } from '@react-three/postprocessing'
+import { BlendFunction, KernelSize } from 'postprocessing'
+
+return (
+ <TiltShift
+ blendFunction={BlendFunction.ADD} // the blend function of this effect
+ offset={0.0} // the relative offset of the focus area
+ rotation={0.0} // the rotation of the focus area, in radians
+ focusArea={0.4} // the relative size of the focus area
+ feather={0.3} // the softness of the focus area edges
+ kernelSize={KernelSize.MEDIUM} // the blur kernel size
+ resolutionScale={0.5} // the resolution scale
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ---------------- | ------------- | ---------------------- | ------------------------------------------ |
+| blendFunction | BlendFunction | BlendFunction.ADD | The blend function of this effect. |
+| offset | Number | 0.0 | The relative offset of the focus area. |
+| rotation | Number | 0.0 | The rotation of the focus area, in radians. |
+| focusArea | Number | 0.4 | The relative size of the focus area. |
+| feather | Number | 0.3 | The softness of the focus area edges. |
+| kernelSize | KernelSize | KernelSize.MEDIUM | The blur kernel size. |
+| resolutionScale | Number | 0.5 | The resolution scale. |
+| resolutionX | Number | Resolution.AUTO_SIZE | The horizontal resolution. |
+| resolutionY | Number | Resolution.AUTO_SIZE | The vertical resolution. |

docs/effects/water.mdx

@@ -0,0 +1,25 @@
+---
+title: Water
+nav: 1
+---
+
+A screen-space water/heat-haze style distortion, animated over time.
+
+```jsx
+import { WaterEffect } from '@react-three/postprocessing'
+import { BlendFunction } from 'postprocessing'
+
+return (
+ <WaterEffect
+ blendFunction={BlendFunction.NORMAL} // the blend function of this effect
+ factor={0} // the distortion strength
+ />
+)
+```
+
+## Props
+
+| Name | Type | Default | Description |
+| ------------- | ------------- | ---------------------- | ---------------------------------------- |
+| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. |
+| factor | Number | 0 | The distortion strength. |