I was playing with something similar a while ago. It's a procedurally generated overlay for Google Maps: http://dbbert.github.io/secondworld/
Realistic terrain in 130 lines of JavaScript
31–40 of 57 posts
Re: Realistic terrain in 130 lines of JavaScript
#32Just 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 This is what realistic terrain looks like (this is based on real-world heightmap data): http://imgur.com/ksETpO0,7gykFEV#1 That said, midpoint displacement, perlin/simplex noise, etc are good for modeling terrain at a le…
Reminds me of this - pretty good looking terrain + animation + sound in a 4 kilobyte executable: http://www.youtube.com/watch?v=_YWMGuh15nE How it was done: http://iquilezles.org/www/material/function2009/function2009...
I like this one even more because it is procedural. No height map needed.
Re: Realistic terrain in 130 lines of JavaScript
#33Nice demo. I made a terrain rendering engine/demo in WebGL a few months back, that used Perlin noise: 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.
Re: Realistic terrain in 130 lines of JavaScript
#34Nice demo. I made a terrain rendering engine/demo in WebGL a few months back, that used Perlin noise: 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.
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.....
Re: Realistic terrain in 130 lines of JavaScript
#35Nice demo. I made a terrain rendering engine/demo in WebGL a few months back, that used Perlin noise: 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.
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.....
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 instead.
If anyone using WordPress + W3TC has hit this I'd be grateful for pointers to a fix
Re: Realistic terrain in 130 lines of JavaScript
#36What 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 :)
Re: Realistic terrain in 130 lines of JavaScript
#37Just 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 This is what realistic terrain looks like (this is based on real-world heightmap data): http://imgur.com/ksETpO0,7gykFEV#1 That said, midpoint displacement, perlin/simplex noise, etc are good for modeling terrain at a le…
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
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).
Re: Realistic terrain in 130 lines of JavaScript
#38Just 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 This is what realistic terrain looks like (this is based on real-world heightmap data): http://imgur.com/ksETpO0,7gykFEV#1 That said, midpoint displacement, perlin/simplex noise, etc are good for modeling terrain at a le…
this looks more like perlin noise to me...
I agree it looks more like Perlin noise due to the finer detail not seen in diamond square [1] and the lack of directional artifacts in midpoint displacement [2].
[1] http://www.gameprogrammer.com/fractal/heightmap.jpg
[2] http://upload.wikimedia.org/wikipedia/en/9/96/Plasmafractal....
Re: Realistic terrain in 130 lines of JavaScript
#39It'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 :)
Re: Realistic terrain in 130 lines of JavaScript
#40Just 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 This is what realistic terrain looks like (this is based on real-world heightmap data): http://imgur.com/ksETpO0,7gykFEV#1 That said, midpoint displacement, perlin/simplex noise, etc are good for modeling terrain at a le…
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://img…
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 :)