绘制多个点

Posted on In

绘制步骤

  1. 创建顶点数组。
  2. 创建一个 Buffer。
  3. 将 WebGL 的 ARRAY_BUFFER 指向所创建的 Buffer。
  4. 将顶点数组赋值到 Buffer 中。
  5. 将 Buffer 分配给 Vertex Shader 中的 Attribute。
  6. 让 Vertex Shader 访问 Buffer。
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
const vShaderSource = `
    attribute vec4 a_Position;
    void main() {
        gl_Position = a_Position;
        gl_PointSize = 5.0;
    }
`

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

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

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

  let n = initVertexBuffers(gl)
  if (n < 0) {
    console.log("failed to set positions")
    return
  }

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

  gl.drawArrays(gl.POINTS, 0, n) // (type, first, count = n)
}

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

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

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer) // Bind buffer.
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW) // Draw data into buffer.

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

  // size = 2 because of the [x, y] components
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0) // Set data into 'a_Position'.
  gl.enableVertexAttribArray(a_Position) // Link attribute and Buffer.

  return n
}