WebGL Terrain Flyover Demo

"When I tried to think of a project suitable for learning JavaScript, a terrain flyover demo came to mind."<p>Me too! But then I re-establish contact with the reality of my actual abilities and create a button which, when pressed, prints "Hello, world!" to an alert window.

Cool demo. What caught my attention was this line in the description:<p>&#62;The terrain is procedural, generated offline by a Delphi program (Delphi is a modern version of Pascal).<p>Nowadays I very rarely see new projects use Object Pascal or Delphi. This is somewhat disappointing since I think it really is a fine language that could be a viable alternative to C++ and Java due to its combination of high performance and clean syntax [1]. But then again, C# is <i>very</i> popular and it is pretty much the new Delphi.<p>Does anyone here use Object Pascal in their current projects?<p>[1] At least in theory. I'm not necessarily talking about the particulars of the Borland/CodeGear/Embarcadero implementation since Anders Hejlsberg left for Microsoft, which were not always perfect.

This looks great and that is a huge amount of effort. I have to ask about what I think is the elephant in the room: Surely you must have noticed that all your mountains are chopped off at the exact same altitude? Wouldn't the scene look way better if you just increased the maximum, with basically no effort?<p>It's as though you spent a month painstakingly mixing 64 channels of crystal clear audio, but, right at the end, threw your hands up and clipped the final mix into oblivion.

FYI, directly working with WebGL code is painful just because of the amount of basic infrastructure that has to be built before anything can be done. I strongly suggest using an existing framework like three.js as a starting point and going from there. Three.js is complete enough that a basic scene can be created quickly and extensible enough that complex scenes and shading can be created by extending it with custom objects.<p>For example, I was working on creating a WebGL setup for playing around with the Oculus Rift and used three.js to create <a href="http://sxp.me/rift/" rel="nofollow">http://sxp.me/rift/</a>. It's mostly three.js code, but I added a custom camera object which handles the offscreen rendering and distortion required for the Rift. It was much faster and easier than starting from scratch which was what I originally did before giving up.

That looks really nice. A lot of WebGL demos these days don't really show the full extend of what WebGL can do, so to my eyes it's basically equivalent to something like VRML (anyone remember that?). Of course WebGL/OpenGL and VRML are totally different but you get the idea. Yeah I know there's stuff like Quake in WebGL but it's not really the same thing, because Quake was designed for lesser powered machines.<p>I'm still waiting for someone to make a fully fledged game in WebGL because I can totally see it happening.

Now add the ability to drive with a motocross through the landscape :)<p>Very impressive!

Looks nice but runs at awfully slow 4-5 fps on my Ubuntu 64bit system. Is Radeon HD 4200 to weak for WebGL or is there something you need to configure?

Very cool. Are you using occlusion queries for the lens flare sprite? This something I implemented recently in my engine. Eventually I want to do something like this... <a href="http://john-chapman-graphics.blogspot.com/2013/02/pseudo-lens-flare.html" rel="nofollow">http://john-chapman-graphics.blogspot.com/2013/02/pseudo-len...</a>

Outstanding work. I noticed that resizing my browser window actually changes my view portal size. I expected it to keep the same portal resolution but shrink/stretch/distort the view as I resized the browser. I'm not sure what the implications are, but it was a fun surprise. I also noticed that the framerate scales very nicely with the changing portal view resolution as I resize the browser. Very impressive.

Out of curiosity, do you use dynamic index buffers to accomplish the geomipmapping, or do you just trample the vertex buffers every frame?

I don't even have words for how cool this is, it really shows how far these web technologies have come from their humble beginnings.

Absolutely fascinating write-up, and the demo is very nice. A quick question of if the code closed-source?

Surprising I got 0.1fps on a Dell Mini 9 with Ubuntu. I'm used to these things either not detecting WebGL or just crashing the tab.

That's cool stuff :) (believe me, I know <a href="http://codeflow.org/" rel="nofollow">http://codeflow.org/</a>)

Every time I click on a WebGL demo I think to myself... here comes my CPU fan and my lap is about to get hot! Seriously though, this demo makes me realize how much programming knowledge I lack. It it totally fascinating. Where would be a good place to start learning this type of programming?

That's very cool. Nicely polished, that's a lot of hard work and effort. Congrats!<p>I can relate to your story of building the UI framework yourself. That's kinda what I ended up doing myself too, and I've learned a lot of fundamentals through that approach.

Let me take this opportunity to plug a 3D terrain I made in Flash about three years ago: <a href="http://kosmosnimki.ru/3d" rel="nofollow">http://kosmosnimki.ru/3d</a>. It uses actual satellite images and heightmaps.

Impressive!<p>Is there a reason you decided to implement a WebGL UI, instead of using HTML for the user interface elements?<p>Is native browser compositing too slow with multiple HTML elements on top of the WebGL canvas?

Incredibly impressive. I, like you, began my first endeavor into learning JS by building a GUI. Unlike you, my resulting product was ugly as sin. This is seriously awesome work.

So happy to see Planet Morphiter alive and well: <a href="http://www.youtube.com/watch?v=uAHBOtOgz0Q" rel="nofollow">http://www.youtube.com/watch?v=uAHBOtOgz0Q</a>

Wow. Awesome work. I will try applying some of my little Linear Algebra and see how I can mix it with Computer Graphics and WebGL, more specifically.

Simply delightful. I spent a good amount of time flying through the terrain attempting to avoid the mountains. Thank you!

Amazing. How long did this project take you?

That's... just beautiful. Congrats, great job; saving it for my reading list.

this looks really good! Is the source available?

Really beautiful work, Stavros.

Seriously impressed.

amazing work!

really cool demo Stavros!

mars.exe, I miss you

very impressive!

Chrome Beta for Android gets 3fps. Firefox Beta for Android crashes. Just FYI.<p>edit: 60.1 FPS at 2560x1440 on my desktop (KDE/KWin/Chrome Dev)

Cool. I love minimalism. That black background and that simple and polite sentence in white font looks good and loads fast!