// webgl learning log
three.js
log_
Documenting my Three.js journey, one experiment at a time.
07 entries | upd 2026-06-20
layers
06
The environment: the sky
A sky in Three.js: a gradient dome interpolated across seven hourly keyframes, a billboarded sun and moon, and stars that light up one by one as night falls.
stylized nature shaders three.js
05
The environment: the rain
Rain in Three.js: thousands of streaks built once, recycled by a mod() in the vertex shader, tilted by the wind and dosed by a single density uniform.
stylized nature shaders three.js
04
The environment: the sun and the day/night cycle
A Vector3 mutated in place, four parameters to draw the sun's arc, and an hour that advances on its own: where the light that lights the terrain and the grass comes from.
stylized nature shaders three.js
03
The environment: wind
How a shared Vector2 and a per-blade shader make 80,000 grass blades sway: direction, amplitude rising from base to tip, and the normal correction that keeps the lighting right.
stylized nature shaders three.js
02
Instanced grass with InstancedMesh and MeshSurfaceSampler
Scattering thousands of grass blades over a Three.js terrain with InstancedMesh and MeshSurfaceSampler, and driving their density with a grayscale mask.
stylized nature geometry three.js
01
Creating rolling terrain with Three.js
Generating rolling terrain with Three.js: a PlaneGeometry displaced by simplex noise across several octaves, with an interactive demo.
stylized nature geometry three.js
00
Introduction: a stylized nature island project
Kicking off my project for Three.js Journey's “Stylized nature” challenge: building a 3D scene and enriching it with shaders.
stylized nature shaders three.js