Fragments/Breakdowns

  • 29genuary25
  • 09flare
  • 05dawnFree
  • 08imaginary
  • 10cascade
  • 05warp
  • 05eidolon
  • 06arcs
  • 02mesh
  • 07formation
  • 08shift
  • 05abiogenic
  • 10gravity
  • 05slate
  • 07bands
  • 21genuary26
  • 08nebulaNew
  • 05penumbraNew
  • 08singularityNew
  • 08emergeNew

Register now ↵

Explore detailed breakdowns of every shader.

    genuary2529

    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
    • Loading...
Works171
Writing35

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

Pages

HomeTechniquesUtilitiesBreakdownsWorksWriting

Contact

X @thenoumenonhey@fragments.supplyOKAY DEV @phobon
All rights reserved.
sketches/genuary-1.webp

Genuary 1

Horizontal or vertical lines only. Minimalist linear composition in WebGPU: structure and spacing do the work, no extra geometry.

sketches/genuary-2.webp

Genuary 2

Layers upon layers upon layers. Transparent stacks and depth sorting build complexity while keeping each sheet readable alone.

sketches/genuary-3.webp

Genuary 3

Exactly 42 lines of code. A tight fractal shader that stays inside the line budget and still reads as a full idea.

sketches/genuary-4.webp

Genuary 4

Black on black. Monochrome plate where texture and micro-contrast carry depth without leaning on a second hue.

sketches/genuary-5.webp

Genuary 5

Isometric art with no vanishing points. Parallel projection keeps parallel lines honest; shading sells the illusion.

sketches/genuary-6.webp

Genuary 6

Landscape using only primitive shapes. SDF primitives assemble a minimal outdoor read without freehand curves.

sketches/genuary-8.webp

Genuary 8

Draw one million of something. GPU instancing and particles stress scale so density becomes the subject, not detail.

sketches/genuary-9.webp

Genuary 9

Textile patterns from public transport seating. Loud repeats and modular rhythm nod to upholstery grids and bus fabric.

sketches/genuary-10.webp

Genuary 10

Only use TAU in your code. The constant steers circles, turns, and phase so the piece stays mathematically disciplined.

sketches/genuary-11.webp

Genuary 11

Impossible day. Illusions, paradoxical forms, and shader tricks that read wrong at first and settle on second look.

sketches/genuary-12.webp

Genuary 12

Subdivision. Recursive splitting of space yields fractal-like blocks without hand placing every tiny cell by hand.

sketches/genuary-13.webp

Genuary 13

Triangles and nothing else. Triangle SDFs tile patterns, trims, and fills while staying inside the one-shape rule.

sketches/genuary-14.webp

Genuary 14

Pure black and white, no gray. Hard clipping keeps every pixel pure black or pure white with no muddy mid ramps.

sketches/genuary-15.webp

Genuary 15

Design a rug. Symmetry, borders, and repeats read woven even when colors stay flat and pattern leads the whole shot.

sketches/genuary-16.webp

Genuary 16

Generative palette. Cosine ramps and fractal cues steer harmony instead of hand picked swatches on a reference sheet.

sketches/genuary-17.webp

Genuary 17

What happens if pi=4? Warped circles and bent arcs toy with expectations of round geometry versus square distance norms.

sketches/genuary-18.webp

Genuary 18

What does wind look like? Particles and flow fields hint at gusts you cannot see by how they push marks around.

sketches/genuary-19.webp

Genuary 19

Op art. High contrast stripes and geometry bait the eye with moiré shimmer and vibration on an otherwise flat plane.

sketches/genuary-20.webp

Genuary 20

Generative architecture. Domain repetition and signed distance strokes stack blocks into pseudo city silhouettes.

sketches/genuary-22.webp

Genuary 22

Gradients only. Soft blends do all forming in the shader, with no explicit mask layer besides the color ramp itself.

sketches/genuary-23.webp

Genuary 23

Inspired by brutalism. Raw massing, blunt edges, and restrained palettes in a raymarched brutalist mood with sober light.

sketches/genuary-24.webp

Genuary 24

A Genuary sketch: pick a circle, rectangle, or triangle and use only that primitive for the whole geometric composition.

sketches/genuary-25.webp

Genuary 25

One line that may or may not intersect itself. A single path bends into loops and figure knots without lifting the pen.

sketches/genuary-26.webp

Genuary 26

Symmetry. Mirrors and repeats fold space so balanced structure lands faster than freeform asymmetry would allow here.

sketches/genuary-27.webp

Genuary 27

No randomness, noise, or trig. Deterministic building blocks only, so repeats stay predictable in code and output.

sketches/genuary-28.webp

Genuary 28

Infinite scroll. Seamless tiling and looping UV read like an endless pan with no visible seam at the frame border.

sketches/genuary-29.webp

Genuary 29

Grid-based graphic design. Modular cells repeat with clear rhythm, margins, and a poster like systematic layout tone.

sketches/genuary-30.webp

Genuary 30

Abstract map. Noise shaped into terrain marks and stylized shores without spelling out a real world location name.

sketches/genuary-31.webp

Genuary 31

Pixel sorting. Compute reorders rows and columns to trade photographic accuracy for streaky glitch forward aesthetics.

Be the first to know what's next