WebGL · GLSL · Procedural graphics
Mars Snap — A Procedural Mars Landscape Generator
Mars Snap is a single-purpose creative tool: open the page, generate a believable Martian landscape with atmospheric haze, soft shadows, and filmic color grading, and export it as a wallpaper-resolution PNG. It's pure WebGL — no off-the-shelf engine — and it exists mostly because building it taught me more about real-time rendering than any tutorial would have.
Why I built it
AI gets most of my attention. The web platform's graphics stack does not, but it should — WebGL plus GLSL plus a thin wrapper like regl is enough to ship cinematic visuals from a static page, and most engineers I know underestimate how much capability sits there unused.
I wanted a portfolio piece that proved I'd actually shipped one. (I also just wanted to make a Mars wallpaper.)
How it works
Terrain comes from layered noise functions in the vertex shader. Atmosphere and fog come from a screen-space pass that mixes color based on view depth, plus a Henyey–Greenstein scattering approximation. Shadows are baked from a directional sun. A final post-processing pass tonemaps the scene to give it a filmic feel.
It runs in real time at 60fps on a mid-tier laptop. The export pipeline renders at 4K, downloads as PNG, and reuses the same shaders.
What I take from it
Senior full-stack work isn't only React and Node. The shader and graphics work in Mars Snap is the same kind of careful systems thinking that goes into AI agent loops — different domain, same discipline. (Different aesthetic, too, which I think matters more than people admit.)