Utilities to kickstart your creative coding projects.

    postprocessing23

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
Curriculum
Works171
Writing45

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

New techniques, breakdowns and shader experiments — straight to your inbox.

2026 Phobon

phobon.ioartifice.shshadercraft

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
Fragments/Utilities/Postprocessing

  • 04boilerplateFree
  • 03colorNew
  • 06patterns
  • 02sdf
  • 07functionNew
  • 03systemNewFree
  • 04interactivity
  • 01noise
  • 23postprocessingNew
  • 08distortionNew

Get the course ↵
utilities/code-window.webp

Postprocessing Component

React Three Fiber postprocessing component that applies bloom, grain, and other screen-space effects to your Three.js scene.

r3f
utilities/pixellation-effect.webp

ASCII Effect

Post-process the scene into pixellated ASCII-style tiles using a glyph atlas and luma-driven character selection.

r3f
vanilla
utilities/ca-effect.webp

Chromatic Aberration Effect

RGB channel separation effect simulating lens distortion. Create colorful fringing for stylistic glitch and camera aesthetics.

r3f
vanilla
utilities/crt-effect.webp

CRT Scanline Effect

CRT monitor scanlines with barrel distortion for retro aesthetics. Recreate classic cathode ray tube screen effects.

r3f
vanilla
utilities/dither-effect.webp

Dither Effect

Ordered dithering with Bayer matrix for retro print aesthetics. Classic technique for limited color palettes and vintage graphics.

r3f
vanilla
utilities/halftone-effect.webp

Halftone Effect

CMYK-style halftone dot patterns for print and comic book aesthetics. Classic printing technique for retro and pop art visuals.

r3f
vanilla
utilities/grain-texture-effect.webp

Grain Texture Effect

Film grain post-processing effect for analog texture. Apply cinematic grain to your rendered scenes.

r3f
vanilla
utilities/pixellation-effect.webp

Pixellation Effect

Pixelation post-processing with aspect correction. Create retro pixel art aesthetics from rendered scenes.

r3f
vanilla
utilities/vignette-effect.webp

Vignette Effect

Classic vignette post-processing darkening edges to focus center. Essential effect for cinematic compositions.

r3f
vanilla
utilities/led-effect.webp

LED Effect

LED display post-processing simulating digital screens. Cyberpunk electronic aesthetics for rendered scenes.

r3f
vanilla
utilities/bulge-distortion.webp

Bulge Distortion Effect

Radial bulge or pinch distortion post-processing. Create lens-like magnification effects for artistic compositions.

r3f
vanilla
utilities/swirl-distortion.webp

Swirl Distortion Effect

Rotational swirl distortion post-processing for artistic transformations. Create vortex and twirl effects with customizable center points.

r3f
vanilla
utilities/wave-distortion.webp

Wave Distortion Effect

Sinusoidal wave distortion post-processing for rippling effects. Add flowing distortion patterns with controllable frequency and amplitude.

r3f
vanilla
utilities/fluted-glass.webp

Fluted Glass Effect

Fluted / ribbed glass post-processing with refraction, relief shading, and chromatic aberration for convincing privacy-glass looks.

New
r3f
vanilla
utilities/kaleidoscope-distortion.webp

Kaleidoscope Effect

Kaleidoscope post-processing that folds your scene into mirrored radial segments with configurable sides and rotation.

New
r3f
vanilla
utilities/mirror-distortion.webp

Mirror Effect

Mirror post-processing that reflects your scene across an arbitrary line for symmetric and Rorschach-style effects.

New
r3f
vanilla
utilities/polar-distortion.webp

Polar Effect

Polar post-processing that wraps your scene around a circle for tunnel, vortex, and tiny-planet transformations.

New
r3f
vanilla
utilities/stretch-distortion.webp

Stretch Effect

Stretch post-processing that pulls or squeezes your scene along an axis for motion-streak emphasis and elastic transitions.

New
r3f
vanilla
utilities/gaussian-blur.webp

Gaussian Blur Effect

Uniform Gaussian blur post-processing built on a golden-angle disk kernel that stays smooth at large radii.

New
r3f
vanilla
utilities/progressive-blur.webp

Progressive Blur Effect

Progressive gradient blur post-processing that ramps from sharp to blurred along an axis — ideal for frosted UI backdrops.

New
r3f
vanilla
utilities/radial-blur.webp

Radial Blur Effect

Radial zoom blur post-processing that stays sharp at a focal point and increases with distance for a burst feel.

New
r3f
vanilla
utilities/tilt-shift.webp

Tilt Shift Effect

Tilt-shift blur post-processing with a sharp band and blurred surrounds for the classic miniature look.

New
r3f
vanilla
utilities/hue-rotate_20261027-111343_750x1000.webp

Image Adjustment Effects

Post-processing versions of the image adjustments — grayscale, sepia, invert, brightness, contrast, saturation, exposure, gamma, and hue rotate — to stack as layers in a post-processing chain.

New
r3f
vanilla