MENU

2D Drawing

Unlike 2D Canvas, WebGL does not allow one to draw straightforwardly. Before any drawing can be done, one first needs to know how to use shaders, and how to pass data to the shaders.

In Initializing Shaders, we shall write a generic shaders-initializing function that will be used throughout the rest of the chapter.

Then, in Passing Data to the Shaders, we discuss how to pass data from the JavaScript program to the shaders.

Next, in Typed Arrays and Buffer Objects, we explore how to pass large quantities of data efficiently using typed arrays and buffer objects.

By default, the eye is looking at the origin (0.0,0.0,0.0), viewing along the negative direction of the z-axis (into the screen). The x and y coordinates range from -1.0 to 1.0, which correspond to the edges of the canvas. (0.0,0.0) is the center of the canvas.

In this section, z is always zero for all vertices, allowing 2D graphics to be studied exclusively.