Shoreline: Painting My Home Coastline in Code

I recently started working on Shoreline, a creative-coding art piece and work in progress where I’m rebuilding north Walney Island and the Duddon estuary in Cumbria—looking toward Black Combe—in the browser using Three.js and WebGPU.

A "Reality Meme"

This project is a "reality meme": taking a real place and trying to get the feeling right. The ground relies on real survey data (Environment Agency LiDAR at 2m), the colours are sampled from my own 360° panoramas and photos, and the rest is painted with shaders: sky, sea, grass, and light.

What really sells a coastline isn't just the water—it's the depth layers (foreground grass, midground surf, background hills in haze), having one wind that moves everything (trees, grass, water, and sound) together, and basing it all on a real location. This is home ground for me.

Matching Photos, Not Just One Pano

While my initial Sandscale panorama did a fine job as a ground truth, it was still just one image with the phone's own HDR and white balance baked in. Now, any of my photos can be a reference.

I built a pipeline to read each photo's EXIF data (GPS position, compass heading, 35mm-equivalent lens, and local date/time). With a custom DCC-like interface in the browser, a "Photo ref" menu jumps the camera to the exact GPS spot, faces the photo's heading, matches the field of view, and sets the sky clock to that day and time so the sun matches too. The photo lies over the 3D view, allowing me to carefully art-direct the shaders, matching the digital reconstruction to the real-world photo.

It's been built in conversation with Claude Code, steering by eye the way you'd art-direct a shot.

▶ Try the Playable Build
▶ Read the full devlog on GitHub