# World, View and Projection Matrix Unveiled

In order of understanding how geometry is displayed on your computer screen, may it be 2d or 3d, one needs to understand what math people came up with to simplify our life.

Basically, every computer program that displays some kind of geometry/object on your screen probably uses these tricks. In 3d, without this, we would still have only very simple graphics.

We shall not write tens of pages explaining how this math actually works, we shall do a visual presentation of it. All modern graphics hardware, game engines, DirectX, OpenGL already have encoded helper functions for using the matrix. Once you understand what these are, you will simply use these functions in order to have the desired effect.

Note: all drawings use an X and Z scale, as we would look on the scene from up. 2d presentations added for the sake of simplicity.

## The Matrix

After wasting a big part of the Amazon forests and a substantial amount of graphite (I believe, some coffee was also involved in the process), mathematicians came up with a simple, handy, yet genius formula for effectively enslaving all kinds of objects into simulated computer worlds. The purpose was to move objects around, rotate them, stretch, and still be able to do that very fast, even if the objects consists of ten, hundred thousand vertexes. The project was a big success, and the solution is shared for all humanity to benefit and enjoy. Behold! The 4×4 homogeneous matrix:

As you see, it consist of 16 float point/real numbers. Every section of it serves a different purpose. Data filled into the corresponding fields creates a matrix that you may use on any object. Don’t worry, you don’t have to fill in data yourself. All the platforms have ways of creating matrices.

The point is, when you multiply a matrix with a 3d point in space the result is the vertex transformed by values of the matrix.

While explaining this, I will mention the identity matrix. It is filled with default data, so when you multiply vertexes with this matrix, nothing will happen. Still, this is important, because if you need a transform matrix, you should first create and identity matrix (or have one filled with identity values), and then scale, rotate and move it. It also depends what platform are you using: some automatically add the identity values, some not. Check your documentation.

The identity matrix looks like this:

It may confuse you that the rotation part is diagonally filled with 1′s and other are zeros. The reason for this is that in the rotation part you feed in the directions of the 3 axises that will rotate your input accordingly: row one is the X axis, row two is the Y axis and row three is the Z axis. In the given example, row one points to the positive X direction, row two to positive Y direction (up), and the third points in the direction we are looking at: these match the axes on your scene, so no rotation is applied. Other fields are zero, because we do not modify anything.

If you are using a commercial game engine, a loaded object, or a created one, usually already receives the matrix of it’s parent, so you do not have to think about these a lot. If you are programming in DirectX, OpenGL or you are creating your own grahics engine you need to handle the matrices for yourself.

## World Matrix

When you create an object in your favorite 3d art creation program, the object itself is in object space. If you created it on coordinates e.g. x=10, z=10 these numbers are put in the object’s world transformation matrix. The object itself is never moved. Now, if you rotate it clockwise for 30 degrees, that one – you guessed – will also be put in the object’s transformation matrix. I probably should not say that scaling is handled the same way. Before displaying the created object is multiplied with it’s transformation matrix (also known as world matrix) and then presented.

To be more clear, let’s take a look to the next picture:

This what I explained is VERY handy! Every transformation you do while creating the object, or later in your 3d engine, is in the world transformation matrix, and the object itself never moves. This is far better than moving/rotating/stretching every point of the object on the scene, specially if it has a lot of vertexes. Also, after a lot of operation on the object, as the precision of the float point values used in 3d math is not perfect, the object might (would) become distorted as errors are introduced in every operation you do. This never happens with the world transform matrix, as the object never moves actually. And, yes – there is no spoon.

## View Matrix

The view matrix is also known as the camera matrix. It transforms the entire world space into camera space. Similarly, as the world matrix transform puts the object form object space to world space, the view matrix transforms the space so the view space’s right points in the X direction, it’s top points to the Y direction, and the look direction becomes the positive z axis (if it’s a left hand matrix).

I’ll add that the view matrix is actually the inverse of the camera matrix, because it transforms back the entire wold to it’s local coordinate system.

Now, you may think that with world and view transform matrix applied, you can already present your object on your screen, what is true, but there would be no perspective. The view matrix only transforms the objects to the camera’s space. What we additionally need is the:

## Projection Matrix

The projection matrix is based on near and far view distance, angle of the view of the camera and your screen resolution proportion. When you create a camera, you just feed it with the data, and everything is a go. Please consult your platform user manual to get the command for creating it.

