Live Note

Remain optimistic

Posted on Edited on In

filter

1
2
3
4
5
6
7
8
9
10
Vue.filter("msgFormat", function (msg, arg) {
  return msg.replace(/test/g, arg)
})
Vue.filter("test", function (msg) {
  return msg + "===="
})
var vm = new Vue({
  el: "#app",
  data: { msg: "test1 test2 test3" },
})
Read more »

Posted on Edited on

Waves

Posted on Edited 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)
}
Read more »

Posted on Edited on In

绘制流程

  1. 计算变换后的位置坐标。
  2. 清空画板。
  3. 绘制
  4. 循环 1-3 操作。

代码实现

使用库函数简化数学计算

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
55
56
57
58
59
60
61
const vShaderSource = `
    attribute vec4 a_Position;
    uniform mat4 u_ModelMatrix;
    void main() {
        gl_Position = u_ModelMatrix * a_Position;
    }
`

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

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

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

  gl.clearColor(0, 0, 0, 1)

  rotating(gl, n, 360)
}

const rotating = (gl, n, ANGLE_STEP = 30) => {
  let currentAngle = 0
  let modelMatrix = new Matrix4()
  let u_ModelMatrix = gl.getUniformLocation(gl.program, "u_ModelMatrix")

  let tick = function () {
    currentAngle = animate(currentAngle, ANGLE_STEP)
    draw(gl, n, currentAngle, modelMatrix, u_ModelMatrix)
    requestAnimationFrame(tick)
  }
  tick()
}

const draw = (gl, n, currentAngle, modelMatrix, u_ModelMatrix) => {
  modelMatrix.setRotate(currentAngle, 0, 0, 1) // Set rotation matrix.
  // modelMatrix.translate(0.5, 0, 0);
  gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements)
  gl.clear(gl.COLOR_BUFFER_BIT) // Clear canvas.
  gl.drawArrays(gl.TRIANGLES, 0, n) // Draw triangle.
}

let g_last = Date.now()

/**
 * Get the new angle.
 * @param currentAngle {number}
 * @param ANGLE_STEP {number}
 * @returns {number}
 */
const animate = (currentAngle, ANGLE_STEP) => {
  let now = Date.now()
  let temp = now - g_last
  g_last = now
  return (currentAngle + (ANGLE_STEP * temp) / 1000) % 360
}

Posted on Edited on In

位移原理

与在普通的坐标系中一样，只需在需要位移的坐标位置加入相应的矢量即可。
(x1, y1, z1, w1) + (x2, y2, z2, w2) -> (x1 + x2, y1 + y2, z1 + z2, w1 + w2)
平移矩阵：

$$
\begin{bmatrix}
x’ \
y’ \
z’ \
1
\end{bmatrix} =
\begin{bmatrix}
1 & 0 & 0 & Tx \
0 & 1 & 0 & Ty \
0 & 0 & 1 & Tz \
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
52
53
54
55
56
57
58
// position = P + ▲P
const vShaderSource = `
    attribute vec4 a_Position;
    uniform vec4 u_Translation;
    void main() {
        gl_Position = a_Position + u_Translation;
    }
`

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

// Displacement
const Tx = 0.4,
  Ty = -0.2,
  Tz = 0.3
Tw = 0.0

function main() {
  const gl = document.querySelector('#canvas').getContext('webgl')

  if (!initShaders(gl, vShaderSource, fShaderSource)) return

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

  let u_Translation = gl.getUniformLocation(gl.program, 'u_Translation')
  gl.uniform4f(u_Translation, Tx, Ty, Tz, Tw)

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

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

function initVertexBuffers(gl) {
  let vertices = new Float32Array([0.0, 0.5, -0.5, -0.5, 0.5, -0.5])
  let n = vertices.length / 2

  let vertexBuffer = gl.createBuffer()
  if (!vertexBuffer) {
    console.log('failed to create buffer')
    return -1
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)

  let a_Position = gl.getAttribLocation(gl.program, 'a_Position')

  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0)
  gl.enableVertexAttribArray(a_Position)

  return n
}