VLA Proudly Presents
Three Dimensional Rotations For Computer Graphics
By Lithium /VLA
One of the most difficult programming difficulties you will face is that
of representing a 3D world on that 2D screen in front of you. It requires
some linear alegbra that may be difficult for some, so I will spend some
bytes explaining the mathmatic computations of using matricies in addition
to the equations to get you going. This document is intended to be an aid
to anyone programming in any language, as a result it will use mathmatic
notation. If you are worthy of using these routines, you ought to be able
to get them into your favorite language. All I ask is that you pay a little
tribute to your programming buddies in VLA.
If you arent a math person, skip to the end and get the final equations.
Just be forewarned, implimenting these equations into a coherient 3D world
is hard enough when you undersand the mathmatics behind them...
REAL PROGRAMMERS ARENT AFRAID OF MATH
3D Coordinates
Just so we all understand each other, 3D is defined in of course three
directions, well call them X,Y,Z. X will be the horizontal plane of your
screen, Z will stretch vertically, and Y will extend out of and into your
screen. Got it? Hope so, becuase it gets a bit tricky now. The next
system is called Sphereical Coordinates it is defined by angles and distance
in ,,p These Greek letters are Theta , Phi , and Roe p
Z Z
- Angle in the XY
plane
- Angle from the Z
X X axis
/ / v
/ / o p - Distance to point
/ / from the origin
/ / -- 0,0,0
Y Y
To relate the two systems you can use these equations.
X psincos arctan X/Y
Y psinsin arccos Z/p
Z pcos p X2 + Y2 + Z2
If these dont seem right, do a couple of example problems for yourself,
it should make since after a bit of trig.
Matrix Notation
Lets say I can define Xt and Yt with the equations:
Xt aX + bY Where a,b,c,d are coeffiencets
Yt cX + dY
The matrix notation for this system of equations would be:
Xt,Yt X,Ya c
And we solve for this with these steps
b d
Xt X,Ya . aX + bY
We move across the coordinates left to right
b . and multiply them by the coeffients in the
matrix, top to bottom
Yt X,Y. c cX + dY
For Y, the second number, we use the second
. d column of the matrix
We can also multiply matricies in this fashion
T T1*T2 Where T1 a c and T2 e g
b d f h
a ce g ae + cf ag + ch rows - columns
v
b df h be + df bg + dh
This product is dependent on position, so that means that
T1*T2 *DOES NOT* equal T2*T1
In English, the process above went like this, we move left to right in
the first matrix, T1, and top to bottom in the second, T2. AE + CF is our
first position.
The numbers in the first row are multiplied by the numbers in the
first column. 1st * 1st + 2nd * 2nd is our first value for the new matrix.
Then you repeat the process for the next column of the second matrix.
After that, you move down to the next row of the first matrix, and
multiply it by the 1st column of the second matrix. You then do the same
for the next column of the second matrix. This process is repeated until
youve done all of the rows and columns.
If this is your introduction to matricies, dont feel bad if youre a bit
confused. They are a different mode of thinking about equations. The
operations above give the same results as if you were to do the long hand
algebra to solve them. It may seem a bit more difficult for these examples,
but when you get to systems of equations with many variables, this way is
MUCH faster to compute. Trust me, especially when you make your program do
it.
So, now you have the basic math....
One important point for these matricies below. I will use a homogeneous
coordinate system, X/r, Y/r, Z/r, r Now Ill use r1, so nothing will
really be different in my calculations, but you need to understand the
purpose.
This form is very convienent for the translations and rotation
equations we will need to do because it allows for scaling of our points with
respect to a center point.
Consider a point 2,2,2 in an object centered at 1,1,1. If we were
to scale the X direction by 3,the X length to the center is 3 times what it
was the point we want would be 4,2,2. Our new X 3*OldX-CenterX.
Without the added factor of the homogeneous system, calculations assume all
objects are centered at the origin, so our point would have turned out to be
6,2,2, NOT the one we wanted. So thats why we are going to do it that way.
ROTATIONS AND TRANSFORMATIONS
Translation
We will start with translation from the origin. Most objects are not
at 0,0,0,1, so well call their center Tx,Ty,Tz,1.
1 0 0 0 T1
0 1 0 0 This physically moves the object, so it is centered
at the origin for our calcuations, eliminating the
0 0 1 0 need for a -Tx for each X, the matrix will factor it
in when we multiply it by the others
-Tx -Ty -Tz 1
But, we need sphereical coordinates...
1 0 0 0
T1
0 1 0 0
0 0 1 0
-pcossin -psinsin -pcos 1
XY Clockwise Rotation
This will be our first rotation, about the Z-Axis
sin cos 0 0
T2
-cos sin 0 0
0 0 1 0
0 0 0 1
YZ Counter-Clockwise Rotation
Now we rotate about the X axis
1 0 0 0
T3
0 -cos -sin 0
0 sin -cos 0
0 0 0 1
Notice that with two rotations that we can get any position in 3D space.
Left Hand Correction
This will flip the X coordinates. Think about when you
look into the mirror, your left hand looks like your right.
These rotations do the same thing, so by flipping the X, it
will make your X move right when you increase its value.
-1 0 0 0
T4
0 1 0 0
0 0 1 0
0 0 0 1
The Final Viewing Matrix
This is the net transformation matrix for our viewing perspective
The math for this one is really messy, and I would need to go over even
more matrix stuff to get it reduced, so I will ask you to trust my
calculations
V T1*T2*T3*T4
-sin -coscos -cossin 0
V
cos -sincos -sinsin 0
0 sin -cos 0
0 0 p 1
Lets say our original X,Y,Z,1 were just that, and the point after the
rotation is Xv,Yv,Zv,1
Xv,Yv,Zv,1 X,Y,Z,1 * V
Xv -Xsin + Ycos
Yv -Xcoscos - Ysincos + Zsin
Zv -Xcossin - Ysinsin - Zcos + p
Some people have had trouble concepts of this implimentation, so I have
another way of setting up the equations. This works off of the straight
X,Y, and Z coordinates too, but uses another angle.
We will define the following variables
Xan Rotation about the X-Axis
Yan Rotation about the Y-Axis
Zan Rotation about the Z-Axis
Rotation about the Y Axis
cosYan 0 sinYan
0 1 0
-sinYan 0 cosYan
Rotation about the Z Axis
1 0 0
0 cosZan -sinZan
0 sinZan cosZan
Rotation about the X Axis
cosXan -sinXan 0
sinXan cosXan 0
0 0 1
For simplification, lets call sinYan s1, cosXan c3,
sinZan s2, etc
Final Rotation Matrix
c1c3 + s1s2s3 -c1s3 + c3s1s2 c2s1
c2s3 c2c3 -s2
-c3s1 + c1s2s3 s1s3 + c1c3s2 c1c2
Xv xs1s2s3 + c1c3 + yc2s3 + zc1s2s3 - c3s1
Yv xc3s1s2 - c1s3 + yc2c3 + zc1c3s2 + s1s3
Zv xc1s2s3 - c3s1 + y-s2 + zc1c2
Where Xv,Yv, and Zv are the final rotated points and the little x,y,z are
the original points.
Normal Vectors - The Secret To Shading and Plane Elimination
So, now you have the rotation equations... But, how do we make it fast?
Well, one of the best optimizations you can impliment is plane elimination.
It boils down to not displaying the planes that wont be seen. With that
said, here comes more math....
BE A MAN, KNOW YOUR NORMALS
A normal vector is perpendicular to a plane. Imagine the face of a
clock as a plane. Take your right hand and point your thumb toward yourself
and the other end toward the clock. Now curl your fingers in the
counter-clockwise direction. Your thumb is pointing in the direction of the
normal vector. This is called The Right Hand Rule and it is the basis for
figuring the facing of planes.
A plane can be determined with three points, try it. Thats the minimum
you need, so thats what we will base our process on. Now if we have a line
segment, we could move it to the origin, maintaining its direction and
lenght by subtracting the X,Y,Z of one of the points from both ends. This
is our definition of a vector. A line segment, starting at the origin and
extending in the direction X,Y,Z.
Here will be our plane, built from the three points below.
X1,Y1,Z1 V X1-X2, Y1-Y2, Z1-Z2
X2,Y2,Z2 W X1-X3, Y1-Y3, Z1-Z3
X3,Y3,Z3
So, we have our three points that define a plane. From these points we
create two vectors V and W. Now if you where to use the right hand rule with
these vectors, pointing your fingers in the direction of V and curling them
toward the direction of W, you would have the direction of the Normal vector.
This vector is perpendicular to both vectors, and since we have defined the
plane by these vectors, the normal is perpendicular to the plane as well.
The process of finding the normal vector is called the Cross Product and
it is of this form:
V*W i k j
X1-X2 Y1-Y2 Z1-Z2
X1-X3 Y1-Y3 Z1-Z3
i Y1-Y2Z1-Z3 - Z1-Z2Y1-Y3
-k Z1-Z2X1-X3 - X1-X2Z1-Z3
j X1-X2Y1-Y3 - Y1-Y2X1-X3
The Normal to the plane is i,-k,j
NOTE: V*W *DOESNT* equal W*V, it will be pointing in the negative direction
To prove that to yourself, lets go back to how I explained it before
We pointed in the direction of V and curled our fingers toward W, the
normal vector in the direction of your thumb. Try it in the
direction of W, toward V. It should be in the opposite direction.
Your normal, still perpendicular to both vectors, but it is negative.
If you use in your program, you will have the planes appearing when
they shouldnt and dissapearing when they are coming into view.
So, now that we have a way to determin the direction of the plane,
how do we hide the plane? If the angle between the view point and the
normal is greater than 90 degrees, dont show it. One quick way that I
always use is to place the view point on an axis. I tipically set the
Z axis to come out of the screen, Y up and X across. Set the view point
to be at a positive point on the Z and then, if that normal vector has Z
greater than zero, I display it, otherwise I skip to the next one.
This also has an application in shading. If you define a light scource,
just like the view point, you find the angle the normal and the light form.
Since you dont usually just want two colors, our 90 degree trick wont work
for you, but by finding this angle, and dividing all of the possible angles
by the number of colors you will allow in the shading, that color can be
assigned to the plane and, presto-chango, it looks like you know what your
doing...
As you do your rotations, just rotate the coordinates of the normal and
that will keep everything updated.
Tips To Speed-Up Your Routines
Pre-Calculate as many values as possible
The main limitation you will have is the speed of your math, using
precalculated values like Normals, Sin/Cos charts, and distance from the
origin are all good candidates.
If you can get away with using a math-coprocessor, well...
This will greatly increase the speed of your routine. Unfortunately,
not everyone has one.
Only figure values once
If you multiply SinCos and will use that same value later, by all
means, keep it and use it then instead of doing the multiplication again.
Another thing to keep in mind
The order of rotations *DOES* make a difference. Try it out and youll
understand. Also, when you start to use these routines, youll find
yourself making arrays of points and plane structures.
Counter-Clockwise points
Be sure to list your points for the planes in counter-clockwise order.
If you dont, not all of your planes will display correctly when you
start hiding planes.
And as always, be clever
Just watch out, because when you have clever ideas you can lose a foot.
My brother once had a clever idea to cut his toe nails with an axe and
he lost his foot.
Books to look for...
Any math book, the topics I covered will be found in:
Normal Vectors - Analytic Geometry
Matrix Operations - Linear Algebra
Sines and Cosines - Trigonometry
The Art of Graphics, by Jim McGregor and Alan Watt
1986 Addison-Wesley Publishers
Read the VLA.NFO file to find out how to contact us.
Three Dimensional Rotations For Computer Graphics
By Lithium /VLA
One of the most difficult programming difficulties you will face is that
of representing a 3D world on that 2D screen in front of you. It requires
some linear alegbra that may be difficult for some, so I will spend some
bytes explaining the mathmatic computations of using matricies in addition
to the equations to get you going. This document is intended to be an aid
to anyone programming in any language, as a result it will use mathmatic
notation. If you are worthy of using these routines, you ought to be able
to get them into your favorite language. All I ask is that you pay a little
tribute to your programming buddies in VLA.
If you arent a math person, skip to the end and get the final equations.
Just be forewarned, implimenting these equations into a coherient 3D world
is hard enough when you undersand the mathmatics behind them...
REAL PROGRAMMERS ARENT AFRAID OF MATH
3D Coordinates
Just so we all understand each other, 3D is defined in of course three
directions, well call them X,Y,Z. X will be the horizontal plane of your
screen, Z will stretch vertically, and Y will extend out of and into your
screen. Got it? Hope so, becuase it gets a bit tricky now. The next
system is called Sphereical Coordinates it is defined by angles and distance
in ,,p These Greek letters are Theta , Phi , and Roe p
Z Z
- Angle in the XY
plane
- Angle from the Z
X X axis
/ / v
/ / o p - Distance to point
/ / from the origin
/ / -- 0,0,0
Y Y
To relate the two systems you can use these equations.
X psincos arctan X/Y
Y psinsin arccos Z/p
Z pcos p X2 + Y2 + Z2
If these dont seem right, do a couple of example problems for yourself,
it should make since after a bit of trig.
Matrix Notation
Lets say I can define Xt and Yt with the equations:
Xt aX + bY Where a,b,c,d are coeffiencets
Yt cX + dY
The matrix notation for this system of equations would be:
Xt,Yt X,Ya c
And we solve for this with these steps
b d
Xt X,Ya . aX + bY
We move across the coordinates left to right
b . and multiply them by the coeffients in the
matrix, top to bottom
Yt X,Y. c cX + dY
For Y, the second number, we use the second
. d column of the matrix
We can also multiply matricies in this fashion
T T1*T2 Where T1 a c and T2 e g
b d f h
a ce g ae + cf ag + ch rows - columns
v
b df h be + df bg + dh
This product is dependent on position, so that means that
T1*T2 *DOES NOT* equal T2*T1
In English, the process above went like this, we move left to right in
the first matrix, T1, and top to bottom in the second, T2. AE + CF is our
first position.
The numbers in the first row are multiplied by the numbers in the
first column. 1st * 1st + 2nd * 2nd is our first value for the new matrix.
Then you repeat the process for the next column of the second matrix.
After that, you move down to the next row of the first matrix, and
multiply it by the 1st column of the second matrix. You then do the same
for the next column of the second matrix. This process is repeated until
youve done all of the rows and columns.
If this is your introduction to matricies, dont feel bad if youre a bit
confused. They are a different mode of thinking about equations. The
operations above give the same results as if you were to do the long hand
algebra to solve them. It may seem a bit more difficult for these examples,
but when you get to systems of equations with many variables, this way is
MUCH faster to compute. Trust me, especially when you make your program do
it.
So, now you have the basic math....
One important point for these matricies below. I will use a homogeneous
coordinate system, X/r, Y/r, Z/r, r Now Ill use r1, so nothing will
really be different in my calculations, but you need to understand the
purpose.
This form is very convienent for the translations and rotation
equations we will need to do because it allows for scaling of our points with
respect to a center point.
Consider a point 2,2,2 in an object centered at 1,1,1. If we were
to scale the X direction by 3,the X length to the center is 3 times what it
was the point we want would be 4,2,2. Our new X 3*OldX-CenterX.
Without the added factor of the homogeneous system, calculations assume all
objects are centered at the origin, so our point would have turned out to be
6,2,2, NOT the one we wanted. So thats why we are going to do it that way.
ROTATIONS AND TRANSFORMATIONS
Translation
We will start with translation from the origin. Most objects are not
at 0,0,0,1, so well call their center Tx,Ty,Tz,1.
1 0 0 0 T1
0 1 0 0 This physically moves the object, so it is centered
at the origin for our calcuations, eliminating the
0 0 1 0 need for a -Tx for each X, the matrix will factor it
in when we multiply it by the others
-Tx -Ty -Tz 1
But, we need sphereical coordinates...
1 0 0 0
T1
0 1 0 0
0 0 1 0
-pcossin -psinsin -pcos 1
XY Clockwise Rotation
This will be our first rotation, about the Z-Axis
sin cos 0 0
T2
-cos sin 0 0
0 0 1 0
0 0 0 1
YZ Counter-Clockwise Rotation
Now we rotate about the X axis
1 0 0 0
T3
0 -cos -sin 0
0 sin -cos 0
0 0 0 1
Notice that with two rotations that we can get any position in 3D space.
Left Hand Correction
This will flip the X coordinates. Think about when you
look into the mirror, your left hand looks like your right.
These rotations do the same thing, so by flipping the X, it
will make your X move right when you increase its value.
-1 0 0 0
T4
0 1 0 0
0 0 1 0
0 0 0 1
The Final Viewing Matrix
This is the net transformation matrix for our viewing perspective
The math for this one is really messy, and I would need to go over even
more matrix stuff to get it reduced, so I will ask you to trust my
calculations
V T1*T2*T3*T4
-sin -coscos -cossin 0
V
cos -sincos -sinsin 0
0 sin -cos 0
0 0 p 1
Lets say our original X,Y,Z,1 were just that, and the point after the
rotation is Xv,Yv,Zv,1
Xv,Yv,Zv,1 X,Y,Z,1 * V
Xv -Xsin + Ycos
Yv -Xcoscos - Ysincos + Zsin
Zv -Xcossin - Ysinsin - Zcos + p
Some people have had trouble concepts of this implimentation, so I have
another way of setting up the equations. This works off of the straight
X,Y, and Z coordinates too, but uses another angle.
We will define the following variables
Xan Rotation about the X-Axis
Yan Rotation about the Y-Axis
Zan Rotation about the Z-Axis
Rotation about the Y Axis
cosYan 0 sinYan
0 1 0
-sinYan 0 cosYan
Rotation about the Z Axis
1 0 0
0 cosZan -sinZan
0 sinZan cosZan
Rotation about the X Axis
cosXan -sinXan 0
sinXan cosXan 0
0 0 1
For simplification, lets call sinYan s1, cosXan c3,
sinZan s2, etc
Final Rotation Matrix
c1c3 + s1s2s3 -c1s3 + c3s1s2 c2s1
c2s3 c2c3 -s2
-c3s1 + c1s2s3 s1s3 + c1c3s2 c1c2
Xv xs1s2s3 + c1c3 + yc2s3 + zc1s2s3 - c3s1
Yv xc3s1s2 - c1s3 + yc2c3 + zc1c3s2 + s1s3
Zv xc1s2s3 - c3s1 + y-s2 + zc1c2
Where Xv,Yv, and Zv are the final rotated points and the little x,y,z are
the original points.
Normal Vectors - The Secret To Shading and Plane Elimination
So, now you have the rotation equations... But, how do we make it fast?
Well, one of the best optimizations you can impliment is plane elimination.
It boils down to not displaying the planes that wont be seen. With that
said, here comes more math....
BE A MAN, KNOW YOUR NORMALS
A normal vector is perpendicular to a plane. Imagine the face of a
clock as a plane. Take your right hand and point your thumb toward yourself
and the other end toward the clock. Now curl your fingers in the
counter-clockwise direction. Your thumb is pointing in the direction of the
normal vector. This is called The Right Hand Rule and it is the basis for
figuring the facing of planes.
A plane can be determined with three points, try it. Thats the minimum
you need, so thats what we will base our process on. Now if we have a line
segment, we could move it to the origin, maintaining its direction and
lenght by subtracting the X,Y,Z of one of the points from both ends. This
is our definition of a vector. A line segment, starting at the origin and
extending in the direction X,Y,Z.
Here will be our plane, built from the three points below.
X1,Y1,Z1 V X1-X2, Y1-Y2, Z1-Z2
X2,Y2,Z2 W X1-X3, Y1-Y3, Z1-Z3
X3,Y3,Z3
So, we have our three points that define a plane. From these points we
create two vectors V and W. Now if you where to use the right hand rule with
these vectors, pointing your fingers in the direction of V and curling them
toward the direction of W, you would have the direction of the Normal vector.
This vector is perpendicular to both vectors, and since we have defined the
plane by these vectors, the normal is perpendicular to the plane as well.
The process of finding the normal vector is called the Cross Product and
it is of this form:
V*W i k j
X1-X2 Y1-Y2 Z1-Z2
X1-X3 Y1-Y3 Z1-Z3
i Y1-Y2Z1-Z3 - Z1-Z2Y1-Y3
-k Z1-Z2X1-X3 - X1-X2Z1-Z3
j X1-X2Y1-Y3 - Y1-Y2X1-X3
The Normal to the plane is i,-k,j
NOTE: V*W *DOESNT* equal W*V, it will be pointing in the negative direction
To prove that to yourself, lets go back to how I explained it before
We pointed in the direction of V and curled our fingers toward W, the
normal vector in the direction of your thumb. Try it in the
direction of W, toward V. It should be in the opposite direction.
Your normal, still perpendicular to both vectors, but it is negative.
If you use in your program, you will have the planes appearing when
they shouldnt and dissapearing when they are coming into view.
So, now that we have a way to determin the direction of the plane,
how do we hide the plane? If the angle between the view point and the
normal is greater than 90 degrees, dont show it. One quick way that I
always use is to place the view point on an axis. I tipically set the
Z axis to come out of the screen, Y up and X across. Set the view point
to be at a positive point on the Z and then, if that normal vector has Z
greater than zero, I display it, otherwise I skip to the next one.
This also has an application in shading. If you define a light scource,
just like the view point, you find the angle the normal and the light form.
Since you dont usually just want two colors, our 90 degree trick wont work
for you, but by finding this angle, and dividing all of the possible angles
by the number of colors you will allow in the shading, that color can be
assigned to the plane and, presto-chango, it looks like you know what your
doing...
As you do your rotations, just rotate the coordinates of the normal and
that will keep everything updated.
Tips To Speed-Up Your Routines
Pre-Calculate as many values as possible
The main limitation you will have is the speed of your math, using
precalculated values like Normals, Sin/Cos charts, and distance from the
origin are all good candidates.
If you can get away with using a math-coprocessor, well...
This will greatly increase the speed of your routine. Unfortunately,
not everyone has one.
Only figure values once
If you multiply SinCos and will use that same value later, by all
means, keep it and use it then instead of doing the multiplication again.
Another thing to keep in mind
The order of rotations *DOES* make a difference. Try it out and youll
understand. Also, when you start to use these routines, youll find
yourself making arrays of points and plane structures.
Counter-Clockwise points
Be sure to list your points for the planes in counter-clockwise order.
If you dont, not all of your planes will display correctly when you
start hiding planes.
And as always, be clever
Just watch out, because when you have clever ideas you can lose a foot.
My brother once had a clever idea to cut his toe nails with an axe and
he lost his foot.
Books to look for...
Any math book, the topics I covered will be found in:
Normal Vectors - Analytic Geometry
Matrix Operations - Linear Algebra
Sines and Cosines - Trigonometry
The Art of Graphics, by Jim McGregor and Alan Watt
1986 Addison-Wesley Publishers
Read the VLA.NFO file to find out how to contact us.
log in to add a comment.