How I Rendered 10 Million Banknotes Without Killing the Browser
I wanted to build a small thing. One page. It answers a question a child could ask: how big is a billion dollars, physically, if you printed it all in $100 bills and put it somewhere. I thought it would take a weekend. It did not. The question is simple. The answer is simple too, actually. One billion dollars is 10 million $100 bills. They weigh 10 tonnes and cover about 103,000 square metres…
The goal was to create an interactive page that answers the question of how big a billion dollars is physically, if printed as $100 bills. The author initially thought it would take a weekend, but it took longer than expected. One billion dollars is equivalent to 10 million $100 bills, which weigh 10 tonnes and cover about 103,000 square meters when laid flat.
The author reduced the model to four physical inputs: dimensions of the bill, thickness, weight per note, and the number of notes. These constants were kept in one place in the code to avoid inconsistencies and simplify updates. The author also built a road made of $100 bills, using WebGL and Three.js to render the road and vehicles.
The vehicles were designed with distinct top speeds, and keyboard controls worked well except for edge cases during rapid key presses. The page was built in two layers: the interactive WebGL section and a plain server-rendered HTML layer containing all the measurements and comparisons. A rule was implemented to keep one canonical value for measurements and only convert it to display units at the last moment, preventing drift in the numbers.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
