preface

Recently, I have been learning computer graphics to lay a foundation for learning WebGL. The following are the notes of the course introduction to Modern Computer Graphics by Mr. Yan Lingqi + his own summary and perception.

There are two types of transformations in WebGL:

  • Modeling– Modeling
  • Viewing– View transformation

Here are some examples of model transformations:

1. For example, in a static model, the camera is moving2. Another example is a robot model dancing

An important example of view transformation is projection, as shown in the figure: put a camera where the human eye is, and then take a picture, and the 3d scene will be transformed into a 2D picture. The transformation from 3D to 2D is projection.

The principles involved require some mathematical knowledge of linear algebra. Linear algebra is a part of higher mathematics, and its research objects are vectors and matrices. Let’s talk about how WebGL relates to vectors and matrices.

Linear transformation

Linear space

First, WebGL is an application API for generating 3d graphics effects on the Web. Three-dimensional figures, of course, move in three dimensions, the Spaces we are most familiar with and live in.

So the question is: what is space, or what is the definition of space? “, mathematically speaking, roughly “space is a set that defines certain concepts and has certain properties”. For example, if a linear space defines a norm, a normed linear space is formed.

So what are the characteristics of space? In three dimensions, for example:

  • It’s made up of a bunch of points
  • In space you can define such concepts as length, Angle, and direction
  • Space can have motion (transformation), that is, movement from one point to another (not continuous motion in the calculus sense).
  • .

The most important of these is the third point: there is movement (transformation) in space, which is literally the essence of space. Therefore, no matter three-dimensional space, or any other space, must exist and support regular motion (transformation). For example, there are linear transformations in linear space, and there are topological transformations in topological space. These transformations are the motions that are allowed in the corresponding space.

So space is simply a set of motions, and transformations define the motions of the corresponding space.

A linear space is also a space, of course, a collection of objects, and any object in a linear space can be expressed as a vector by choosing a basis and coordinates. So vectors are pretty cool, if you find the right basis, vectors can represent any object in linear space.

Let’s start with a blank space:

Pick a random point as the origin, and use the origin as a vector with two unit orthogonality (starting in two dimensions)So at some point on the plane, I can write it like this:

So any point on the whole two-dimensional plane can obviously pass through
a i + b j ai + bj Is represented by. In mathematical terms, the entire two-dimensional plane is theta
i . j i, j The span of linear space. Such as:

if
i . j i, j It’s not orthogonal, it’s not the same length, it still spans the entire two-dimensional space, but the grid is different

This is a big revelation. So, for example, let’s talk about the rotation transformation
T r o t a t e x ⃗ = x ⃗ ‘ T_{rotate} \vec x = \vec x’

Before the conversion:After the transformation:In the whole transformation process
x ⃗ \vec x In order to
i ⃗ . j ⃗ \vec i, \vec j The coordinates of the basis are not transformed. but
i ⃗ . j ⃗ \vec i, \vec j The rotation of these two bases causes
x ⃗ \vec x The transformation takes place.

That is to say,
x ⃗ = 2 i ^ + 2 j ^ \vec x = 2\hat i + 2\hat j , after transformation
x ⃗ ‘ = 2 i ^ t + 2 j ^ t \vec x’ = 2\hat i_t + 2\hat j_t And I’m going to write my transformed basis in terms of my original basis
i ^ t \hat i_t =
[ 0 1 ] \begin{bmatrix} {0}\\ {1}\\ \end{bmatrix} .
j ^ t \hat j_t =
[ – 1 0 ] \begin{bmatrix} {-1}\\ {0}\\ \end{bmatrix} , so after transformation, the new vector is
x ⃗ ‘ = \vec x’ = 2
[ 0 1 ] \begin{bmatrix} {0}\\ {1}\\ \end{bmatrix} + 2
[ – 1 0 ] \begin{bmatrix} {-1}\\ {0}\\ \end{bmatrix} =
[ – 2 2 ] \begin{bmatrix} {-2}\\ {2}\\ \end{bmatrix} . will
i ^ t \hat i_t and
j ^ t \hat j_t Put them all together to form a 2 by 2 matrix
[ 0 – 1 1 0 ] \begin{bmatrix} {0}&{-1}\\ {1}&{0}\\ \end{bmatrix} In fact, it is [
i ^ t \hat i_t .
j ^ t \hat j_t ] =
T r o t a t e T_{rotate} .

