Sketches120Writing18

Fragments

Learn creative coding with shaders. For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Be the first to know what's next

2025 Phobon

phobon.io↗Shadercraft↗

Pages

Home↗Techniques↗Utilities↗Sketches↗Writing↗

Contact

X @thenoumenon↗hey@fragments.supply↗
All rights reserved.

Kickstart your creative coding and design engineering journey.

Explore the collection ↵
Mesh 5A sketch exploring mesh gradients

For design engineers, creative coders and shader artists: techniques, tools, deep dives. Powered by ThreeJS and TSL.

Explore the collection ↵

Gain functional knowledge of creative coding techniques.Access tools to supercharge your artistic and professional workflows.

Fractal 4
Cascade 4A kaleidoscopic fractal sketch utilising shearing matrices
Eidolon 3A sketch exploring rotating shapes and gradients

10 creative coding deep-dives. Craft the visuals you've been dreaming about.

  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
  • Loading...
Warp 1 - A sketch exploring domain warping
Shift 4
Shift 4 - A sketch exploring pixel sorting techniques

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.

  • Utilites36+

    A collection of utilities to streamline your TSL workflow with copy-pasteable implementations.

  • Sketches120+

    Fully commented source code and breakdowns of each sketch.

  • Downloadable Projects

    Every technique features a downloadable R3F and vanilla project complete with all examples and sketches you can modify.

  • Github Boilerplates

    Boilerplate projects to get you started with TSL quickly and easily in both React and vanilla flavours.
Flare 5
Shift 7 - A sketch exploring pixel sorting techniques

Ready to start learning?

What you unlock with Fragments ↓

Lifetime access to our collection of 10 creative coding techniques. 36+ utilities, full breakdowns of 120+ sketches, and downloadable R3F and vanilla projects.

One single payment - no subscription required.

Loading...

I'm Ben - 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 ↓

  1. Shadercraft

    Curated shader art, learning, inspiration and the people that make it happen

  2. Formation

    A collection of generative, algorithmic shader experiences coalesced from the void

  3. How to create a liquid raymarching scene

    A tutorial on how to create a liquid raymarching scene using ThreeJS Shading Language

  • Genuary 12
    Genuary 12Genuary 2025 prompt: subdivision. Recursive space partitioning creating fractal-like patterns.
  • Genuary 20
    Genuary 20Genuary 2025 prompt: generative architecture. Procedural buildings using domain repetition and SDFs.
  • Flare 3
    Flare 3Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges.
  • Arcs 1
    Arcs 1Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills.

Got questions? Here's something that might help.

Frequently Asked Questions

Loading...
penumbra-1
01
beginner

Thinking in Code

A creative coding process for finding inspiration and experimenting with shaders.

arcs-2
02
beginner
Preview

Geometric Shapes

Creating and combining basic geometry to build complex patterns and structures.

warp-1
03
beginner

Procedural Color Palettes

Generate limitless color variety in shaders using simple functions.

genuary-20
04
intermediate

Domain Repetition

Create endless repeating patterns by transforming coordinate space.

cascade-4
05
intermediate

Kaleidoscopic Fractal

Infinitely complex geometric patterns with repeating structure at different scales.

slate-3
06
intermediate

Noise

Generate natural-looking textures and motion using pseudo-random values.

mesh-1
07
intermediate

Mesh Gradient

Create organic color transitions by warping coordinate spaces and blending color points.

abiogenic-1
08
advanced

Raymarching

Create complex 3D scenes with minimal memory using signed distance functions.

gravity-6
09
advanced

Flow Field

Create organic patterns and flowing motion using direction vectors and velocity.

shift-8
10
advanced

Pixel Sorting

Create glitch art effects by reordering pixels based on their properties.

Unlock the Collection→$149USD
You'll be redirected to our secured payment platform and directly get access to the Fragments collection.

Fragments is for anyone who is interested in creative coding, shaders or graphics programming. It's a reflection of my own learning journey, and a way to share what I've learned with others.