Postprocessing examples - #219
Open
kvvasuu wants to merge 10 commits into
Open
Conversation
…act-postprocessing Autofocus and Brightness/Contrast are faithful ports of their CodeSandbox originals. Bloom's scene was reworked onto the shared Suzanne+Stage template with a glass material and an orbiting light, since the original's licensed (CC-BY-NC-SA) voxel-character model didn't look good and raised licensing questions better avoided.
No CodeSandbox demo exists for this effect in react-postprocessing's docs. Scene design: a cluster of glossy, palette-colored spheres that drains to grayscale as the ColorAverage effect's opacity ramps up -- gives the grayscale conversion an obvious, satisfying before/after to look at.
They were added before the e2e/Chromatic test task (from PR pmndrs#173 and friends) landed on main, so they were missing the "test" script every other example now has.
…eact-postprocessing Faithful ports of the CodeSandbox originals, with fixes for two stale prop ranges written against a much older postprocessing version: DepthOfField's focusDistance is documented as normalized [0,1] (the original used 0..4), and HueSaturation's saturation is a -1..1 factor, not radians (same bug fixed earlier in Take Control). Glitch's `mode` prop doesn't reactively update in the current @react-three/postprocessing release (confirmed upstream, fixed in an unreleased 4.0.0) -- swapped it for the effect's other working props (active, strength, delay, duration, columns, ratio) instead. Depth of Field's scene is a row of five Suzanne heads receding in depth rather than the original's single object, so the focus falloff is actually visible; the camera's near/far planes are tightened so the normalized focusDistance/focusRange controls map to a meaningful slice of the scene.
…essing Noise: grain overlay demo on a staged Suzanne. Ramp: custom gradient-ramp effect masking ASCII/Bloom over a box grid; fixed an invisible-Bloom bug (luminanceThreshold 0.5 -> 0.1 to actually cross the diffuse boxes' luminance). Tone Mapping: ToneMapping effect across all ToneMappingMode values on a staged Suzanne; added a mode dropdown since middleGrey/whitePoint only affect the Reinhard2 family, not the modern AGX default.
…ocessing-examples-2
Objects bloom on hover; the torus knot can also be locked on via a Leva checkbox and the sphere via click. Uses @react-three/postprocessing's SelectiveBloom effect with a low luminanceThreshold since selection (not material brightness) drives what glows.
Dense pile of matte spheres and boxes shows contact-shadow occlusion from @react-three/postprocessing's SSAO effect. Fixed via ref + direct property mutation since the wrapper's useMemo only reconstructs on camera/normalPass change, not on prop updates. Also fixed three tuning issues: the deprecated `radius` setter silently clamps to [1e-6, 1] so the wrapper's own 1-40 default range was a no-op; `bias` and `luminanceInfluence` defaults were tuned for a differently-lit scene and mostly cancelled the effect out on this one. Toggling "enabled" mutes via blendMode opacity rather than unmounting, since EffectComposer renders a black screen when enableNormalPass is on but zero Effect children remain.
Member
|
thx @kvvasuu some authors are missing, can you add? |
Contributor
Author
Done - pushed. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Follow-up to #167 / #176 (first batch of
@react-three/postprocessingdemo migrations). Adds 12 more examples:Ported from CodeSandbox (faithful ports, with fixes where the original demo had bitrotted against current library versions):
Autofocus, Bloom, Brightness / Contrast, Depth of Field, Glitch, Hue / Saturation, Noise, Ramp, Tone Mapping
Original scene designs (no CodeSandbox demo exists for these effects; built from the documented props):
Color Average, Selective Bloom, SSAO