Real-Time 3D Graphics with WebGL 2 - Second Edition

Viewport Transform

Finally, NDCs are mapped to viewport coordinates. This step maps these coordinates to the available space in your screen. In WebGL, this space is provided by the HTML5 canvas, as shown in the following diagram:

Unlike the previous cases, the viewport transform is not generated by a matrix transformation. In this case, we use the WebGL viewport function. We will learn more about this function later in this chapter. Now, it's time to see how these transformations affect normals.