TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

WebGL Terrain Flyover Demo

303 pointsby lukes386about 12 years ago

33 comments

sramsayabout 12 years ago
"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.
评论 #5353291 未加载
networkedabout 12 years ago
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.
评论 #5353216 未加载
评论 #5354402 未加载
评论 #5353676 未加载
评论 #5354072 未加载
评论 #5356470 未加载
评论 #5354419 未加载
评论 #5353876 未加载
评论 #5354047 未加载
lalcabout 12 years ago
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.
评论 #5355734 未加载
评论 #5355603 未加载
sxpabout 12 years ago
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.
评论 #5353472 未加载
mcmireabout 12 years ago
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.
Aurel1usabout 12 years ago
Now add the ability to drive with a motocross through the landscape :)<p>Very impressive!
评论 #5353223 未加载
评论 #5353264 未加载
评论 #5353938 未加载
bjourneabout 12 years ago
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?
评论 #5353555 未加载
评论 #5353089 未加载
评论 #5353178 未加载
评论 #5353465 未加载
评论 #5353528 未加载
评论 #5354449 未加载
评论 #5354738 未加载
评论 #5353441 未加载
评论 #5353197 未加载
评论 #5354023 未加载
daenzabout 12 years ago
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>
评论 #5353166 未加载
评论 #5353153 未加载
grannyg00seabout 12 years ago
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.
评论 #5355755 未加载
angersockabout 12 years ago
Out of curiosity, do you use dynamic index buffers to accomplish the geomipmapping, or do you just trample the vertex buffers every frame?
评论 #5355782 未加载
shaneljaabout 12 years ago
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.
评论 #5353092 未加载
kurd_debuggrabout 12 years ago
Absolutely fascinating write-up, and the demo is very nice. A quick question of if the code closed-source?
评论 #5353372 未加载
th0ma5about 12 years ago
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.
pyalot2about 12 years ago
That's cool stuff :) (believe me, I know <a href="http://codeflow.org/" rel="nofollow">http://codeflow.org/</a>)
评论 #5353084 未加载
jakejakeabout 12 years ago
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?
评论 #5353626 未加载
评论 #5353600 未加载
shurcooLabout 12 years ago
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.
评论 #5355793 未加载
cousin_itabout 12 years ago
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.
satori99about 12 years ago
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?
ntaylorabout 12 years ago
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.
评论 #5355789 未加载
webwielderabout 12 years ago
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>
rodrigoavieabout 12 years ago
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.
HunterVabout 12 years ago
Simply delightful. I spent a good amount of time flying through the terrain attempting to avoid the mountains. Thank you!
评论 #5353176 未加载
adamnemecekabout 12 years ago
Amazing. How long did this project take you?
评论 #5353402 未加载
LolWolfabout 12 years ago
That's... just beautiful. Congrats, great job; saving it for my reading list.
pfrazeabout 12 years ago
this looks really good! Is the source available?
评论 #5353147 未加载
CamperBob2about 12 years ago
Really beautiful work, Stavros.
评论 #5353150 未加载
jfolkinsabout 12 years ago
Seriously impressed.
评论 #5353095 未加载
funvitabout 12 years ago
amazing work!
评论 #5353098 未加载
antoniuschan99about 12 years ago
really cool demo Stavros!
评论 #5353299 未加载
juskreyabout 12 years ago
mars.exe, I miss you
chiiabout 12 years ago
very impressive!
drivebyacct2about 12 years ago
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)
评论 #5353477 未加载
评论 #5354034 未加载
johncoltraneabout 12 years ago
Cool. I love minimalism. That black background and that simple and polite sentence in white font looks good and loads fast!