So TrotateT_{rotate}Trotate actually changes the base, Bj ⃗, where x ⃗ = ai ⃗ + x ⃗ ‘= ai ⃗ bj ⃗’ + ‘\ vec x = \ vec j, a \ vec (I) + b \ vec x’ = a \ vec I + b \ vec j ‘ai + x = bj, x’ = ‘ai + bj’, With TrotateT_{rotate}Trotate I ⃗ — I ⃗ ‘, j⃗ — j⃗ ‘\vec I — \vec I ‘, \vec j — \vec j’ I — I ‘, j — j’

TrotateT_{rotate}Trotate is a description of motion in a space. It is expressed as a matrix.

Therefore, in linear space, after a set of basis is selected, not only vectors can be used to describe objects in the space, but also matrices can be used to describe any movement (transformation) in the space. And the way to make something move is to multiply the matrix that represents the motion times the vector that represents the object.

That’s why WebGL starts with vectors and matrices.

vector

The most fundamental and fundamental component of linear algebra is vectors. Vector is high school mathematics knowledge, I believe we have learned, here is no longer wordy, just to help you recall the knowledge.

1. Vector: a quantity with both magnitude and direction, called AB⃗\vec {AB}AB or a⃗\vec aa, which is called a vector in physics. Vector is usually represented by directed line segment, but it can not be said that vector is directed line segment, because vector is “free”, can be translated and so on. A directed line segment, on the other hand, has a fixed beginning and end and cannot be moved.

2, vector modulus: vector size is also called vector modulus, refers to the length of the vector directed line segment. Remember: ∣ AB ⃗ ∣ | \ vec {b} | ∣ AB ∣ or ∣ a ⃗ ∣ | \ vec a | ∣ ∣ a. Vectors themselves can’t compare to magnitude, only the magnitude of a vector can compare to magnitude.

3. Zero vector: the vector whose modulus is 0 is called zero vector, denoted as 0⃗\vec 00. The characteristic of zero vector is that the direction is arbitrary, that is to say, it is parallel to all vectors

4. Unit vector: a non-zero vector whose module is 1 unit length is called a unit vector. For example, in a two-dimensional coordinate system, the vector pointing straight to the right is called I ^\hat II ^, and the vector pointing straight up is called J ^\hat JJ ^. I ^\hat II ^ and j^\hat jj^ are called bases for two-dimensional coordinate systems.

5. Vector representation: Any vector a⃗\vec aa in the coordinate system formed by these two special basis vectors can be expressed as a⃗=xi⃗+yj⃗=\vec a =x \vec I +y \vec j = a =xi +yj = [xy]\begin{bmatrix} {x}\\ {{y} \ \ \ end bmatrix} [y], when ∣ a ⃗ ∣ = x2 + y2sin theta | \ vec a | = \ SQRT {x ^ 2 + y ^ 2} sin \ theta ∣ a ∣ = x2 + y2 sine theta. Remember that whenever a vector is described numerically, it depends on the basis being used.

Linear operations on vectors

1. Vector addition:

It can be concluded from the figure that:
u ⃗ + v ⃗ = w ⃗ = ( u x + v x . u y + v y ) \vec u + \vec v = \vec w = (u_x + v_x, u_y + v_y)

2, vector subtraction: extrapolate, subtraction is as follows: u ⃗ = w ⃗ ⃗ – v = (wx – vx, wy – vy) – \ \ vec u = \ vec w vec v = (w_x – v_x, w_y – v_y) – v u = w = (wx – vx, wy – vy)

Vector addition and subtraction algorithm:

  • Triangle rule
  • The parallelogram rule

3. Dot the vector

  • Given two non-zero vectors a⃗\vec aa and b⃗\vec bb and their Angle θ\thetaθ, Then a ⃗ ∗ ⃗ = b ∣ a ⃗ ∣ ∗ ∣ ⃗ b ∣ cosine theta, vec a *, vec = | b, vec | | | * \ vec b cos \ theta a ∗ b = ∣ a ∣ ∗ ∣ b ∣ cosine theta.

Prove, using the law of cosines:
∣ C ⃗ ∣ 2 = ∣ A ⃗ ∣ 2 + ∣ B ⃗ ∣ 2 – 2 ∣ A ∣ ∣ B ∣ c o s Theta. |\vec C|^2 = |\vec A|^2 + |\vec B|^2 – 2|A||B|cos \theta

