Utilities

04boilerplateFree
02color
01noise
12postprocessing
06patterns
03distortion
02sdf
06function
04interactivityNew

Enroll in Fragments ↵

Utilities to kickstart your creative coding projects.

boilerplate⁴

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

color²

Loading...
Loading...

noise¹

Loading...

postprocessing¹²

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

patterns⁶

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

distortion³

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

sdf²

Loading...
Loading...

function⁶

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

interactivity⁴

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

Sketches¹⁴² Writing²⁷

Fragments

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

Loading...

2025 Phobon

phobon.io^↗Shadercraft^↗

Pages

Home^↗Techniques^↗Utilities^↗Breakdowns^↗Sketches^↗Writing^↗

Contact

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

All rights reserved.

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

Noise Functions

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

Postprocessing Component

A component that applies postprocessing effects to your scene.

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.

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. Adjustable resolution for mosaic-like appearance.

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.

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.

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.

Storage Buffers

Provisions paired active/value uniform arrays for trigger-style 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.

Be the first to know what's next

Email