This article has participated in the call for good writing activities, click to view: back end, big front end double track submission, 20,000 yuan prize pool waiting for you to challenge!

This article is published in The depth of WebGL, click to see the table of contents

If you haven’t seen the previous chapter: WebGL-01 – Points, Vectors, and Matrices

The following formula is not hard at all, so hopefully you can read it. Instead of collecting = will… Although I know few people collect… Oh no… I don’t think many people watch it…

The motion of the point – vector 2, 0

First of all, let’s talk about the motion of a point.

Points and vectors in a certain coordinate system can be expressed vertically with the words [xyz] \left[\begin{matrix}x \\ y \ z\end{matrix} \right]⎣⎢, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable, repeatable. Of course two dimensional points or vectors are represented by [xy] \left[begin{matrix}x \\ y \end{matrix} \right][xy]. A vector represents the direction of motion of a point, so a vector has length and direction. The coordinates of a point simply represent a specific position in a coordinate system.

How do we understand that vectors are motions of points? Let’s review some of the calculations from the previous article:

  1. P ~\tilde pp~ + v⃗\vec vv

This means that the point is moving in the direction of the vector by the length of the vector, for example:

Point [11] \left[\begin{matrix}1 \end{matrix} right][11] + vector [21] \left[\begin{matrix}2 \\ 1 \end{matrix} \left[\begin{matrix}3 \\ 2 \end{matrix} right][32]


  1. p ~ 1 \tilde p_1     –
    p ~ 2 \tilde p_2

So this is going to be a vector going from point 2, point _2, point 2 to point 1, point _1, point 1

  1. V ⃗1\vec v_1v 1 + v⃗2\vec v_2v 2

The result is a new vector, that is, the sum of the two vectors representing the motion of the point gives a new vector representing the motion of the point. The motion of the new vector is the same as the superposition of the motion of the previous two vectors:

  1. The dot product of vectors

Vector dot product formula:


v ⃗ 1 ⋅ v ⃗ 2 = ∣ ∣ v ⃗ 1 ∣ ∣ ∗ ∣ ∣ v ⃗ 2 ∣ ∣ ∗ c o s ( Theta. ) \ vec v_1 · \ vec v_2 = | | \ vec v_1 | | * | | \ vec v_2 | | * cos (\ theta)

We use ∣ ∣ v ⃗ 1 ∣ ∣ | | \ vec v_1 | | ∣ ∣ v 1 ∣ ∣ represent the vector v ⃗ 1 \ vec v_1v 1, the length of the theta \ theta theta Angle between two vectors. So the dot product of two vectors gives you a number, so what does the dot product mean? ⋅ Normalize (\vec v_2) v 1⋅ Normalize (\vec v_2) v 1⋅ Normalize (v 2 The projection length in the direction of v⃗2\vec v_2v 2.

Assume that v⃗3\vec v_3v 3 = normalize(v⃗1\vec v_1v 1) represents the unit vector on this vector, i.e. V ⃗3\vec v_3V 3 is in the same direction as v⃗2\vec v_2v 2 and has a length of 1. With ∣ ∣ v ⃗ 3 ∣ ∣ = 1 | | \ vec v_3 | | = 1 ∣ ∣ v 3 ∣ ∣ = 1.

Normal is not the same as normalize.

We can also use the dot product to determine the Angle between two vectors. If you normalize two vectors and dot them, you get the cosine of the Angle between them.


n o r m a l i z e ( v ⃗ 1 ) ⋅ n o r m a l i z e ( v ⃗ 2 ) = c o s ( Theta. ) Normalize (\vec v_1) ·normalize(\vec v_2) = cos(\theta)

For example, judging the light and normalize dot product results can determine the current triangle Angle with the light. Or some vector dotted with itself will give you its length squared.

  1. The cross product of vectors

The cross product of vectors is:


v ⃗ 1 ⋅ v ⃗ 2 = ∣ ∣ v ⃗ 1 ∣ ∣ ∗ ∣ ∣ v ⃗ 2 ∣ ∣ ∗ s i n ( Theta. ) ∗ n \ vec v_1 · \ vec v_2 = | | \ vec v_1 | | * | | \ vec v_2 | | * sin (\ theta) * \ PMB n

The result is a vector that in three dimensions represents a vector perpendicular to v⃗1\vec v_1v 1 and v⃗2\vec v_2v 2, the direction of which is determined by the right hand rule.

The cross product can help us find the normal direction or compute the camera lookup and so on.

Linear transformation

Let’s focus now on matrix transformations in two dimensional coordinates.


{ 2 x + 1 y 3 x + 2 y \begin{cases} 2x + 1y\\ 3x + 2y \end{cases}

A set of polynomials like this can be represented by a matrix:


[ 2 1 3 2 ] \left[\begin{matrix} 2 & 1 \\ 3 & 2 \end{matrix}\right]

You multiply a vector by a matrix and you take the number of each component of the vector and you compute it in the corresponding variable of the polynomial


[ 2 1 3 2 ] [ 1 2 ] = : { 2 x + 1 y x = 1 . y = 2 ; 3 x + 2 y x = 1 . y = 2 ; = : [ 4 7 ] \left[\begin{matrix} 2 & 1 \\ 3 & 2 \end{matrix}\right] \left [\begin{matrix} 1 \\ 2\end{matrix}\right] =: \begin{cases} 2x + 1y & x=1,y=2; \\ 3x + 2y & x=1,y=2; \end{cases} =: \left[\begin{matrix} 4 \\ 7 \end{matrix}\right]

Thus, the function of the above matrix is to change [12]\left[\begin{matrix} 1 \\ 2 \end{matrix} right][12] to [47]\left[\begin{matrix} 4 \\ 7 \end{matrix}\right][47] This position. And you can also observe that the values of each of the components of the new vector are linear combinations of the values of the components of the previous vector in each direction.

The vector v under the frame W⃗t\vec W^tW t is a linear combination of each component of this frame. In a two-dimensional coordinate system with x and y axes, we take x⃗\vec xx and y⃗\vec yy as the basis vectors. Is:


v ⃗ = [ x ⃗ y ⃗ ] [ n 1 n 2 ] \vec v = \left[\begin{matrix} \vec x & \vec y \\ \end{matrix}\right] \left[\begin{matrix} n_1 \\ n_2 \end{matrix}\right]

The above formula 👆 can be abbreviated as:


v ⃗ = W ⃗ t n \vec v = \vec W^t \mathbf n

Define the linear transformation λ(x)\lambda(x)λ(x), then:


Lambda. ( v ⃗ ) = Lambda. ( [ x ⃗ y ⃗ ] [ n 1 n 2 ] ) = [ Lambda. ( x ⃗ ) Lambda. ( y ⃗ ) ] [ n 1 n 2 ] \lambda(\vec v) = \lambda(\left[\begin{matrix} \vec x & \vec y \\ \end{matrix}\right] \left[\begin{matrix} n_1 \\ n_2 \end{matrix}\right]) = \left[\begin{matrix} \lambda(\vec x) & \lambda(\vec y) \\ \end{matrix}\right] \left[\begin{matrix} n_1 \\ n_2 \end{matrix}\right] 
The change is acting on every component of the coordinate systemCopy the code

Where λ(n)\lambda(\mathbf n) each term of λ(n) is:


Lambda. ( x ⃗ ) = [ x ⃗ y ⃗ ] [ M 11 M 12 ] \lambda(\vec x) = \left[\begin{matrix} \vec x & \vec y \\ \end{matrix}\right] \left[\begin{matrix} \mathbf M_{11} \\ \mathbf M_{12} \end{matrix}\right] 
So the values of each of the components of this new vector are linear combinations of the values of the components in each direction of the vector that we changedCopy the code

Then the final transformation can be expressed as a matrix:


[ x ⃗ y ⃗ ] [ M 11 M 21 M 12 M 22 ] [ c 1 c 2 ] \left[\begin{matrix} \vec x & \vec y \\ \end{matrix}\right] \left[\begin{matrix} \mathbf M_{11} & \mathbf M_{21} \\ \mathbf M_{12} & \mathbf M_{22} \\ \end{matrix}\right] \left[\begin{matrix} c_1 \\ c_2 \end{matrix}\right]

Abbreviated to:


W ⃗ t n = W ⃗ t M n \vec W^t \mathbf n = \vec W^t M \mathbf n

All matrix transformations are linear transformations

Next, we analyze several typical matrix transformations

Shear transformation

Welcome to our square:

The four vertices of the square I’m sure you can see, so let’s make a transformation, denoted by the matrix M\mathbf MM:


M = [ 1 1 0 1 ] \mathbf M = \left[\begin{matrix} 1 & 1 \\ 0 & 1 \end{matrix} \right]

Try the transformation for each of the four vertices of the square, then:


M = [ 1 1 0 1 ] [ 1 1 ] = [ 2 1 ] \mathbf M = \left[\begin{matrix} 1 & 1 \\ 0 & 1 \end{matrix} \right] \left [\begin{matrix}1 \\ 1 \end{matrix} \right] = \left [\begin{matrix}2 \\ 1 \end{matrix} \right]

You omit three points, and you can do the math.

After your calculations, you will find that the final result is a parallelogram. This transformation is called a shear transformation.

Scaling transformation

Mathbf M=[2002]\ left[\begin{matrix} 2&0 \\ 0&2 \end{matrix} right]M=[2002] \mathbf M=[2002]\ left[\begin{matrix} 2&0 \\ 0&2 \end{matrix} right]M=[2002] You can also see the result of multiplying the identity matrix M=[1001]\mathbf M= \left[\begin{matrix} 1&0 \\ 0&1 \end{matrix} right]M=[1001].

Rotation transformation

Now let’s look at how to rotate a vector in a two-dimensional coordinate system using a two-dimensional matrix.

First, the picture above:

You can imagine that if we rotate the basis vector of the coordinate system, we rotate it with the points in it so that the point is rotated from the original coordinate system. As you can clearly see from the picture, The original [10]\left [\begin{matrix} 1 \\ 0 \end{matrix} right][10] becomes [cos(θ)sin(θ)]\left [\begin{matrix} cos(theta) \\ Sin (\ theta) {matrix} \ \ end right] [cos (theta) sin (theta)]. [01] \ left [\ begin 0 {matrix} {matrix} \ \ \ 1 \ end right] [01] into [- sin (theta) cos (theta)] \ left [\ begin {matrix} – sin (\ \ \ theta) Cos (\ theta) {matrix} \ \ end right] [- sin (theta) cos (theta)].

[32]\left [\begin{matrix} 3 \\ 2 \end{matrix} right][32] What it means is that the vector is a combination of three x units and two y units: 3x⃗+2y⃗3\vec x +2 \vec y3x +2y Then the rotated point is the same with respect to the rotated coordinate system: 3x⃗ ‘+2y⃗ ‘3 \vec x’ +2 \vec y’3x’ +2y ‘. As shown in the figure, there are:


x ⃗ ‘ = [ c o s ( Theta. ) s i n ( Theta. ) ] y ⃗ ‘ = [ – s i n ( Theta. ) c o s ( Theta. ) ] \vec x’ = \left[\begin{matrix} cos(\theta) \\ sin(\theta) \end{matrix} \right] \vec y’ = \left[\begin{matrix} -sin(\theta) \\ cos(\theta) \end{matrix} \right]

To:


3 [ c o s ( Theta. ) s i n ( Theta. ) ] + 2 [ – s i n ( Theta. ) c o s ( Theta. ) ] 3\left[\begin{matrix} cos(\theta) \\ sin(\theta) \end{matrix} \right] + 2 \left[\begin{matrix} -sin(\theta) \\ cos(\theta) \end{matrix} \right]

That is:


[ c o s ( Theta. ) – s i n ( Theta. ) s i n ( Theta. ) c o s ( Theta. ) ] [ 3 2 ] \left[\begin{matrix} cos(\theta) & -sin(\theta) \\sin( \theta) & cos(\theta) \end{matrix} \right]\left[\begin{matrix} 3 \\ 2 \end{matrix} \right]

So the rotation matrix in a two-dimensional coordinate system is expressed as [θ\thetaθ is rotated counterclockwise from the origin of the coordinate system θ\thetaθ]:


[ c o s ( Theta. ) – s i n ( Theta. ) s i n ( Theta. ) c o s ( Theta. ) ] \left[\begin{matrix} cos(\theta) & -sin(\theta) \\sin( \theta) & cos(\theta) \end{matrix} \right]

The above is a typical matrix transformation, of course, the transformation of these matrices can be superimposed, a vector multiplied by a matrix is a transformation, matrix multiplication meets the associative law, so we can first calculate the results of the multiplication of the two matrices. The new matrix represents the superposition of several changes.

Question to consider

  1. What is the representation of the three dimensional scale rotation shear? (Content of the next article)
  2. I want the top square to rotate around its origin how do I do that? (Composition of multiple variations)
  3. If I want to shift the square can I represent it as matrix multiplication? (Content of the next article)
  4. There are three points on the screen that form a triangle, and if you pick another point N at random, how can you tell whether point N is inside the triangle? Vector cross product

reference

  1. Linear algebra and its applications
  2. Foundations of 3D Computer Graphics