03
←→

Building Fragments — Sketch Breakdowns

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

Loading...
Building Fragments — Utils→
←→

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

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

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!

Unlock the CollectionJoin 143+ 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.

Be the first to know what's next