03
←→

Building Fragments — Shader Breakdowns

Diving into shader breakdowns: how they work, commented code structure, and how composition choices add up in Three.js and TSL.

Loading...
←Building Fragments — The CollectionBuilding Fragments — Utils→
←→

Ready to start learning?

What's included in the course ↓

Access to the course: master shader techniques, use workflow-enhancing utilities, learn from shader breakdowns with full code, and get downloadable R3F and vanilla projects.

One single payment. No subscription required. 30-day money-back guarantee. No questions asked.

Not sure which to pick? Most people choose Pro for the full collection and all future updates. Fundamentals is a focused, lower-cost starting point you can upgrade from any time.

“Knowing shaders is your unreasonable advantage in UI. Ben has worked super hard on this course, recommended!”
Joshua Crowley - Designer and Educator
Loading...

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.

Join 737 others on the list

2026 Phobon

phobon.ioShadercraft

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
Curriculum
Works171
Writing37

Learning through examples

One of the first things I wanted to do when I started this project was to not just show you the things I made, but to reveal how I made them, and what my thought process was. This is where Shader Breakdowns come in.

A screenshot of a sketch

Shader breakdowns

Every single one of the shaders that you see on this website has a corresponding breakdown. In it, I share all of the code that I used to make the shader and explain what each part actually does. Sometimes this will just be a simple explanation of say a transformation that's being done, to more complex discussions of what I was thinking when I was experimenting with different parts of the code.

A screenshot of a sketch's code

Getting up and running

The main idea here is I want to make it easy for you to take what's in Fragments and use it as a starting point for your own projects and experiments. So, with every shader breakdown, you have easy access to:

  • The technique that I used to make the shader (when it's completed, of course!) so you really get in depth with the base of the sketch
  • Links to all of the utilities I used to make the shader that you can quickly copy and paste into your own projects

You can copy and paste everything into your own projects, and get started right away.

Variations

Finally, variations are a way to see how I've taken a particular technique and experimented with it in different ways. These related shaders are a great way to see just how much variety you can get out of a single technique. Here in this example, are all of the shaders that follow the Fractal technique, so while these are similar in theme, they all have unique little nuances and twists.

A screenshot of a sketch's variations

Roadmap

I'm starting to get really close to announcing the launch of Fragments - I'll make an announcement in the next little while. In the meantime, I wanted to be really transparent around where things are currently sitting in regards to content; so I made a roadmap just to give more of a sense of what's coming and potentially how far away it all is.

A screenshot of the roadmap

I'm going to continually evolve this page as things progress, so if you have any feedback or suggestions, please let me know!

FundamentalsAccess to foundational shader techniques and utilities
  • ✓ 5 foundational long-form technique lessons
  • ✓ 7 fundamentals lessons
  • ✓ 24 foundational workflow enhancing utilities
  • ✓ 71 full shader breakdowns
  • ✓ Downloadable R3F and Vanilla projects
  • ✓ Access to community Discord
Get Fundamentals →$99USD
ProMost popularFull access to the entire Fragments collection. Includes all techniques, utilities, breakdowns and all future updates
  • ✓ 12 long-form technique lessons
  • ✓ 7 fundamentals lessons
  • ✓ 44 workflow enhancing utilities
  • ✓ 171+ full shader breakdowns
  • ✓ Downloadable R3F and Vanilla projects
  • ✓ Access to community Discord
Get Pro →$199USD
You'll be redirected to our secured payment platform and get instant access.