Skip to content

Migrate @react-three/postprocessing demos from CodeSandbox - #167

Merged
krispya merged 8 commits into
pmndrs:mainfrom
kvvasuu:postprocessing-examples
Aug 11, 2026
Merged

Migrate @react-three/postprocessing demos from CodeSandbox#167
krispya merged 8 commits into
pmndrs:mainfrom
kvvasuu:postprocessing-examples

Conversation

@kvvasuu

@kvvasuu kvvasuu commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Summary

Most of @react-three/postprocessing's own demo CodeSandboxes have been broken or badly outdated for years - some no longer load at all, others crashed on the deprecated APIs they were built against. This PR migrates them into this repo as proper, maintained examples on the current release (3.0.5).

Currently included:

  • Vignette - a fresh scene (torus knot, studio lighting) built to showcase the effect; the original CodeSandbox demo could not be recovered.
  • Bubbles - faithful port of the library's flagship demo (DepthOfField + Bloom + Noise + Vignette), from the current CodeSandbox export.
  • Take Control - faithful port of the library's other flagship demo (GodRays + HueSaturation + Noise + Vignette + spring-animated frames), recovered from the repo's own pre-2020 git history since its CodeSandbox sync target no longer exists.
  • Pixelation, Sepia, Dot Screen, Chromatic Aberration, Scanline, Grid - single-effect demos sharing the same Suzanne + drei Stage staging as the original CodeSandboxes.

All examples are modernized to TypeScript, Vite, and this repo's conventions.

The remaining effects below will follow as separate stacked PRs on top of this one.

Test plan

  • pnpm lint:metadata
  • pnpm exec syncpack lint
  • pnpm --filter <example> build for each example
  • Manually verified each example renders correctly in a browser

Effect coverage

Flagship demos:

  • Bubbles
  • Take Control

Single-effect demos:

  • Vignette
  • Autofocus
  • Bloom
  • Brightness / Contrast
  • Chromatic Aberration
  • Color Average
  • Depth of Field
  • Dot Screen
  • Glitch
  • Grid
  • Hue / Saturation
  • LensFlare
  • Noise
  • Pixelation
  • Ramp
  • Scanline
  • Sepia
  • Tone Mapping

No live demo in the original docs (need to be built from documented props alone):

  • God Rays
  • Outline
  • Selective Bloom
  • SMAA
  • SSAO

…stprocessing

Vignette is a fresh scene built for the effect. Bubbles and Take Control are
faithful ports of the library's own CodeSandbox demos (Bubbles from the
current sandbox export, Take Control recovered from the repo's pre-2020 git
history since its CodeSandbox sync target no longer exists), modernized to
TypeScript, @react-three/postprocessing 3.0.5, and this repo's conventions.
Both share the Suzanne + drei Stage staging from the original CodeSandbox
demos, only the effect in the composer differs.
@kvvasuu kvvasuu changed the title Add Vignette, Bubbles and Take Control examples, ported from react-postprocessing Migrate @react-three/postprocessing demos from CodeSandbox Aug 10, 2026
kvvasuu and others added 5 commits August 10, 2026 22:51
…ct-postprocessing

Same Suzanne + drei Stage staging as Pixelation/Sepia/Dot Screen, only the
effect in the composer differs.
@krispya
krispya merged commit e66999b into pmndrs:main Aug 11, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants