Last week I attended New Game Conference, the second conference in existence targeting HTML5 game development. It was a blast. Considering how fantastic it was I wanted to share some of the really cool bits I learned while there.
(from Debugging and Optimizing WebGL Applications by Ben Vanik and Ken Russell of Google)
WebGL-Inspector is a great browser based tool for debugging and optimizing WebGL. It was presented in an appropriately titled talk that gave a lot of useful tips such as removing redundant WebGL calls. You can view information about textures, buffers, shader programs, and state. By capturing a frame with the tool you can view the order of WebGL calls, affecting the usage of textures and buffers and so on. Once you have a capture, it can inform you of redundant WebGL calls that can be removed to help optimize an application.
Removing these redundant WebGL calls has varying speed benefits. Some calls are relatively cheap, such as changes to shader program uniforms, but they can add up. Other calls can be expensive, such as state changes like whether the GPU should blend results.
Sound Sprites (Jukebox)
(from the second keynote by Paul Bakaus of Zynga)
The HTML Audio tag has proven difficult to use for games for many developers, but a technique referred to as sound sprites solves some of the issues. In short, a sound sprite is one audio file containing a number of sounds with small padding in-between. The padding is important to keep one sound from leading into another, similar to bleeding in WebGL sprite sheets, as the Audio tag does not present a time-responsive fashion to pause a sound. While it may be tempting to implement this idea yourself, there are some working implementations out there like Zynga’s Jukebox.
While speaking with Mark Fennell of Soap Creative he mentioned that they used Data URIs for their sounds in World’s Biggest Pacman. From a cursory search I found an old stack overflow question that covers the idea.
Canvas Optimization Variability
(from Diving Deep into Canvas by Grant Skinner of gskinner.com)
Most games at some point in their development receive a pass at optimizing the graphics to run faster. In his talk, Grant presented how optimizing the canvas tag’s 2D context can be difficult. This difficulty arises from the variability of performance across browser, operating system, and whether that computer supports the browser’s hardware acceleration.
One example that stuck with me was caching related draws into an offscreen buffer using an canvas object. In the demo presented, this greatly enhanced speed for some 2000 objects made from multiple draws in a software rendering browser. But in a hardware rendering browser this caused a significant slowdown.
(from Porting Emberwind to HTML5 by Erik Moller of Opera Software)
Two things blew my mind at New Game: the first was the WebGL-Inspector demo, and the second was Erik’s Odin demo. The demo isn’t anything like a game but demonstrates a detailed WebGL scene with a high fidelity animating character which was fantastic to see since demos like this have been few in number. I do not believe I have seen one with graphical art of this quality.
New Game had a lot of great material covering a lot of bases. A lot of this may vary in usage from one developer to the next due to technology choices. However, seeing all these possibilities of what can be done now with browsers is really impressive. The technology is ready. Some holes are actively being filled, like optimal sound playback for games, but game development has always occured in constraints that can be creatively worked around. HTML5 (open web technologies) definitely has the stuff right now for game development.