Breakdowns

05slate
10gravity
05warp
05abiogenic
10cascade
08shift
07formation
02mesh
08imaginary
06arcs
05dawnFree
05eidolon
09flareFree
29genuary2025

Unlock the Collection ↵

Explore detailed breakdowns of every sketch.

slate⁵

Loading...
Loading...
Loading...
Loading...
Loading...

gravity¹⁰

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

warp⁵

Loading...
Loading...
Loading...
Loading...
Loading...

abiogenic⁵

Loading...
Loading...
Loading...
Loading...
Loading...

cascade¹⁰

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

shift⁸

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

formation⁷

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

mesh²

Loading...
Loading...

imaginary⁸

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

arcs⁶

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

dawn⁵

Loading...
Loading...
Loading...
Loading...
Loading...

eidolon⁵

Loading...
Loading...
Loading...
Loading...
Loading...

flare⁹

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

genuary2025²⁹

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

Sketches¹¹⁴ Writing²³

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.io^↗Shadercraft^↗

Pages

Home^↗Techniques^↗Utilities^↗Breakdowns^↗Sketches^↗Writing^↗

Contact

X @thenoumenon^↗hey@fragments.supply^↗OKAY DEV @phobon^↗

All rights reserved.

Slate 1

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

Slate 2

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

Slate 3

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

Slate 4

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

Slate 5

Layered noise study with procedural textures. Organic palettes created through multiple noise functions generating natural variations.

Gravity 1

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 2

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 3

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 4

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 5

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 6

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 7

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 8

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 9

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Gravity 10

Particle flow field with attractors and repulsors. WebGPU compute shaders create swirling emergent motion through force interactions.

Warp 1

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

Warp 2

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

Warp 3

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

Warp 4

Spiralized fractals with domain warping. Twisted recursive structures creating hypnotic compositions through geometric distortion.

Warp 5

Domain warping with layered noise distorting coordinate space. Fluid organic patterns and psychedelic effects.

Abiogenic 1

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

Abiogenic 2

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

Abiogenic 3

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

Abiogenic 4

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

Abiogenic 5

Raymarched organic forms exploring deformation and metamorphosis. Fluid transformations in 3D shader space creating dynamic shapes.

Cascade 1

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 2

Spiralized fractal with twisted geometric recursion. Hypnotic rotational symmetry through iteration creating mesmerizing visual flow.

Cascade 3

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 4

Kaleidoscopic fractal using shearing matrices. Domain warping creates skewed symmetrical patterns through geometric transformation.

Cascade 5

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 6

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 7

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 8

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 9

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Cascade 10

Kaleidoscopic fractal using rotation matrices and domain folding. Mesmerizing symmetry through iteration creating hypnotic patterns.

Shift 1

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 2

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 3

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 4

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 5

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 6

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 7

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Shift 8

Pixel sorting with compute shaders. Algorithmic pixel reorganization creates glitch art distortion through data manipulation techniques.

Fundament

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Cellular

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Network

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Spiral

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Monde

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Concentric

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Flow

Flow field particle system using WebGPU compute shaders. Trigonometric functions create emergent motion through mathematical forces.

Mesh 7

Custom mesh gradient with multi-point color interpolation. Smooth organic blending in shaders creating fluid color transitions.

Mesh 8

Custom mesh gradient with multi-point color interpolation. Smooth organic blending in shaders creating fluid color transitions.

Imaginary 1

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 2

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 3

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 4

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 5

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 6

Visualizing imaginary numbers through gradients. Complex math mapped to color, creating organic patterns through mathematical beauty.

Imaginary 7

Fully randomized imaginary number visualization. Complex math creates unique gradient patterns every render through procedural generation.

Imaginary 8

Fully randomized imaginary number visualization. Generative complex number patterns with unique outcomes through mathematical exploration.

Arcs 1

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Arcs 2

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Arcs 3

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Arcs 4

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Arcs 5

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Arcs 6

Simple shapes and gradients inspired by Alex Cristache. Arc SDFs with soft color fills creating elegant minimalist compositions.

Dawn 1

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Dawn 2

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Dawn 3

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Dawn 4

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Dawn 5

Gradient study inspired by Rik Oostenbroek. Soft color transitions creating dawn-like luminous atmospheres through smooth blending.

Eidolon 1

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

