Introduction to Computer Graphics, Chapter 6 -- Introduction to WebGL

Chapter 6

Introduction to WebGL

In this chapter, we turn to WebGL, the version of OpenGL for the Web. Three.js, which was covered in the previous chapter, uses WebGL for 3D graphics. Of course, it is more difficult to use WebGL directly, but doing so gives you full control over the graphics hardware. And learning it will be a good introduction to modern graphics programming. WebGL is very different from OpenGL 1.1, which we studied in Chapter 3 and Chapter 4. Nevertheless, it will turn out that much of what you learned in previous chapters will carry over to WebGL.

It is not my intention to cover WebGL in its entirety. There are many WebGL features that I will not even mention, and many of those are important for more advanced computer graphics. However, I will cover the core features that are needed for 2D and 3D graphics, along with a few of the more advanced aspects, as a bonus.

There are two versions of WebGL, both of them still in use. WebGL 1.0 is based on OpenGL ES 2.0, a version of OpenGL designed for use on embedded systems such as smart phones and tablets. OpenGL ES 1.0, the original OpenGL for embedded systems, was very similar to OpenGL 1.1. However, the 2.0 version of OpenGL ES introduced major changes. It is actually a smaller, simpler API that puts more responsibility on the programmer. For example, functions for working with transformations, such as glRotatef and glPushMatrix, were eliminated from the API, making the programmer responsible for keeping track of transformations. WebGL does not use glBegin/glEnd to generate geometry, and it doesn't use function such as glColor* or glNormal* to specify attributes of vertices. WebGL 1.0 is supported in almost every web browser. (On some devices, WebGL might be disabled because of hardware limitations.)

WebGL 2.0, which is based on OpenGL ES 3.0, is already supported in many devices, but is still not as widely supported as the 1.0 version. Most programs written for WebGL 1.0 will also work under WebGL 2.0, so almost everything that you learn about the 1.0 version will carry over to the newer version. In this textbook, I will concentrate on WebGL 1.0, but I will also cover some of the new features of WebGL 2.0. I will try to make it clear when I am talking about features that only apply to WebGL 2.0.

There are two sides to any WebGL program. Part of the program is written in JavaScript, the programming language for the web. The second part is written in GLSL, a language for writing "shader" programs that run on the GPU. WebGL 1.0 uses GLSL ES 1.00 (the OpenGL Shader Language for Embedded Systems, version 1.00). WebGL 2.0 can use shader programs written in GLSL ES 1.00, but it can also use GLSL ES 3.00, which has some significant differences as well as new features. I will try to always be clear about which language I am discussing.

For this introductory chapter about WebGL, we will stick to basic 2D graphics. You will learn about the structure of WebGL programs. You will learn most of the JavaScript side of the API, and you will learn how to write and use simple shaders. In the next chapter, we will move on to 3D graphics, and you will learn a great deal more about GLSL.

Contents of Chapter 6:

Section 1: The Programmable Pipeline
Section 2: First Examples
Section 3: GLSL
Section 4: Image Textures
Section 5: Implementing 2D Transforms