From c7429bfa88dd53058b69804138bd5a0a650a45bc Mon Sep 17 00:00:00 2001 From: kvvasuu Date: Sun, 16 Aug 2026 15:37:35 +0200 Subject: [PATCH] docs: add missing effect pages - #292 Adds docs for ASCII, ColorDepth, Depth, FXAA, LUT, N8AO, ShockWave, Texture, TiltShift, TiltShift2, and Water. Skips SSR from the original issue list since that effect no longer exists. --- docs/effects/ascii.mdx | 32 +++++++++++++++++++++++++ docs/effects/color-depth.mdx | 23 ++++++++++++++++++ docs/effects/depth.mdx | 25 ++++++++++++++++++++ docs/effects/fxaa.mdx | 31 ++++++++++++++++++++++++ docs/effects/lut.mdx | 27 +++++++++++++++++++++ docs/effects/n8ao.mdx | 44 +++++++++++++++++++++++++++++++++++ docs/effects/shockwave.mdx | 38 ++++++++++++++++++++++++++++++ docs/effects/texture.mdx | 28 ++++++++++++++++++++++ docs/effects/tilt-shift-2.mdx | 35 ++++++++++++++++++++++++++++ docs/effects/tilt-shift.mdx | 37 +++++++++++++++++++++++++++++ docs/effects/water.mdx | 25 ++++++++++++++++++++ 11 files changed, 345 insertions(+) create mode 100644 docs/effects/ascii.mdx create mode 100644 docs/effects/color-depth.mdx create mode 100644 docs/effects/depth.mdx create mode 100644 docs/effects/fxaa.mdx create mode 100644 docs/effects/lut.mdx create mode 100644 docs/effects/n8ao.mdx create mode 100644 docs/effects/shockwave.mdx create mode 100644 docs/effects/texture.mdx create mode 100644 docs/effects/tilt-shift-2.mdx create mode 100644 docs/effects/tilt-shift.mdx create mode 100644 docs/effects/water.mdx diff --git a/docs/effects/ascii.mdx b/docs/effects/ascii.mdx new file mode 100644 index 0000000..8755efe --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/color-depth.mdx b/docs/effects/color-depth.mdx new file mode 100644 index 0000000..b6e2e6b --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/depth.mdx b/docs/effects/depth.mdx new file mode 100644 index 0000000..f7c2a0a --- /dev/null +++ b/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 ( + +) +``` + +## Props + +| Name | Type | Default | Description | +| ------------- | ------------- | --------------------- | ---------------------------------------- | +| blendFunction | BlendFunction | BlendFunction.SRC | The blend function of this effect. | +| inverted | Boolean | false | Whether the depth should be inverted. | diff --git a/docs/effects/fxaa.mdx b/docs/effects/fxaa.mdx new file mode 100644 index 0000000..d763e36 --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/lut.mdx b/docs/effects/lut.mdx new file mode 100644 index 0000000..72e1ab6 --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/n8ao.mdx b/docs/effects/n8ao.mdx new file mode 100644 index 0000000..b05dde6 --- /dev/null +++ b/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 ``. + +```jsx +import { N8AO } from '@react-three/postprocessing' + +return ( + +) +``` + +## 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. | diff --git a/docs/effects/shockwave.mdx b/docs/effects/shockwave.mdx new file mode 100644 index 0000000..68027bb --- /dev/null +++ b/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(null) + +return ( + <> + + + +) +``` + +## 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. | diff --git a/docs/effects/texture.mdx b/docs/effects/texture.mdx new file mode 100644 index 0000000..df556bd --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/tilt-shift-2.mdx b/docs/effects/tilt-shift-2.mdx new file mode 100644 index 0000000..0d811d8 --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/tilt-shift.mdx b/docs/effects/tilt-shift.mdx new file mode 100644 index 0000000..b6820e4 --- /dev/null +++ b/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 ( + +) +``` + +## 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. | diff --git a/docs/effects/water.mdx b/docs/effects/water.mdx new file mode 100644 index 0000000..2bf05a0 --- /dev/null +++ b/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 ( + +) +``` + +## Props + +| Name | Type | Default | Description | +| ------------- | ------------- | ---------------------- | ---------------------------------------- | +| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. | +| factor | Number | 0 | The distortion strength. |