This post is a continuation of a series of posts about WebGL. The first started with fundamentals and the previous was about 3D perspective projection. If you haven’t read those please view them first.

In the last post we had to move the F in front of the frustum because the `makePerspective`

function expects it sits at the origin (0, 0, 0) and that objects in the frustum are -zNear to -zFar in front of it.

Moving stuff in front of the view doesn’t seem the right way to go does it? In the real world you usually move your camera to take a picture of a building.

You don’t usually move the buildings to be in front of the camera.

But in our last post we came up with projection that requires things to be in front of the origin on the -Z axis. To achieve this what we want to do is move the camera to the origin and move everything else the right amount so it’s still in the same place *relative to the camera*.

We need to effectively move the world in front of the camera. The easiest way to do this is to use an “inverse” matrix. The math to compute an inverse matrix in the general case is complex but conceptually it’s easy. The inverse is the value you’d use to negate some other value. For example, the inverse of 123 is -123. The inverse of a scale matrix that scaled by 5 would be 1/5th or 0.2. The inverse of a matrix that rotated 30° in X would be one that rotates -30° in X.

Up until this point we’ve used translation, rotation and scale to affect the position and orientation of our ‘F’. After multiplying all the matrices together we have a single matrix that represents how to move the ‘F’ from the origin to the place, size and orientation we want it. We can do the same for a camera. Once we have the matrix that tells us how to move and rotate the camera from the origin to where we want it we can compute its inverse which will give us a matrix that tells us how to move and rotate everything else the opposite amount which will effectively make it so the camera is at (0, 0, 0) and we’ve moved everything in front of it.

Let’s make a 3D scene with a circle of ‘F’s like the diagrams above.

Here’s the code.

var numFs = 5; var radius = 200; // Compute the projection matrix var aspect = canvas.clientWidth / canvas.clientHeight; var projectionMatrix = makePerspective(fieldOfViewRadians, aspect, 1, 2000); // Draw 'F's in a circle for (var ii = 0; ii < numFs; ++ii) { var angle = ii * Math.PI * 2 / numFs; var x = Math.cos(angle) * radius; var z = Math.sin(angle) * radius; var translationMatrix = makeTranslation(x, 0, z); // Multiply the matrices. var matrix = translationMatrix; matrix = matrixMultiply(matrix, projectionMatrix); // Set the matrix. gl.uniformMatrix4fv(matrixLocation, false, matrix); // Draw the geometry. gl.drawArrays(gl.TRIANGLES, 0, 16 * 6); }

Just after we compute our projection matrix let’s compute a camera that goes around the ‘F’s like in the diagram above.

// Compute the camera's matrix var cameraMatrix = makeTranslation(0, 0, radius * 1.5); cameraMatrix = matrixMultiply( cameraMatrix, makeYRotation(cameraAngleRadians));

We then compute a “view matrix” from the camera matrix. A “view matrix” is the matrix that moves everything the opposite of the camera effectively making everything relative to the camera as though the camera was at the origin (0,0,0)

// Make a view matrix from the camera matrix. var viewMatrix = makeInverse(cameraMatrix);

Finally we need to apply the view matrix when we compute the matrix for each ‘F’

// Multiply the matrices. var matrix = translationMatrix; matrix = matrixMultiply(matrix, viewMatrix); // <=-- added matrix = matrixMultiply(matrix, projectionMatrix);

And wahlah! A camera that goes around the circle of ‘F’s. Drag the `cameraAngle`

slider to move the camera around.

click here to open in a separate window

That’s all fine but using rotate and translate to move a camera where you want it and point toward what you want to see is not always easy. For example if we wanted the camera to always point at a specific one of the ‘F’s it would take some pretty crazy math to compute how to rotate the camera to point at that ‘F’ while it goes around the circle of ‘F’s.

Fortunately there’s an easier way. We can just decide where we want the camera and what we want it to point at and then compute a matrix that will put the camera there. Based on how matrices work this is surpurisingly easy.

First we need to know where we want the camera. We’ll call this the `cameraPosition`

. Then we need to know the positon of the thing we want to look at or aim at. We’ll call it the `target`

. If we subtract the `target`

from the `cameraPosition`

we’ll have a vector that points in the direction we’d need to go from the camera to get to the target. Let’s call it `zAxis`

. Since we know the camera points in the -Z direction we can subtract the other way `cameraPosition - target`

. We normalize the results and copy it directly into the `z`

part matrix.