In addition, there are:
∣ C ⃗ ∣ 2 = C ⃗ ∗ C ⃗ = ( A ⃗ – B ⃗ ) ∗ ( A ⃗ – B ⃗ ) = A ⃗ ∗ A ⃗ + B ⃗ ∗ B ⃗ – 2 A ⃗ ∗ B ⃗ |\vec C|^2 = \vec C * \vec C = (\vec A – \vec B) * (\vec A – \vec B) = \vec A * \vec A + \vec B * \vec B – 2\vec A * \vec B

By comparing the two formulas, we can get:
A ⃗ ∗ B ⃗ = ∣ A ⃗ ∣ ∣ B ⃗ ∣ c o s Theta. \vec A * \vec B = |\vec A||\vec B|cos\theta

  • Commutative, distributive, not associative
  • When the Angle is 90 degrees, the dot product of these two vectors is 0, they’re orthogonal.

Vector dot products are more easily defined in Cartesian coordinates: multiply and add the corresponding elements a⃗∗b⃗=∑xiyi\vec a * \vec b = \sum{x_i y_i}a ∗b =∑xiyi. For example, two vectors a⃗\vec aa and b⃗\vec bb: 1. In two dimensions, A ⃗ ∗ b ⃗ \ vec a * \ vec ba ∗ b = \ [xaya] begin {bmatrix} {x_a} \ \ \ \ \ end {bmatrix} {y_a} [xaya] * \ [xbyb] begin {bmatrix} {x_b} \ \ {y_b}\\ end{bmatrix}[xbyb] = xaxb+yaybx_ax_b + y_ay_bxaxb+yayb A ⃗ ∗ b ⃗ \ vec a * \ vec ba ∗ b = \ [xayaza] begin {bmatrix} {x_a} \ \ \ \ {y_a} {bmatrix} {z_a} \ \ \ end ⎣ ⎢ ⎡ xayaza ⎦ ⎥ ⎤ * \ [xbybzb] begin {bmatrix} {x_b} \ \ \ \ {y_b} {z_b} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ xbybzb ⎦ ⎥ ⎤ = xaxb + y_ay_b zazbx_ax_b yayb + + + z_az_bxaxb+yayb+zazb

The meaning of dot product has two important functions in graphics:

  • Find the Angle between two vectors or the Angle between cosines
  • You get the projection of one vector onto another vector

Let’s say I have a beam of light perpendicular to a vector
a ⃗ \vec a Irradiation, vector
b ⃗ \vec b Naturally a shadow will be drawn in the vector
a ⃗ \vec a Here it is
b ⃗ \vec b in
a ⃗ \vec a The projection on theSo if YOU look at the picture, how do you compute this
b ⃗ \vec b in
a ⃗ \vec a The projection onto — called
b tau ⃗ \vec {b_{\tau}} (The symbols in the picture cannot be typed), the following conclusions can be drawn from the picture:

  • B τ⃗\vec {b_{tau}}bτ must be in the same direction as a⃗\vec aa
  • Use a to represent a⃗\vec aa unit vector, then bτ⃗=ka\vec {b_{\tau}} = kabτ =ka
  • B τ⃗\vec {b_{tau}}bτ and b⃗\vec bb form a right triangle

According to the above conclusions, it can be concluded that: K = b ∣ tau ⃗ ∣ = b ∣ ⃗ ∣ cosine theta k = | \ vec {b_ {\ tau}} | = | \ | vec b cos \ thetak = b ∣ tau ∣ = ∣ b ∣ cosine theta, Again because the cosine theta equals a ⃗ ∗ b ⃗ ∣ a ⃗ ∣ ∗ ∣ ⃗ b ∣ cos \ theta = \ frac {\ vec a * \ vec b} {| \ vec | | | * \ vec b} cosine theta equals ∣ a ∣ ∗ ∣ b ∣ a ∗ b come to k = a ⃗ ∗ b ⃗ ∣ a ⃗ ∣ k = * \ \ frac {\ vec a vec b} {| \ vec a |} k = ∣ ∣ a ∗ b a

The dot product also gives you one important piece of information, the direction of the two vectorsAs shown, to vector
a ⃗ \vec a As the starting point, a circle is formed. The circle is divided into two parts: the upper part and the lower part. vector
b ⃗ \vec b Theta is the one that falls in the top half, you could say the vector 3, 2
a ⃗ \vec a And the vector
b ⃗ \vec b Sort of in the same direction. Otherwise such as vector
c ⃗ \vec c With the vector
a ⃗ \vec a Basically the opposite direction. That’s what the dot product tells you.

