[Yugong Series] August 2023 WEBGL Topic - Graphics Translation Matrix

---

foreword

Graphics translation, scaling, and rotation are commonly used operations in computer graphics to change the position, size, and orientation of an image.

1. Translation: translation is to move the graphic along one direction for a certain distance on a two-dimensional plane, and a two-dimensional vector is usually used to represent the translation distance. In computer graphics, translation operations can be implemented by modifying the coordinate system.

2. Scaling: Scaling is to enlarge or reduce graphics according to a certain ratio. In computer graphics, a scaling matrix is ​​usually used for scaling operations. In the scaling matrix, the elements on the diagonal represent the scaling along the coordinate axis, and the elements on the off-diagonal represent the scaling in the diagonal direction.

3. Rotation: Rotation is to rotate the graph around a certain point or axis by a certain angle, usually using a rotation matrix. The rotation matrix is ​​a two-dimensional matrix, where cos and sin represent the cosine and sine of the rotation angle, respectively. The rotation operation can be realized by performing a rotation matrix transformation on each point in the graph.

These operations are often used for image transformation in the fields of computer graphics, image processing, etc. Graphics translation, scaling, and rotation are commonly used operations in computer graphics to change the position, size, and orientation of an image.

1. Graphical translation matrix

1. The concept of matrix

A matrix is ​​a mathematical object consisting of a rectangular arrangement of numbers. It can be seen as an extension of vectors. It is usually expressed as an uppercase letter, such as A, B, etc., and each element is expressed in lowercase letters. A matrix contains a certain number of rows and columns, and each element can be identified by its row number and column number in the matrix.

Generally, an element of an m×n matrix A can be expressed as a[i,j], where i represents the row number of the element, and j represents the column number of the element. For example, for a 3×3 matrix A, its elements can be expressed as:

A = [ a[1,1]  a[1,2]  a[1,3] ]
    [ a[2,1]  a[2,2]  a[2,3] ]
    [ a[3,1]  a[3,2]  a[3,3] ]

Matrices are widely used in many branches of mathematics such as linear algebra, graph theory, and probability theory, as well as in other disciplines such as computer science, physics, economics, and engineering.

A matrix is ​​a data table (m rows and n columns) arranged vertically and horizontally, and its function is to convert one point to another.

2. Row-major order and column-major order

The row-major order and column-major order of a matrix both refer to the storage order.

Row-major order refers to the way in which matrix elements are stored row by row, that is, the elements of the first row are stored first, then the elements of the second row, and so on until the elements of the last row. In computers, the row-major order storage method of matrix is ​​the general storage method.

Column-major order refers to the way in which matrix elements are stored sequentially by column, that is, the elements in the first column are stored first, then the elements in the second column, and so on until the elements in the last column. In computers, the column-major storage method of matrices is also commonly used in some specific application scenarios, such as the optimization of matrix multiplication algorithms.

3. Three-dimensional coordinate translation

4. Translation matrix

1. ax + by + cz + d = x + x1:
only when a = 1, b = c = 0, d = x1, the left and right sides of the equation are valid

2. ex + fy + gz + h = y + y1:
only when f = 1, e = g = 0, h = y1, both sides of the equation are valid

3. ix + jy + kz + l = z + z1:
only when k = 1, i = j = 0, l = z1, both sides of the equation are valid

4. mx + ny + oz + p = 1:
only when m = n = o = 0, p = 1, both sides of the equation are valid

5. uniformMatrix4fv

uniformMatrix4fv is a function of WebGL used to transfer four-dimensional matrix data to the uniform variable in the shader. The specific usage is as follows:

uniformMatrix4fv(location, transpose, value);

Among them, location refers to the storage location of the uniform variable, transpose is a Boolean value indicating whether to transpose the matrix, and value is an array of Float32Array type, indicating the matrix data to be transmitted.

For example, the following code transfers a 4×4 identity matrix into a uniform variable named uModelViewMatrix:

var modelViewMatrix = mat4.create(); // 创建一个4x4的单位矩阵
gl.uniformMatrix4fv(uModelViewMatrixLoc, false, modelViewMatrix);

In the shader, we can define a uniform variable called uModelViewMatrix like this:

uniform mat4 uModelViewMatrix;

6. Case

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../lib/index.js"></script>
  <style>
    * {
      
      
      margin: 0;
      padding: 0;
    }

    canvas{
      
      
      margin: 50px auto 0;
      display: block;
      background: yellow;
    }
  </style>
</head>
<body>
  <canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
  </canvas>
</body>
</html>
<script>
  // 平移矩阵
  function getTranslateMatrix(x = 0,y = 0,z = 0) {
      
      
    return new Float32Array([
      1.0,0.0,0.0,0.0,
      0.0,1.0,0.0,0.0,
      0.0,0.0,1.0,0.0,
      x  ,y  ,z  , 1,
    ])
  }
  const ctx = document.getElementById('canvas')

  const gl = ctx.getContext('webgl')

  // 创建着色器源码
  const VERTEX_SHADER_SOURCE = `
    attribute vec4 aPosition;
    uniform mat4 mat;
    void main() {
      gl_Position = mat * aPosition;
      gl_PointSize = 10.0;
    }
  `; // 顶点着色器

  const FRAGMENT_SHADER_SOURCE = `
    void main() {
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `; // 片元着色器

  const program = initShader(gl, VERTEX_SHADER_SOURCE, FRAGMENT_SHADER_SOURCE)

  const aPosition = gl.getAttribLocation(program, 'aPosition');
  const mat = gl.getUniformLocation(program, 'mat');

  const points = new Float32Array([
    -0.5, -0.5,
     0.5, -0.5,
     0.0,  0.5,
  ])

  const buffer = gl.createBuffer();

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

  gl.bufferData(gl.ARRAY_BUFFER, points, gl.STATIC_DRAW);

  gl.vertexAttribPointer(aPosition, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPosition)

  let x = -1;
  function animation() {
      
      
    x += 0.01;
    if (x > 1) {
      
      
      x = -1;
    }

    const matrix = getTranslateMatrix(x, x);
    // gl.vertexAttrib1f(aTranslate, x);
    gl.uniformMatrix4fv(mat, false, matrix);
    gl.drawArrays(gl.TRIANGLES, 0, 3);

    requestAnimationFrame(animation);
  }

  animation()
</script>