Kickstart your creative coding and shader art journey.
For shader artists, creative coders and design engineers: techniques, tools, deep dives. Powered by ThreeJS and TSL.
The creative coding resource I wish I had when I was getting started.Gain functional knowledge of creative coding techniques and utilities to supercharge your artistic and professional workflows.
The tools you need to get started and experimenting with shaders.
Re-usable resources built with React Three Fiber (Or vanilla), Three.js and TSL.
Techniques10
Deep explanations and breakdowns of underlying techniques with copy-pasteable implementations and examples.
Preview Geometric Shapes Utilites15+
A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.
Preview Sketch Component Sketches110+
Fully commented source code and breakdowns of each sketch.
Preview Flare 1Preview Dawn 1 Github Projects
Boilerplate project to get you started with TSL quickly and easily in both React and vanilla flavours.
I'm phobon - a design engineer and creative coder.
A little about me ↓
I've been making things with code for over 20 years. Hit a million dead ends along the way. The more I made, the better things got, but I wish it was easier to get started.
Fragments is the platform I wish I had when I was starting out - leverage the research and experimentation I've done over the last few years to supercharge your workflow.
Some things I've made ↓
- Shadercraft
Curated shader art, learning, inspiration and the people that make it happen
- Formation
A collection of generative, algorithmic shader experiences coalesced from the void
- How to create a liquid raymarching scene
A tutorial on how to create a liquid raymarching scene using ThreeJS Shading Language
Got questions? Here's something that might help.
Frequently Asked Questions
