Game Basics Mathematics for 3D Games Part 2: Cross Product of Vectors
Hello, everyone
This is Lee Deuk-woo from Game Mathematics
In this session, we will take a look at an important operation on vectors
which is the cross product
We will explore the cross product operation
and its properties
Next, we will compare the differences
between the cross product and the cross product operation
Finally, we’ll look at various ways
to apply the cross product
The Cross Product Operation
Let’s start by understanding the cross product operation
The cross product operation
can only be performed in three-dimensional space,
meaning it applies exclusively
to 3D vectors
The result of the cross product
unlike the dot product
is a vector value
The dot product yields a scalar value,
but the cross product produces a vector
The operation is performed in 3D space
on 3D vectors
and the result is also a 3D vector
So, let’s explore how the cross product operation
is performed
Here, when performing the cross product of an arbitrary vector, u
and another arbitrary vector v
For the first component, x,
you exclude x and use the y and z components
instead and proceed
The first step in calculating the cross product of u and v
is to take uy, vz in order.
Then, you put a minus
and reverse the product
Thus, vy and uz is subtracted
which is a key characteristic of the cross product operation
Next, let’s look at the second component
The second component is y
so you exclude y and use the other two components
We follow the cyclic order x,y,z,x,y,z, as previously mentioned
Excluding y
the sequence proceeds as z, x
First, calculate uz and vx
Then, subtract the reverse product
for vz ux
Finally, for the z-component
the sequence proceeds as x,y
First, calculate ux*vy
Then, subtract the reverse product
vx*uy
This completes the vector derived from the cross product operation
We should always examine
the cross product and dot product of vectors
by comparing them
Although these two operations are contrasting
you can think of the cross product as
complementing the aspects that the dot product lacks
Looking at this diagram
when two arbitrary vectors are used
the dot product involves
multiplying corresponding components and then adding them together
However, in the cross product
for any x-component,
it uses the components other than x
For y, it uses components other than y
so the operation relies only
on non-corresponding components
This way, you can understand that the cross product complements
the properties of the dot product
Now, let’s examine the properties
of the dot product and the cross product operations
Previously, we studied the various properties
of the dot product operation
Let’s review the two operations
by comparing them side by side
The dot product operation satisfies the commutative property
but the cross product does not
As you can see, the cross product involves subtraction
so if you swap v and u in the operation
the resulting value will differ from the previous calculation
Thus, the commutative property does not hold for the cross product
The important point here is that although the commutative property does not apply
adding a negative sign to the vector,
when reversing the order
results in the same cross product value as the original
This means a vector in the opposite direction is created
So, while the commutative property does not apply
you can think of it as
following a specific rule
Neither the dot product nor the cross product
satisfies the associative property
It’s good to note that
neither operation adheres
to the associative property
Next, one important property is that
over addition, the dot product satisfies
the distributive property
The same applies to the cross product
The distributive property holds for addition in the cross product, as shown here
Make sure to remember this property
Let’s examine the key properties
of the cross product
If we consider vectors in the same or opposite directions
this means
vectors that are either aligned in the same or opposite directions
This implies that the vectors are parallel
This implies that the vectors are parallel vectors
always results in a zero vector
Let’s explore why this happens
When you take the cross product
of the same vector with itself,
the result is a zero vector
due to the negative sign introduced by the operation
Similarly, the cross product of vectors in opposite directions
also results in a zero vector
The only difference is the sign—positive or negative
Even if you multiply a vector by a scalar
and take the cross product with another vector
in the same direction,
the result remains equivalent to scaling the zero vector
Since scaling a zero vector still results in a zero vector
parallel vectors always produce a zero vector,
which is a fundamental property of the cross product
Let’s explore
how to apply this property
When we have two vectors, u and v
with these two,
we can decompose u with respect to v
into two components
One component is parallel, and the other is perpendicular
The parallel component will naturally produce a zero vector in the cross product
The perpendicular component will result in a non-zero value
Previously, we divided the vector into two components like this
Since the distributive property holds for addition
the cross product of u and v
simplifies as follows
The parallel component becomes a zero vector and cancels out
Only the perpendicular component remains
Thus, when dealing with
such arbitrary vectors,
if we consistently decompose the vector and exclude the parallel component,
regardless of the vector’s magnitude
the result is influenced by
the angle between the vector and v
This is because only the perpendicular component contributes to the result
Ultimately, the smaller the angle,
the smaller the perpendicular component becomes
As a result, the cross product value decreases
On the other hand, the larger the angle,
the larger the perpendicular component becomes
Thus, the cross product value increases
This proportional relationship
is related to the sine function of trigonometry
In this context, the sine function corresponds to this part
which represents the perpendicular component
Thus, the magnitude of the cross product vector
is proportional to the sine of the angle between the two vectors
This is the conclusion we can draw
In the case of the dot product we learned earlier
it was proportional to the cosine function
The cosine and sine functions,
as well as the dot product and cross product, complement each other
Remember this
Now, let’s examine the cross product
of two arbitrary vectors
After calculating the cross product
we’ll take the result and compute the dot product with either u or v
According to the equation, the result of the dot product
will repeat identical values, ultimately resulting in 0
This is when we take the dot product with u
and this is when we do it with v
Since the dot product satisfies the commutative property
it doesn’t matter which vector is placed first
In any case, taking the dot product resulted in 0
What does this mean?
The property of the dot product being proportional to the cosine function
is called orthogonality
Thus, a dot product value of 0
means that the two vectors are orthogonal
Previously, we discussed that two arbitrary vectors
with different slopes
can form a plane
When you take the cross product of these two vectors
a vector orthogonal to both
is produced
This means that it generates a vector orthogonal to the plane
This is how the cross product operation works
The direction of orthogonality to the plane
essentially indicates the shortest distance from the plane
we can understand this in this way
It can also be understood as the direction the plane is facing
The vector produced by the cross product of two vectors
is commonly called a normal vector
The cross product operation is used to create this normal vector
This has practical applications in computer graphics
particularly for light calculations
So it’s important to understand this
When creating an orthogonal vector
note that a plane has a front side and a back side
There is a front side and a back side
and whether it faces forward or backward
is determined by orthogonality
which means the dot product equation results in 0
This is related to the order of the cross product we examined earlier
If we take the cross product of u and v
and get a direction,
taking the cross product of v and u in reverse
produces a vector in the opposite direction
Thus, we need to decide
which side is the true front
This is determined by the right-hand rule
The result of the cross product always follows the right-hand rule
The direction of the plane depends
on the priority given to the vectors
In the case of the diagram shown here
if you curl your right hand from u to v
the direction your thumb points indicates
the direction of the plane
We’ve covered how to generate a normal vector
Now let’s compare the dot product and cross product comprehensively
using a diagram
Let’s assume we have two vectors
The dot product is proportional to the cosine function
while the cross product is proportional to the sine function
For the cross product, which is proportional to the sine function
a positive value indicates
the right side, as shown here
A negative value indicates the left side
On the other hand, the dot product
is proportional to the cosine function
so a positive value represents the front side
Thus, the dot product is used to determine orthogonality
The dot product helps identify orthogonality
while the cross product determines parallelism
The dot product is proportional to cosθ, and the cross product is proportional to sinθ
The dot product is used to distinguish front and back
while the cross product is used to distinguish left and right
You can see that
they complement each other quite well
The dot product produces a scalar value
while the cross product produces a vector value
One key application of the dot product
is creating projection vectors
The cross product is used to create normal vectors
Applications of the Cross Product
Let’s explore how the cross product
is practically applied in game development
The first application we’ll look at is determining left and right
The cross product can be used to determine whether
something is on the left or the right
When we set a viewing vector f
and define the vector from the character to the object as v
if we calculate the cross product
from f to v
the result of the cross product will point downward
when using the right-hand rule, right?
On the other hand, if the object
is on the left side of the viewing vector, let’s call it v'
the cross product will point upward, as you can see
This means that relative to the character’s view
an object on the left will result in an upward direction
while an object on the right will point downward
This is what you will be able to see
By using this property, where upward means left
and downward means right
we can determine whether the object
is on the left or right
However, since the cross product always produces a vector
it’s not possible to clearly distinguish
between left and right
based solely on the vector value
At this point, we introduce an "Up vector,"
a vector pointing upward
Typically, this is the world’s y-axis
represented as (0, 1, 0)
We use the (0, 1, 0) vector
to perform an additional dot product calculation
When taking the dot product
with the Up vector
if they are in the same direction, it indicates upward
Thus, a positive result indicates left, and negative indicates right
you can understand it like this
You can use the scalar triple product
to determine left and right like this
The second application of the cross product
is generating a rotation matrix from vectors
This is commonly used
for determining the orientation of an object’s viewing direction
or a camera’s viewing direction
to derive a rotation matrix
from the viewing direction
Let’s go through an example
Suppose there is a camera and an object
The direction from the camera to the object
can be found by subtracting the camera’s position from the object’s position
This vector essentially represents
the local z-axis
Once we have the local z-axis
we need to calculate the remaining local x-axis and y-axis
The local x-axis can be derived using the world’s Up vector
and the plane formed by
the z-local and the Up vector
The vector orthogonal to this plane becomes the x-local axis
Thus, we calculate the x-local axis
which points beyond the camera monitor
Using the cross product, this becomes the normal vector
After calculating the x-local axis this way
the y-local axis can be found
by taking the cross product of z-local and x-local
This completes the three axes
However, it’s important to note that these vectors
may not all have a magnitude of 1
For the z-local axis,
we can normalize it
Dividing the vector by its magnitude normalizes it
Similarly, the x-vector generated from the cross product
may not have a magnitude of 1
This is because it’s not guaranteed that
the y-axis and x-axis are orthogonal
Thus, the angle between them may vary,
so we must normalize it
after calculation
Since the z and x axes
are designed to be orthogonal
the y-axis can be directly calculated
using the cross product without additional normalization
In summary, you can calculate
the three local axes as follows
These axes can then be used
to construct a rotation matrix in 3D space
There are some considerations to keep in mind when creating such a rotation matrix
For instance, there are cases where the camera might flip upside down
Sometimes an object moves in an inverted manner
Although these cases are rare
it’s good to account for them just in case
You can typically provide an option
to specify the direction of the Up vector
in such scenarios
Keep in mind that such functionality
might be necessary
The second issue occurs when the camera’s viewing direction
is parallel to the specified Up vector
In this case, taking their cross product
results in a zero vector
which means you cannot proceed further
This becomes a significant obstacle
In such cases,
having the Up vector
and the local z-axis parallel is meaningless, right?
So, you need to arbitrarily designate a vector
orthogonal to the viewing direction
You can specify an x-axis separately or arbitrarily assign it
In this case, the x-axis refers to the world’s x-axis
You can assign either the world x-axis or the world z-axis,
and use them to calculate
the remaining axes
Such exceptions
must be considered during implementation
The final application of the cross product is
back-face culling, which is a technique
commonly used in rendering
When dealing with a triangle
there’s always a front face and a back face
If it faces the back, there’s no need to render it
Because it’s not visible to the eye, typically
in the case of opaque objects
the back face is not rendered as it’s not visible
Using back-face culling
to omit the back face
can significantly reduce the number of triangles rendered
by nearly half
This leads to substantial performance improvements in game development
Let’s look at how this is implemented
Typically, when we define a triangle by specifying three vertices
we need to determine
which way the face of the triangle is oriented
Since a triangle always has a front face and a back face
it’s necessary to specify which side is the front face
However, if we explicitly define the front face for every triangle
we’d have to store
additional directional data
which would be a significant waste of storage
This is where the cross product comes in
We implicitly use the order of the vertices
to define the direction of the triangle’s face using the normal vector
generated by the cross product
Let’s take an example
Here for 0, 1, 2, the triangle is defined
in a counter-clockwise order
In this case, using the right-hand rule
the result of the cross product points beyond the monitor
This indicates the direction of the face
Now, for a triangle defined
in a clockwise order
the result points toward the front, or toward me
Thus, this side is implicitly defined
as the direction of the face
Using this method, there’s no need
to explicitly store face direction data in the mesh
By clearly distinguishing between the front and back faces
we can implement the technique of back-face culling
For example, if the camera has a viewing direction
only the faces that face the viewing direction are rendered
If the face direction
is the same as the camera’s viewing direction
it means the camera is looking at the back face
In this case, rendering is unnecessary
When the triangle is oriented clockwise
and the camera looks in this direction
since the camera and face are facing each other,
it should be rendered
So how do we determine this?
By calculating the dot product of the camera’s viewing direction vector
and the face’s direction vector,
if their directions align, the result is positive
If the result is negative, they face each other
so it should be rendered
This screen here shows
both the front and back faces rendered on the left
When we render rectangles or cubes in 3D,
we typically render even the parts at the back
This is how a wireframe is drawn
However, using back-face culling
all back faces that face away from the camera
are omitted
This gives the appearance of
a solid, three-dimensional object
In this way, we’ve covered the basic operations and properties of the cross product of vectors
We also explored
its various applications
That concludes the summary of the cross product
We’ll meet again next time with a different topic
This concludes today’s lecture
Thank you for your attention
Thank you!
Vector Cross Product Operations Cross Product Operation Performed only in 3D space, resulting in a vector u=ux, uy, uz, v=vx, vy, vz
u x v= uyvz-vyuz,uzvx-vzux,uxvy-vxuy Properties of the outer product operation Commutative law does not hold Associative law does not hold Distributive law holds for addition
Operation of vector cross product Main properties of cross product When you cross product parallel vectors, you get a zero vector The size of the cross product vector is proportional to the sine function of the angle between them Creates a vector orthogonal to the plane
Comparison of outer and inner products The inner product is used for orthogonal discrimination, and the outer product is used for parallel discrimination The inner product is proportional to cosθ, and the outer product is proportional to sinθ The inner product is used for front and back discrimination, and the outer product is used for left and right discrimination
Dot Product Applications: Projection vectors Cross Product Applications: Normal vectors
Application of vector outer product Left-right determination Determination using scalar triple product f x v y > 0 f x v y <0 Generating rotation matrix from vector
xlocal=y x zlocal/y x zlocal, ylocal=zlocal x xlocal, zlocal-v/v
R=xx yx zx 0, xy yy zy 0, xz yz zz 0, 0, 0, 0, 1
Application of Vector Cross Product Backface Culling Opaque objects usually have no back-facing graphics, so backface culling can drastically reduce triangle drawing
The normal vector created externally using the vertex placement order is implicitly designated as the direction of the triangle Only the faces facing the camera's view direction are drawn
Dot Product of Camera View Vector and Triangle Normal: Positive: Same direction, skip rendering
Negative: Opposite direction, render