HTML5 Games: Creating Fun with HTML5, CSS3 and WebGL, 2nd Edition

Chapter 11

Creating 3D Graphics with WebGL

In This Chapter

• Introducing WebGL

• Using the OpenGL Shading Language

• Using Collada models

• Texturing and lighting 3D objects

• Creating a WebGL display module

YOU ARE ALREADY familiar with drawing 2D graphics with the canvas element. In this chapter, you move forward and use 3D graphics and the WebGL context. You find out enough about the WebGL API to render simple 3D scenes with lighting and textured objects.

In the first part of the chapter, you focus on the OpenGL Shading Language (GLSL), a language made specifically to render graphics with OpenGL. You then go systematically through the process of rendering simple 3D objects. You also see how to import the commonly used Collada model format into your WebGL applications.

Before wrapping up, you learn how the techniques throughout the chapter come together to create a WebGL version of the Jewel Warrior game display.

3D for the Web

The canvas element is designed so that the actual functionality is separate from the element. A so-called context provides all graphics functionality. In Chapter 6, you drew graphics on the canvas using a path-based API provided by the 2D context. WebGL extends the canvas element with a 3D context.

WebGL is based on the OpenGL ES 2.0 graphics API, a variant of OpenGL aimed at embedded systems and mobile devices. This is also the version of OpenGL you use for developing native applications on, for example, iPhone and Android devices. The Khronos Group ...