Sketches114Writing20

Fragments

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

Be the first to know what's next

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗
All rights reserved.

Kickstart your creative coding and design engineering journey.

Explore the collection ↵
Mesh 5A sketch exploring mesh gradients

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

Explore the collection ↵

Gain functional knowledge of creative coding techniques.Access tools to supercharge your artistic and professional workflows.

Fractal 4
Cascade 4A kaleidoscopic fractal sketch utilising shearing matrices
Eidolon 3A sketch exploring rotating shapes and gradients

10 creative coding deep-dives. Craft the visuals you've been dreaming about.

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
Warp 1 - A sketch exploring domain warping
Shift 4
Shift 4 - A sketch exploring pixel sorting techniques

The tools you need to get started and experimenting with shaders.

Re-usable resources built with React Three Fiber (Or vanilla), Three.js and TSL.

  • Techniques10

    Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.

  • Utilites36+

    A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.

  • Sketches110+

    Fully commented source code and breakdowns of each sketch.

  • Downloadable Projects and boilerplates

    Every technique ships with downloadable R3F and vanilla starters packed with tweakable sketches and examples. Clone them, remix them, ship them.

  • Community Discord

    A private community Discord to get help, share your work, and connect with other creative coders working with shaders.
Flare 5
Shift 7 - A sketch exploring pixel sorting techniques

Ready to start learning?

What you unlock with Fragments ↓

Lifetime access to our collection of 10 creative coding techniques. 36+ utilities, full breakdowns of 110+ sketches, and downloadable R3F and vanilla projects.

One single payment - no subscription required.

Loading...

I'm Ben - a design engineer and creative coder.

A little about me ↓

I've been making things with code for over 20 years. Hit a million dead ends along the way. The more I made, the better things got, but I wish it was easier to get started.

Fragments is the platform I wish I had when I was starting out - leverage the research and experimentation I've done over the last few years to supercharge your workflow.

Some things I've made ↓

  1. Shadercraft

    Curated shader art, learning, inspiration and the people that make it happen

  2. Formation

    A collection of generative, algorithmic shader experiences coalesced from the void

  3. How to create a liquid raymarching scene

    A tutorial on how to create a liquid raymarching scene using ThreeJS Shading Language

  • Genuary 12
    Genuary 12Genuary 2025 prompt: subdivision. Recursive space partitioning creating fractal-like patterns.
  • Genuary 20
    Genuary 20Genuary 2025 prompt: generative architecture. Procedural buildings using domain repetition and SDFs.
  • Flare 3
    Flare 3Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges.
  • Arcs 1
    Arcs 1Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills.

Got questions? Here's something that might help.

Frequently Asked Questions

Loading...
penumbra-1.webp
01
beginner

Thinking in Code

A creative coding process for finding inspiration and experimenting with shaders.

arcs-2.webp
02
beginner
Preview

Geometric Shapes

Creating and combining basic geometry to build complex patterns and structures.

warp-1.webp
03
beginner

Procedural Color Palettes

Generate limitless color variety in shaders using simple functions.

genuary-20.webp
04
intermediate

Domain Repetition

Create endless repeating patterns by transforming coordinate space.

cascade-4.webp
05
intermediate

Kaleidoscopic Fractal

Infinitely complex geometric patterns with repeating structure at different scales.

slate-3.webp
06
intermediate

Noise

Generate natural-looking textures and motion using pseudo-random values.

mesh-7.webp
07
intermediate

Mesh Gradient

Create organic color transitions by warping coordinate spaces and blending color points.

08
intermediate
Coming Soon!

Interactivity

Make shaders responsive with cursor following, trails, and buffered click interactions.

abiogenic-1.webp
09
advanced

Raymarching

Create complex 3D scenes with minimal memory using signed distance functions.

gravity-6.webp
10
advanced

Flow Field

Create organic patterns and flowing motion using direction vectors and velocity.

shift-8.webp
11
advanced

Pixel Sorting

Create glitch art effects by reordering pixels based on their properties.

Unlock the CollectionJoin 102+ design engineers, creative coders and shader artists→$149USD
You'll be redirected to our secured payment platform and directly get access to the Fragments collection.

Fragments is for anyone who is interested in creative coding, shaders or graphics programming. It's a reflection of my own learning journey, and a way to share what I've learned with others.