Hypercube
Creative Developer · 2025 — present
It started as an attempt to build a glass cube with a glowing internal grid, and grew into a small sandbox engine. Six Platonic solids — icosahedron, cube, octahedron, dodecahedron, stellated, and compound — are rendered as a single raymarch fragment: no vertex geometry, only signed distance fields and their gradients. On top of that — aurora ribbons on simplex noise and GPGPU particles. It all sits in one index.html with no build step, Three.js pulled from a CDN. Inside there's a builder panel, a Learn mode that explains the render, and export of the scene to standalone HTML or config JSON. Released under MIT — take it, fork it, build your own scene.
The idea
Most beautiful WebGL demos look like magic until you start taking them apart layer by layer. I wanted to build such an object myself and understand what makes up the feeling of depth, volume, and light — and then hand it over for anyone to play with.
I took glass polyhedra with a glowing internal grid as the base. Started with a cube, got to six Platonic solids and morphing between them. Along the way it grew a parameter panel to change form, material, and effects live, rather than in code.
The result isn't a single art piece but a sandbox: change the shape, IOR, iridescence, aurora, and particles — and see the result instantly.
How it works
No mesh. The shapes aren't geometry, they're signed distance fields. Each pixel is a ray that marches through the SDF; the shader computes the hit point, normal, Fresnel, and refraction inward on the spot.
Glass. Snell's-law refraction at the hit point, a rounded bevel from the SDF itself, IBL lighting.
Aurora. Six TubeGeometry ribbons, vertices displaced by 3-frequency simplex noise — classic fBm.
Particles. GPGPU via GPUComputationRenderer — positions and velocities computed on the GPU every frame.
The very playground from the video — open it and spin it yourself.
The Platonic solids
Four of the six shapes in the scene are Platonic solids: convex polyhedra where every face is the same regular polygon and the same number of edges meets at every vertex. There are exactly five of them; the Greeks knew them all. In the engine they aren't separate models but one SDF formula with a different set of cutting planes.
Cube. Six squares, eight vertices. The only solid with square faces; Plato tied it to earth, for its stability.
Octahedron. Eight triangles, six vertices. Dual to the cube: the face centres of one give the vertices of the other. The element of air.
Icosahedron. Twenty triangles, twelve vertices. The closest of the five to a sphere, which is why graphics use it to approximate one. The element of water.
Dodecahedron. Twelve pentagons, twenty vertices. Dual to the icosahedron. Plato gave it not to an element but to the arrangement of the cosmos.
Builder, Learn, and export
Just showing a finished picture wasn't enough for me — I wanted anyone to be able to take it apart and build their own.
The scene has a builder panel: shape, size, bevel, IOR, light color, iridescence, interior, bloom, aurora, particles — everything adjusts live. The Learn mode explains what each thing does. Export packs the current scene into a standalone single-file HTML (all assets inlined as data URLs) or into a config JSON with comments on every parameter; the config can be loaded back in.
Essentially it's not a demo but a small editor. That's why I released it under MIT: take it, fork it, rip out pieces, build your own scene. I broke the aurora and the shapes out into separate CodePen pens, so they can be poked at part by part.
Why I do this
Over the past years I've managed teams and products a lot, but it's still important to me to regularly build something with my own hands. Projects like this keep me connected to the technological side of design and force me to think like a product: making it beautiful isn't enough — someone else has to be able to take it and reuse it. It also makes it clearer which ideas can actually be taken to production and which only look good on reference boards.