Shiv ENOW large front end

Company official website: CVTE(Guangzhou Shiyuan Stock)

Team: ENOW team of CVTE software Platform Center for Future Education

The author:

preface

The basic affine transformation of vectors is divided into translation, scaling and rotation. Before learning how to use WebGL to draw 3D shapes, we need to learn how to perform affine transformation on objects. For example, to see different sides of 3D objects, we need to learn how to rotate them (only the front side does not show the three-dimensional effect). In addition, when we want to add 3D shapes with multiple directions or different positions, Instead of recounting the vertices of each shape, this can be done by performing a variety of affine transformations on the same shape. So, let’s study and review the basic mathematics of affine transformations, vectors and matrices.

Other links in this series:

  • Riding the Wave of WebGL series – first introduction to WebGL
  • Riding the Waves of the WebGL series – Shader language foundation

vector

A vector is a quantity with both magnitude and direction, also known as a vector in physics and engineering. This corresponds to scalars, which only have magnitude and no direction. Such as height, weight and so on. In GLSL shader language, vec2, VEC3, VEC4, ivec2, IVEC3, IVEC4, etc. can be used to represent vectors of different dimensions and data types. For example, VEC3 (x, y, z) represents three-dimensional vectors of data type float.

Vectors and scalars

Vectors and scalars cannot be added or subtracted, but they can be multiplied and divided. To multiply or divide a vector, you need to apply each element of the vector to the scalar. Vector times scalarnThe meaning of the vector is length scalingnTimes. Such as the vector 乘 3:

Vector addition and subtraction

Vector addition and subtraction can be defined as the addition or subtraction of vector components, that is, each component of a vector adds or subtracts the corresponding component of another vector. Such as the vectorAdd a vectorTo:

The geometric meaning of vector addition is to join two vectors head to tail, so that the beginning of the first vector points to the end of the last vector.

The geometric meaning of vector subtraction is to translate the two vectors to the common starting point, and use the two sides of the vector as a parallelogram, so that the end point of the subtracted vector points to the end point of the subtracted vector.

Two vectors that are equal need to have the same magnitude and the same direction.

 和You get vectors that have the same magnitude and direction, so you can say that the addition of vectors satisfies the commutative law; while 和 You get vectors that are the same size but in opposite directions, so subtraction does not satisfy the commutative law.

Multiplication of vectors

Vector multiplication has two kinds, one is Dot Product, the other is Cross Product.

Dot product

1. Algebraic definition of dot product

Let’s say I have two vectors in two dimensionsandAnd define their dot product as the following real numbers:







2. Geometric definition of dot product

Let’s say I have two vectors in two dimensions 和.andIs the magnitude of the vector, and the Angle between them is zeroTheta., the geometric definition of dot product is as follows:







namelyMultiplied by the 在 The projected component of phi.



3. The role of dot product

The dot product can be used to calculate the Angle between two vectors. Combining the above two formulas, it follows thatAnd then the inverse cosine functionThe included Angle value can be obtained. The dot product is very useful in the calculation of illumination. For example, in the effect calculation of spotlights, the illumination effect can be obtained according to the dot product. If the dot product is larger, the included Angle is smaller, and the object is closer to the axis of illumination, and the illumination is stronger. inGLSLThe dot product function is built indot(v1, v2).

cross-product

1. Mathematical calculation of the cross product

Unlike the dot product, the result of the cross product is not a scalar, but a vector that is perpendicular to the plane of two vectors whose direction is the cross product. Let’s define two three-dimensional vectors 和 , andThe cross product of can be expressed as the following determinant:







Among them,I, j, K, respectively,X, y, zThe unit vector of the axis. It is expanded using a specific formula as follows:







2. Geometric definition of cross product

 和 The geometric implication of the cross product of phi is,andThe area of the parallelogram.


3. The role of the cross product

The cross product can also be used to calculate the Angle between vectors, which can be solved by combining the above two formulasAnd then use the arcsine functionCan obtain the included Angle value. The cross product can also be used to find surface normal vectors.GLSLThe cross product function is built incross(v1, v2).

matrix

A matrix is a set of values arranged in rows and columns. A matrix is usually composed of m rows and N columns. We call it an M x N matrix. In GLSL shader language, we can use mat2, mat3, mat2x3, mat3x4 and so on to represent matrices with different number of rows and columns, such as mat3 for matrix with number of rows and columns 3×3.

Matrix addition and subtraction

The addition and subtraction of matrices and scalars requires the addition or subtraction of scalar values to each element of the matrix.


Matrix multiplication

The multiplication of a matrix by a scalar is the same as the addition and subtraction of a matrix by a scalar.

When you multiply a matrix by a matrix, the number of columns in the matrix on the left is equal to the number of rows in the matrix on the right. The number of rows in the resulting matrix is the number of rows in the left-hand matrix, and the number of columns is equal to the number of columns in the right-hand matrix.

