Fragments/Utilities

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

Get the course ↵

Utilities to kickstart your creative coding projects.

    boilerplate4

    • Loading...
    • Loading...
    • Loading...
    • Loading...

    color3

    • Loading...
    • Loading...
    • Loading...

    patterns6

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    sdf2

    • Loading...
    • Loading...

    function7

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    system3

    • Loading...
    • Loading...
    • Loading...

    interactivity4

    • Loading...
    • Loading...
    • Loading...
    • Loading...

    noise1

    • Loading...

    postprocessing22

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...

    distortion8

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
Curriculum
Works171
Writing39

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.ioShadercraft

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
utilities/code-window.webp

Boilerplate Project

Full project boilerplate for creative coding with React Three Fiber and WebGPU. Everything you need to start building.

Free
r3f
vanilla
utilities/code-window.webp

WebGPU Scene

WebGPU scene boilerplate for React Three Fiber creative coding projects. Jump straight into building with TSL shaders.

Free
r3f
utilities/code-window.webp

Sketch Component

Template React component for building creative coding shaders with Three.js and TSL. Copy, paste, start creating.

Free
r3f
vanilla
utilities/code-window.webp

Color Space Correction

A composable component that sets the renderer's outputColorSpace to LinearSRGBColorSpace and disables tone mapping.

Free
r3f
utilities/cosine-palette.webp

Cosine Palette

Generate procedural color palettes with cosine functions. Create smooth, vibrant gradients mathematically.

r3f
vanilla
utilities/tonemapping.webp

Tonemapping Functions

Tonemapping and color grading functions for shaders. Enhance contrast, mood, and visual quality in your compositions.

r3f
vanilla
utilities/code-window.webp

Image Adjustments

Color-in / color-out adjustment functions — grayscale, sepia, invert, brightness, contrast, saturation, exposure, gamma, hue rotate, and vignette — to chain inside a shader's colorNode.

New
r3f
vanilla
utilities/grain-texture-effect.webp

Grain Texture Pattern

Film grain shader pattern for analog texture and vintage aesthetics. Add cinematic character to digital compositions.

r3f
vanilla
utilities/pixellation-effect.webp

Pixellation Pattern

Pixelation shader pattern for retro visuals in TSL. Adjustable resolution creates mosaic-like, low-fi appearances in your compositions.

r3f
vanilla
utilities/noise.webp

Speckled Noise Pattern

Speckled noise shader pattern for film grain and dust effects. Add organic imperfections to your shader compositions.

r3f
vanilla
utilities/vignette-effect.webp

Vignette Pattern

Classic vignette shader pattern that darkens edges and draws focus to center. Essential treatment for compositions.

r3f
vanilla
utilities/canvas-weave-pattern.webp

Canvas Weave Pattern

Canvas weave shader pattern simulating fabric textures. Add painterly, textile surfaces to your visuals.

r3f
vanilla
utilities/led-effect.webp

LED Pattern

LED display shader pattern simulating digital screens and light matrices. Cyberpunk electronic aesthetics for your shaders.

r3f
vanilla
utilities/sdf-shapes.webp

SDF Shape Functions

Signed Distance Functions (SDFs) for 2D and 3D shapes. Essential primitives for shader programming and raymarching.

r3f
vanilla
utilities/sdf.webp

SDF Operations

SDF operations for complex shapes: boolean ops, smooth blending, and transformations. Combine primitives into intricate forms.

r3f
vanilla
utilities/screen-aspect-uv.webp

Screen Aspect UV

TSL function that adjusts UV coordinates for screen aspect ratio. Fixes distortion in shaders with one function call.

r3f
vanilla
utilities/repeating-pattern.webp

Repeating Pattern

Create seamless, infinitely repeating patterns with domain repetition. TSL function for tiling textures in shaders.

r3f
vanilla
utilities/bloom.webp

Bloom

Bloom effect creating glowing halos around bright areas. Post-processing function for luminous highlights in shaders.

r3f
vanilla
utilities/bloom-edge-pattern.webp

Bloom Edge Pattern

TSL function for glowing edge patterns and bloomed outlines. Add luminous effects to your shaders instantly.

r3f
vanilla
utilities/tonemapping.webp

Domain Index

Calculate domain indices for pattern repetition. Create unique variations across repeated instances in shaders.

r3f
vanilla
utilities/code-window.webp

Coordinate Functions

Convert between Cartesian and polar coordinates in TSL. Essential for radial patterns and circular effects.

r3f
vanilla
utilities/code-window.webp

Disk Blur

Shared Gaussian-weighted disk blur kernel (Vogel golden-angle spiral) that powers the gaussian, progressive, radial, and tilt-shift effects.

New
r3f
vanilla
utilities/code-window.webp

Randomization Helpers

Small JavaScript helpers to randomize and derive values for uniforms when building generative shader systems.

New
Free
r3f
vanilla
utilities/code-window.webp

Generate Canvas Image

Browser helper that captures a canvas frame and downloads it as a PNG, with optional timestamped filenames.

New
Free
r3f
vanilla
utilities/code-window.webp

Export JSON

Serialize arbitrary data and download it as JSON for preset storage, sharing, and reproducible generative outputs.

New
Free
r3f
vanilla
utilities/buffer-triggers.webp

Storage Buffers

Storage buffer utility for WebGPU shaders: provisions paired active/value uniform arrays for trigger-style interactive shader data.

r3f
utilities/buffer-triggers.webp

Buffer Triggers

Animation-aware trigger helper that finds available buffer slots, applies easing, and cleans up automatically.

r3f
utilities/grid-trail-texture.webp

Grid Trail Texture

Pointer-responsive DataTexture generator that accumulates direction and speed for TSL-driven trail effects.

r3f
utilities/pointer-uniform.webp

Pointer Uniform

Hook and helper that keep pointer TSL uniforms synced in [-1, 1] NDC for both React Three Fiber and vanilla scenes.

r3f
vanilla
utilities/noise.webp

Noise Functions

Procedural noise functions: Perlin, Simplex, FBM, and more. Add organic randomness and variation to your shaders.

r3f
vanilla
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/bulge-distortion.webp

Bulge Distortion

UV distortion function for bulge and pinch effects. Create magnifying glass or fisheye transformations with customizable falloff.

r3f
vanilla
utilities/swirl-distortion.webp

Swirl Distortion

UV distortion function for rotational swirl effects. Create vortex transformations with distance-based rotation falloff.

r3f
vanilla
utilities/wave-distortion.webp

Wave Distortion

UV distortion function for sinusoidal wave effects. Add rippling distortion patterns with configurable frequency and direction.

r3f
vanilla
utilities/fluted-glass.webp

Fluted Glass Distortion

UV distortion function for ribbed / fluted glass refraction. Bend an image through configurable vertical ribs with waves, bars, or rounded profiles.

New
r3f
vanilla
utilities/kaleidoscope-distortion.webp

Kaleidoscope Distortion

UV distortion function for kaleidoscope symmetry. Fold an image into mirrored radial segments for mandala-like compositions.

New
r3f
vanilla
utilities/mirror-distortion.webp

Mirror Distortion

UV distortion function for mirroring across an arbitrary line. Reflect one half of an image onto the other about any axis.

New
r3f
vanilla
utilities/polar-distortion.webp

Polar Distortion

UV distortion function for cartesian-to-polar remapping. Create tunnel, vortex, and tiny-planet transformations.

New
r3f
vanilla
utilities/stretch-distortion.webp

Stretch Distortion

UV distortion function for stretching and squeezing along an axis. Pull or compress an image from an anchor point.

New
r3f
vanilla