_02
Aurora Runes
What if you could draw on the northern lights?
- type
- case
- _02 of _04
- includes
- briefing · process · result
in stock from february 2027
product details
Take a fragment shader from Shadertoy, port it to WebGPU, embed it in a three.js environment using the WebGPU renderer, and make it respond to interaction.
process
I ported an aurora shader onto an inverted sphere and placed the camera inside it, then wrote a second shader for the sea: a dark mirror with subtle noise, so it ripples like water. I added an open-source Viking ship, modified it slightly in Blender, added mountains around it, and used a couple of rocks to build the UI.
Then I made the aurora interactive: click to pull it toward your cursor, hold space and drag to draw. Runes are recognised with the $P Point-Cloud Recognizer, trained on a few examples I drew of each rune.
result
Draw one of nine Futhark runes in the sky and it's recognised, triggering its own effect. Thurisaz, for example, is linked to Thor, so drawing it calls down thunder, the way Thor does with his hammer. Nine is an important number in Norse mythology, so it felt fitting to have nine runes, each with its own effect. The others are Laguz, Kenaz, Hagalaz, Gebo, Isa, Dagaz, Tiwaz and Sowilo.
- view live sitedesktop only
- view code
