WebGL Common Mathematical formulas

1. Trigonometric Functions

The axis uses the right-hand rule, the counterclockwise direction along the z axis is the positive angle, assuming that the original point is P (x, Y, z), A is the angle of rotation point P, and R is the distance from the origin to the P point. Using these two variables to calculate the coordinates of the point P, the equation is as follows:

x == Rsin A;

Similarly, you can use the R,a,b (p rotation angle) to represent the coordinates of P ':

X ' = R cos (a + b); y' = r sin (a + b);

Use trigonometric functions for two corners and formulas:

Sin (A +/-b) = sin a cosB +/-B) = cos a cos b-/+ sin a sin b

You can get:

X ' = r (cos a cos b-sin a sin b) y' = r (sin a cos b + cos a sin b)

Finally, the x, y equation is brought in, eliminating R and a can get the equation:

X ' = x cos b-y sinby ' = x sin b + y cos bz' = Z

In addition, the Radian calculation function is used in the calculation:

Radian = A * (pi/180)

2. Transformation matrix: Rotation

The way matrices and vectors can be represented by the following equation:

The vector of x, Y, z on the right side of the equation is called a three-dimensional vector. The method is calculated as follows:

X ' = ax + by + czy' = dx + ey + fzz' = GX + hy + iz

Look at the trigonometric function equation and compare it with:

X ' = ax + by + czx' = x cosb-y sinb

If a = COSB, b =-sinb,c = 0, then two equations are identical. Looking at y ':

Y ' = dx + ey + fzy' = x sinb + y COSB

If d = sinb, E = Cobb, f = 0, then two equations are identical. Substituting these results into equation 3.4 to get the equation:

This matrix is called the Transformation matrix (transformation matrix) and is also known as the rotation matrix (rotation matrices).

3. Transformation matrix: Panning

Translate formula: X ' = x + Tx.

The 4*4 matrix is shown as follows:

The multiplication result of the matrix is as follows:

According to the last equation 1 = mx + ny + oz + p, it is easy to get the coefficients m = 0, n = 0, o = 0, p = 1; compare x ', see a = 1, b = 0, c = 0, d = Tx; Similarly, compare y ', E = 0, F = 1,g = 0, h = Ty; compare Z ', i = 0, j = 0, k = 1, L = Tz. In this way, you can write a matrix that represents panning, also known as the translation matrix (translation matrix). As shown below:

4.4*4 's rotation matrix

To convert a rotation matrix from a 3*3 matrix to a 4*4 matrix, simply compare the rotation formula with the 4*4 matrix formula:

X ' = Xcosb-ysinby' = xsinb + ycosbz' = ZX' = ax + by + CZ + dy' = ex + FY + GZ + Hz' = ix + JY + KZ += mx + ny + oz + P

For example, when you compare X ' = Xcosb-ysinb with x ' = ax + by +cz +d, you know a = COSB, B =-sinb, c= 0, d = 0. Then, the coefficients in Y ' and Z ' equations are obtained, and finally the 4*4 rotation matrix is obtained. As shown below:

5. Transformation matrix: Zooming

Assuming that the x-axis, y-axis, and z-axis scaling factor SX, Sy, SZ are not correlated in three directions, then there are:

X ' = Sx * xy' = Sy * yz' = Sz * Z

Compared with the multiplication result of matrix, we know the transformation matrix of scaling operation:

WebGL Common Mathematical formulas