In this chapter, we will go a little bit deeper in the use of colors in WebGL. We will start by examining how colors are structured and handled in both WebGL and ESSL. Then we will discuss the use of colors in objects, lights and in the scene. After this we will see how WebGL knows how perform object occlusion when one object is in front of another. This is possible thanks to depth testing. In contrast, alpha blending will allows us to combine the colors of objects when one is occluding the other. We will use alpha blending to create translucent objects.
This chapter talks about:
- Using colors in objects
- Assigning colors to light sources
- Working with several light sources in the ESSL program
- The depth test and the z-buffer
- Blending functions and equations
- Creating transparent objects with face culling
WebGL includes a fourth attribute to the RGB model. This attribute is called the alpha channel. The extended model then is known as the RGBA model, where A stands for alpha. The alpha channel contains values in the range from 0.0 to 1.0, just like the other three channels (red, green, and blue). The following diagram shows the RGBA color space. On the horizontal axis you can see the different colors that can be obtained by combining the R, G, and B channels. The vertical axis corresponds to the alpha channel.
The alpha channel carries extra information about the color. This information affects the way the color is rendered on the screen. For instance, in most cases, the alpha value will refer to the amount of opacity that the color contains. A completely opaque color will have an alpha value of 1.0, whereas a completely transparent color will have an alpha value of 0.0. This is the general case, but as we will see later on, there are some considerations that we need to take into account to obtain translucent colors.
We use colors everywhere in our WebGL 3D scenes:
- Objects: 3D objects can be colored selecting one color for every pixel (fragment) of the object, or by selecting the color that the object will have. This would usually be the material diffuse property.
- Lights: Though we have been using white lights so far in the book, there is no reason why we can't have lights whose ambient or diffuse properties contain colors other than white.
- Scene: The background of our scene has a color that we can change by calling
gl.clearColor. Also, as we will see later, there are special operations on objects' colors in the scene when we have translucent objects.