WebGL Beginner's Guide

Time for action – adding a blue light to a scene

Now we are ready to take a look at the first example of this chapter. We will work on a scene with per-fragment lighting that has three light sources.

Each light has a position and a diffuse color property. This means we have two uniforms per light.

1. Also for simplicity, we have assumed here that the ambient color is the same for the three light sources. For the sake of simplicity, we have removed the specular property. Open the file ch6_Wall_Initial.html using your HTML5 web browser.
2. You will see a scene such as the one displayed in the following screenshot where there are two lights (red and green) illuminating a black wall:
3. Open the file ch6_Wall_Initial.html using your preferred text editor. We will ...