An overview of the

The effect presented in the last demo is a triangle, which intuitively feels like two-dimensional. Canvas or DIV + CSS can also be used to achieve this effect, so what effect cannot be achieved by the two methods? Now let’s take a look at some of the ways that objects transform shapes in a three-dimensional world.

What is a graphic transformation

In other words, these transformations are essentially the same transformation; Mathematically, this transformation can be described using matrices. And, in order to accommodate the particularity of various transformations, one dimension will be added on the basis of three dimensions, using four-dimensional vectors and matrices. A 4-dimensional vector states that a point (x,y,z,w) is equivalent to a 3-dimensional vector (x/w,y/w,z/w), which is the homogeneous coordinate mentioned earlier.

Specifically, for a certain point v0(x0,y0,z0,1) in space, a new point v1(x1,y1,z1,1) is obtained after space image transformation, then there exists such a matrix M with 4 rows and 4 columns:

In the above GIF, from the front of the car to the rear of the car, how many ways do you think?

When browsing a 3D object in a 3D software, it always provides the user with interactive operations of translation, scaling and rotation, which is exactly the content of model transformation. In the category of graphics, translation transformation and rotation transformation are rigid body transformation, scaling and rotation are linear transformation, rigid body transformation and linear transformation are affine transformation, and affine transformation can also be regarded as a projection transformation.

Expand this expression as follows:

According to the matrix multiplication formula, the following equations can be obtained:

Through the above formula, we can obtain all kinds of graph transformation matrices.

Model transformation

Model transformation includes translation transformation, scaling transformation and rotation transformation. In terms of content, these transformations correspond to the translation, transformation and scaling of 3d interactive operations. A simple 3d interactive operation can be realized by adjusting the model transformation matrix through mouse operation. (1) Translation Transformation For a point (x,y,z,1), after translation, the resulting point is (x +Tx,y+Ty,z+Tz,1), where Tx, Ty and Tz represent the distance of the point moving in the x,y and Z axes respectively. Then substitute it into both sides of the equations, we have:

Then, according to the principle of equal polynomials, each polynomial coefficient can be obtained, and then the translation matrix T can be obtained:

Scaling transformation

For a point (x,y,z,1), scale with the origin as the center, by Sx in the x direction, by Sy in the y direction, and by Sz in the Z direction, then the new coordinate value is (xSx,ySy,z*Sz,1). Substitute it into both sides of equation (2) :

Then, according to the principle of equal polynomials, each polynomial coefficient can be obtained, and then the scaling matrix S can be obtained:

Rotation transformation

Rotation transformations are a little more complicated. For rotation transformations, you must know the axis of rotation, the direction of rotation, and the Angle of rotation. You can rotate about the X, Y, and Z axes, so you usually have three rotation matrices. Take the rotation around the Z-axis as an example, in the z-axis positive half axis along the z-axis negative direction for observation, if you see the object is counterclockwise rotation, then it is positive rotation, rotation direction is positive, rotation value is positive; If the rotation value is negative, the rotation direction is negative, clockwise. In more general terms, a right hand spin is a right hand spin: the right hand makes a fist, and the thumb is straight and pointed in the positive direction of the axis of rotation, so that the remaining fingers of the right hand indicate the direction of rotation.

For a point p(x,y,z,1), we rotate it around the z-axis, and since the z-value of the rotation is the same, we can ignore the transformation of the z-value and only consider the change in the XY space. Let r be the distance from the origin to point P, and α be the Angle at which the X-axis is rotated to that point.

The rotation matrix can be obtained as above: