All projects

Cube World Aero

A cube landscape built from scratch in WebGL.

  • WebGL
  • JavaScript
  • Shaders
Cube World Aero: a green cube landscape with a city, windmills and floating clouds under a blue sky

A small WebGL scene written without a 3D library: the geometry, matrices and shading all go straight through the raw WebGL API, wrapped in a glossy Frutiger Aero interface. Tap to blow bubbles and drag to look around.

Open the scene

How it is built

One cube is copied across a grid, moved to its cell and stretched in height, with a colour on each corner. Perspective and look-at matrices place the camera, and the fragment shader blends the corner colours and lights every face.

Levels

  1. Heights and per-vertex colour.
  2. Heights and colours sampled from a height map and a colour map.
  3. Clouds, butterflies and bubbles moving along cubic Bézier curves, each with its own model matrix.

Performance

The whole landscape is one buffer drawn in a single call, so it stays smooth up to tens of thousands of cubes. A live readout shows the grid size, build time and frame rate.