From f70973adc6339fcb77d2d50341559da0b3afd371 Mon Sep 17 00:00:00 2001 From: kvvasuu Date: Sat, 10 Oct 2026 00:58:40 +0200 Subject: [PATCH] docs: Add examples for effects and passes --- docs/effects/color-depth.mdx | 12 ++++++++---- docs/effects/depth.mdx | 12 ++++++++---- docs/effects/shockwave.mdx | 18 +++++++++++------- docs/effects/texture.mdx | 18 +++++++++++------- docs/effects/tilt-shift-2.mdx | 22 +++++++++++++--------- docs/effects/tilt-shift.mdx | 26 +++++++++++++++----------- docs/effects/water.mdx | 12 ++++++++---- docs/passes/depth-picking.mdx | 8 ++++++-- 8 files changed, 80 insertions(+), 48 deletions(-) diff --git a/docs/effects/color-depth.mdx b/docs/effects/color-depth.mdx index b6e2e6b..c14558e 100644 --- a/docs/effects/color-depth.mdx +++ b/docs/effects/color-depth.mdx @@ -15,9 +15,13 @@ return ( ) ``` +## Example + +[![ColorDepth demo](https://pmndrs.github.io/examples/color-depth/thumbnail.webp)](https://pmndrs.github.io/examples/color-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. | +| 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 index f7c2a0a..dab298b 100644 --- a/docs/effects/depth.mdx +++ b/docs/effects/depth.mdx @@ -17,9 +17,13 @@ return ( ) ``` +## Example + +[![Depth demo](https://pmndrs.github.io/examples/depth/thumbnail.webp)](https://pmndrs.github.io/examples/depth) + ## Props -| Name | Type | Default | Description | -| ------------- | ------------- | --------------------- | ---------------------------------------- | -| blendFunction | BlendFunction | BlendFunction.SRC | The blend function of this effect. | -| inverted | Boolean | false | Whether the depth should be inverted. | +| 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/shockwave.mdx b/docs/effects/shockwave.mdx index e02b2d6..e12b0a9 100644 --- a/docs/effects/shockwave.mdx +++ b/docs/effects/shockwave.mdx @@ -27,12 +27,16 @@ return ( ) ``` +## Example + +[![ShockWave demo](https://pmndrs.github.io/examples/shockwave/thumbnail.webp)](https://pmndrs.github.io/examples/shockwave) + ## Props -| Name | Type | Default | Description | -| --------- | ----------------------------- | -------- | ------------------------------------- | -| position | Vector3 \| [x, y, z] \| Number | (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. | +| Name | Type | Default | Description | +| --------- | ------------------------------ | ------- | ------------------------------------ | +| position | Vector3 \| [x, y, z] \| Number | (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 index df556bd..11bc6c0 100644 --- a/docs/effects/texture.mdx +++ b/docs/effects/texture.mdx @@ -17,12 +17,16 @@ return ( ) ``` +## Example + +[![Texture demo](https://pmndrs.github.io/examples/texture/thumbnail.webp)](https://pmndrs.github.io/examples/texture) + ## 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. | +| 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 index 0d811d8..0e8aa6b 100644 --- a/docs/effects/tilt-shift-2.mdx +++ b/docs/effects/tilt-shift-2.mdx @@ -22,14 +22,18 @@ return ( ) ``` +## Example + +[![TiltShift demo](https://pmndrs.github.io/examples/tilt-shift/thumbnail.webp)](https://pmndrs.github.io/examples/tilt-shift) + ## 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. | +| 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 index b6820e4..fe8391f 100644 --- a/docs/effects/tilt-shift.mdx +++ b/docs/effects/tilt-shift.mdx @@ -22,16 +22,20 @@ return ( ) ``` +## Example + +[![TiltShift demo](https://pmndrs.github.io/examples/tilt-shift/thumbnail.webp)](https://pmndrs.github.io/examples/tilt-shift) + ## 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. | +| 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 index 2bf05a0..be8da90 100644 --- a/docs/effects/water.mdx +++ b/docs/effects/water.mdx @@ -17,9 +17,13 @@ return ( ) ``` +## Example + +[![Water demo](https://pmndrs.github.io/examples/water/thumbnail.webp)](https://pmndrs.github.io/examples/water) + ## Props -| Name | Type | Default | Description | -| ------------- | ------------- | ---------------------- | ---------------------------------------- | -| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. | -| factor | Number | 0 | The distortion strength. | +| Name | Type | Default | Description | +| ------------- | ------------- | -------------------- | ---------------------------------- | +| blendFunction | BlendFunction | BlendFunction.NORMAL | The blend function of this effect. | +| factor | Number | 0 | The distortion strength. | diff --git a/docs/passes/depth-picking.mdx b/docs/passes/depth-picking.mdx index dac57f0..6c1270b 100644 --- a/docs/passes/depth-picking.mdx +++ b/docs/passes/depth-picking.mdx @@ -26,7 +26,7 @@ type DepthPickingApi = { ```tsx function useDepthPicking( pass: RefObject, - camera?: THREE.Camera, // defaults to the composer's camera, then r3f's own + camera?: THREE.Camera // defaults to the composer's camera, then r3f's own ): (x: number, y: number) => Promise ``` @@ -63,7 +63,7 @@ return ( It unprojects using the ``'s own camera when called from inside it - the same one the pass renders depth from - falling back to r3f's own camera otherwise. Called from outside that `` (like `Cursor` above) with a non-default camera, pass that same camera as the second argument explicitly. -**If you render something at the picked position** (a cursor, a placement preview, ...), give its material `depthWrite={false}`. Depth is read from the same buffer everything else renders into - without this, your own marker sits at the last hitpoint, gets sampled by the *next* pick as the closest surface there, and the marker creeps toward the camera every frame, faster as it gets closer, until it resets and repeats. (`Autofocus`'s own debug markers already do this.) +**If you render something at the picked position** (a cursor, a placement preview, ...), give its material `depthWrite={false}`. Depth is read from the same buffer everything else renders into - without this, your own marker sits at the last hitpoint, gets sampled by the _next_ pick as the closest surface there, and the marker creeps toward the camera every frame, faster as it gets closer, until it resets and repeats. (`Autofocus`'s own debug markers already do this.) Click-to-pick instead of every frame: @@ -71,3 +71,7 @@ Click-to-pick instead of every frame: const hit = await getHit(pointerNdcX, pointerNdcY) if (hit) character.moveTo(hit) ``` + +## Example + +[![DepthPicking demo](https://pmndrs.github.io/examples/depth-picking/thumbnail.webp)](https://pmndrs.github.io/examples/depth-picking)