JavaScript WebGL matrix

Introduction

I thought I could start trying the three-dimensional effect. After checking the information, I found that I had to understand the matrix first. Here is a collection of relevant basic knowledge points.

• Origin
• My GitHub

Introduction

In simple terms, a matrix is a rectangular arrangement of numbers in rows and columns. The general description is first row and then column, such as the following 2×3 matrix:

The representation of each element in the matrix can also be marked according to the row and column, for example a _1,2 means the element of the 1st row and the 2nd column.

• In applied mathematics, matrices are commonly used in statistical analysis.
• In physics, matrices have applications in electrical circuits, mechanics, optics, and quantum physics.
• In computer science, 3D animation requires the use of matrices.

identity matrix

The identity matrix has the following characteristics:

• The number of rows and columns are equal.
• The diagonals are all 1s, the others are all 0s.
• The symbol is the capital letter I.
• Multiplying with any matrix does not change, such as A × I = A.

Here is the 3x3 identity matrix:

negative matrix

Simply put, it is the negation of each element in the matrix.

For example, the matrix A is as follows:

The corresponding negative matrix is:

Transpose

Transpose is to swap the columns and rows of a matrix. Put a T in the upper right corner for transpose:

The transpose satisfies the following operation laws:

• (A ^T ) ^T = A
• (λA) ^T = λA ^T
• (AB) ^T = A ^T B ^T

basic operations

addition

Only matrices of the same type (corresponding to the same number of rows and columns) can be added. When adding, the corresponding position numbers are added. An example is as follows:

Addition satisfies the following operational laws:

• A + B = B + A
• (A + B) + C = A + (B + C)

subtraction

Subtraction is really just addition to a negative matrix. The precondition is that the two are of the same type. An example is as follows:

matrix multiplication

A matrix is multiplied by a number, and each element in the matrix is multiplied by a number. An example is as follows:

Multiplication satisfies the following operation laws:

• λ(μA) = μ(λA)
• λ(μA) = (λμ)A
• (λ + μ)A = λA + λμ
• λ(A + B) = λA + λB

matrix to matrix multiplication

The precondition for the multiplication of two matrices is that the number of columns of the first matrix must be equal to the number of rows of the second matrix.

Multiplying an m×n matrix A by an n×p matrix B yields an m×p matrix C . Each element in matrix C is calculated as:

Here is an explanation with an example, here is a calculation example:

• c _1,1 = a _1,1 × b _1,1 + a _1,2 × b _2,1 + a _1,3 × b _3,1 = 0×1 + 1×2 + 2×3 = 8
• c _1,2 = a _1,1 × b _1,2 + a _1,2 × b _2,2 + a _1,3 × b _3,2 = 0×4 + 1×5 + 2×6 = 17
• c _2,1 = a _2,1 × b _1,1 + a _2,2 × b _2,1 + a _2,3 × b _3,1 = 2×1 + 1×2 + 0×3 = 4
• c _2,2 = a _2,1 × b _1,2 + a _2,2 × b _2,2 + a _2,3 × b _3,2 = 2×4 + 1×5 + 0×6 = 13

Matrix multiplication satisfies the following operation laws:

• (AB)C = A(BC)
• (A + B)C = AC + BC
• C(A + B) = CA + CB

It should be noted here that matrix multiplication does not satisfy the commutative law, that is, AB != BA .

Inverse matrix

Numbers have reciprocals, and matrices have a similar concept, called inverse matrices , represented in the form of A ^-1 . The product of a number and its inverse is 1. Similarly, multiplying a matrix by its inverse results in an identity matrix: AA ^-1 = I .

A matrix with the same number of rows and columns can have an inverse. See here for a more detailed explanation.

The way to calculate the inverse matrix is:

• Use elementary row operations
• Use cofactors, algebraic cofactors, and adjoint matrices

This will be used in the following division.

matrix and matrix division

There is no concept of division in matrices. Multiplying by the inverse matrix has the same effect as division.

Assuming that the matrices A and B are known, and A has an inverse matrix, the matrix X needs to be calculated:

 XA = B

This can be done like this:

• XAA ^-1 = BA ^-1

It was mentioned earlier that AA ^-1 = I, so:

• XI = BA ^-1

