
Fragments
Kickstart your creative coding and shader art journey with tools, techniques and shader breakdowns.
photon
Three.js Marketplace
Three.js Marketplace
Kickstart your Three.js and React Three Fiber (R3F) projects with our free and premium components themes and tools. Designed for freelancers, developers, and agencies, each product includes essential features to get you up and running quickly.
Links
Newsletter
Stay Updated with Three.js Resources!
- Weekly curated Three.js resources and tools.
No spam, unsubscribe at any time.
Description
For shader artists and creative coders: tools, techniques, deep dives. Powered by ThreeJS and TSL. Gain functional knowledge of creative coding techniques and utilities to supercharge your workflow.
The tools you need to get started and experimenting with shaders:
10+ Techniques: Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
15+ Utilities and Components: A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
110+ Shader Sketch Breakdowns: Fully commented source code and breakdowns of each sketch.
Github Starter Projects: Boilerplate project to get you started with TSL quickly and easily in both React and vanilla flavours.
Why I Made This Course:
I've been a professional developer for over 20 years - a lifetime spent writing code. It's been the passion of my life, but there came a point where I kind of just didn't find what I was doing interesting anymore. Something was just missing from my daily routine. That's when I found creative coding. It was something I'd always sort of kept at arms length over the years, but it was finally time to dive in. I'd always been fascinated with graphics programming, and more specifically shaders, so it seemed like the perfect pairing.
The problem is, though: shaders are just straight up hard to write. Shifting my mindset from writing HTML, CSS and Javascript to GLSL and WGSL, and thinking about how code executes on the GPU was honestly just a trip. Even now, after literally years of trying to learn, I still find myself struggling with the concept.
I researched, experimented, and just started practicing making things. So much of it was not great, and I hit a million dead ends, but the more I made things, the more I learned and the better things became. I did really enjoy the process of learning, but thinking about where I started to now — I really wish it was easier to get started.
That's where this resource comes in - it's the creative coding manual I wish I had when I first was starting out. Something I want to share with everyone to help them create amazing things too.
From understanding compression and gpu memory, to infinite worlds and smooth streaming, to gpu data structures, to proper scalable software design, literally no other Three.js course covers these topics at all.
Whether you’re a web developer looking to get into 3D, a Three.js user looking to advance your skills, or a budding game developer, this course is designed to give you a strong foundation in both.