Google Engineers Recreate Quake II In HTML5

The project demonstrates progress being made to support high-performance graphics in Web applications.

Thomas Claburn, Editor at Large, Enterprise Mobility

April 2, 2010

3 Min Read

While Apple's decision to exclude Flash technology from its iPad may have content creators fretting about the lack of designer-friendly HTML5 authoring tools, the company's ally-turned-rival, Google, has proven at least that HTML5 Web apps are capable of delivering computationally demanding graphics.

In a blog post on Thursday -- one of the few that day from Google that wasn't an April Fool's joke -- developer programs engineer Chris Ramsdale revealed the existence of an HTML5 port of id Software's Quake II engine. It's the product of Google's 20% time policy, which allows Google engineers to spend 1/5 of their work hours on projects outside the scope of their formal job descriptions.

The code -- which must be built and installed before it will run -- re-creates Quake II in a Web browser, either Google Chrome or Apple Safari. This may seem redundant, given that one can already play Quake Live, which relies on the id Tech 3 engine derived from Quake III, in a Web browser.

But Quake Live requires a graphics rendering plug-in. Requiring users to install a plug-in is widely regarded as undesirable because it can limit product adoption. Flash, having become ubiquitous over the years, represents an exception to this rule, or at least it did until Apple intervened.

Google's Quake II port does not require a plug-in. It utilizes WebGL, the Canvas API, HTML 5 <audio> elements, the local storage API, and WebSockets -- all part of the evolving HTML5 specification -- to run in unmodified versions of Chrome or Safari.

"We started with the existing Jake2 Java port of the Quake II engine, then used the Google Web Toolkit (along with WebGL, WebSockets, and a lot of refactoring) to cross-compile it into Javascript," Ramsdale writes. "You can see the results in the video above -- we were honestly a bit surprised when we saw it pushing over 30 frames per second on our laptops (your mileage may vary)!"

Project contributor Ray Cromwell, CTO and co-founder of Timefire, says that the project demonstrates that Web browsers are capable of running sophisticated graphics.

"For years, people have assumed the browser was a poor platform for this kind of thing, and that you'd need something like Flash, Silverlight, JavaFX, or native code," he said in a blog post. "While it is true that you should not expect the browser to rival triple-A titles like Far Cry or Call of Duty in the browser, there is no reason why lots of casual games that used to be implemented in Flash, or are now implemented in Objective-C on the iPhone/iPad can't be done using similar techniques we've used."

Cromwell reported getting frame rates of 20-25fps using Google Chrome on a MacBook and about 45fps on a Mac Pro desktop. Another project contributor reported seeing frame rates of up to 60fps on his Linux notebook, he said.

Further improvements can be expected as WebGL gains hardware acceleration capabilities, as part of an effort backed by the Khronos Group.

Cromwell said he will be presenting a postmortem of the project at one of his Google IO sessions in May.

About the Author(s)

Thomas Claburn

Editor at Large, Enterprise Mobility

Thomas Claburn has been writing about business and technology since 1996, for publications such as New Architect, PC Computing, InformationWeek, Salon, Wired, and Ziff Davis Smart Business. Before that, he worked in film and television, having earned a not particularly useful master's degree in film production. He wrote the original treatment for 3DO's Killing Time, a short story that appeared in On Spec, and the screenplay for an independent film called The Hanged Man, which he would later direct. He's the author of a science fiction novel, Reflecting Fires, and a sadly neglected blog, Lot 49. His iPhone game, Blocfall, is available through the iTunes App Store. His wife is a talented jazz singer; he does not sing, which is for the best.

Never Miss a Beat: Get a snapshot of the issues affecting the IT industry straight to your inbox.

You May Also Like

More Insights