The identity matrix multiplication will not change the original matrix, so:

• X = BA ^-1

matrix and vector multiplication

Multiplication of a matrix and a vector is a way of interpreting a system of equations. For the specific explanation, see here , there are two important rules:

• The matrix multiplied by the column vector on the right can be regarded as a linear combination of the column vectors of the matrix, and the result is a column vector.
• The row vector on the left multiplied by the matrix can be regarded as a linear combination of the row vectors of the matrix, and the result is a row vector.

Vertex coordinates in WebGL can be converted to vector form, and vector and matrix multiplication is an efficient way to transform. Let's start with two-dimensional transformations: displacement, scaling, and rotation.

2D transformation

The following are pure mathematical theoretical calculations, which may differ from actual programming applications.

displacement

Let's first look at the implementation without using a matrix, the coordinates (x, y), the components correspond to the displacements T _x and T _y , then the new coordinates:

• newX = x + T _x
• newY = y + T _y

The identity matrix is usually the starting point for generating other transformation matrices, and multiplying a vector by the identity matrix does not change the vector:

Compare the two calculation methods:

• Non-matrix way: newX = x + T _x
• Matrix method: newX = x

It is found that the transformation with a 2×2 matrix is not enough, and a 3×3 matrix is required. The vector also needs one more component to be multiplied. Here it is set to z , and then look at the calculation:

It can be found that the result obtained when z = 1 is consistent with the displacement effect.

zoom

The scaling amount is S _x and S _y , and a 2×2 matrix can satisfy the scaling effect:

rotate

Let's first look at the implementation without the use of matrices. To describe rotation, specify:

• axis of rotation
• turn around
• Rotation angle

Here, the rotation is set around the Z axis, the rotation direction is counterclockwise, and the rotation angle is β. The point (x, y) becomes the point (newX, newY) after being rotated by an angle of β, which can be obtained by combining the trigonometric functions:

• newX = xcos(β) - ysin(β)
• newY = xsin(β) + ycos(β)

Let's look at the implementation using matrices:

Compare the two calculation methods:

• Non-matrix way: newX = xcos(β) - ysin(β)
• Matrix method: newX = ax + by

If a = cos(β), b = -sin(β), the two equations are the same. After similar transformation of the y coordinate, the final matrix is:

WebGL 2D transformation

In the mathematical convention, the horizontal is the row, the vertical is the column, and the matrix is constructed based on this. But in WebGL programming, for some reason , the program parses the visual lines into columns.

displacement

This is the displacement matrix form in the mathematical sense:

 const m3 = [
  1,  0,  tx, // 行
  0,  1,  ty, // 行
  0,  0,  1,  // 行
]

Here is a displacement matrix that resolves correctly in WebGL programming:

 const m3 = [
  1,  0,  0, // 列
  0,  1,  0, // 列
  tx, ty, 1, // 列
]

Let's look at an example of these two displacement matrices separately:

• Example of programming an angle displacement matrix using WebGL
• Example of Programming Using Math Angle Displacement Matrix

The matrix form of the mathematical angle is used in the program, and the corresponding mathematical angle will cause the calculation results to go to the Z component. The Z component is not used in two dimensions, and no change will occur. The example is also the result.

zoom

Scaling matrix in WebGL:

 function getTransform (x, y) {
  return [
    x, 0, 0,
    0, y, 0,
    0, 0, 1,
  ];
}

Here is an example .

rotate

Rotation matrix in WebGL:

 function getTransform (angle) {
  const radian = (Math.PI * angle) / 180;
  const cosA = Math.cos(radian);
  const sinA = Math.sin(radian);
  return [
    cosA, sinA, 0,
    -sinA, cosA, 0,
    0, 0, 1,
  ];
}

This is an example , the rotation direction can be represented by the positive and negative of the rotation angle value, in this example, if it is a positive value, it means counterclockwise rotation.

The center of the rotation is the center of the graphic by default. If you need to rotate around the specified point, you need to multiply the displacement matrix after the rotation. This is an example .

For a more detailed explanation, please refer to the following two links:

• How to rotate individual shapes in WebGL
• WebGL 2D Matrix

References

• Matrix Encyclopedia
• matrix
• WebGL 2D Matrix