03
←→

Building Fragments — Sketch Breakdowns

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

Loading...
Building Fragments — Utils→
←→

Fragments will be open for enrollment soon.

Enrollments are closed for now ↓

Enrollments will be open for a limited time later this year! Join the waitlist to get notified when enrollment opens.

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

HomeTechniquesUtilitiesBreakdownsSketchesWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
Sketches141
Writing29

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 Sketch Breakdowns come in.

A screenshot of a sketch

Sketch breakdowns

Every single one of the sketches that you see on this website has a corresponding breakdown. In it, I share all of the code that I used to make the sketch 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 sketch breakdown, you have easy access to:

  • The technique that I used to make the sketch (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 sketch 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 sketches 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 sketches 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!

Sign up to get notified when enrollment opens

Be the first to know what's next