What are fundamentals?
In Fragments, Techniques walk you through the building blocks of creative coding, increasing in complexity as you progress. Following them gives you a strong practical grasp of how to create your own visualisations and shaders. Fundamentals round that out with a solid foundation in the tools and technology you'll use along the way.
Think of it as the glue that holds everything together: reading and writing TSL comfortably, moving fast when iteration matters, and knowing what to do when something breaks or runs slow.
I wanted to include these in Fragments to bridge the gap from absolute beginner to someone who can comfortably write their own shaders using the same techniques the rest of the course covers.
If you're new to Fragments, this is the best place to start! Here is what's covered in the fundamentals section:
TSL primer
The TSL primer is the main entry point. It explains what Three.js Shading Language is, why it exists alongside raw GLSL or WGSL, and how it bridges WebGL and WebGPU. You get side-by-side style examples (think UV → color) so the translation from string shaders to node-style code is concrete and easy to follow.
- What TSL is and how it relates to GLSL and WGSL
- Why write shaders as structured JavaScript instead of big shader strings
- Small examples you can compare line by line
I've been a professional developer for a really long time, so something like TSL clicked for me quickly. Thinking functionally rather than imperatively takes a bit of adjustment, but I think the direction is excellent.
Debugging TSL
Debugging TSL starts from an honest problem: you can't console.log the GPU, and node graphs can fail with vague errors. The lesson walks through getting visibility into intermediate values and understanding what the compiler produced. It covers a range of tools and strategies—not a single silver bullet.
- The Three.js Inspector pattern and
toInspector()on nodes - Needle Inspector DevTools for a more familiar browser workflow
- The TSL transpiler as a way to read generated GLSL/WGSL when behavior surprises you
- Practical notes on using LLMs without fully relying on them for solutions
Sometimes debugging is more art than science, but having the tools—and the judgment—to track down and fix problems is an invaluable skill.
Runtime tweaking
Runtime tweaking is about live parameters. TSL has a real compilation step (soon to change!), so refreshing on every tiny change hurts. Pairing uniforms with a rich control surface—Leva, Dialkit, or your own UI—lets you explore a shader's parameter space without that friction.
- The
uniform-first pattern: what to expose and how to wire it all up - Why this pairs with generative workflows and faster creative iteration
I've generally used Leva for my projects—it's excellent—but I've been experimenting with Dialkit as well, which is a really nice alternative.
Animation libraries
In Animation libraries, you learn to move uniforms over time with intent: not just time in the shader, but eases, sequences, and orchestration from the JavaScript side. The lesson starts from animating in a render loop without dependencies, then layers in libraries like Motion or GSAP to supercharge movement in your shaders.
- Animating a uniform from a click or trigger without extra libraries
- Using libraries and tools to help you with
easingandtiming - How this connects to richer setups (for example buffers and interactivity) when you need many animated values
Generative systems
In Generative systems, you get the philosophy-and-practice piece: treating uniforms as the spine of a piece so one work can spawn many coherent variations. It contrasts exploratory randomization with seeded, repeatable runs, and ties the idea to real works in the collection.
This is one of the core outcomes in Fragments: generative systems you can experiment with, then keep pulling coherent variation out of a single idea.
- What counts as generative in this framing (can often be a loaded term)
- Randomized vs seeded
- Parameter architecture and helpers for randomizing or constraining values
One place I found this particularly useful was creating the Bands series. I was able to create a generative system that could produce many coherent variations of a single idea, and then use the animation libraries to animate the uniforms over time to create a sense of movement and fluidity.
Optimization strategies
In Optimization strategies, we push back on premature optimization while still giving a repeatable way to think about cost: texture reads, loops, CPU work, draw calls. The emphasis here is on measuring (browser tools, renderer.info, Stats, inspectors) before rewriting code you can no longer read.
Hopefully this offers real insight into how to optimise your shaders—and how to know when you've done enough.
- Building intuition for where shaders tend to hurt
- Measuring so changes are evidence-based
- Keeping code understandable after you optimise
Getting the most out of these fundamentals
Fragments follows a non-linear path, so I don't expect every section or technique to be completed in order—you're free to jump around and follow your own path. That said, these fundamentals are a great place to start if you're new to TSL, shaders, and creative coding, or a good place to return to when you need pointers. Here are some suggestions for how to use them:
- New to TSL? Start with the primer, then debugging when something breaks
- Building lots of variations? Runtime tweaking and generative systems together
- Polishing motion? Animation libraries after uniforms feel natural
- Something's heavy or janky? Optimization strategies once you have numbers
These fundamentals are in preview for Fragments members. When Fragments Season 2 launches, everyone gets full access—plus a new technique on Cellular Automata, a playful dive into emergent systems in generative art.