

How to build a procedural city in WebGL - jetienne2
http://learningthreejs.com/blog/2013/08/02/how-to-do-a-procedural-city-in-100lines/

======
ianterrell
I always liked this procedurally generated nighttime cityscape by Shamus
Young:
[http://www.youtube.com/watch?feature=player_embedded&v=-d2-P...](http://www.youtube.com/watch?feature=player_embedded&v=-d2-PtK4F6Y)

He wrote a whole article series walking you through it, plus source, etc,
starting here:
[http://www.shamusyoung.com/twentysidedtale/?p=2940](http://www.shamusyoung.com/twentysidedtale/?p=2940)

~~~
Cass
I also really liked Shamus's Project Frontier, a detailed walkthrough on
generating an entire procedural world.
[http://www.shamusyoung.com/twentysidedtale/?p=11874](http://www.shamusyoung.com/twentysidedtale/?p=11874)

He released the executable at the end of the series, and I'm still sad that,
as a non-programmer, I couldn't get it to run on my computer. I would have
loved to have a chance to explore the world. Some of his screencaps are
mindblowing.

[ETA: Since it's not immediately obvious how to get there from the rest of the
articles on Project Frontier, here's the link to the source code:
[http://www.shamusyoung.com/twentysidedtale/?p=15808](http://www.shamusyoung.com/twentysidedtale/?p=15808)]

------
petercooper
I love practical walkthroughs like this. And in this case, as someone with not
much OpenGL or 3D experience, it's good to reach an outcome that I can then go
back and tweak. The GLSL Sandbox, behind the Mr Doob demo, I believe(?) is
good for this stuff, especially as you can edit in the browser:
[http://glsl.heroku.com/](http://glsl.heroku.com/)

Along related lines, I saw a similar tutorial yesterday on creating a synth
using the Web Audio API: [http://noisehack.com/how-to-build-monotron-synth-
web-audio-a...](http://noisehack.com/how-to-build-monotron-synth-web-audio-
api/)

------
gsnedders
I'd much rather see such a tutorial about how to do this without Three.js —
this high level, you're not /really/ doing anything with WebGL directly. It's
like a tutorial for the DOM just going, "so, we're going to use jQuery".

~~~
angersock
I've got some decent experience with both OpenGL and WebGL. It's simply not
worth the effort to learn for 95% of whatever you'll be doing--you end up
reinventing a broken subset of what's already there.

Three.js is taking care of a _lot_ for you, and it's not a bad thing. It's
doing scene graphs, matrix math, GL setup and teardown code, shader setup and
teardown, buffer setup and teardown, camera math, and much more.

Use a bloody engine unless your explicit goal is learning something arcane.

~~~
nawitus
If you want to learn WebGL then you need to use WebGL. Using an engine can be
a good decision for a project, but not a good way to learn WebGL.

~~~
angersock
Quite right--but the utility of actually _learning_ WebGL is questionable.

------
derefr
I guess I'm a bit spoilt, but these days I kind of expect "procedural", in
graphics demos, to also imply "infinite in all directions, without repetition,
with deterministic results in regard to position, generated in real-time, and
without caching anything you're not currently looking at." Maybe I'm too
picky...

But it shouldn't be much harder in this case! Layer some octaves of simplex-
noise to form a terrain, and then for any non-occluded map region, "grow" a
building from the center of each noise feature. Might be possible to only tell
the GPU about the terrain-texture, and create the buildings entirely in a
shader, actually.

~~~
electrograv
I agree with you, except the "without caching anything". Realistically, it's
nearly impossible to generate a full 1080p screen of high resolution objects
and textures without some amount of caching. Possible for some corner cases,
yes, but not if you want a realistic world.

 _> Layer some octaves of simplex-noise to form a terrain, and then for any
non-occluded map region, "grow" a building from the center of each noise
feature. Might be possible to only tell the GPU about the terrain-texture, and
create the buildings entirely in a shader, actually._

It's possible to generate the simplex multi-fractal texture itself _on the
GPU_ purely using GLSL via WebGL [1].

Growing buildings from a heightfield texture purely on the GPU though is a bit
more tricky, because you don't want to scan the entire hightfield redundantly
every frame to extract noise features. In other words, you'll want to cache
this feature data, then "grow" the buildings, then cache that. It may be
possible to hack OpenGL/WebGL into doing something similar to this on the GPU,
but honestly OpenCL/WebCL will make this so much cleaner to implement I
shudder to think how ugly this would look in GLSL.

So I would actually use the GPU to generate terrain heightfields (a good use
of its massive parallelism), then a special shader to detect features (e.g.
even something as simple as a few order derivatives at low resolution) and
download them to the CPU. The CPU would then generate and compile a list of
building coordinates, upload to the GPU, and use the GPU to perform instanced
building rendering from them.

[1]
[https://github.com/judnich/Kosmos/blob/master/README.md](https://github.com/judnich/Kosmos/blob/master/README.md)

~~~
duskwuff
See Highway 4k (combined 4k winner at Assembly 2013!) for a REALLY SHINY
example of what can be done with WebGL shaders:

[http://pouet.net/prod.php?which=61668](http://pouet.net/prod.php?which=61668)

------
babuskov
Buildings of similar height all look the same. I guess adding some variation
like 2 or 3 different building textures would make it look like a real city.

~~~
CountHackulus
There's any number of ways this could be improved. Better layout, better
textures, different building types, stochastic city planning/zoning. But this
is a nice starting place that shows off a few easy techniques. Probably good
enough to use in a JS1K demo.

~~~
delluminatus
Well, it uses Three.js (too heavily to easily remove the dependency, I think),
so it wouldn't work for js1k.

~~~
CountHackulus
Well not literally no, but the algorithm is certainly applicable.

------
mistercow
That's really cool. The main thing it's missing is roads in between the
buildings (or at least space where the roads would go).

------
AsymetricCom
That best thing about DSLs is that you don't have to use the current domain.

