Devlog-1: Building Horizon Archive
An interactive exoplanet field journal, built as a vintage 3D pop-up book.
The Idea
I wanted to build an interactive book that didn’t feel like a typical web app. So I started “The Horizon Archive,” where you can flip through pages to learn about real exoplanets and land on their surfaces by clicking them.
The First Problem: No Photos
No telescope has captured an actual photo of an exoplanet’s surface; they are too distant. So instead of faking it, I built each planet using procedurally generated, scientifically grounded textures, rendered in 3D with Three.js. Every planet’s colour, cloud pattern, and storm behaviour is derived from its real measured properties. A scorching Jupiter like WASP-12b renders coal-black with glowing heat cracks because it absorbs 94% of incident light. The art follows the science.
Building the Book
The hardest part was making the book feel real.
- Closed vs. open state: I gave the book container two states, a narrow closed width and a wide open spread which are animated with CSS transitions to make it expand as you turn the cover.
- Page flip transitions: Each spread is a layered DOM element that slides and rotates in 3D space, timed for a smooth cross-fade.
Going Further: Standing on the Surface
I built a second mode: a full-screen 3D environment for each world.
-
Sky domes and ground textures generated from real planetary data. Correct sun counts and colours, including Kepler-16b’s binary stars (a real “Tatooine”).
-
Drag-to-look-around camera controls.
-
Glowing markers that pop open real facts when clicked.
-
ESC to exit back to the book.
Tech Stack
-
Three.js (r128) for all 3D rendering.
-
Vanilla HTML/CSS/JS; every spread is built/torn down dynamically to avoid memory leaks.
-
Canvas-based procedural texturing using a seeded PRNG (mulberry32) for deterministic, consistent textures.
What I’d Do Next
-
A “walk” mode.
-
More interactive, visually detailed surfaces.
-
Real orbital mechanics for binary systems.
That’s a wrap for the first devlog. I’ve loved building this from scratch, but since this is my first deep dive into procedural 3D, I’m sure there are ways to optimize. If you have experience with Three.js or shaders, I’d appreciate any feedback on making these environments feel even more immersive. Thanks for reading. Let me know what you think!
