Blog · page 5
Notes on engineering, design, and everything in between.
Volume without a modelling tool: triangulating an island by hand
The rock on this island is not exported from a modelling tool. It is five irregular rings stitched together at runtime, and vertex colours plus flat shading are enough to make it read as stone.
Twelve hundred instances: squeezing a garden into a few draw calls
Six hundred blades of grass, a hundred and twenty flowers, eighty-five mossy stones, forty-two shrubs. Density comes from InstancedMesh, not from cutting the count.
Lighting one scene: three lamps and a shadow map computed once
A hemisphere light for ambience, a key light for direction and shadow, a rim light to pull the island off the background — and seven point lights that only add glow.
Water from two shaders: a pool, a stream and a waterfall
There is no water simulation on the island and no reflections. Two ShaderMaterials cover all of it, one lying flat and one falling, sharing a single time and night uniform.
The loading budget for 3D: split the chunk, load on visibility, know when to stop
A 3D page pays three costs — download, first-frame compilation, per-frame drawing. Each needs its own budget, and any one of them can turn good-looking into janky.
sibling-index() and sibling-count(): CSS finally knows which one it is
Firefox 154 brings these two functions to Baseline. They return the current element's position among its siblings and the total sibling count, so staggered animation, ordered colours, and even sizing can be computed in CSS instead of an inline variable per element.