Where, the first value of the first row of the resulting matrix is the product of the first row on the left and the first column on the right, and so on.

Matrices and affine transformations

An affine transformation is a linear transformation of a vector space in geometry followed by a translation into another vector space. Affine transformation has the following two characteristics:

  1. What was a line segment before the affine transformation, is still a line segment after the affine transformation
  2. I have two straight segmentsa 和 bUsing the same affine transformation, the proportion of the length of the line segment remains unchanged

For a linear transformation, it’s a mapping from one vector space V to another vector space W with addition and scalar multiplication. In addition to the two affine properties, linear transformations also include the following two properties:

  1. Linear transformation does not change the origin of coordinates
  2. Linear transformations can be superimposed, and the result of multiple linear transformations is to multiply the matrices of the linear transformations, and then multiply them by the original vectors

Scaling and rotation are linear transformations, but the first property tells us that translation is not linear. Now that you know what an affine transformation is, let’s look at how the translation, scaling, and rotation commonly used in affine transformations are computed.

translation

Translation is the process of adding another vector on the basis of the original vector to obtain a new vector in different positions. We can use vector addition to obtain the translated vector:

If we use a 3 by 3 matrix, we can’t define a translation matrix in three dimensions, and we’ll talk about using homogeneous coordinates to define a translation matrix.

The zoom

To scale a vector is to scale the length of the vector and keep it in the same direction. To scale in three dimensions is to scale the X, y, and Z axes respectively. We construct a scaling matrix such that when the scaling matrix is multiplied by the vector, each component of the vector is multiplied by a scaling factor.

Notice that the matrix and the vector are not interchangeable, otherwise it would be a 4 by 4 matrix, not a vector.

rotating

The calculations of the above two transformations are relatively easy to understand, but rotation is a little more complicated, especially in three-dimensional space, where objects can travel alongX, y, 和 zShaft rotation. Two dimensional rotations can only be rotated clockwise or counterclockwise on a plane, so it’s relatively easy, so let’s start with two dimensional rotations.

Assume that the length of vector P is r and the Angle is ⍺, rotate it counterclockwise by ⍬ Angle, and derive the parametric equation of rotated vector P ‘(x, y) as follows:

Written in the following matrix form, where

Is a rotation matrix.

Knowing the derivation of the rotation matrix in two dimensions, we extend to three dimensions. In three dimensions, objects can move alongX, y, 和 zAxis rotation, as shown below:

As you can see from the figure above, rotation in two dimensions is the same as rotation in three dimensions along the z axis, with the x and y axes rotating and the Z axis remaining the same

Is rotated along the X-axis, and the X-axis remains the same:

Is rotated along the Y-axis, and the Y-axis remains the same:

Homogeneous coordinates

Based on the discussion above, we can say that for a vectortranslation, rotation scalingAThe general formula of affine transformation of is:

Of course, this expression can be further optimized, and we can also transform the translation into a matrix. How do we do that? We’re going to convert our n dimensional coordinates to n+1 dimensional coordinates. Such n+1 dimensional coordinates are called homogeneous coordinates, and the corresponding matrix is called homogeneous matrix. Using homogeneous coordinates, the translation matrix is expressed as follows:

For scaling and rotation, as long as the newly added one-dimensional w is 1, the rotation matrix in homogeneous coordinates is as follows:

So in homogeneous coordinates, for a vectortranslation, rotation scalingAThe general formula of affine transformation of is:

Combination of matrices

Using matrices to represent affine transformations, we can combine multiple transformations into a matrix based on matrix multiplication. Suppose we have a vertex (x, y, z) and we want to scale it by a factor of 2 and then shift it by (1, 2, 3) units. We need a displacement and scaling matrix to do these transformations. Since matrix multiplication does not obey the commutative law, when matrices are multiplied, the rightmost matrix is the first to be multiplied with vectors, and when combining matrices, scaling is usually done first, then rotation, and finally displacement, otherwise they will affect each other. Our final transformation matrix looks like this:

conclusion

At this point, we’ve learned some of the basics of vectors and matrices, setting the stage for some of the more complex effects we’ll be able to implement later. To review this section, we started with the basic operations of vectors, and then focused on the dot and cross products of vectors, because these two operations have many applications in graphics. With respect to matrices, we also learned some basic operations, then we focused on matrices and affine transformation, derived translation, scaling and rotation matrices, and introduced the representation of these rotation matrices in homogeneous coordinates. After learning these basics, we can enter the world of 3D drawing. References:

  1. LearnOpenGL Tutorial transformations
  2. Basics of Mathematics: points, vectors, matrices
  3. How to Coordinate transform geometry with Affine Transformation