As the title suggests, it’s all about basic but incredibly important math, and if you can’t master it completely, you won’t be able to do anything in 3D.
Coordinate system
World coordinate system
When constructing a 3D scene, we need a coordinate system to describe the coordinates of all points in the scene. This coordinate system is also called the world coordinate system. The general default is that when you are facing the computer screen, the X axis is horizontal (positive to the right), the Y axis is vertical (positive to the up), and the Z axis is perpendicular to the screen (positive to the outside).
It can be determined by the right hand gesture shown above (the right hand rule), that is, when you reach out with your right hand to make a gesture like the one shown above, your thumb points in the positive direction of the X axis, your index finger points in the positive direction of the Y axis, and your middle finger points in the positive direction of the Z axis, so this coordinate system is also called the right hand coordinate system.
Unless otherwise specified, all points, vectors, axes, matrices, etc. are based on the world coordinate system in the scene.
Body coordinate system
The object coordinate system is also known as its own coordinate system. In 3D scenes, each object has its own coordinate system, and the relationship between the object and its own coordinate system does not change with the transformation of the object in the world coordinate system. For example:
In the figure above, the X-Y-Z coordinate system is the world coordinate system, and the X1-Y1-Z1 coordinate system is the small square’s own coordinate system. At the beginning, the X1, Y1 and Z1 axes of the small square’s own coordinate system on the left are in the same direction as the X, Y and Z axes of the world coordinate system. However, when the small square rotates 90 degrees downward around the X1 axis of its own coordinate system, as shown on the right of the figure above, its own coordinate system will also rotate with the small square, so the relationship between the small square and its own coordinate system does not change.
Theoretically, you only need one world coordinate system to describe the positions of all points in a scene and the relationships between objects at different positions. Why introduce object coordinates?
Main reason is that people find different situations using different coordinate system will be more convenient, such as: people are on the desk computer operation this scene, although in the world coordinate system (latitude and longitude) on the earth is to describe and the location of the computer can also, but by the two latitude and longitude are hard to get and the location of the computer; If the position of the computer is described in the human coordinate system (40 cm straight ahead), it is relatively intuitive and convenient.
vector
Vector is a basic and important mathematical tool, which is mainly used to describe the displacement between things and indicate the direction from a geometric sense, as follows:
In the XY coordinate system above, the coordinates of point A are (x1, y1), and the coordinates of point B are (x2, y2). When moving from point B to point A, the change in position is vector BA.
In simple terms, A vector is A line segment that has both magnitude and direction. The direction from point B to point A, as indicated by the arrow, is the direction of vector BA, and the length of line segment BA is the magnitude of vector BA.
In the form of mathematical expression, a vector is a list of numbers, and each number in the list represents the directed displacement in different dimensions. Again, take vector BA as an example:
When moving from point B to point A, the position change on the X-axis is x1- X2, and the position change on the Y-axis is y1-y2. Combining the position change on these two dimensions, we finally form the two-dimensional vector BA. The arrow above BA in the figure shows the direction of the vector moving from point B to point A. Sometimes if it is not marked, the default is the starting point in front and the ending point in the back.
There are two kinds of organization of vector number list, horizontal organization is row vector, vertical organization is column vector; The difference between a row vector and a column vector is when you multiply with matrices, because you don’t have to expand too much when it comes to matrices; Vector operations and matrices will be covered in detail in section 2.
Returning to the example graph, when moving from O to B, it can be represented by the vector OB; Since point O is the origin of the coordinate system and its coordinate value is (0,0), the directed displacements of vector OB on the X-axis and Y-axis are calculated respectively and written in the form of row vectors as follows:
Vector OB happens to be consistent with the coordinates of point B, so it can be understood that vector and point are completely different in concept, but equivalent in mathematical form. This is why Vector3 type in ThreeJS framework can be used to represent both 3d vector and point in 3d coordinate system. The actual meaning of Vector3 type is related to the specific use scene.
The definition and properties of three-dimensional, four-dimensional and two-dimensional vectors are basically similar, but the difference only lies in the different dimensions.
Magnitude of vector
The magnitude of a vector is the length of a vector, also known as the magnitude of a vector.
BA vector in the figure above as an example, its length is die, usually written for | | BA | |, according to a right triangle and the hypotenuse length formula available:
For any vector, the magnitude of the magnitude is equal to the sum of the squares of the values of each dimension and then you take the square root; This is also the realization of the length function for calculating the length of each vector type in ThreeJS framework, taking two-dimensional vector Vector2 as an example (where x and y represent the directed displacement of two-dimensional vector on X-axis and Y-axis) :
If you’re confused, the title of this article is 3D, but the examples in this article are based on 2D coordinates? The main reason is that the 2D coordinate system is simpler and easier to understand than the 3D coordinate system (dimension reduction strike), although 3D has one more dimension than 2D, the basic mathematical laws are similar;
For example, to find the length of the three-dimensional vector Vector3, we also calculate the sum of squares of the values of each dimension and then take the square root. The only difference with the two-dimensional vector Vector2 is that there is only one more dimension;
There are many similar examples, I will not list them all; My introductory experience in graphic programming lies in quick understanding and immediate practice; Whether it is the framework or mathematical knowledge is this kind of thinking, specifically for mathematical knowledge can be understood, used, necessary to deduce, for the framework of key knowledge points to build the overall outline.
Negative vector
The vector with the same size as the original vector and in the opposite direction is the negative vector of the original vector. To obtain the negative vector of any vector, we simply take the negative value of each dimension of the original vector:
The zero vector
The zero vector is a vector of magnitude 0.
A unit vector
A unit vector is a vector of size one, also called a normalized vector; A unit vector with the same direction can be calculated for any non-zero vector, corresponding to the normalize method provided by Vector2, Vector3 and Vector4 in ThreeJS framework.
The normal vector
Vectors represented by lines perpendicular to the plane are normal vectors of the plane, such as:
In the above three-dimensional coordinate system, AB vector and CD vector have the same direction (both pointing in the positive direction of Y axis), so AB vector and CD vector are perpendicular to the XZ plane, so AB vector and CD vector are normal vectors of the XZ plane. Notice that there are an infinite number of lines that are perpendicular to a plane, which means that there are an infinite number of normal vectors to a plane.
Vector can indicate the direction, for example, the normal vector indicates the direction of the plane, which can be used for mathematical modeling of the lighting model:
In the reflection model of light, the incident light can be regarded as the incident vector, the reflected light can be regarded as the reflection vector, and the normal line perpendicular to the reflecting surface can be regarded as the normal vector of the reflecting surface. The mathematical model can be established according to the actual problem, and then the solution can be carried out. The detailed process may be explained in WebGL related articles, but it will not be expanded here.
Equal to the vector
The AB and CD vectors in the sample graph are equal in magnitude and direction; In addition to the above determination, you can also shift AB to the origin of the coordinate system, in which case AB and CD are completely coincident, so they are equal, which also means that the vector is independent of position.
Add vectors
Two vectors of the same dimension can be added. The resulting vector has the same dimension as the original vector and the value of each dimension is the sum of the values of the corresponding dimensions of the two added vectors, as follows:
Vector addition satisfies the triangle rule and the commutative law as follows:
OA vector plus OB vector can translate OB vector, connect the tail of OB vector to the head of OA vector, and get AC vector. Then draw an OC vector from the tail of OA vector to the head of AC vector, which is the result vector of OA vector plus OB vector. The two vectors that you add and the vector that you translate will just form a triangle, and that’s the triangle rule for vector addition.
In addition, the transposition and addition of vector positions does not affect the result. For example, OB vector plus OA vector needs to be shifted from OA vector to BC vector. According to the triangle rule, the resulting vector is still OC vector, which means that the addition of vectors satisfies the commutative law.
Vectors can be used to describe displacements between things. Each item in a list of numbers represents a directed displacement in a different dimension, and vector addition is the sum of such displacements, such as:
OA represents a move of 1 in the X direction and 2 in the Y direction, while OB represents a move of 2 in the X direction and 1 in the Y direction, so their resulting vectors are the sum of their displacements in the X and Y directions, So the result vector AC is going to be 3 in the positive X direction and 3 in the positive Y direction.
Vector by subtracting
Two vectors of the same dimension can also be subtracted, and the dimension of the resulting vector is still the same as the original vector, but the value of each dimension is the difference of the value of the corresponding dimension of the two subtracted vectors, as follows:
Vector subtraction also satisfies the triangle rule, but is slightly different from addition, as follows:
OA and OB again, but this time I’m subtracting; OA vector subtracted OB vector and shifted OB vector so that the head of OB vector was connected to the head of OA vector to obtain CA vector. Then draw an OC vector from the tail of OA vector to the tail of CA vector, which is the result vector of OA vector minus OB vector, and this is the triangle rule of vector subtraction. The difference between the additive triangle rule and the additive triangle rule is that the shifted subtracted vector is attached to the heads of the subtracted vectors.
Addition satisfies the commutative law, but subtraction does not. It can be seen from the figure that the result of OB minus OA is OD vector.
Vector multiplication
In addition to adding and subtracting vectors, you can multiply them; There are two types of vector multiplication, namely dot and cross:
- Dot product
In the figure above, the coordinates of point A and point B are (x1, y1) and (x2, y2), and the Angle between OA vector and OB vector is θ.
Vector dot product is the sum of the product of the values of each dimension of the multiplied vectors, so the dot product of OA vector and OB vector (usually marked by dot symbol ·) results as follows:
In addition, the dot product of vectors is equal to the product of the cosine of the Angle between the two vectors and the magnitude of the vectors, so the dot product of OA vector and OB vector is equal to:
The above two results are equivalent and can be proved as follows:
So a very common application of vector dot product is to find the Angle between two vectors.
- cross-product
The vector cross product is only applicable to three-dimensional vectors. Unlike the dot product, the result of the vector cross product is also a vector whose size is equal to the area of the parallelogram formed by the cross vector, and whose direction is perpendicular to the cross vector and satisfies the right hand rule. According to its properties, vector cross product is often used in three-dimensional coordinate system to find plane normal vector and judge the left and right relations of two vectors.
As shown in the figure, the cross product of vector OA and vector OB is OC vector. OC is perpendicular to both OB and OA, and its size is equal to the area of the parallelogram formed by OA and OB.
And the OA vector cross OB vector; According to the right hand rule, thumb points to the direction of OA vector, index finger points to the direction of OB vector, so the middle finger points to the direction of their cross product vector OC. Conversely, when OB vector is cross-multiplied by OA vector, thumb points to OB vector, index finger points to OA vector, and middle finger points to OD vector according to the right hand rule. From the above rule, it is not difficult to see that when another vector is to the left of a vector, the direction of its cross product is the same as that of the plane normal vector, while when another vector is to the right of a vector, the direction of its cross product is opposite to that of the plane normal vector.
Knowing the left and right relations of two vectors can solve many classical graphics problems, such as solving whether a point in space is in a triangle (convex polygon) and splitting concave polygons into multiple convex polygons.
In the left figure, for any side vector (AB, BC, CA) of the triangle, the vector composed of its starting point and the space midpoint D is always on the left side of the side vector, so the point D is inside the triangle.
In the figure on the right, any concave polygon is connected to its vertices in turn to form a side vector, and then it is judged whether the former side vector is to the left of the latter. If so, the concave polygon can be divided into multiple convex polygons according to the latter side vector.
Returning to the topic, the included Angle between OB vector and OA vector is θ, and the modulus of OC vector can be obtained according to the formula for calculating the area of the parallelogram:
According to the definition of the cross product, it can be deduced that the cross product has the following properties:
- The cross product of an equal vector is the 0 vector;
The equal vectors coincide perfectly, and their parallelogram has an area of 0, which means that their cross product has a vector of size 0, and the vector of size 0 is the 0 vector.
- If I scale something in the cross product vector, the resulting vector will be scaled by the same amount;
- The cross product distributive property, the cross product of the sum of vectors is equal to the sum of the cross products;
This property is relatively difficult to understand, but it is not without tricks; Sometimes if a property is difficult to understand in general, you can directly look at its special case, as follows:
As shown in the figure above, OE vector, OF vector and OG vector are perpendicular to each other on Y-axis, X-axis and Z-axis respectively. If you plug these three vectors into the formula, it’s pretty clear that the distributive property of the cross product holds; If you add the OF vector to the OG vector you get the OH vector, cross the OH vector with the OE vector you get the OJ vector; So let’s see, the cross product OF OF and OE gives me OI, the cross product OF OG and OE gives me OF, and the sum OF OF and OI gives me OJ.
In other words, the cross-product distributive law is true for OE, OF, and OG, vectors OF length 1 that are perpendicular to each other.
It should be noted that the above special case is just my lazy practice in the learning process, mainly for the convenience of understanding, and does not prove the law of cross product distributive; So if you want to prove the distributive property of the cross product you can take any three vectors, and then you can put in some tools and see what happens, just like you did in the special case, so if you’re interested, you can try it out.
The geometric meaning of cross product and some basic properties are introduced, and then the specific calculation rules of cross product are obtained, that is, given the coordinates of point A (x1, y1, z1) and point B (x2, y2, z2), the specific coordinates of OC vector and OA vector cross product are obtained.
First, assume that the unit vectors on the X, Y and Z axes are I, j and K respectively:
OA vector and OB vector can be written as the sum of I, j, and K vectors:
According to the partition law of the cross product, the specific coordinates of the cross product result vector OC are finally obtained as follows:
matrix
The Matrix is a very mysterious and powerful virtual world in which humans are imprisoned in the Matrix, and the Matrix that we will discuss next is also very powerful. It is a very important and fundamental tool in 3D mathematics. A matrix is a rectangular block of numbers organized in rows and columns as shown in the figure below.
An M X N matrix is a rectangular block of numbers with M rows and N columns enclosed in parentheses. For example, the two matrices in the figure above are a 2 X 2 matrix and a 3 X 3 matrix. A matrix with the same number of rows and columns is also known as a square matrix, ThreeJS framework of the third-order matrix Matrix3 is 3 X 3 square matrix, the fourth-order matrix Matrix4 is 4 X 4 matrix; And the number of rows and the number of columns can be any positive integer, which means that the row vectors can be viewed as a matrix with 1 rows, and the column vectors can be viewed as a matrix with 1 columns.
Sometimes people also use square brackets containing blocks of numbers to represent matrices, which is also allowed; What really matters about a matrix is its properties, not its appearance.
Matrix multiplication
A matrix can be multiplied by a scalar, a matrix can be multiplied by a matrix, and a matrix with 1 row or 1 column is the same thing as a vector, so a matrix can be multiplied by a vector.
- Scalar times matrix, i.e. scalar times each element of the matrix, yields a new matrix, as follows:
In the figure above, k is the scalar and M is the matrix.
- Matrix times matrix, when you multiply two matrices you have to satisfy certain conditions; For example, matrix M times matrix N, the number of columns in matrix M is equal to the number of rows in matrix N; As follows:
In the figure above, M is the 3 X 2 matrix and N is the 2 X 2 matrix. The number of columns of matrix M is equal to the number of rows of matrix N, so matrix M can be multiplied by matrix N to produce a new matrix G; The new matrix G has rows equal to M and columns equal to N; And the ith row and JTH column of the new matrix G is the sum of the ith row of matrix M and the JTH column of matrix N; As shown in the figure, the elements of the first row and second column of the new matrix G are M11 * N12 + M12 * N22 and so on.
Matrix transformation
The powerful performance of matrix in 3D mathematics is that we can easily transform matrix, for example:
- rotating
In the figure above, we rotate the OA vector by θ degrees counterclockwise from the origin O as the reference point to obtain the OB vector. Given that the coordinates of point A are (x1, y1), the coordinates of point B are (x2, y2).
Firstly, rotation does not change the size of the vector, so the size of OA vector and OB vector are L:
Suppose that the included Angle between OA and X-axis is α, then:
Let the included Angle between OB and X-axis be β, then:
The coordinates of point B (x2, y2) can be calculated according to the above known variables and trigonometric function formula:
At this point, if we write the OA vector before rotation as a row vector (x1, y1), which is also a 1 X 2 matrix multiplied by some 2 X 2 matrix, as follows:
If m11=cosθ, m21=-sinθ, m12=sinθ, m22=cosθ, then the resulting 1 X 2 matrix can be viewed as row vectors, which are the same as the OB vector after the rotation of the OA vector, which means that the rotation transformation can be computed by matrix multiplication.
In a two-dimensional coordinate system, the Angle of θ rotated counterclockwise at the origin can be expressed as the following matrix:
- The zoom
Rotation transformations can be computed by matrix multiplication, and scaling transformations can be computed by the same way, for example:
In the figure above, the OA vector is shortened to n times of the original point O as the reference point to obtain the OB vector. Given that the coordinates of point A are (x1, y1), the coordinates of point B are (x2, y2).
It is easy to obtain the coordinates of point B according to geometric scaling, as follows:
Substitute matrix multiplication again:
When m11=n, m21=0, m12=0, m22=n, the new 1 X 2 matrix is regarded as a row vector, which is the same as OB vector after OA vector is shortened, that is, the scaling transformation can also be calculated by matrix multiplication.
In the two-dimensional coordinate system, scaling n times the original reference point at the origin can be expressed as the following matrix:
- Combination of transformation
The above transformation is a single transformation, a plurality of single transformation combined together, is still can be used to calculate the matrix, the combined transformation matrix is the product of a single transformation matrix.
For example, when rotation is first followed by scaling, the final transformation matrix is as follows:
So now you understand the power of matrices, that matrices can describe any linear transformation, and any combination of linear transformations can be expressed as matrix multiplication.
Linear transformation
A new concept is introduced into the matrix transformation linear transformation, which simply says that if all the lines in the coordinate system are still straight lines and the origin of the coordinate system is not changed after transformation, then the transformation is considered to be a linear transformation.
The common linear transformation is rotation, scaling and so on; It is important to note that not every rotation and scaling is a linear transformation, but rather the rotation and scaling based on the origin of the coordinate system is a linear transformation. For example:
In the figure, OA rotates α clockwise to obtain BD by taking a certain point C on OA as the reference point. At this point, the rotation transformation will change the origin of the coordinate system, so it is not a linear transformation. However, when OA takes the origin as the reference point clockwise β to obtain OE, the origin does not change, so it belongs to linear transformation.
In particular, it is important to note that translation is not a linear transformation, because translation changes the origin of the coordinate system as follows:
In the figure above, the vector OA is shifted by A certain distance m along the positive direction of the X-axis to obtain the vector CB. Given that the coordinates of point A are (x1, y1), the coordinates of point B are (x2, y2).
The translation along the positive X axis does not change the Y-axis coordinates, while the X-axis coordinate system is the original coordinates plus the translation distance, so the coordinates of point B are obtained as follows:
Substitute matrix multiplication:
We’re not going to be able to solve for m21, so we’re not going to be able to describe it in terms of matrices.
Homogeneous coordinates
The homogeneous coordinate is the addition of an extra dimension, N+1 dimension to represent the n-dimensional coordinate; After the coordinate is converted into homogeneous coordinate, the problem that can not be expressed by matrix multiplication can be solved.
First, the homogeneous coordinates are illustrated as follows:
In the two-dimensional coordinate system XY, there exists A point A whose coordinate is (x1, y1). We can place the two-dimensional coordinate system at A specific position of A virtual three-dimensional coordinate system, such as the position of w-axis is 1 in the three-dimensional space. At this point, point A in the virtual three-dimensional coordinate system can be represented as (x1, y1, 1). After adding an extra dimension, the coordinates of point A can be expressed in the form of (x1* W, y1*w, w), that is, multiply the original coordinate value by the new coordinate value W; Similarly, when we convert the known homogeneous coordinate to the original coordinate, we just divide the homogeneous coordinate by the new coordinate value W.
The coordinates of A (x1, y1) are expressed in the form of x1 times w, y1 times w, w, and there’s an infinite number of ways that w can change, and these are all homogeneous coordinates of A (x1, y1).
Then use homogeneous coordinates to solve the problem of representing translation transformations by matrices as follows:
So we have the same problem that OA is shifted by m in the positive X direction to get CB, and we know that A is x1, y1, and we know that B is x2, y2.
First, the coordinates of point A are converted to homogeneous coordinates (x1, y1, 1). The translation along the positive direction of X-axis does not change the Y-axis coordinates, while the X-axis coordinate system is the original coordinates plus the translation distance, so the homogeneous coordinates of point B are obtained as follows:
Write the OA vector as a row vector (x1, y1, 1), where it is a 1 x 3 matrix multiplied by some 3 x 3 matrix, as follows:
Substituting the obtained homogeneous coordinates of point B into the above matrix multiplication, you can find that when M11 =1, m21=0, m31=m, m12=0, m22=1, m32=0, m13=0, m23=0, m33=1, the translation transformation in the two-dimensional coordinate system can also be expressed as a matrix, as follows:
After the translational transformation is successfully converted into matrix form by homogeneous coordinates, the combined transformation with translational transformation still cannot be represented by matrix multiplication. Because the introduction of homogeneous coordinates causes the translation transformation to have one more dimension than other linear transformations; Take the two-dimensional coordinate system as an example, the other linear transformation matrix is 2 X 2 matrix, but the translation transformation matrix is 3 X 3 matrix. According to the principle that the number of columns of the former matrix is equal to the number of rows of the latter matrix, they cannot be multiplied; And the solution is that the other linear transformations also introduce homogeneous coordinates, and the resulting transformation matrix can be multiplied.
This is why there are four dimensional Vector4 and four dimensional Matrix4 in ThreeJS framework to deal with three dimensional problems; Because the homogeneous coordinate of three dimensional coordinate is four dimensional coordinate, and the corresponding transformation matrix of four dimensional homogeneous coordinate is four dimensional matrix.
Diagonal matrix
When we label the row and column numbers on the matrix elements; For example, the subscript of the elements in the first row and column is 11, and the subscript of the elements in the MTH row and column is mn, then a 3X3 square matrix is shown as follows:
The diagonal elements are the elements with the same row and column numbers in the square matrix, corresponding to A11, A22 and A33 in the figure above. The other elements are non-diagonal. If all the off-diagonal elements in a square matrix are 0, then the square matrix is also called a diagonal matrix, as follows:
Unit matrix
The identity matrix is a special diagonal matrix whose diagonal elements are all 1, usually denoted as I. Any matrix multiplied by the identity matrix is equal to itself. From the perspective of matrix transformation, that is, the matrix transformation of the identity matrix, there is no change before and after the transformation.
The determinant
The determinant of a matrix is also the “size” of a matrix, but not all matrices have a size, only square matrices with the same number of rows and columns have a size; The size of the vector represents the length of the vector, and the size of the square matrix represents the signed area of the parallelogram (two-dimensional coordinate system) and the signed volume of the parallelepiped (three-dimensional coordinate system) formed by the new vectors of the basis vector (coordinate axis unit vector) transformed by the square matrix in the coordinate system, and so on.
Take A 2X2 square matrix A as an example:
The basis vectors X and Y in the two-dimensional coordinate system are respectively multiplied by the square matrix A to obtain the new vectors, which are shown as follows:
The new vector after the transformation of the basis vector of X-axis is OC, and the new vector after the transformation of the basis vector of Y-axis is OD, and the signed area of the parallelogram composed of OC and OD vectors is the magnitude of matrix A, that is, the determinant of matrix A.
Signed means it can be positive or negative. In the figure above, the parallelogram of the transformed basis vectors is flipped relative to the parallelogram of the original basis vectors, so the determinant of square matrix A is equal to the negative of the area of the transformed basis vectors.
By carefully observing the transformed new vectors OC and OD and square matrix A in the above example, we can find that the square matrix is actually formed by the combination of transformed basis vectors, which is true for any square matrix and any dimension:
Given the square matrix, the transformed basis vectors OC and OD can be obtained, and then the determinant of the square matrix can be obtained according to the parallelogram area formula:
For a two-dimensional square matrix, the determinant is equal to the product of the diagonal elements minus the product of the antiangular elements.
Cofactors, algebraic cofactors
Assuming that matrix M has r rows and C columns, the matrix with r-1 rows and C -1 left after arbitrarily removing a row and a column is called the comatrix of matrix M, as follows:
In this example, row 1 and column 2 are removed, so the submatrix is denoted as {1,2}, or {I,j} if row I and column J are removed.
The algebraic cofactor is equal to the signed determinant of the corresponding cofactor, and the algebraic cofactor of the ith row and JTH column of square matrix M is calculated as follows:
It is necessary to use cofactors and algebraic cofactors to calculate the determinant of higher order square matrices. First select a row or column from the matrix, multiply each element of the row or column by the corresponding cofactor, and then add them up to get the determinant of the matrix.
Take the third order square matrix as an example:
Finding the determinant of any higher dimensional square matrix can be recursively transformed into finding the determinant of second order square matrix.
Transposed matrix
Suppose there are two matrices M and T:
Where, the transverse of matrix T is composed of the longitudinal rows of matrix M, and its longitudinal rows are composed of the transverse rows of matrix M, then matrix T is called the transpose matrix of matrix M, denoted as:
When the transpose is square on both sides it looks like it’s folded diagonally.
The result that the transpose of matrix multiplication is equal to the transpose of the matrix and then the reverse multiplication can be extended to any matrix multiplication:
Standard adjoint matrix
The standard adjoint matrix of a matrix is the transpose matrix of its algebraic cosubmatrix, denoted as adj. M; Take the third order square matrix as an example:
Inverse matrix
Given an n X n square matrix A, if there exists another n X n square matrix B such that A*B = B*A = I, where I is the n X n identity matrix, as follows:
Then square matrix A is invertible, and square matrix B is the inverse matrix of square matrix A, which can be expressed as follows:
The inverse matrix is usually used for transformation and restoration. For example, some vector V is transformed by matrix M. If you want to restore it, you only need to use the inverse matrix of matrix M for transformation:
The inverse of a matrix is equal to its standard adjoint divided by its determinant:
The above formula is meaningless when the determinant of a matrix is zero, so not all matrices have inverse matrices, and detecting the value of the determinant is an effective way to determine whether a matrix is invertible.
The detailed process of finding the inverse matrix of matrix A through the above method is as follows:
Orthogonal matrix
For A matrix A, if its permutation matrix is equal to its inverse, the matrix A is called orthogonal:
Given that a matrix is an orthogonal matrix, its inverse matrix can be obtained quickly according to the above properties. Take rotation transformation as an example (rotation matrix is orthogonal matrix) :
In the two-dimensional coordinate system, OA rotates θ Angle counterclockwise from the origin as the reference point to OB, and the rotation matrix is as follows:
The inverse matrix is also the inverse rotation matrix of the above rotation. According to the properties of the orthogonal matrix, the rotation matrix of OB rotating θ Angle clockwise from the origin to OA is:
Inverse matrix
For a certain matrix M, the inverse matrix is calculated first, then the transpose matrix of the inverse matrix is calculated, and finally the matrix is the inverse transpose matrix of the matrix M.
The inverse transpose matrix is related to the normal vector transformation:
The figure above is the vertical view of z-axis of a 3D coordinate system. There is a plane in the coordinate system, P1 and P2 are two points on the plane, and vector N is its normal vector. If the plane is scaled by a factor of 0.5 in the X-axis, the X-axis coordinates of all points on the plane are scaled by a factor of 0.5 in the X-axis. But the transformation of the normal vector is a little bit different than the transformation of the point; If the normal vector were also scaled by 0.5 times on the X-axis, it would look like the middle figure, but the plane normal vector should always be perpendicular to the plane, so it would actually look like the right figure.
The reason is that the normal vector transformation matrix should be the inverse matrix of the vertex transformation matrix, and the proof process is as follows:
Through the above examples can be understood, the proof process can understand the best, in case you do not understand it does not matter.
It is known that P1 and P2 are two points on the plane. Moving from point P1 to point P2 is represented as vector T (T1, T2, t3), and the normal vector of the plane is N (n1, n2, n3) :
After the transformation of the plane by some matrix M, the vector T becomes vector T’ (T1 ‘, T2 ‘, t3′), and the normal vector of the plane is N’ (n1′, n2′, n3′) :
The normal vector of the plane is always perpendicular to the plane, so vector N is perpendicular to vector T, and vector T’ is perpendicular to N’, that is, their dot product is 0:
If a vector is regarded as a matrix, it can be obtained in the same way:
The matrix M multiplied by its inverse is the identity matrix I, and the vector T transformed by the matrix M is T’ :
If the two equations are equal, :
That’s it.
projection
In the above we learned the world coordinate system and object coordinate system, understand the two coordinate system we can correctly use ThreeJS transformation method; But ThreeJS isn’t the only coordinate system in ThreeJS, it also includes camera coordinates and screen coordinates.
When we add a camera to the scene and shoot the scene, it is equivalent to redescribing the scene from the camera’s perspective, and finally imaging it on the screen in some projection mode, as shown in the picture below:
O is the object coordinate system, W is the world coordinate system, C is the camera coordinate system, and S is the screen coordinate system. Redescribing the scene from the camera’s perspective is equivalent to transforming the scene from the world coordinate system to the camera coordinate system. The transformation matrix is called view matrix. Finally, the camera projects the scene it observes onto the screen, which is equivalent to a projection transformation. This transformation matrix is called the projection matrix.
The view matrix
The three axes in the camera coordinate system are the camera Y axis (up direction), the camera Z axis (opposite direction of the camera line of sight) and the camera X axis (right direction) as shown in the example figure. When initializing the camera, we set the camera position P (P1, P2, P3), camera focus Q (Q1, Q2, Q3) and camera upper direction vector U (UX, Uy, uz).
According to the above conditions, the unit vector F (FX, fy, fz) of camera Z axis (opposite direction of camera line of sight) can be obtained:
Then the camera’s Y-axis vector is known, and the cross product vector of z-axis and Y-axis is X-axis vector S (sx, SY, sz) :
The view matrix transforms the field from the world coordinate system to the camera coordinate system; In the camera coordinate system, the camera is located at the origin of the coordinate system O (0,0,0), and the unit vector of the Y-axis is (0,1,0), the unit vector of the z-axis is (0,0,1), and the unit vector of the X-axis is (1,0,0). So after the view matrix transformation, U becomes Y, F becomes Z, S becomes X, and P moves to O; As shown below:
Then the view matrix can be split into a mixed transformation of translation and rotation; Point P moves to point O, and the translation matrix is as follows:
Then you rotate the U vector to Y, F vector to Z, and S vector to X; The inverse transformation of the rotation transformation can be obtained first, that is, Y vector becomes U vector, Z vector becomes F vector, and X vector becomes S vector. The basis vector transformation matrix is composed of the transformed basis vectors:
Since the rotation matrix is orthogonal, its inverse matrix is equal to its transpose matrix. According to the law of transpose matrix, it can be obtained:
Finally, the view matrix is obtained as follows:
Projection matrix
The projection matrix will transform the scene in the camera coordinate system to the projection plane, taking perspective projection as an example:
The relevant parameters of perspective projection camera jointly determine the visual area of the camera, also known as the visual cone; Only the scene inside the cone can be observed by the camera and displayed on the projection plane, other parts will be cropped out during projection transformation; However, clipping in the visual cone is not that easy and needs to be converted to a regular observation body:
As shown in the figure above, the regular observation body is a cube, and the range of x, y and z is [-1,1].
To transform the visual cone into a regular observing body, the central axis of the visual cone should be taken as the center to compress its far plane inward until it is completely the same size as the near plane and the Z axis position of the far plane remains unchanged, as follows:
Because 3D space transformation is more complex, according to the convention of dimensionality reduction, observe from a certain section first; From the view of XZ section, for a point P (XP, yp, ZP) on the far plane of the visual cone, when the visual cone is compressed inward, it will move to the position of N point:
According to the properties of similar triangles:
In the same way:
In the above example, point P is exactly on the far plane, and the Z axis of the far plane remains unchanged according to the compression inward, then point N is also on the far plane, so it is obvious that Zn = zp; However, for any points in the visual cone, after inward compression, we cannot guarantee that they have the same properties as the z-axis of the far-plane points. Therefore, the above law is extended to any point P in the visual cone, and the coordinates of the new position N after its inward compression are as follows:
Convert to homogeneous coordinates:
The backward derivation of the inward compression matrix Mc is:
In addition, the z-axis of the points on the far and near planes of the visual cone remains unchanged after inward compression, that is to say:
Finally, the inner compression transformation matrix of the apparent cone centered on the central axis is as follows:
Compress the visual cone inward with the central axis as the center to get a cube, and then move the center of the cube to the origin of the coordinate system:
Given the distance between the near plane and the far plane, the coordinate of the center point of the cube C (0,0, -far/2-near/2) can be obtained, and its translation matrix Mt to the origin of the coordinate system is as follows:
Finally, the cube translated to the origin of the coordinate system needs to be scaled so that its range of X, y and z is [-1,1] :
The width of the near plane is W and the height is H, and the horizontal width is equal to the distance of the far plane minus the distance of the near plane, then the scaling matrix Ms is as follows:
The visual cone is transformed into a regular observation body, and the z-axis coordinates of the object in the transformed scene are its coordinates on the projection plane. Therefore, the final projection transformation matrix Mp = Mc * Mt * Ms:
Viewport transformation matrix
After calculating the coordinates of the object on the projection plane, the last step is to convert the coordinates of the projection plane to screen coordinates, also known as viewport transformation:
In the figure, the right is the screen coordinate system, starting from the lower left corner of the screen, with X-axis moving horizontally to the right and Y-axis moving vertically upwards. Assuming that the screen width is width and the height is height, the screen coordinate system needs to be converted from the projector coordinate system to the screen coordinate system by scaling and then translation. The transformation matrix is as follows:
To be continued
Finally, I would like to recommend my own booklet:
