03
←→

Building Fragments — Shader Breakdowns

Diving into shader breakdowns: how they work, code structure, and shader composition explained.

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.

Loading...

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

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

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

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!

FundamentalsJoin 221+ developers learning shader techniquesAccess to foundational shader techniques and utilities
  • ✓ 5 foundational long-form technique lessons
  • ✓ 6 fundamentals lessons
  • ✓ 24 foundational workflow enhancing utilities
  • ✓ 71 full shader breakdowns
  • ✓ Downloadable R3F and Vanilla projects
  • ✓ Access to community Discord
→$99$89USD
ProJoin 221+ developers learning shader techniquesFull access to the entire Fragments collection. Includes all techniques, utilities, breakdowns and all future updates
  • ✓ 12 long-form technique lessons
  • ✓ 6 fundamentals lessons
  • ✓ 44 workflow enhancing utilities
  • ✓ 171+ full shader breakdowns
  • ✓ Downloadable R3F and Vanilla projects
  • ✓ Access to community Discord
→$199$179USD
You'll be redirected to our secured payment platform and get instant access.

Be the first to know what's next