diff --git a/docs/effects/chromatic-aberration.mdx b/docs/effects/chromatic-aberration.mdx index 108b4be..4f9568e 100644 --- a/docs/effects/chromatic-aberration.mdx +++ b/docs/effects/chromatic-aberration.mdx @@ -19,7 +19,7 @@ return ( ## Example - +[![ChromaticAberration demo](https://pmndrs.github.io/examples/chromatic-aberration/thumbnail.webp)](https://pmndrs.github.io/examples/chromatic-aberration) ## Props diff --git a/docs/effects/dot-screen.mdx b/docs/effects/dot-screen.mdx index c328d16..ec1e6f4 100644 --- a/docs/effects/dot-screen.mdx +++ b/docs/effects/dot-screen.mdx @@ -20,7 +20,7 @@ return ( ## Example - +[![DotScreen demo](https://pmndrs.github.io/examples/dot-screen/thumbnail.webp)](https://pmndrs.github.io/examples/dot-screen) ## Props diff --git a/docs/effects/god-rays.mdx b/docs/effects/god-rays.mdx index 8a809c2..9e859e4 100644 --- a/docs/effects/god-rays.mdx +++ b/docs/effects/god-rays.mdx @@ -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' @@ -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 | diff --git a/docs/effects/grid.mdx b/docs/effects/grid.mdx index b09ce6a..310b550 100644 --- a/docs/effects/grid.mdx +++ b/docs/effects/grid.mdx @@ -21,7 +21,7 @@ return ( ## Example - +[![Grid demo](https://pmndrs.github.io/examples/grid/thumbnail.webp)](https://pmndrs.github.io/examples/grid) ## Props diff --git a/docs/effects/lensflare.mdx b/docs/effects/lensflare.mdx index 6af2dbf..6a4134c 100644 --- a/docs/effects/lensflare.mdx +++ b/docs/effects/lensflare.mdx @@ -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' @@ -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 - - diff --git a/docs/effects/outline.mdx b/docs/effects/outline.mdx index edee71a..b4cc628 100644 --- a/docs/effects/outline.mdx +++ b/docs/effects/outline.mdx @@ -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. | diff --git a/docs/effects/pixelation.mdx b/docs/effects/pixelation.mdx index e2e9cec..e68b07f 100644 --- a/docs/effects/pixelation.mdx +++ b/docs/effects/pixelation.mdx @@ -19,7 +19,7 @@ return ( ## Example - +[![Pixelation demo](https://pmndrs.github.io/examples/pixelation/thumbnail.webp)](https://pmndrs.github.io/examples/pixelation) ## Props diff --git a/docs/effects/scanline.mdx b/docs/effects/scanline.mdx index 15c3cf6..2d13a12 100644 --- a/docs/effects/scanline.mdx +++ b/docs/effects/scanline.mdx @@ -21,7 +21,7 @@ return ( ## Example - +[![Scanline demo](https://pmndrs.github.io/examples/scanline/thumbnail.webp)](https://pmndrs.github.io/examples/scanline) ## Props diff --git a/docs/effects/sepia.mdx b/docs/effects/sepia.mdx index b28f26f..5a01da5 100644 --- a/docs/effects/sepia.mdx +++ b/docs/effects/sepia.mdx @@ -18,7 +18,7 @@ return ( ## Example - +[![Sepia demo](https://pmndrs.github.io/examples/sepia/thumbnail.webp)](https://pmndrs.github.io/examples/sepia) ## Props diff --git a/docs/introduction.mdx b/docs/introduction.mdx index f19ef33..6d9452b 100644 --- a/docs/introduction.mdx +++ b/docs/introduction.mdx @@ -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? @@ -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)). - - Bubbles Demo + + Bubbles Demo ```jsx