Skip to content

docs(examples): migrate examples to @pmndrs/examples#371

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
Aug 14, 2026
Merged

docs(examples): migrate examples to @pmndrs/examples #371

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
2 changes: 1 addition & 1 deletion docs/effects/chromatic-aberration.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ return (

## Example

<Codesandbox id="uoyge" />
[![ChromaticAberration demo](https://pmndrs.github.io/examples/chromatic-aberration/thumbnail.webp)](https://pmndrs.github.io/examples/chromatic-aberration)

## Props

Expand Down
2 changes: 1 addition & 1 deletion docs/effects/dot-screen.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -20,7 +20,7 @@ return (

## Example

<Codesandbox id="xt3fb" />
[![DotScreen demo](https://pmndrs.github.io/examples/dot-screen/thumbnail.webp)](https://pmndrs.github.io/examples/dot-screen)

## Props

Expand Down
6 changes: 5 additions & 1 deletion docs/effects/god-rays.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -3,7 +3,7 @@ title: GodRays
nav: 1
---

The GodRays effect requires a mesh that will be used as an origin point for the rays. Refer to this [example](https://github.com/pmndrs/react-postprocessing/tree/2d7edcc2ef7cc2571a86f30ede2b9ee25b38987e/examples/src/demos/TakeControl) for more details.
The GodRays effect requires a mesh that will be used as an origin point for the rays. Refer to this [example](https://pmndrs.github.io/examples/take-control) for more details.

```jsx
import { GodRays } from '@react-three/postprocessing'
Expand All@@ -26,6 +26,10 @@ return (
)
```

## Example

[![God Rays demo](https://pmndrs.github.io/examples/volumetric-light-godray/thumbnail.webp)](https://pmndrs.github.io/examples/volumetric-light-godray)

## Props

| Name | Type | Default | Description |
Expand Down
2 changes: 1 addition & 1 deletion docs/effects/grid.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ return (

## Example

<Codesandbox id="9ebpg" />
[![Grid demo](https://pmndrs.github.io/examples/grid/thumbnail.webp)](https://pmndrs.github.io/examples/grid)

## Props

Expand Down
6 changes: 1 addition & 5 deletions docs/effects/lensflare.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ nav: 1

A Lens Flare adds the optical aberration caused by the dispersion of light entering the lens through its edges.

Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare).
Based on [ektogamat/R3F-Ultimate-Lens-Flare](https://github.com/ektogamat/R3F-Ultimate-Lens-Flare) ([live demo](https://ultimate-lens-flare.vercel.app/)).

```jsx
import { LensFlare } from '@react-three/postprocessing'
Expand All@@ -32,7 +32,3 @@ The Ultimate Lens Flare leverages the raycaster to examine the material type of
- https://www.shadertoy.com/view/dllSRX
- https://www.shadertoy.com/view/Xlc3D2
- https://www.shadertoy.com/view/XtKfRV

## Example

<Codesandbox id="5ydkm4" />
40 changes: 22 additions & 18 deletions docs/effects/outline.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -31,23 +31,27 @@ return (
)
```

## Example

[![Outline demo](https://pmndrs.github.io/examples/react-pp-outlines/thumbnail.webp)](https://pmndrs.github.io/examples/react-pp-outlines/)

## Props

| Name | Type | Default | Description |
| ---------------- | ------------- | ----------------------- | ---------------------------------------------------------------------------------- |
| selection | Objects | | Selection of objects that will be outlined |
| selectionLayer | Number | 10 | The selection layer |
| blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect. |
| patternTexture | Texture | null | A pattern texture. |
| patternScale | Number | 1.0 | The pattern texture scale. |
| edgeStrength | Number | 1.0 | The edge strength. |
| pulseSpeed | Number | 0 | The pulse speed. A value of zero disables the pulse effect. |
| visibleEdgeColor | Number | 0xffffff | The color of visible edges. |
| hiddenEdgeColor | Number | 0x22090a | The color of hidden edges. |
| multisampling | Number | 0 | The number of samples used for multisample antialiasing. Requires WebGL 2. |
| resolutionScale | Number | 0.5 | The render resolution scale. |
| resolutionX | Number | Resolution.AUTO_SIZE | The render width. |
| resolutionY | Number | Resolution.AUTO_SIZE | The render height. |
| kernelSize | KernelSize | KernelSize.VERY_SMALL | The blur kernel size. |
| blur | Boolean | false | Whether the outline should be blurred. |
| xRay | Boolean | true | Whether occluded parts of selected objects should be visible. |
| Name | Type | Default | Description |
| ---------------- | ------------- | --------------------- | -------------------------------------------------------------------------- |
| selection | Objects | | Selection of objects that will be outlined |
| selectionLayer | Number | 10 | The selection layer |
| blendFunction | BlendFunction | BlendFunction.SCREEN | The blend function of this effect. |
| patternTexture | Texture | null | A pattern texture. |
| patternScale | Number | 1.0 | The pattern texture scale. |
| edgeStrength | Number | 1.0 | The edge strength. |
| pulseSpeed | Number | 0 | The pulse speed. A value of zero disables the pulse effect. |
| visibleEdgeColor | Number | 0xffffff | The color of visible edges. |
| hiddenEdgeColor | Number | 0x22090a | The color of hidden edges. |
| multisampling | Number | 0 | The number of samples used for multisample antialiasing. Requires WebGL 2. |
| resolutionScale | Number | 0.5 | The render resolution scale. |
| resolutionX | Number | Resolution.AUTO_SIZE | The render width. |
| resolutionY | Number | Resolution.AUTO_SIZE | The render height. |
| kernelSize | KernelSize | KernelSize.VERY_SMALL | The blur kernel size. |
| blur | Boolean | false | Whether the outline should be blurred. |
| xRay | Boolean | true | Whether occluded parts of selected objects should be visible. |
2 changes: 1 addition & 1 deletion docs/effects/pixelation.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -19,7 +19,7 @@ return (

## Example

<Codesandbox id="ed9yo" />
[![Pixelation demo](https://pmndrs.github.io/examples/pixelation/thumbnail.webp)](https://pmndrs.github.io/examples/pixelation)

## Props

Expand Down
2 changes: 1 addition & 1 deletion docs/effects/scanline.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ return (

## Example

<Codesandbox id="iy14d" />
[![Scanline demo](https://pmndrs.github.io/examples/scanline/thumbnail.webp)](https://pmndrs.github.io/examples/scanline)

## Props

Expand Down
2 changes: 1 addition & 1 deletion docs/effects/sepia.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -18,7 +18,7 @@ return (

## Example

<Codesandbox id="6jyby" />
[![Sepia demo](https://pmndrs.github.io/examples/sepia/thumbnail.webp)](https://pmndrs.github.io/examples/sepia)

## Props

Expand Down
11 changes: 5 additions & 6 deletions docs/introduction.mdx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -15,9 +15,8 @@ straight forward effects-chain.
npm install @react-three/postprocessing
```

[![Bubbles](bubbles.jpg)](https://m94xb.csb.app)

[![Control](control.jpg)](https://5jgjz.csb.app)
[![Bubbles demo](https://pmndrs.github.io/examples/bubbles/thumbnail.webp)](https://pmndrs.github.io/examples/bubbles)
[![Take Control demo](https://pmndrs.github.io/examples/take-control/thumbnail.webp)](https://pmndrs.github.io/examples/take-control)

#### Why postprocessing and not three/examples/jsm/postprocessing?

Expand All@@ -43,10 +42,10 @@ get high performance crisp results w/o jagged edges.
#### What does it look like?

Here's an example combining a couple of effects
([live demo](https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?)).
([live demo](https://pmndrs.github.io/examples/bubbles)).

<a href="https://codesandbox.io/s/react-postprocessing-dof-blob-pqrpl?" target="_blank" rel="noopener">
<img src="bubbles.jpg" alt="Bubbles Demo" />
<a href="https://pmndrs.github.io/examples/bubbles" target="_blank" rel="noopener">
<img src="https://pmndrs.github.io/examples/bubbles/thumbnail.webp" alt="Bubbles Demo" />
</a>

```jsx
Expand Down
Loading