All projects
Web · 2026
A bilingual roadmap from vector maths to raymarching for frontend developers, with a live demo and a GLSL playground beside every lesson.
- Role
- Design & development
- Platform
- Web
shaderpath.vercel.app
Overview
The problem
Frontend developers who want to learn Three.js, WebGL, GLSL and GSAP end up hopping between scattered tutorials with no clear order, no hands-on feedback and very little in Vietnamese.
The solution
ShaderPath is one structured path: 14 tracks, 162 lessons and about 136 hours, every lesson in Vietnamese and English. Each one pairs theory and citations with an interactive demo and exercises, and progress, notes and reviews are saved per account.
Features
What it does
A complete curriculum
14 tracks from maths and raw WebGL to raymarching, GPGPU, PBR and performance, with rendered maths and highlighted code.
124 live demos
Interactive WebGL and React Three Fiber scenes with control panels and hints on what to look for; they pause when off screen.
GLSL playground
A code editor with live WebGL2 recompiling, errors pinned to the right line and 36 presets from noise to fractals.
Exercises with gated solutions
Progressive hints, checklists, autosaved code and reference images rendered from each lesson's own solution.
Tools that make it stick
Spaced repetition, prediction prompts, a mind map per lesson, notes on highlighted text and a dashboard that says what to do next.
A map of the whole path
A curriculum graph shows how the tracks depend on each other; accounts, data export and account deletion are built in.
How it works
How a lesson is built
- 01
Write
Each lesson is a folder: theory in two languages, references, exercises and a demo with its shaders.
- 02
Check
Build scripts generate a typed registry and search index; a content lint enforces language parity and citations.
- 03
Prerender
All 162 lessons are prerendered in both languages, so a database outage never takes a lesson down.
- 04
Personalise
Progress, notes and reviews load after the page, from per-user tables guarded by row-level security.
Highlights
Engineering notes
Hand-built WebGL2 runtime
Strict compile and link cleanup, debounced recompiles, parsed error logs and ping-pong framebuffers for feedback effects.
Isolation enforced by Postgres
Row-level security is forced on every table and each query runs in a per-user scope; a query outside one fails loudly.
Tuned for any GPU
A quality tier picked from the GPU and a frame probe caps pixel ratio and effects; the landing hero is about 2 KB of raw WebGL.
Tested like a product
End-to-end tests cover accessibility, keyboard use, memory leaks and shader error recovery; unit suites run against a real Postgres.
Under the hood
Stack & timeline
- Next.js 16
- React 19
- TypeScript
- three.js
- React Three Fiber
- WebGL2 / GLSL
- Tailwind CSS
- Supabase
- PostgreSQL
- Drizzle ORM
- Playwright
- Vitest
Accounts
Supabase sign-in with row-level security, the curriculum map, mind maps and a live WebGL landing page.
Audit
Accuracy review of all 14 tracks and a Vietnamese/English parity pass.
Postgres
Moved from SQLite to PostgreSQL; illustrations for every track.
Launch
Platform, lesson pipeline, demos, playground and all 14 tracks of bilingual content.
Gallery
A closer look
shaderpath.vercel.app
shaderpath.vercel.app
shaderpath.vercel.app
shaderpath.vercel.app