4. Cross product

The result of this multiplication is a vector:
a ⃗ \vec a x
b ⃗ = c ⃗ \vec b = \vec c , the vector
c ⃗ \vec c Is the size of the
∣ c ⃗ ∣ = ∣ a ⃗ ∣ ∣ b ⃗ ∣ s i n Theta. |\vec c| = |\vec a||\vec b| sin \theta , the vector
c ⃗ \vec c The direction of is dictated by the “right hand rule” : the four fingers of the right hand point to the vector
a ⃗ \vec a And then all four fingers bend towards the second vector
b ⃗ \vec b The direction of theta, the thumb direction is the vector
c ⃗ \vec c The direction of the.And if you apply this rule,
a ⃗ \vec a x
b ⃗ \vec b As it happens and
b ⃗ \vec b x
a ⃗ \vec a In the opposite direction, so the cross product of a vector does not satisfy the commutative law.

The cross product of a vector can be used to establish a rectangular coordinate system in three dimensions. For example, given an X-axis and a Y-axis, the X-axis cross the Y-axis to get the X-axis. You get the X-axis by crossing the z-axis with the Y-axis

Vector cross products can also be expressed with algebra, if vector a ⃗ = \ vec a = a = \ [xayaza] begin {bmatrix} {x_a} \ \ \ \ {y_a} {bmatrix} {z_a} \ \ \ end ⎣ ⎢ ⎡ xayaza ⎦ ⎥ ⎤, Vector ⃗ = b \ vec = b = b \ [xbybzb] begin {bmatrix} {x_b} \ \ \ \ {y_b} {z_b} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ xbybzb ⎦ ⎥ ⎤, So a⃗\vec aa xb ⃗=\vec b =b = [yazb−ybzazaxb− Xazbxayb −yaxb]\begin{bmatrix} {y_az_b – y_bz_A}\\ {z_ax_b – x_AZ_b}\\ {{x_ay_b – y_ax_b} \ \ \ end bmatrix} ⎣ ⎢ ⎡ yazb – ybzazaxb – xazbxayb – yaxb ⎦ ⎥ ⎤ = A ∗ b ⃗ A * \ vec bA ∗ = b \ [0 – zayaza0 – xa – yaxa0] begin {bmatrix} {0} and {- z_a} and {y_a} \ \ {z_a} and {0} and {- x_a} \ \ {- y_a} and {x_a} and {0} \ \ {bmatrix} \ end ⎣ ⎢ ⎡ 0 za – ya – za0xaya – xa0 ⎦ ⎥ ⎤ \ [xbybzb] begin {bmatrix} {x_b} \ \ \ \ {y_b} {z_b} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ xbybzb ⎦ ⎥ ⎤

The cross product in graphics

  • Determine left and right
  • Determine inside and out

So let’s say on the left hand side, you want to know the vector 1, 2
b ⃗ \vec b In the vector
a ⃗ \vec a To the left or to the right of PI, or the vector 1, 2
a ⃗ \vec a Clockwise or counterclockwise.

if
a ⃗ \vec a x
b ⃗ \vec b If the result of alpha is positive, that means that
b ⃗ \vec b in
a ⃗ \vec a The left side.

Determine whether point P is inside the triangle as shown on the right. if

  • A⃗B\vec ABA B x A⃗P\vec APA P results in A⃗P\vec APA P to the left of A⃗B\vec ABA B
  • B⃗C\vec BCB C x B⃗P\vec BPB P ⃗P\vec BPB P is to the left of B⃗C\vec BCB C
  • C⃗A\vec CAC A x C⃗P\vec CPC P the result is C⃗P\vec CPC P on the left of C⃗A\vec CAC A

So you can say that point P is inside the triangle, that’s the basis of rasterization, and to determine which pixels are covered by a triangle, you have to determine whether those pixels are inside the triangle.

matrix

The definition of a matrix, as mentioned above, is to describe any motion in space, namely transformation.

Matrix is expressed as [135204] \ begin {bmatrix} {1} and {3} \ \ {5} and {2} \ \ {0} and {4} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ 150324 ⎦ ⎥ ⎤ matrix, which is called by (3 x 2) 3 row 2 column.

