Saturday, June 4, 2011

How to create a view matrix

When I started with 3D I had this really handy function in the GLUT library called gluLookAt(...) which helps you position the viewer (camera) inside your scene.What this matrix does is to transform points from world space into camera space - or in other words in it answers this question: "What would be the coordinate of a world point if the camera was the origin of a new world coordinate system?". WebGL does not have it in its API, so let's create our own from scratch then.

You need three things to construct a view matrix:

  • eye of the camera -  position of the camera specified in world coordinates.
  • target point indicates the target of the camera (where we want to look).
  • up vector - defines which direction is up

You also need to remember that the up vector must not be parallel to the line of sightvector from the eye to the target point!

Eye, target and up vector in the scene.
Eye, target and up vector.

And here is the pseudo-code for constructing the view matrix:

    Matrix lookAt(Vector3 eye, Vector3 target, Vector3 up) {
         Vector3 vz= normalize(eye - target);
         Vector3 vx = normalize(crossProduct(up, vz));
         // vy doesn't need to be normalized because it's a cross
         // product of 2 normalized vectors
         Vector3 vy = crossProduct(vz, vx);
         Matrix inverseViewMatrix = new Matrix(new Vector4(vx, 0),
                                                                                              new Vector4(vy, 0),
                                               new Vector4(vz, 0),
                                                                                              new Vector4(eye, 1));
        return inverseViewMatrix.getInverse();

First of all two important assumptions I have in this code:

  • eye, target and up are 3-component vectors - this is not the general case
  • I assume that the matrix mode is row-major - the matrix mode only affects in which order you multiply matrices and vectors, the result stays the same
Depending on your specific application or convention, fit this code to your needs. I guess everything should be straight forward except maybe the return line - why do we need the inverse? Well, you remember we want our camera to be the origin of the coordinate system? To achieve that we have to apply the inverse of the computed matrix to all our objects so they get transform to camera space. If you want more info on this topic, visit check out this tutorial.


  1. This comment has been removed by the author.

  2. please post the derivation of view matrix

  3. Hi. How do you know what target point is in the first place?

    1. This completely depends on the situation. Target point usually is a Vector3 that is the position that you want the camera to look at.

      For example, if you click on a tree in a level editor and you want the camera to look at the selected tree, the target point is the position of that tree.

  4. I will recommend anyone looking for Business loan to Le_Meridian they helped me with Four Million USD loan to startup my Quilting business and it's was fast When obtaining a loan from them it was surprising at how easy they were to work with. They can finance up to the amount of $500,000,000.000 (Five Hundred Million Dollars) in any region of the world as long as there 1.9% ROI can be guaranteed on the projects.The process was fast and secure. It was definitely a positive experience.Avoid scammers on here and contact Le_Meridian Funding Service On. / WhatsApp...+ 19893943740. if you looking for business loan.