webgl_ Graphic transformation (rotation, translation, zoom)

translation
Translate a triangle , You need to measure each component of the vertex coordinates (x and y), Add the triangle on the corresponding axis （ Such as X Axis or Y Axis ） Up translation distance . such as , Will point p(x, y, z) Translation to p’(x’, y’, z’), stay X Axis 、Y Axis 、Z The translation distance in the three directions of the axis is Tx,Ty,Tz, among Tz by 0, As shown in the figure below .
Then on the corresponding component of the coordinate , Add these directly T value , You can be sure p’ It's the coordinates of , As shown below .
x’= x +Tx
y’ = y + Ty
z’=z+Tz

We only need to add a constant to each component of vertex coordinates in the shader to realize the above equation . obviously , This is a vertex by vertex operation , The above modification should occur in vertex shaders , Not in the slice shader .
When modifying the code , Translate the distance Tx、Ty、Tz The value of is passed into the vertex shader , Then they are added to the corresponding components of the vertex coordinates , Assigned to it again gl_Position. Let's take a look at the modified example program .


rotate
Rotation is slightly more complicated than translation , To describe a rotation , You must specify :
● Rotation axis ( The graph will rotate around the axis of rotation ).
● Direction of rotation ( Direction : Clockwise or counter clockwise ).
● Rotation Angle ( The angle through which the figure rotates ).
set sth. up p(x, y, z) rotate β The angle then becomes a point p ‘(x ’ , y ‘,z’): First of all, the rotation is around Z It's done on the axis , therefore z The coordinates will not change , Can be ignored directly ﹔ then ,x Coordinates and y The situation of coordinates is a little complicated , Here's the picture ：
In the figure 3.22 in ,r Is from the origin to the point p Distance of , and α yes X The axis rotates to the point p The angle of . Use these two variables to calculate the point p Coordinates of , As shown below ：
x = rcosα
y = rsinα
Similarly , You can use r、α、β To show a little p’ Coordinates of , After a series of changes, we get the final equation , As shown below :
x’= r cos (α +β)
y’= r sin (α +β)
===>
x’ = r (cosα cos β - sinα sin β)
y’ = r (sinα cos β + cosα sin β)
===>
x’= x cos β - y sin β
y’= x sin β + y cos β
z’=z
Again , For rotation operation , Also operate on vertex shaders , The modification procedure is as follows ：

Above , In defining variables u_cosB and u_sinB when , Why uniform Variable , Because the values of these two variables are independent of vertices .

Transformation matrix : rotate
If the figure is rotated, after the complex operation of Translation , If we calculate as shown above , It's going to be complicated , So we introduce the transformation matrix , It is also the basis for subsequent graphic transformation operations .
Suppose there is a matrix as follows , Homovector (x,y,z), After multiplication, we get a new vector （x’,y’,z’）：( Be careful ： The multiplication of matrix and vector does not conform to the distribution rate of multiplication ,AxB It's not equal to BxA Of )

In this case , New vector obtained by multiplying matrix and vector , The three components are x’、y’、z, The values are as follows . Be careful , Only when the number of columns of the matrix is equal to the number of rows of the vector , Then you can multiply the two .
x’ = ax + by + cz
y’ = dx + ey + fz
z’ = gx + hy + iz
Now? , To understand how matrices replace mathematical expressions , Next, compare the matrix equation with the mathematical expression .

Bring the results into , You can get a new vector （x’,y’,z’) as follows ：

This matrix is called the transformation matrix , Because it will be the vector on the right (x, y,z)“ Transformation ” For the vector on the left (x ', y ‘, z’). The transformation of the transformation matrix above is a rotation , So this matrix can also be called rotation matrix .

4*4 The rotation matrix of


Transformation matrix : translation


Transformation matrix : The zoom


We store each element of the matrix in an array , But the problem is : The matrix is two-dimensional , Its elements are arranged in rows and columns , And the array is one-dimensional , Its elements are just arranged in a line . here , We can store matrix elements in an array in two ways : By row main order and by column main order ,webGL and OpenGL equally , Matrix elements are stored in the array in the main order of columns . Here's the picture ：

See here, you should have a certain understanding of the changes in graphics , Then use these changes to achieve complex transformation effects .