(N x P) = (M x P) example: [135204] \ begin {bmatrix} {1} and {3} \ \ {5} and {2} \ \ {0} and {bmatrix} {4} \ \ \ end ⎣ ⎢ ⎡ 150324 ⎦ ⎥ ⎤ * [36942783] \ begin {bmatrix} {3}&{6}&{9}&{4}\\ {2}&{7}&{8}&{3}\\ \end{bmatrix}[32679843] = [9273313194461268283212]\begin{bmatrix} {9} and {27} and {33} and {13} \ \ {19} and {44} and {61} and {and} \ \ {8} and {and} and {32} and {12} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ 9198274428336132132612 ⎦ ⎥ ⎤

For example, 13 in the first row and fourth column of the result is obtained by multiplying the first row [1 3] of the first matrix and the fourth column [4 3] of the second matrix by adding 1∗4+3∗31*4 +3 *31∗4+3∗3.

Matrices obey associative and distributive laws, not commutative laws.

So how do matrices and vectors combine in the same way? And that is to represent the vector as an N x 1 matrix, so that the matrix can be multiplied by the vector.

For example, in two dimensions, a vector is transformed symmetrically along the Y-axis: \ [- 1001] begin {bmatrix} {1} and {0} \ \ {0} and {1} \ \ \ end {bmatrix} [- 1001] [y] \ begin {bmatrix} {x} \ \ {} y \ \ \ end [y] = {bmatrix} \ [- xy] begin {bmatrix} {x} – \ \ {} y \ \ \ end {bmatrix} [- xy]

Matrices also have several properties: rotational rank

The dot product and the cross product of a vector can both be represented as matrix multiplication

Model transformation

What is a linear transformation?

In fact, transformation is just a way of saying function; You take a number, and you print the result, and in linear algebra, that number is a vector. It’s going to take a vector and output a vector. The term transformation is presumably used to visualize this input-output relationship in a specific way. It seems to be saying that vector becomes another vector by motion.

A transformation is called a linear transformation if it has two properties:

  • A line remains straight after transformation and cannot be bent
  • The origin must remain fixed

In general, a linear transformation can be regarded as a transformation that keeps the grid lines parallel and equally spaced.

Scale– Scale transformation

As shown: the figure on the left passes by
S 0.5 S_} {0.5 The x and y axes are scaled by a factor of 0.5 since it is in a two-dimensional coordinate system.

The equations are as follows


x ‘ = s x y ‘ = s y x^{‘}=sx\\ y^{‘}=sy\\

Expressed in the matrix way [x ‘y’] \ begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ \ end {bmatrix} [x ‘y’] = [s00s] \ begin {bmatrix} {s} and {0} \ \ {0} and {s} \ \ \end{bmatrix}[s00s] [xy]\begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}[xy]

As you can see, if the X-axis is scaled 0.5 times the Y-axis, the expression becomes
[ x ‘ y ‘ ] \begin{bmatrix} {x^{‘}}\\ {y^{‘}}\\ \end{bmatrix} =
[ s x 0 0 s y ] \begin{bmatrix} {s_{x}}&{0}\\ {0}&{s_{y}}\\ \end{bmatrix}
[ x y ] \begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}

The scale transformation has a special transformation called the reflection transformationAs shown in the figure, the graph is transformed symmetrically with respect to the Y-axis, that is, the X-axis is reversed and the Y-axis remains unchanged:
[ x ‘ y ‘ ] \begin{bmatrix} {x^{‘}}\\ {y^{‘}}\\ \end{bmatrix} =
[ – 1 0 0 1 ] \begin{bmatrix} {-1}&{0}\\ {0}&{1}\\ \end{bmatrix}
[ x y ] \begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}

Shear – Shear

As shown in the figure, the square with both sides of length 1 is transformed into a parallelogram. By comparing the left and right diagrams, it can be found that the Y-axis coordinates have not changed, and the X-axis at the bottom of the figure has not changed. Only the X-axis at the top is added with a, so the left side of the x of the middle points should be added with AY to list the equations


x ‘ = x + a y y ‘ = y x^{‘}=x + ay\\ y^{‘}=y\\

Expressed in the matrix way [x ‘y’] \ begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ \ end {bmatrix} [x ‘y’] = \ [1 a01] begin {bmatrix} {1} and {a} \ \ {0} and {1} \ \ \end{bmatrix}[10a1] [xy]\begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}[xy]

Rotate- Rotation transformation

To simplify the rotation transformation, let me make two definitions

  • If I don’t specify, I think I’m rotating around the origin (0,0)
  • As long as the specific direction of rotation is not made, it is considered counterclockwise