Eidolon 2

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

Eidolon 3

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

Eidolon 4

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

Eidolon 5

Rotating geometric shapes with procedural gradients. Animated transformations and cosine color palettes creating dynamic compositions.

Flare 1

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 2

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 3

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 4

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 5

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 6

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 7

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 8

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Flare 9

Gradient sketch with fractionated coordinates. Radial patterns with cosine color palettes and bloomed edges creating luminous effects.

Genuary 1

Genuary 2025 prompt: horizontal or vertical lines only. Minimalist geometric composition study exploring linear patterns.

Genuary 2

Genuary 2025 prompt: layers upon layers upon layers. Depth and transparency study in shaders creating visual complexity.

Genuary 3

Genuary 2025 prompt: exactly 42 lines of code. Constraint-based fractal shader study demonstrating minimal implementation.

Genuary 4

Genuary 2025 prompt: black on black. Monochrome study exploring texture and depth through subtle contrast variations.

Genuary 5

Genuary 2025 prompt: isometric art with no vanishing points. Parallel projection shader study creating dimensional illusions.

Genuary 6

Genuary 2025 prompt: landscape using only primitive shapes. SDF-based minimalist scene construction with geometric forms.

Genuary 8

Genuary 2025 prompt: draw one million of something. GPU particle system rendering study exploring massive scale visualization.

Genuary 9

Genuary 2025 prompt: textile patterns from public transport seating. Repetitive fractal pattern study inspired by urban design.

Genuary 10

Genuary 2025 prompt: only use TAU in your code. Mathematical constraint exploring circular patterns through constant usage.

Genuary 11

Genuary 2025 prompt: impossible day. Optical illusions and paradoxical geometry in shaders creating mind-bending visuals.

Genuary 12

Genuary 2025 prompt: subdivision. Recursive space partitioning creating fractal-like patterns through iterative division.

Genuary 13

Genuary 2025 prompt: triangles and nothing else. Complex patterns built from triangle SDFs demonstrating geometric versatility.

Genuary 14

Genuary 2025 prompt: pure black and white, no gray. High-contrast raymarching study exploring binary visual aesthetics.

Genuary 15

Genuary 2025 prompt: design a rug. Symmetrical pattern study with traditional textile motifs rendered procedurally.

Genuary 16

Genuary 2025 prompt: generative palette. Procedural colors using cosine functions and fractals creating dynamic harmonies.

Genuary 17

Genuary 2025 prompt: what happens if pi=4? Warped geometry and impossible circular shapes through mathematical distortion.

Genuary 18

Genuary 2025 prompt: what does wind look like? Abstract motion study visualizing invisible forces through particle dynamics.

Genuary 19

Genuary 2025 prompt: Op art. Visual illusions through geometric patterns and high contrast creating perceptual effects.

Genuary 20

Genuary 2025 prompt: generative architecture. Procedural buildings using domain repetition and SDFs creating urban landscapes.

Genuary 22

Genuary 2025 prompt: gradients only. Pure color blending with cosine palettes, no shapes creating smooth transitions.

Genuary 23

Genuary 2025 prompt: inspired by brutalism. Raw geometric forms and stark minimalism in raymarching architectural style.

Genuary 24

A #genuary2025 sketch. Geometric art - pick either a circle, rectangle, or triangle and use only that geometric shape.

Genuary 25

Genuary 2025 prompt: one line that may or may not intersect itself. Continuous path creating complex forms through curves.

Genuary 26

Genuary 2025 prompt: symmetry. Reflective balance and mirroring through fractal transformations creating harmonious patterns.

Genuary 27

Genuary 2025 prompt: no randomness, noise, or trig. Extreme constraint pattern study using only deterministic functions.

Genuary 28

Genuary 2025 prompt: infinite scroll. Seamless tiling fractal with endless looping creating continuous visual flow.

Genuary 29

Genuary 2025 prompt: grid-based graphic design. Modular system with domain repetition creating structured compositions.

Genuary 30

Genuary 2025 prompt: abstract map. Stylized cartography through geometric abstraction and noise creating terrain visuals.

Genuary 31

Genuary 2025 prompt: pixel sorting. Algorithmic pixel reorganization creating glitch aesthetics through data manipulation.

Be the first to know what's next

Email

Breakdowns — Fragments