<< Lesson 11
Welcome to my number twelve in my series of WebGL tutorials, the second one that isn’t based on the NeHe OpenGL tutorials. In it, we’ll go through point lighting, which is pretty simple, but is important and will lead on to interesting things later. Point lighting, as you might expect, is lighting that comes from a particular point within a scene — unlike the directional lighting we’ve been using so far, which comes from some point outside the scene.
Here’s what the lesson looks like when run on a browser that supports WebGL:
<object height="344" width="425"><param name="movie" value="http://www.youtube.com/v/t-JPgkg2itQ&hl=en_US&fs=1&"><param name="allowFullScreen" value="true"><param name="allowscriptaccess" value="always"><embed allowfullscreen="true" allowscriptaccess="always" height="344" src="http://www.youtube.com/v/t-JPgkg2itQ&hl=en_US&fs=1&" type="application/x-shockwave-flash" width="425"></embed></object>
Click here and you’ll see the live WebGL version, if you’ve got a browser that supports it; here’s how to get one if you don’t. You’ll see a sphere and cube orbiting; both will probably be white for a few moments while the textures load, but once that’s done you should see that the sphere is the moon and the cube a (not-to-scale) wooden crate. Both are illuminated by a point light source that is in between them. If you want to change the light’s position, colour, etc., there are fields beneath the WebGL canvas.
More on how it all works below…
The usual warning: these lessons are targeted at people with a reasonable amount of programming knowledge, but no real experience in 3D graphics; the aim is to get you up and running, with a good understanding of what’s going on in the code, so that you can start producing your own 3D Web pages as quickly as possible. If you haven’t read the previous tutorials already, you should probably do so before reading this one — here I will only explain the new stuff. The lesson is based on lesson 11, so you should make sure that you understand that one (and please do post a comment on that post if anything’s unclear about it!)
There may be bugs and misconceptions in this tutorial. If you spot anything wrong, let me know in the comments and I’ll correct it ASAP.
There are two ways you can get the code for this example; just “View Source” while you’re looking at the live version, or if you use GitHub, you can clone it (and the other lessons) from the repository there.
Let’s kick off by describing exactly what we’re trying to do with point lighting; the difference between it and directional lighting is that the light comes from a point within the scene. A moment’s thought should make it clear that this means that the angle from which it comes is different at every point in the scene. So, the obvious way to model it is to calculate the direction toward the light’s location for each vertex and then to just do exactly the same calculations as we did for directional lighting. And that’s what we do!
(You might be thinking, at this point, that perhaps it would be even better to calculate the direction to the light not just for every vertex, but for the points between vertices — that is, for the fragments. And you’d be quite right in thinking that; lighting like that is harder work for the graphics card, but it looks much better. And it’s what we’ll move on to in the next lesson :-)
Now we’ve determined what to do, it’s worth looking once again at this lesson’s demo page and noting one more thing: there’s no actual object in the scene at the point where the light is coming from. If you want to have an object that appears to be casting light (say, the sun in the centre of the solar system) then you need to define the light source and the object separately. Doing the object should be pretty easy based on the previous lessons, so in this walkthough I’ll only explain how the point light source works. As you might expect from the description above, it’s actually really simple; most of the differences between this page and lesson 11’s are simply to draw the cube and make it and the sphere orbit…
As usual, we’ll start at the bottom of the source HTML file and work our way up through the differences between this file and lesson 11’s. The first set of changes are in the HTML body, where the fields where you could enter a light direction have changed to be the position of the light. This is simple enough that there’s no point in showing them here, so let’s move on up to webGLStart. Once again, the changes are simple — this lesson has no mouse-based controls, so we have no mouse-handling code, and the function formerly known as initTexture is now called initTextures because it’s going to load two of them. Not very exciting…
Moving a little further up, the tick function has gained a new call, to animate, so that our scene updates over time:
function tick() {
drawScene();
animate();
}
Above that is the animate function itself, which simply updates two global variables that describe how far around their orbits the moon and the cube are in such a manner that they orbit at 50°/second:
var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;
moonAngle += 0.05 * elapsed;
cubeAngle += 0.05 * elapsed;
}
lastTime = timeNow;
}
The next function up is drawScene, which has a few interesting changes. It starts off with the normal boilerplate code to clear the canvas and set up our perspective matrix, and then has code identical to lesson 11’s to check whether the lighting checkbox is checked and to send the ambient lighting colour to the graphics card:
function drawScene() {
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
perspective(45, 1.0, 0.1, 100.0);
var lighting = document.getElementById("lighting").checked;
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uUseLighting"), lighting);
if (lighting) {
gl.uniform3f(
gl.getUniformLocation(shaderProgram, "uAmbientColor"),
parseFloat(document.getElementById("ambientR").value),
parseFloat(document.getElementById("ambientG").value),
parseFloat(document.getElementById("ambientB").value)
);
Next, we push the position of our point light up to the graphics card in a uniform. This is equivalent to the code that pushed the lighting direction up in lesson 11; the difference is in something that was taken away rather than something added. When we sent the lighting direction to the graphics card, we needed to turn it into a unit vector (that is, scale it so that its length was one unit) and reverse its direction. No need for anything like that here: we just push the coordinates of the light directly up:
gl.uniform3f(
gl.getUniformLocation(shaderProgram, "uPointLightingLocation"),
parseFloat(document.getElementById("lightPositionX").value),
parseFloat(document.getElementById("lightPositionY").value),
parseFloat(document.getElementById("lightPositionZ").value)
);
Next, we do the same for the point light’s colour, and we’re done with the lighting code in drawScene.
gl.uniform3f(
gl.getUniformLocation(shaderProgram, "uPointLightingColor"),
parseFloat(document.getElementById("pointR").value),
parseFloat(document.getElementById("pointG").value),
parseFloat(document.getElementById("pointB").value)
);
}
Next, we actually draw the sphere and the cube in the appropriate positions:
mvTranslate([0, 0, -20]);
mvPushMatrix();
mvRotate(moonAngle, [0, 1, 0]);
mvTranslate([5, 0, 0]);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, moonTexture);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexPositionBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, moonVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexTextureCoordBuffer);
gl.vertexAttribPointer(textureCoordAttribute, moonVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, moonVertexNormalBuffer);
gl.vertexAttribPointer(vertexNormalAttribute, moonVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, moonVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, moonVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();
mvPushMatrix();
mvRotate(cubeAngle, [0, 1, 0]);
mvTranslate([5, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
gl.vertexAttribPointer(vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexNormalBuffer);
gl.vertexAttribPointer(vertexNormalAttribute, cubeVertexNormalBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
gl.vertexAttribPointer(textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, crateTexture);
gl.uniform1i(gl.getUniformLocation(shaderProgram, "uSampler"), 0);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
setMatrixUniforms();
gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
mvPopMatrix();
}
So, that’s drawScene. Moving further up the code, you will see that initBuffers has gained our standard code for generating buffers for a cube as well as the code for a sphere, and even further up that initTextures is now loading two textures instead of just one.
The next, and in fact the final, change in the file is the most important one. If you scroll up to the top, where the vertex shader is, you’ll see that it has a few small changes, and its these that make the difference for this lesson. Working through from the top, with changes in red:
attribute vec3 aVertexPosition;
attribute vec3 aVertexNormal;
attribute vec2 aTextureCoord;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
uniform mat4 uNMatrix;
uniform vec3 uAmbientColor;
uniform vec3 uPointLightingLocation;
uniform vec3 uPointLightingColor;
So, we have uniforms for the lighting location and colour to replace the old lighting direction and colour. Next:
uniform bool uUseLighting;
varying vec2 vTextureCoord;
varying vec3 vLightWeighting;
void main(void) {
vec4 mvPosition = uMVMatrix * vec4(aVertexPosition, 1.0);
gl_Position = uPMatrix * mvPosition;
What we’ve done here is split our old code in two. In all of our vertex shaders so far, we’ve applied the model-view matrix and the projection matrix to the vertex position in one go, like this:
// Code from lesson 11
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
Now, we’re storing the intermediate value, the position of the vertex with the current model-view matrix applied but before it has been adjusted to allow for perspective. This is used in the next bit:
vTextureCoord = aTextureCoord;
if (!uUseLighting) {
vLightWeighting = vec3(1.0, 1.0, 1.0);
} else {
vec3 lightDirection = normalize(uPointLightingLocation - mvPosition.xyz);
The light’s position is in terms of the world coordinates, and the vertex position, once it’s been multiplied by the model-view matrix, is also in terms of world coordinates. We need to work out the direction of the point light from our current vertex in terms of these coordinates, and to work out the direction from one point to another, we just need to subtract them; once that’s done, we need to normalise the direction vector so that, just like our old lighting direction vector, it has a length of one. Once that’s done, all of the pieces are in place to do a calculation that’s identical to the one we were doing for directional lighting, with just a few variable names changed:
vec4 transformedNormal = uNMatrix * vec4(aVertexNormal, 1.0);
float directionalLightWeighting = max(dot(transformedNormal.xyz, lightDirection), 0.0);
vLightWeighting = uAmbientColor + uPointLightingColor * directionalLightWeighting;
And that’s it! You now know how to write shaders to provide point lighting.
That’s it for now; next time we’ll look at lighting again, improving the realism of our scene by making the lighting work per-fragment instead of per-vertex.
<< Lesson 11
Acknowledgments: As before, the texture-map for the moon comes from NASA’s JPL website, and the code to generate a sphere is based on this demo, which was originally by the WebKit team. Many thanks to both!
You may remember the diagram to the left from 
But now imagine that the light is higher up, as in the diagram to the right. A and C will be dim, as the light reaches them at an angle. We are calculating lighting at the vertices only, and so point B will have the average brightness of A and C, so it will also be dim. This is, of course, wrong — the light is parallel the surface’s normal at B, so it should actually be brighter than either of them. So, in order to calculate the lighting at fragments between vertices, we obviously need to calculate it separately for each fragment.