A square of side length 1, as shown here, rotates around the origin (0,0), rotates
Theta. \theta Point of view. A goes from (1, 0) to PI
A ‘ ( c o s Theta. . s i n Theta. ) A^{‘}(cos \theta, sin \theta) B goes from 0, 1 to PI
B ‘ ( – s i n Theta. . c o s Theta. ) B^{‘}(-sin\theta, cos\theta)

So you can write out the system


x ‘ = c o s Theta. x – s i n Theta. y y ‘ = s i n Theta. x + c o s Theta. y x^{‘}=cos\theta x – sin\theta y\\ y^{‘}=sin\theta x + cos\theta y\\

Conclusion matrix [x ‘y’] \ begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ \ end {bmatrix} [x ‘y’] = [cosine theta – sine theta sine theta cosine theta] \ begin {bmatrix} {cos {\ theta}} and {- sin {\ theta}} \ \ {sin {\ theta}} and {cos {\ theta}} \ \ \ end {bmatrix} [cosine theta sine theta – sine theta cosine theta] [y] \ begin {bmatrix} {x} \ \ {y}\\ \end{bmatrix}[xy]

The nature of the linear transformation follows from the examples above, that in two dimensions, moving from A to A ‘A^{‘}A’ can be solved by listing A set of equations


x ‘ = a x + b y y ‘ = c x + d y x^{‘}=ax + by\\ y^{‘}=cx + dy\\

These equations can be expressed as matrices: \ [x ‘y’] begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ \ end {bmatrix} [x ‘y’] = [abcd] \ begin {bmatrix} {a} and {b} \ \ {c} and {d} \ \ \end{bmatrix}[acbd] [xy]\begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}[xy]

X ⃗ ‘=Mx⃗\vec x^{‘} =M \vec xx’ =Mx. The meaning in geometry is that x⃗\vec xx moves to x⃗ ‘\vec x^{‘}x’ by M, which confirms the previous conclusion.

Translation– Translation transformation

After the introduction above, the translation transformation is very simple. The object is shifted txt_xtx, tyt_yty, which is geometrically the x-coordinate plus TXt_xtx, and the y-coordinate plus tyt_yty. Solution of equations


x ‘ = x + t x y ‘ = y + t y x^{‘}=x + t_x\\ y^{‘}=y + t_y\\

Since txt_xtx and tyt_yty are constants, the equations cannot be written as x⃗ ‘=Mx⃗\vec x^{‘} =M \vec xx’ =Mx. Can only be written as x ⃗ ‘= Mx ⃗ + t \ vec x ^ {‘} = M \ vec x + tx’ = Mx + t expressed by matrix form is’ y ‘[x] \ begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ \ end {bmatrix} [x’ y ‘] = [abcd]\begin{bmatrix} {a}&{b}\\ {c}&{d}\\ \end{bmatrix}[acbd] [xy]\begin{bmatrix} {x}\\ {y}\\ \end{bmatrix}[xy] + [txty]\begin{bmatrix} {t_{x}}\\ {t_{y}}\\ end{bmatrix}[txty] It’s amazing how a translation is not a linear transformation, because in a linear space you represent things in terms of vectors, and vectors have translational invariance, which means that if you move a vector to a certain point and it doesn’t change direction or magnitude, it doesn’t change at all. But mathematicians were not content to treat translation as a special treatment alone. They still wanted to treat it in unitary terms with linear transformations. So we introduced homogeneous coordinates.

Homogeneous coordinates

Mathematicians have found that by adding a latitude to each coordinate, let’s say in two dimensions

  • The point is (x, y, 1).
  • The vector is x, y, 0.

