Thursday, April 1st, 2010

Are browsers Quake-ing in their boots?

Category: GWT, Showcase

<p>Ben and I are often touting the fact that we are about to see amazing Web applications as browsers support more and more of “HTML5″ and the engines under the hood have become world class.

The GWT team has developed something that truly shows off this engine in their port of Quake2 to GWT. Seeing the game run with amazing fps in a browser, with online multiplayer network support via WebSockets, is something to truly behold.

Give it a watch:

And build it and run it yourself!

How did the team create the port?

Stefan Haustein, Ray Cromwell and Joel Webber were at a GWT summit and happened upon Jake2 the Java port of Quake2 that runs on top of JOGL for OpenGL. Ray could see that Joel had a glint in his eye, and the porting began!

To get the rich 3D graphics they went for WebGL using a GWT wrapper library that Stefan had built. Jake2′s heavy use of java.nio.Buffers were handled by implementing JRE classes that mapped those to WebGL typed arrays. File system code that used RandomAccessFile was emulated by using HTML5 LocalStorage. The OpenAL audio system was implemented using HTML5 audio.

The various team members got varying fps depending on their machines. A Linux notebook managed 60fps, a Mac Pro got 45fps, and a Macbook Pro got 25fps. WebKit was able to perform the best of the browsers right now because it doesn’t have the multi-process per tab tax that means a lot of OpenGL buffer copying.

I think this is a big deal in a couple of ways:

  • You can build fantastic games that use rich 3D engines and fast network access right on the Web. How do you “join a game”? You just share a URL! Tweet away! Now you can have these rich games just a URL a way. No install required.
  • Game engines push a platform. Although we are talking about building an older game engine (doubt that the latest and greatest engines would run like this!) this is PLENTY for building rich effects and applications. Take some of this richness and look at something like Google Docs. How much smoother and nicer can it be? We can create beautiful applications with effects like butter right now.

Credit

Ray Cromwell (who posted on this here) contributed audio/mouse/keyboard and localstorage for prefs, plus some minor GL shader debugging. Joel Webber and Stefan Haustein did the other 80% (Joel did the majority of the original code surgery to get the multiplayer game running under GWT minus graphics, Stefan did the heavy lifting on WebGL and singlehandedly ported the single-player game logic)

People still claim that “the browser is slow” and “JavaScript is slow”. Not in 2010 my friends!

Who needs Native Client now when you can build apps and games like this! Well, to be fair, there is a niche of folks who want to use C libraries and frankly prefer that world… so NaCl is for them.

For the rest of us though? Our world keeps getting better, almost daily!

Related Content:

Posted by Dion Almaer at 4:19 pm
19 Comments

++++-
4.9 rating from 49 votes

19 Comments »

Comments feed TrackBack URI

Note, if you have an Out of Heap error when building, just cd maven-build/server and type ‘mvn install’. This appears to be a problem with some JRE versions.

-Ray

Comment by cromwellian — April 1, 2010

If this is an April fool’s hoax, I will be really sad.

Comment by parsap — April 1, 2010

I’m not telling :)

Comment by cromwellian — April 1, 2010

Holy crap, I just finished installing and running this and I will personally vouch that this is not a hoax.

Wow.

Comment by parsap — April 1, 2010

Same, have to dump in the full version PAKs and see if it works with multiplayer still. On Debian I had to hunt down a lame .deb manually, as lame isn’t in apt anymore. Otherwise, the build was painless, and just had to do the cp -r as mentioned.

I have no clue how the hell this is possible, and at playable framerates. Seriously.

Comment by spongeh — April 1, 2010

You don’t need to full PAKs to enable multiplayer, you just need to edit the HTML file and add a server address, e.g.

var $wnd.__serverAddress = “127.0.0.1″

And the game will enable the menu and try to connect to the WebSocket server at ws://127.0.0.1:8080

Comment by cromwellian — April 1, 2010

err, I meant
<script>var __serverAddress = “127.0.0.1″;</script>

Comment by cromwellian — April 1, 2010

Well, I may just be dumb then– I’ve never worked with GWT so a very real possibility. Added the script tag with the contents being:

var __serverAddress = ‘domain_hosting_q2.com’;

where the placeholder comment was, and no multiplayer menu, nor does connect domain_hosting_q2.com in the console work.

Comment by spongeh — April 1, 2010

That is definitely cool. And it opens up a whole new means of reaching an audience for indie developers. Imagine if World of Goo, or Braid were available right in the browser. There’s no need for the ability to push Crysis-level graphics to have great games so this is great.

Comment by iliad — April 1, 2010

Never mind, figured it out. Needed it as is in the .html, and not the .template, and it didn’t seem to like the hostname. Got it working, incredible!

Comment by spongeh — April 1, 2010

I just installed it and I can confirm it works! This is quite amazing. Really, really cool stuff.

I can’t seem to get sound to work, though. I’ve installed LAME but it doesn’t seem to have an effect. An ideas?

Comment by feross — April 1, 2010

Not bad, it’s only a matter of time now before someone does a good game in canvas.

Comment by okonomiyaki3000 — April 1, 2010

Somebody actually thought that Native Client was needed? I always regarded it as just another Google spy project with no future and no real usage except getting some poor folks to install it and send their private info to Googleplex so Google can sell them forward to advertisers. It’s been pretty obvious for the past 2 years that there’s no reason to create anything new like Native Client and just put all your work in getting browsers to support HTML5 features and making faster javascript engines.

Comment by Johnnyda — April 2, 2010

Time to change the antispam questions

Comment by pmontrasio — April 2, 2010

Did not try to build it from SVN- would be wonderful if really works.

Still – not having a URL on where to try the demo out unfortunately makes the this quite a bit less impressive.

Comment by jole — April 2, 2010

Really fascinating! They have achieved several things that the other WebGL libraries haven’t yet – mainly collision detection without depending on height maps (which was really painful w/ dynamic objects). There are already three GWT bindings for WebGL under development – but maybe this one will push things forward and be a serious alternative to, say, GLGE or CopperLicht.

Comment by jensarps — April 2, 2010

@jensarps: To be fair, we didn’t exactly “achieve” anything that other WebGL libraries haven’t — we just ported all the old Quake II very directly, which has plenty of special-cased game logic baked in. I think it would be great to sit down and build a cleaner version of a lot of these kinds of utility classes, but that’s for another day.

Comment by jgw — April 2, 2010

It’s extremelly impressive and exciting that the GWT team was able to port a 3D game to the browser using JavaScript.

However, we also believe that there is still a large demand for a technology like Native Client. NaCl will help many developers who want to eek every drop of performance they can out of computers and mobile devices work around some of the overhead inherent in JavaScript. We also think, as you mentioned, that Native Client is a good alternative for developers that want to use languages other than JS (like C or C++), especially in the gaming space.

Comment by hbridge — April 3, 2010

@jensarps GLGE has had ray query for a few weeks which can be used for collision detection and I believe CopperLicht has had it for at for awhile. I’ve just put together a demo at GLGE.org

Comment by supereggbert — April 5, 2010

Leave a comment

You must be logged in to post a comment.