tsl-lab
A daily-experiment sprint in Three.js Shading Language + WebGPU — one shader, one bug, one small win at a time.
25 days, 11 years of frontend, 0 prior shader experience. Training for Three.js Conference Paris, . Follow along or watch it break in real time.
-
/hud
Heads-Up Display
A HUD-style network map of this lab — every node is an experiment, every arc a shared technique. Real data, no decoration.
9 nodes · 8 links -
/ssr
Mirror Floor · Screen Space Reflections
Screen Space Reflections using TSL techniques as
The smart way to reflect objects 🪞 how it was built ↗ -
/instancing
Ten Thousand, One Draw Call
10,000 instances, each with position, color, and scale derived from a hash — no per-object JS loop, no mercy for the GPU.
1 draw call how it was built ↗ -
/texture
No Seams at the Poles
Triplanar mapping on a deformed sphere. UVs give up near the poles; triplanar doesn't care.
0 visible seams how it was built ↗ -
/curl-noise
Half a Million Points, Still 60fps
Compute-shader particles with curl noise, swirl, self rotation
500,000 particles · 60fps · 2 draw calls how it was built ↗ -
/magnet-particles
Paper Storm — GPU Curl Noise
GPU-driven particle system (500k particles) using compute shaders with curl noise flow fields, vortex forces, and mouse interaction.
No loading screen, quickest Cmd+R of old west 🤠 how it was built ↗ -
/postprocessing
Finding Edges Without an Edge Detector
A render pipeline with vignette and edge detection via MRT — screen-space normals compared with a dot product, no Sobel filter in sight.
MRT · 2 render targets how it was built ↗