绘制点

Posted on In

Shader

WebGL 使用两种 Shader：

  • Vertex Shader：用于描述 point 的特性。
  • Fragment Shader：用于逐片处理。

Shader Program 使用的是 GLSL ES 语言，在 JS 中需要使用字符串编写，再通过函数加载进去。

WebGL 的执行流程大致为：

  1. Get canvas.
  2. Get WebGL context.
  3. Initialize vertex shader and fragment shader.
  4. Set clear color.
  5. Clear canvas.
  6. Draw.

vec4

在 GLSL ES 中，vec4类型用四维适量描述一个点的三维空间投影，(x, y, z, w)等价与三维空间的(x / w, y / w, z / w)。
WebGL 坐标系统水平向右为 x 正轴，竖直向上为 y 正轴，垂直屏幕向外为 z 正轴。范围都在[-1, 1]之间。

使用 onmousedown 搭配 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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
const vShaderSource = `
    attribute vec4 a_Position;
    attribute float a_PointSize;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = a_PointSize;
    }
`

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

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

  if (!gl) {
    console.log("failed to initialize context for WebGL")
    return
  }

  if (!initShaders(gl, vShaderSource, fShaderSource)) {
    // initialize program
    console.log("failed to initialize shaders.")
    return
  }

  const a_Position = gl.getAttribLocation(gl.program, "a_Position")
  if (a_Position < 0) {
    console.log("failed to get the storage location of a_Position")
    return
  }

  const a_PointSize = gl.getAttribLocation(gl.program, "a_PointSize")

  gl.vertexAttrib1f(a_PointSize, 5.0) // set the 'attribute float a_PointSize'

  // canvas.onmousemove = function (event) {
  canvas.onmousedown = function (event) {
    click(event, gl, canvas, a_Position)
  }

  gl.clearColor(0.0, 0.0, 0.0, 1)
  gl.clear(gl.COLOR_BUFFER_BIT)
}

let g_points = []

function click(event, gl, canvas, a_Position) {
  let x = event.clientX
  let y = event.clientY
  let rect = event.target.getBoundingClientRect()

  // toggle the domain of points x, y to [-1, 1]
  x = (x - rect.left - canvas.width / 2) / (canvas.width / 2)
  y = (canvas.height / 2 - (y - rect.top)) / (canvas.height / 2)
  g_points.push(x)
  g_points.push(y)

  gl.clear(gl.COLOR_BUFFER_BIT)

  for (let i = 0, len = g_points.length; i < len; i += 2) {
    gl.vertexAttrib3f(a_Position, g_points[i], g_points[i + 1], 0) // set x, y

    gl.drawArrays(gl.POINTS, 0, 1)
  }
}