A small WebGL scene built without a 3D library: geometry, matrices
and shading are all written directly against the raw WebGL API.
How it is built
One cube is copied into a grid and
translated to its cell and scaled in y, color assigned per corner.
Perspective and target matrices place the camera; the fragment
shader blends the corner colours and lights every face. Level 2
replaces the noise and palette with a point-filtered sample from height and color
png files. Level 3 draws the bubbles, clouds, butterflies and windmills from their
own buffers with a per-object model matrix.
Levels
Each level isolates one idea: 1) heights and
per-vertex colour 2) heights and colours sampled from
assets/color-map.png and
height-map.png, 3) clouds, butterflies and bubbles
moving along cubic bezier curves. Orbit moves the camera around the origin point.
Performance
The landscape is one buffer drawn in a single call, so it stays
smooth up to tens of thousands of cubes. The readout shows the
resolution, cube count, rebuild time and frame rate. Decreased performace is possible with a slower GPU.
Tap to blow bubbles · drag to look around · right-drag to move