On the left is our object in world and view space, in which case we have no perspective – all the objects would be projected to the screen in a parallel fashion. On the right side, we introduce the projection matrix, which takes care of our perspective: the closer the object, larger it becomes, and vice versa. The X and the Y (Y here not visible, for the sake of simplification) axis becomes the surface of the computer display, and the Z axis is used to modify the size of the object. The white lines are the left and the right side of the display, near clipping is the closest point and the far clipping is the furthest plane limiting our projection space.

## Conclusion

In order to display an object in 3d, we concluded that we need to have three matrices: world, view and projection. Another handy thing is that we can multiply all these matrices only once and create a combined World-View-Projection matrix. Now, we only have to operate the vertexes of the objects with this combined matrix, and we already have a position on the screen! Simple!

The matrix is produced by:

matrix4x4 World_View_Projection_Matrix = World x View x Projection

It is important to keep that order of multiplication, otherwise it will get messy. In this case x means matrix multiply. Refer to your platform documentation for details about matrix operators.

Also, please note that the presented matrix model corresponds to a DirectX scenario, and a so called left to right multiplication order. In OpenGL, it’s it vice versa which is:

matrix4x4 Projection_View_World_Matrix = Projection x View x World

For using vertex/geometry/pixel shaders one needs to understand the subject we presented here – and that is what gives you all the power with computer graphics – you can customize/enhance it further!

Happy coding!

Be Sociable, Share!

### 27 Comments

1. Celedonio

Quite interesting post. I’ve learnt in a couple of minutes what many books fail to explain clearly.

I finally know why many shaders use a worldViewProj parameter!

• Yes, it’s important in what order you do the multiplication! It can (will) mess up things pretty bad if you do not use the World x View x Projection order.

2. MadMartian

worldViewProj is a butt-ugly name for a parameter. Opting for wvpM instead.

• The Awesome Twin

I’d dissagree for one simple reason, wvpM is far to vague for anyone to know what it does without having to look up and find what it means. Think about the old C functions. atoi, ftoa, sprintf, the list goes on. They’re vague, sure they’ll make sence to anyone who knows what they are, but how hard would it really be to write AsciiToInt, FloatToAscii, StringPrintFormat (although that last one is still pretty bad), especially given that most IDEs have autocomplete functionality. In my humble opinion, function and variable names should explain their purpose, and comments should only be needed to explain the flow of logic.

• MadMartian

On the other hand, longer identifiers increases both reading and writing time which can compound quite significantly for large projects and repetitive troubleshooting. If only one person, the same person, will be looking at the code, short identifiers make more sense. I guess it depends on how your team is structured, who works on what.

Cheers.

• GruffyMuffy

Hey MadMartian.

Sorry but that is complete ballz in the ass !
I dont think you run teams as they would probably also imply the same
COMPLETE BALLZ!.
You shoud know why this is if you were a real programmer… but I Will say it for any one who doesnt know.
identifiers should always aim to be self describing and should not be shortened at risk of ambiguity as to its purpose….
Compilers do not use the identifers as a final marker, ,this is a blinking set of object code, or intermediary code (think CLR, JVM here).
The comuter could not give a flying shit whether you call something “foo” or “youAreAFoo_kingDong”…. these would both be translated into some value based code at runtime from source code compilation, making the names only have a “HUMAN READABLE” meaning for programmers to better understand code flow and logic…
Grrr, lol
float aPos = Cryptic !
float audioP = Cryptic !
float audioPosition = NOT Cryptic at all !
float audioPos = NOT too Cryptic !

