Skip to content

docs: Add examples for effects and passes #382

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kvvasuu merged 1 commit into from
Oct 9, 2026
+80 −48
Merged

docs: Add examples for effects and passes #382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 8 additions & 4 deletions docs/effects/color-depth.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
12 changes: 8 additions & 4 deletions docs/effects/depth.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
18 changes: 11 additions & 7 deletions docs/effects/shockwave.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
18 changes: 11 additions & 7 deletions docs/effects/texture.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
22 changes: 13 additions & 9 deletions docs/effects/tilt-shift-2.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
26 changes: 15 additions & 11 deletions docs/effects/tilt-shift.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
12 changes: 8 additions & 4 deletions docs/effects/water.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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. |
8 changes: 6 additions & 2 deletions docs/passes/depth-picking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ type DepthPickingApi = {
```tsx
function useDepthPicking(
pass: RefObject<DepthPickingApi | null>,
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<THREE.Vector3 | false>
```

Expand Down Expand Up @@ -63,11 +63,15 @@ return (

It unprojects using the `<EffectComposer>`'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 `<EffectComposer>` (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:

```tsx
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)
Loading