A Prodecedural City in 100 Lines of Three.js
Join the DZone community and get the full member experience.
Join For Free
The above skyline is from "City," a simple flight-simulator by Ricardo "Mr. Doob" Cabello. "City" is a demo of the capabilities of WebGL, and is written in an impressive 100 lines of JavaScript using Three.js.
In his blog post "How to Do a Procedural City in 100 Lines," Jerome Etienne walks you through the process of recreating Cabello's "City." The secret lies in creating 20,000 cubes that are given random sizes and positions and merging them together to create a city. Let's hope that this algorithm is never used for actual city-planning, though, because the buildings can randomly intersect each other and there are no logical spaces for streets!
Check out Etienne's blog post here and watch the screencast introduction here:
Opinions expressed by DZone contributors are their own.
Comments