+----+----+----+----+ | | | | | +----+----+----+----+ | | | | | +----+----+----+----+ | Zx | Zy | Zz | | +----+----+----+----+ | | | | | +----+----+----+----+

This part of a matrix represents the Z axis. In this case the Z-axis of the camera. Normalizing a vector means making it a vector that represents 1.0. If you go back to the 2D rotation article where we talked about unit circles and how thosehelped with 2D rotation, in 3D we need unit spheres and a normalized vector represents a point on a unit sphere.

That’s not enough info though. Just a single vector gives us a point on a unit sphere but which orientation from that point to orient things? We need to fill out the other parts of the matrix. Specificaly the X axis and Y axis parts. We know the in general these 3 parts are perpendicular to each other. We also know that “in general” we don’t point the camera straight up. Given that, if we know which way is up, in this case (0,1,0), We can use that and something called a “cross product” to compute the X axis and Y axis for the matrix.

I have no idea what a cross product means in mathmatical terms. What I do know is that if you have 2 unit vectors and you compute the cross product of them you’ll get a vector that is perpendicular to those 2 vectors. In other words, if you have a vector pointing south east, and a vector pointing up,and you compute the cross product you’ll get a vector pointing either north west or north east since those are the 2 vectors that are purpendicular to south east and up. Depending on which order you compute the cross product you’ll get the opposite answer.

In any case if we compute the cross product of our `zAxis`

and `up`

we’ll get the xAxis for the camera.

And now that we have the `xAxis`

we can cross the `zAxis`

and the `xAxis`

which will give us the camera’s `yAxis`

Now all we have to do is plug in the 3 axes into a matrix. That gives as a matrix that will orient something that points at the `target`

from the `cameraPosition`

. We just need to add in the `position`

+----+----+----+----+ | Xx | Xy | Xz | 0 | <- x axis +----+----+----+----+ | Yx | Yy | Yz | 0 | <- y axis +----+----+----+----+ | Zx | Zy | Zz | 0 | <- z axis +----+----+----+----+ | Tx | Ty | Tz | 1 | <- camera position +----+----+----+----+

Here’s the code to compute the cross product of 2 vectors.

function cross(a, b) { return [a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0]]; }

Here’s the code to subtract two vectors.

function subtractVectors(a, b) { return [a[0] - b[0], a[1] - b[1], a[2] - b[2]]; }

Here’s the code to normalize a vector (make it into a unit vector).

function normalize(v) { var length = Math.sqrt(v[0] * v[0] + v[1] * v[1] + v[2] * v[2]); // make sure we don't divide by 0. if (length > 0.00001) { return [v[0] / length, v[1] / length, v[2] / length]; } else { return [0, 0, 0]; } }

Here’s the code to compute a “lookAt” matrix.

function makeLookAt(cameraPosition, target, up) { var zAxis = normalize( subtractVectors(cameraPosition, target)); var xAxis = cross(up, zAxis); var yAxis = cross(zAxis, xAxis); return [ xAxis[0], xAxis[1], xAxis[2], 0, yAxis[0], yAxis[1], yAxis[2], 0, zAxis[0], zAxis[1], zAxis[2], 0, cameraPosition[0], cameraPosition[1], cameraPosition[2], 1]; }

And here is how we might use it to make the camera point at a specific ‘F’ as we move it.

... // Compute the position of the first F var fPosition = [radius, 0, 0]; // Use matrix math to compute a position on the circle. var cameraMatrix = makeTranslation(0, 50, radius * 1.5); cameraMatrix = matrixMultiply( cameraMatrix, makeYRotation(cameraAngleRadians)); // Get the camera's postion from the matrix we computed cameraPosition = [ cameraMatrix[12], cameraMatrix[13], cameraMatrix[14]]; var up = [0, 1, 0]; // Compute the camera's matrix using look at. var cameraMatrix = makeLookAt(cameraPosition, fPosition, up); // Make a view matrix from the camera matrix. var viewMatrix = makeInverse(cameraMatrix); ...

And here’s the result.

click here to open in a separate window

Drag the slider and notice the camera tracks a single ‘F’.

Note that you can use “lookAt” math for more than just cameras. Common uses are making a character’s head follow someone. Making a turret aim at a target. Making an object follow a path. You compute where on the path the target is. Then you compute where on the path the target would be a few moments in the future. Plug those 2 values into your lookAt function and you’ll get a matrix that makes your object follow the path and orient toward the path as well.

Let’s learn about animation next.

## Translations

This article is translated to Serbo-Croatian language by Jovana Milutinovich from Webhostinggeeks.com.