The translation can be expressed as: \ [x ‘y’ w ‘] begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ ^ {‘} {w} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ x ‘y’ w ‘⎦ ⎥ ⎤ = tx01ty001 [10] \ begin {bmatrix} {1} and {0} and {t_ {x}} \ \ {0} and {1} and {t_ {y}} \ \ {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎡ 100010 txty1 ⎦ ⎥ ⎤ [x + + ty1 txy] \ begin {bmatrix} {x + t_ {x}} \ \ {y + t_ {y}} \ \ {1} {bmatrix} \ end ⎣ ⎢ ⎡ x + txy + ty1 ⎦ ⎥ ⎤

This can be written as x⃗ ‘=Mx⃗\vec x^{‘} =M \vec xx’ =Mx.

And the introduction of homogeneous coordinates separates points from vectors, because vectors have translation invariance, as I said above. The formula above was shifted so that x became x+ TXX + T_xx +tx, and y became y+tyy+ T_yy +ty, which is not allowed in vectors. So the representation of the vector x, y, 0 is to protect its translation invariance

When homogeneous coordinates are added, it is possible to combine a linear transformation with a translation, and mathematicians call this transformation Affine. The homogeneous coordinate form is: \ [x ‘y’ w ‘] begin {bmatrix} {x ^ {‘}} \ \ {y ^ {‘}} \ \ ^ {‘} {w} {bmatrix} \ \ \ end ⎣ ⎢ ⎡ x ‘y’ w ‘⎦ ⎥ ⎤ = \ [abtxcdty001] begin {bmatrix} {a} and {b} and {t_ {x}} \ \ {c} and {d} and {t_ {y}} \ \ {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎡ ac0bd0txty1 ⎦ ⎥ ⎤ [x + + ty1 txy] \ begin {bmatrix} {x + t_ {x}} \ \ {y + t_ {y}} \ \ {1} {bmatrix} \ end ⎣ ⎢ ⎡ x + txy + ty1 ⎦ ⎥ ⎤

The linear transformation introduced last time is changed to the following form: S(sx,sy)S({s_x, s_y})S(sx,sy) = [sx000sy0001]\begin{bmatrix} {s_{x}}&{0}&{0}\\ {0}&{s_{y}}&{0}\\ {0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎡ sx000sy0001 ⎦ ⎥ ⎤

2, Rotation: R (theta R (\ thetaR (theta) $= [cosine theta – sine theta 0 sine theta cosine theta 0001] \ begin {bmatrix} {cos {\ theta}} and {- sin {\ theta}} and {0} \ \ {sin {\ theta}} and {cos {\ theta}} and {0} \ \ {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎡ cosine theta sine theta 0 – sine theta cosine theta 0001 ⎦ ⎥ ⎤

3, Translation: T(tx,ty)T(t_x, t_y)T(tx,ty) = [10tx01ty001]\begin{bmatrix} {1}&{0}&{t_{x}}\\ {0}&{1}&{t_{y}}\\ {0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎡ 100010 txty1 ⎦ ⎥ ⎤

Transform combination

How does the picture on the left translate to the picture on the right? It’s simply translation plus rotation, should that be translation before rotation or rotation before translation?

If translation is first before rotation:It turns out that this is not the result of the transformation

So it’s rotation then translation:

So there are two conclusions

  • A complex transformation can be decomposed into combinations of basic transformations
  • The order of the base transformations is crucial

This also reflects that the matrix does not obey the commutative law

Therefore, the above transformation combination is written in matrix form: T (1, 0) R45T_ {(1, R_ 0)} {45} T (1, 0) R45 \ [xy1] begin {bmatrix} {x} \ \ {} y \ \ {bmatrix} {1} \ end ⎣ ⎢ ⎡ xy1 ⎦ ⎥ ⎤ = [101010001] \ begin {bmatrix} {1} and {0} and {1} \ \ {0} and {1} and {0} \ \ {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎡ 100010101 ⎦ ⎥ ⎤ [cos45 – sin450sin45cos450001] \ begin {bmatrix} {cos45} and {- sin45} and {0} \ \ {sin45} and {cos45} and {0} \ \ {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎡ cos45sin450 – sin45cos450001 ⎦ ⎥ ⎤ \ [xy1] begin {bmatrix} {x} \ \ {} y \ \ {bmatrix} {1} \ end ⎣ ⎢ ⎡ xy1 ⎦ ⎥ ⎤

Notice the order, the order is multiplied from right to left, because the vectors are on the right, times the transformation matrix to the left

3 d transform

It’s easy to generalize from two dimensions to three dimensions, so let’s start with the definition of homogeneous coordinates

  • The point is (x, y, z, 1).
  • The vector is x, y, z, 0.

We can use the matrix form of (4 x 4) to represent a three-dimensional linear transformation: \ [x ‘y’ z ‘1] begin {bmatrix} {x ^ {‘}} \ \ {y \ \ {z ^ ^ {‘}} {‘}} \ \ {1} {bmatrix} \ end ⎣ ⎢ ⎢ ⎢ ⎡ x’ y ‘z’ 1 ⎦ ⎥ ⎥ ⎥ ⎤ = [abctxdeftyghitz0001]\begin{bmatrix} {a}&{b}&{c}&{t_{x}}\\ {d}&{e}&{f}&{t_{y}}\\ {g}&{h}&{i}&{t_{z}}\\ {0}&{0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎢ ⎢ ⎡ adg0beh0cfi0txtytz1 ⎦ ⎥ ⎥ ⎥ ⎤ \ [xyz1] begin {bmatrix} {x} \ \ {} y \ \} {z \ \ {bmatrix} {1} \ end ⎣ ⎢ ⎢ ⎢ ⎡ xyz1 ⎦ ⎥ ⎥ ⎥ ⎤

Three-dimensional transformation formula: 1. Scale: S(sx,sy,sz)S({s_x, s_y, s_z})S(sx,sy,sz) = [sx0000sy0000sz00001]\begin{bmatrix} {s_{x}}&{0}&{0}&{0}\\ {0}&{s_{y}}&{0}&{0}\\ {0} and {0} and {s_ {z}} and {0} \ \ {0} and {0} and {0} and {bmatrix} {1} \ \ \ end ⎣ ⎢ ⎢ ⎢ ⎡ sx0000sy0000sz00001 ⎦ ⎥ ⎥ ⎥ ⎤

2, Translation: T(tx,ty)T(t_x, t_y)T(tx,ty) = [100tx010ty001tz0001]\begin{bmatrix} {1}&{0}&{0}&{t_{x}}\\ {0}&{1}&{0}&{t_{y}}\\ {0}&{0}&{1}&{t_z}\\ {0} and {0} and {0} and {1} {bmatrix} \ \ \ end ⎣ ⎢ ⎢ ⎢ ⎡ 100001000010 txtytz1 ⎦ ⎥ ⎥ ⎥ ⎤

The most complex is rotation, which is very difficult for arbitrary rotation, so the analysis starts from simple rotation: (1) : rotation around the X-axis, that is to say, X-axis coordinates remain unchanged, Y-axis and z-axis coordinates are undergoing rotation transformation, which is reflected in the matrix:

Rx (theta) R_x (\ theta) Rx (theta) = [10000 cosine theta – sine theta 00 sine theta cosine theta 00001] \ begin {bmatrix} {1} and {0} and {0} and {0} \ \ {0}&{cos{\theta}}&{-sin{\theta}}&{0}\\ {0}&{sin{\theta}}&{cos{\theta}}&{0}\\ {0}&{0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎢ ⎢ ⎡ cosine theta sine theta 00-10000 sine theta cosine theta 00001 ⎦ ⎥ ⎥ ⎥ ⎤

(2) : Rotate around the Y-axis. Similarly, the Y-axis coordinates remain unchanged, while the z-axis and X-axis coordinates rotate

Ry (theta) R_y (\ theta) Ry (theta) = [cosine theta zero sine theta 00100 – sine theta zero cosine theta 00001] \ begin {bmatrix} {cos {\ theta}} and {0} and {sin {\ theta}} and {0} \ \ {0}&{1}&{0}&{0}\\ {-sin{\theta}}&{0}&{cos{\theta}}&{0}\\ {0}&{0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎢ ⎢ ⎡ cosine theta 0-00100 sine theta sine theta zero cosine theta 00001 ⎦ ⎥ ⎥ ⎥ ⎤

(3) : Rotates around the Z-axis

Rz (theta) R_z (\ theta) Rz (theta) = [cosine theta – sine theta 00 sine theta cosine theta 0000100001] \ begin {bmatrix} {cos {\ theta}} and {- sin {\ theta}} and {0} and {0} \ \ {sin{\theta}}&{cos{\theta}}&{0}&{0}\\ {0}&{0}&{1}&{0}\\ {0}&{0}&{0}&{1}\\ {bmatrix} \ end ⎣ ⎢ ⎢ ⎢ ⎡ cosine theta sine theta 00 – sine theta cosine theta 0000100001 ⎦ ⎥ ⎥ ⎥ ⎤

All complex transformations can be decomposed into the combination of basic transformations. Therefore, any rotation in 3d space can be decomposed into the combination of rotation of x, Y and Z axes: Rxyz (alpha, beta, gamma) = Rx (alpha) Ry (beta) Rz R_ (gamma) {} xyz (, alpha, beta, \ gamma) = R_x (\ alpha) R_y (\ beta) R_z (\ gamma) Rxyz (alpha, beta, gamma) = Rx (alpha) Ry (beta) Rz (gamma)

Summarized as Rodriguez rotation formula:

At the end

Please give a thumbs-up and support if you find it helpful.

For more articles, please go to Github, if you like, please click star, which is also a kind of encouragement to the author.