Utilities to kickstart your creative coding projects.

boilerplate⁴

Loading...
Loading...
Loading...
Loading...

color³

Loading...
Loading...
Loading...

patterns⁶

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

sdf²

Loading...
Loading...

function⁷

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

system³

Loading...
Loading...
Loading...

interactivity⁴

Loading...
Loading...
Loading...
Loading...

noise¹

Loading...

postprocessing²³

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

distortion⁸

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Works¹⁷¹

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.

Email

2026 Phobon

phobon.io artifice.sh shadercraft

Pages

Home Techniques Utilities Breakdowns Works Writing

Contact

X @thenoumenon hey@fragments.supply OKAY DEV @phobon

All rights reserved.

Fragments/Utilities

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

Get the course ↵

Boilerplate Project

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

WebGPU Scene

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

Sketch Component

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

Color Space Correction

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

Cosine Palette

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

Tonemapping Functions

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

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.

Grain Texture Pattern

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

Pixellation Pattern

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

Speckled Noise Pattern

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

Vignette Pattern

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

Canvas Weave Pattern

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

LED Pattern

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

SDF Shape Functions

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

SDF Operations

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

Screen Aspect UV

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

Repeating Pattern

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

Bloom

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

Bloom Edge Pattern

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

Domain Index

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

Coordinate Functions

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

Disk Blur

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

Randomization Helpers

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

Generate Canvas Image

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

Export JSON

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

Storage Buffers

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

Buffer Triggers

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

Grid Trail Texture

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

Pointer Uniform

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

Noise Functions

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

Postprocessing Component

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

ASCII Effect

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

Chromatic Aberration Effect

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

CRT Scanline Effect

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

Dither Effect

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

Halftone Effect

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

Grain Texture Effect

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

Pixellation Effect

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

Vignette Effect

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

LED Effect

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

Bulge Distortion Effect

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

Swirl Distortion Effect

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

Wave Distortion Effect

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

Fluted Glass Effect

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

Kaleidoscope Effect

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

Mirror Effect

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

Polar Effect

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

Stretch Effect

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

Gaussian Blur Effect

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

Progressive Blur Effect

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

Radial Blur Effect

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

Tilt Shift Effect

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

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.

Bulge Distortion

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

Swirl Distortion

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

Wave Distortion

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

Fluted Glass Distortion

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

Kaleidoscope Distortion

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

Mirror Distortion

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

Polar Distortion

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

Stretch Distortion

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