In the previous chapter, we covered WebGL's rendering pipeline, defining geometries, passing data to the GPU, drawing types, and leveraging AJAX to asynchronously load external assets. Although we briefly covered shaders and their role in creating a WebGL application, we will go into more detail in this chapter and leverage the vertex and fragment shaders to create a lighting model for our scene.

Shaders allow us to define a mathematical model that governs how our scene is lit. To learn how to implement shaders, we will study different algorithms and see examples of their application. A basic knowledge of linear algebra will be really useful to help you understand the contents of this chapter. We will use a JavaScript library that handles most of the vector and matrix operations, so you do not need to worry about the mathematical operations. Nonetheless, your overall success depends on a strong conceptual understanding of the linear algebra operations that we will discuss.

In this chapter, we will:

• Learn about light sources, normals, and materials.
• Learn the difference between shading and lighting.
• Use the Goraud and Phong shading methods.
• Use the Lambertian and Phong lighting models.
• Define and use uniforms, attributes, and varyings.
• Work with ESSL, the shading language for WebGL.
• Discuss relevant WebGL API methods that relate to shaders.
• Continue our analysis of WebGL as a state machine and describe the attributes relevant to shaders that can be set and retrieved from the state machine.