This chapter is slightly different than the previous several chapters, in that there is no game associated with this chapter. The reason that we're not building a game with the concepts from this chapter is that the concepts covered are either way too complex for a single chapter (there are entire books dedicated to the topic of WebGL, for example) or they're not a particularly good match for use in a game. Also, some of the features mentioned at the end of the chapter are so new that browser support is still minimal (if any) and the stability of the APIs may not be too reliable. For this reason, we'll simply explain each API, provide meaningful examples, and hope this skin-deep introduction is enough to get you excited about the prospects involved with each API.

The first part of the chapter will cover four HTML5 APIs that are very exciting and powerful additions to the browser platform. First and foremost, we'll cover WebGL , which brings the power of OpenGL ES to the browser, allowing for hardware accelerated 3D graphics rendering without any need for a single plugin. Next, we will discuss how we can use web sockets for a thread-like experience, the video API for native video playback and manipulation right from JavaScript, and geolocation, which allows JavaScript to determine the physical location (geographical location) of a user.

Lastly, we'll wrap up the chapter by looking at the absolute latest features in the HTML5 evolution. These features take CSS to the next level, taking it away from being a mere rectangular-based rendering engine. The first new feature that we'll study is CSS shaders, which allows us to specify how each pixel is to be rendered. This is done using GLSL shaders, which, as we'll see during the WebGL discussion, are independent programs that we write and are run on the GPU, controlling at the lowest level possible how something is to be rendered. With custom shaders, we can do so much more than simple, pre-baked CSS transformations.

Other new CSS features, covered in the second half of the chapter, are CSS columns and CSS regions and exclusions. CSS columns make it beautifully easy to dynamically adjust how many columns of text a container displays. For example, if we want a block of text to be displayed in 3 equal width or height columns, we would normally set up three different containers, then float each container to the left. With columns, we can simply store all of the text inside a single container, then use CSS to generate the columns. Finally, CSS regions and exclusions make it possible to render text inside or around complex patterns, instead of the traditional rectangular shape. Surely you have seen magazines doing this, where a block of text wraps around some shape like the outline of a car or some other object. In the past, doing this effect with plain text (as opposed to using images) has very rarely been attempted in HTML because of the extreme complexity required to pull this off. Now it only takes a few lines of CSS code.