
Realistic terrain in 130 lines of JavaScript - hunterloftis
http://www.playfuljs.com/realistic-terrain-in-130-lines/
======
gavanwoolery
Just a small note, not to sound snooty, just to educate people on what
realistic terrain looks like...

This is what midpoint displacement looks like as a heightmap:
[http://imgur.com/ksETpO0,7gykFEV#0](http://imgur.com/ksETpO0,7gykFEV#0) This
is what realistic terrain looks like (this is based on real-world heightmap
data):
[http://imgur.com/ksETpO0,7gykFEV#1](http://imgur.com/ksETpO0,7gykFEV#1)

That said, midpoint displacement, perlin/simplex noise, etc are good for
modeling terrain at a less macroscopic scale and are plenty sufficient for the
use of most games.

~~~
tripzilch
Interesting. Those branchy ridge shapes look a lot like Diffusion-Limited
Aggregate patterns. But then, I guess they didn't call it "universality" for
nothing :)

They also reminded me a bit of GIMP's "Solid Noise" rendering with the
"Turbulence" setting switched on. I rendered one, and turns out it doesn't
_quite_ look as good (cough), but now I wonder whether this would give a bit
more realistic height map:
[http://imgur.com/oRlZ191](http://imgur.com/oRlZ191)

On the other hand, like you say, for terrains for videogames are always best
generated by taking any of these algorithms, and mercilessly tweaking the
parameters, post-processing, etc until it just _looks_ sufficiently good.
Actual physical realism comes into second place (and it should, like most game
physics).

~~~
IceCreamYou
I've been working on a WebGL terrain engine recently -- you can try it out and
switch on the "Turbulent" flag to see the results :)

[https://icecreamyou.github.io/THREE.Terrain/](https://icecreamyou.github.io/THREE.Terrain/)

------
colonelxc
Reminded me of "Polygonal Map Generation For Games": [http://www-cs-
students.stanford.edu/~amitp/game-programming/...](http://www-cs-
students.stanford.edu/~amitp/game-programming/polygon-map-generation/)

past comments:
[https://news.ycombinator.com/item?id=3868893](https://news.ycombinator.com/item?id=3868893)

~~~
hunterloftis
Awesome! Thanks for the link.

------
zhemao
There was a Clojure example of this algorithm posted a few months back.
Funnily enough, it's been in my "read later" bookmarks for a while now and I
just got around to reading it this morning before I saw this post.

[http://blog.mediocregopher.com/clojure-diamond-
square.html](http://blog.mediocregopher.com/clojure-diamond-square.html)

------
pheelicks
Nice demo. I made a terrain rendering engine/demo in WebGL a few months back,
that used Perlin noise: [http://felixpalmer.github.io/lod-
terrain/](http://felixpalmer.github.io/lod-terrain/)

If anyone wants to play around with Hunter's algorithm in WebGL, it should be
pretty straightforward to swap out the Perlin Noise implementation for his.
Note the shaders do a fractal sampling of the the height map, so you may want
to disable this.

~~~
dualogy
Clicking "how does this work?" leads to the HTML source of the link target to
be shown in plain-text instead of being rendered. Win7, both in Chrome and
Firefox.....

~~~
pheelicks
Yes, I know - my blog is ruining my morning. Quick fix is to remove the
trailing slash, i.e. go to [http://www.pheelicks.com/2014/03/rendering-large-
terrains](http://www.pheelicks.com/2014/03/rendering-large-terrains) instead.

If anyone using WordPress + W3TC has hit this I'd be grateful for pointers to
a fix

------
callumprentice
I made a quick first pass at an interactive WebGL version this evening.
[http://callum.com/sandbox/webglex/webgl_terrain/](http://callum.com/sandbox/webglex/webgl_terrain/)
\- ground realism needs a bit of work :) but it was a lot of fun. Thanks for
sharing your code Hunter.

------
elwell
Don't miss the demo:
[http://www.playfuljs.com/demos/terrain/](http://www.playfuljs.com/demos/terrain/)

~~~
hughes
Is there any way to control the demo? It doesnt seem to respond to mouse or
keyboard input.

~~~
kachhalimbu
I made a jsfiddle and added dat.gui
[http://workshop.chromeexperiments.com/examples/gui/#1--
Basic...](http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage)
so you can modify the "detail" parameter to change the terrain without
requiring a page refresh
[http://jsfiddle.net/kachhalimbu/br8Xd/1/](http://jsfiddle.net/kachhalimbu/br8Xd/1/)
Full screen result here
[http://jsfiddle.net/kachhalimbu/br8Xd/1/embedded/result/](http://jsfiddle.net/kachhalimbu/br8Xd/1/embedded/result/)

------
huskyr
What i like most about this demo is that the code is actually very readable,
and the blog article explains it very well. Most of the times the code for
these kinds of demos looks like line noise :)

------
fogleman
Perlin noise is another good algorithm for terrain generation.

[http://en.wikipedia.org/wiki/Perlin_noise](http://en.wikipedia.org/wiki/Perlin_noise)

~~~
hunterloftis
I like Perlin in situations where its repetitiveness won't negatively impact
the simulation, or as an additional layer of pseudo-natural-randomness on top
of other algorithms.

------
the_french
can this algorithm be run lazily? ie, can you continue to generate continuous
terrain using this technique or do you need to generate the whole map ahead of
time?

~~~
hunterloftis
It can be run lazily in two ways: first, you can lazily add detail (ie, render
down to a specific level of detail and postpone the rest); second, you can
lazily build grid blocks out to the horizon (eg, for walking around a terrain
first-person). So detail vs size laziness.

------
twistedpair
Reminds me of the results easy to achieve with Bryce3D back in the mid 90's.
They had a pretty great terrain engine. I don't think they're making Bryce any
more. It would be great if they could release some of that code.

~~~
MrBuddyCasino
I remember that one, apparently it is still being sold, but development seems
to have stalled:
[http://www.daz3d.com/bryce-7-pro/](http://www.daz3d.com/bryce-7-pro/)

~~~
twistedpair
I guess Maya ate their lunch. Funny, from the screenshots, they've not changed
the interface in a decade and a half. The much lower price is nice, though.

------
happywolf
For those who only want to look at the result(s)

[http://www.playfuljs.com/demos/terrain/](http://www.playfuljs.com/demos/terrain/)

Refreshing the page will generate a new terrain

------
blahpro
It'd be interesting to see an animation of the diamond/square iteration
progressing in 3D, starting with a flat surface and ending with the finished
terrain :)

------
nitrogen
This midpoint displacement algorithm is also how a lot of the "plasma" effects
from 1990s-era PC demos were created.

------
good-citizen
after thinking about this one for a while, it occurred to me that this really
helps illustrate the point of 'Life May Be A Computer Simulation'. Take this
world creation a step further, and rather than teaching a computer how to
create rocks, each one slightly different, imagine creating humans, each one
slightly different. If you think about 'God' as just some alien programmer
dude, it helps make so much sense of the world. How can a caring God let so
many terrible things happen to us humans? Well, how much empathy do you feel
about each rock in this program? When you click refresh, and create a whole
new world, do you stop and think about all the exist rocks you are 'killing'?
If we are living in a computer simulation, perhaps our creator doesn't even
realize we are sentient?

~~~
saraid216
You realize you just explained a caring God by saying he doesn't care, right?

~~~
good-citizen
I meant, a common human question is "if there is a caring God, how can there
be so much suffering in the world?" And maybe the answer is, human pain means
nothing to him the same way computer generated rock pain means nothing to us.

------
namuol
Brings me back to a ray casting experiment I did a while ago [1]. I always
wanted to revisit it to include a terrain generation step (it uses a
pregenerated height map). Now I have an excuse! ;)

[1] [http://namuol.github.io/earf-html5](http://namuol.github.io/earf-html5)

~~~
hunterloftis
Wow! Really fantastic. I've already linked to your raycaster; let me know if
you build one that dynamically generates the terrain as well.

------
hixup
I was playing with something similar a while ago. It's a procedurally
generated overlay for Google Maps:
[http://dbbert.github.io/secondworld/](http://dbbert.github.io/secondworld/)

------
galapago
A friend worked on something similar:
[http://dcc.fceia.unr.edu.ar/~rbaravalle/fractales/brownGL.ht...](http://dcc.fceia.unr.edu.ar/~rbaravalle/fractales/brownGL.html)

------
SteveDeFacto
Some of you might find this algorithm I created a few years ago interesting:
[http://ovgl.org/view_topic.php?topic=91JL96IHFS](http://ovgl.org/view_topic.php?topic=91JL96IHFS)

------
rgrieselhuber
Reminds me of T'Rain.

------
zimpenfish
I remember implementing this on a Sam Coupe from the description in (either
BYTE or Dr Dobbs, I forget) back in ~1987. Somewhat slower and lower
resolution, of course...

------
theforgottenone
Diamond-square has a bug/limitation in that it creates seams. There are better
solutions :).

------
good-citizen
stuff like this makes me remember why I love programming

------
sebnukem2
I think implementing parallel computing using webworkers would be a good item
for the "What's Next" list of suggestions.

~~~
hunterloftis
Added!

------
nijiko
You can simplify this even further by using frameworks like lodash /
underscore or ES6 native methods.

------
brickmort
This is awesome!! nice job!

------
TheyCalledHimBo
I may just be a prick, but seeing this promoted as a variant of the midpoint
displacement algorithm for terrain generation seem far less gimmicky. "X done
in Y lines of Z" Whoop-dee freakin' do.

Still, cool algorithm.

------
snodgrass23
Great tutorial on a fun topic!

------
CmonDev
Had to put "JavaScript" into the title - typical HN... It was about algorithm
rather than a language.