Look, dont be foolish. Not all logic is as logical as you might first think withcomputing.
Only experience can teach you that though, i`m afraid

3. angela808

this makes me interested to know and simpler to understand everything about world, view and projection matrix.

4. Kova

Very clearly explained. I’ve read many books on opengl explaining this and not single one is more clear then this. Thank you.

• RobertoK

Sure thing! You are welcome.
It took some time while the light bulb related to understanding of world view projection matrix became lit in my head. I decided to make that task easier to others by writing this article and adding some images to clarify some issues.

5. Karthik Jeya kumar

Hi,Robert ,it’s really nice post…
Easy to under stand…….

6. Omni

Your description of the projection matrix is incorrect. A linear transformation can’t project points onto a plane. What the projection matrix is actually doing is _preparing_ the vertices for projection by rescaling x,y and z. The actual projection is done by

x’ = x / z
y’ = y / z

which is a nonlinear mapping and thus cannot be described by a matrix

• Archer

thanks for the clarification

• Good point, but should that not be:
x’ = x / w
y’ = y / w

7. Truong

Good job, Robert.
really simple, and easy to understand

8. David

This helped me a lot with a silly hobby thing I was doing trying to make an excel chart rotate in 3D. Very clear, very straightforward and extremely useful to visualise things, however,

To correct

This is far better than moving/rotating/stretching every point of the object on the scene, specially if it has a lot of vertexes

In fact these Transformations/Rotations must be applied to every point on the scene and then again to supply the viewable ones in 2D (becuase the view must be rotated to the camera perspective).

Sorry… Many interfaces have suceeded in making this invisible, and probably do a lot of other corrections beside. I was using VBA and this helped me to get it working on a form as well, using some simples API’s.

9. Archer

Great article!

I needed to remind myself about what I learned in 4th year graphics, and you explained it all in a very elegant and intuitive way

10. Ian

Does anyone know of a working example of this, that is, a point, worked all the way to the screen coordinates? I am having some problems getting this to work as an example?

11. Seyed Ahmad Parkhid

When I Reach this line of code :

out.pos = mul(world_view_proj,vertices)

I get confused until I read your post.
thanks man.

12. Pretty great post. I just stumbled upon your blog and wanted to mention that I’ve really enjoyed surfing around your weblog posts. After all I will be subscribing to your rss feed and I am hoping you write again soon!

13. MadMartian

Hi RobertoK,

The homogeneous matrix diagram is wrong.
Translation components are in the last column not in the last row.

[ 1 0 0 tx ][ x ]
[ 0 1 0 ty ][ y ]
[ 0 0 1 tz ][ z ]
[ 0 0 0 1 ][ 1 ]

Which becomes:

=
=
=
=

Cheers

14. MadMartian

Hi RobertoK,

The homogeneous matrix diagram is wrong.
Translation components are in the last column not in the last row.

[ 1 0 0 tx ][ x ]
[ 0 1 0 ty ][ y ]
[ 0 0 1 tz ][ z ]
[ 0 0 0 1 ][ 1 ]

Which becomes:

{ 1*x + 0*y + 0*z + tx*1 } = { x + tx }
{ 0*x + 1*y + 0*z + ty*1 } = { y + ty }
{ 0*x + 0*y + 1*z + tz*1 } = { z + tz }
{ 0*x + 0*y + 0*z + 1*1 } = { 1 }

Cheers

• Anderson

You are half correct. This article uses row vector and left-to-right multiplication (which DirectX uses). OpenGL uses right-to-left multiplication and column vector. So, MadMartian, you are referring to right-to-left multiplication. Hence the translation part is a column. But the article is also correct, because it uses row vector for coordinates. Hence the translation part is a row.
There is one more consideration:
The order of Model-View-Projection in a left-to-right multiplication (like the article) is Model * View * Projection.
The order of Model-View-Projection in a right-to-left multiplication (like your comment) is Projection*View*Model. Somebody can see this order strange. But in math, functions are right-to-left order. Consider these matrices as functions: Projection(View(Model(vertex))).

• Roberto Koci

Yes, I’m a DirextX fan, only basically touched OpenGL. That explains it.
Let me add that to the article to clarify.

• Ah, thanks for clearing that up. That’s going to save someone a few hours of troubleshooting I’m sure!

15. alex

Thank you!! Everything is much clearer now!

16. Ramael

Hey thanks for your explanation. It was very easy to understand the concept. I almost learned more here than what I did in Computer Graphics course.

17. salaniojr

thank you so much!!! you really clarified some concepts in my head!!!

• ### Recent Projects

Website in a Weekend redesign and tweaking

The Portfolio Project Resumes are dead. People don't care about some stale list of jobs and degrees. These days, people want to know: What can you do?
• ### Interesting Links

Click here to check out my Travel Guide of Gran Canaria featuring Maspalomas, Playa del Ingles, Las Palmas and other resort locations.

DiamondsGlow.Com a website about diamonds, engagement rings, wedding rings and jewellery

The Portfolio Project Resumes are dead. People don't care about some stale list of jobs and degrees. These days, people want to know: What can you do?