使用矩阵进行变换

Posted on In

WebGL 中的矩阵是列主序的。

平移变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_xFormMatrix;
    void main() {
        gl_Position = u_xFormMatrix * a_Position;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

const Tx = 0.5,
  Ty = 0.2,
  Tz = 0

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) reutrn

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let xFormMatrix = new Float32Array([
    1.0,
    0,
    0,
    0,
    0,
    1.0,
    0,
    0,
    0,
    0,
    1.0,
    0,
    Tx,
    Ty,
    Tz,
    1.0,
  ])
  let u_xFormMatrix = gl.getUniformLocation(gl.program, "u_xFormMatrix")
  gl.uniformMatrix4fv(u_xFormMatrix, false, xFormMatrix)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}

旋转变换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_xFormMatrix;
    void main() {
        gl_Position = u_xFormMatrix * a_Position;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

const ANGLE = 30

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) reutrn

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let radian = (Math.PI * ANGLE) / 180.0
  let sinB = Math.sin(radian),
    cosB = Math.cos(radian)

  let xFormMatrix = new Float32Array([
    // column major order
    cosB,
    sinB,
    0,
    0,
    -sinB,
    cosB,
    0,
    0,
    0,
    0,
    1,
    0,
    0,
    0,
    0,
    1,
  ])
  let u_xFormMatrix = gl.getUniformLocation(gl.program, "u_xFormMatrix")
  gl.uniformMatrix4fv(u_xFormMatrix, false, xFormMatrix)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}

缩放变换

缩放矩阵：

$$
\begin{bmatrix}
x’ \
y’ \
z’ \
1 \
\end{bmatrix} =
\begin{bmatrix}
Sx & 0 & 0 & 0 \
0 & Sy & 0 & 0 \
0 & 0 & Sz & 0 \
0 & 0 & 0 & 1 \
\end{bmatrix} ×
\begin{bmatrix}
x \
y \
z \
1 \
\end{bmatrix}
$$

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_xFormMatrix;
    void main() {
        gl_Position = u_xFormMatrix * a_Position;
    }
`

const fShaderSource = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`

const Sx = 1.0,
  Sy = 1.5,
  Sz = 1.0

function main() {
  const gl = document.querySelector("#canvas").getContext("webgl")
  if (!initShaders(gl, vShaderSource, fShaderSource)) reutrn

  let n = initVertexBuffers(gl)
  if (n < 0) return

  let xFormMatrix = new Float32Array([
    Sx,
    0,
    0,
    0,
    0,
    Sy,
    0,
    0,
    0,
    0,
    Sz,
    0,
    0,
    0,
    0,
    1,
  ])
  let u_xFormMatrix = gl.getUniformLocation(gl.program, "u_xFormMatrix")
  gl.uniformMatrix4fv(u_xFormMatrix, false, xFormMatrix)

  gl.clearColor(0.0, 0.0, 0.0, 1.0)
  gl.clear(gl.COLOR_BUFFER_BIT)

  gl.drawArrays(gl.TRIANGLES, 0, n)
}