WebGL笔记：绘制多个点，三角形，以及画各种不同的线条，面

绘制多点

1 ） WebGL 缓冲区

• 我们在用js定点位的时候，肯定是要建立一份顶点数据的，这份顶点数据是给着色器的，因为着色器需要这份顶点数据绘图
• 然而，我们在js中建立顶点数据，着色器肯定是拿不到的，这是语言不通导致的
• 为了解决这个问题，webgl 系统就建立了一个能翻译双方语言的缓冲区
• js 可以用特定的方法把数据存在这个缓冲区中，着色器可以从缓冲区中拿到相应的数据
• 接下来就看一下这个缓冲区是如何建的，着色器又是如何从其中拿数据的

2 ）WebGL 绘制多点步骤

2.1 建立着色器源文件

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        gl_PointSize = 20.0;
    }
script>
<script id="fragmentShader" type="x-shader/x-fragment">
    void main(){
        gl_FragColor=vec4(1.0,1.0,0.0,1.0);
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12

2.2 获取webgl 上下文

const canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
const gl = canvas.getContext('webgl');
1
2
3
4

2.3 初始化着色器

const vsSource = document.getElementById('vertexShader').innerText;
const fsSource = document.getElementById('fragmentShader').innerText;
initShaders(gl, vsSource, fsSource);
1
2
3

2.4 设置顶点点位

const vertices = new Float32Array([
    0.0,  0.1,
    -0.1,-0.1,
    0.1, -0.1
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
1
2
3
4
5
6
7
8
9
10
11
12
13

• 建立顶点数据，两个浮点数构成一个顶点，分别代表 x、y 值

  const vertices = new Float32Array([
      // x, y
      0.0,  0.1, // 顶点
      -0.1, -0.1, // 顶点
      0.1, -0.1  // 顶点
  ])
  1
  2
  3
  4
  5
  6

• 现在上面的这些顶点数据是存储在js 缓存里的，着色器拿不到，需要建立一个着色器和js 都能进入的公共区，即缓冲区
• 建立缓冲对象

  const vertexBuffer = gl.createBuffer();
  1

• 现在上面的这个缓冲区是独立存在的，它只是一个空着的仓库，和谁都没有关系。接下来咱们就让其和着色器建立连接
• 绑定缓冲对象

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  1

• 绑定缓冲区相关api为：gl.bindBuffer(target,buffer)
  • target 要把缓冲区放在 webgl 系统中的什么位置
  • buffer 缓冲区
• 着色器对象在执行 initShaders() 初始化方法的时候，已经被写入webgl 上下文对象gl 中了，这个 initShaders 方法可查阅之前博文
• 当缓冲区和着色器建立了绑定关系，我们就可以往这块空间写入数据了
• 往缓冲区对象中写入数据

  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
  1

• 相关api为：bufferData(target, data, usage) 将数据写入缓冲区
  • target 要把缓冲区放在 webgl 系统中的什么位置
  • data 数据
  • usage 向缓冲区写入数据的方式，目前使用 gl.STATIC_DRAW 方式，它是向缓冲区中一次性写入数据，着色器会绘制多次
  • 现在着色器虽然绑定了缓冲区，可以访问里面的数据了
  • 但是我们还得让着色器知道这个仓库是给哪个变量的，比如咱们这里用于控制点位的attribute 变量，这样做是为了提高绘图效率
• 将缓冲区对象分配给 attribute 变量

  const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
  1
  2

• 相关api为：gl.vertexAttribPointer(local, size, type, normalized, stride, offset) 将缓冲区对象分配给 attribute 变量
  • local attribute变量
  • size 顶点分量的个数，比如我们的vertices 数组中，两个数据表示一个顶点，我们定一个 2
  • type 数据类型，比如 gl.FLOAT 浮点型
  • normalized 是否将顶点数据归一
  • stride 相邻两个顶点间的字节数，我的例子里写的是0，那就是顶点之间是紧挨着的
  • offset 从缓冲区的什么位置开始存储变量，我的例子里写的是0，那就是从头开始存储变量
• 到了这里，着色器就知道缓冲区的数据是给谁的了，因为咱们缓冲区里的顶点数据是数组，里面有多个顶点
• 所以我们得开启一个让着色器批量处理顶点数据的属性，默认着色器只会一个一个的接收顶点数据，然后一个一个的绘制顶点
• 开启顶点数据的批处理功能

  gl.enableVertexAttribArray(a_Position);
  1

• 相关api, enableVertexAttribArray(location), location attribute 变量
• 好, 目前已经是万事俱备，可以着手绘图, 绘图前，先将画布清理下

2.5 清理画布

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
1
2

2.6 绘图

gl.drawArrays(gl.POINTS, 0, 3); // 这是绘制三个顶点
1

• 相关api：drawArrays(mode, first, count)
  • mode 绘图模式，比如 gl.POINTS 画点
  • first 从哪个顶点开始绘制
  • count 要画多少个顶点

绘制三角形

• 绘制完成三个点，那么绘制三角形的工作就简单了
• 注意：绘制三角形是不需要设置顶点的大小的

1 ）顶点着色器移除顶点的配置

<script id="vertexShader" type="x-shader/x-vertex">
    attribute vec4 a_Position;
    void main(){
        gl_Position = a_Position;
        // gl_PointSize = 20.0;
    }
script>
1
2
3
4
5
6
7

• 因为 gl_PointSize 这个属性是控制顶点大小的，已经不需要了

2 ）js中更改绘制方式

// gl.drawArrays(gl.POINTS, 0, 3);
gl.drawArrays(gl.TRIANGLES, 0, 3);
1
2

• gl.TRIANGLES 就是绘制三角形

画不同的线条

• 关于 drawArrays 第一个 mode 参数
  • POINTS 可视的点
  • LINES 单独线段
  • LINE_STRIP 线条
  • LINE_LOOP 闭合线条
  • TRIANGLES 单独三角形
  • TRIANGLE_STRIP 三角带
  • TRIANGLE_FAN 三角扇

1 ）POINTS

• 字面理解就是一个个的可以看到的点

• 上面六个点的绘制顺序是：v0, v1, v2, v3, v4, v5

2 ）LINES 单独线段

• 上面三条有向线段的绘制顺序是
  • v0 > v1
  • v2 > v3
  • v4 > v5

3 ）LINE_STRIP 线条

• 上面线条的绘制顺序是：v0>v1>v2>v3>v4>v5

4 ）LINE_LOOP 闭合线条

• 上面线条的绘制顺序是：v0>v1>v2>v3>v4>v5>v0

5 ）TRIANGLES 三角形

• 这里就是普通的三角形，画了2个，需要6个点
• 上面两个面的绘制顺序是： v0>v1>v2，v3>v4>v5

6 ）TRIANGLE_STRIP 三角带

• 上面四个面的绘制顺序是：
  • v0>v1>v2:
  • 之后，以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形，v2>v1>v3
  • 之后，以上一个三角形的第三条边+下一个点为基础，以和第二条边相反的方向绘制三角形，v2>v3>v4
  • 最后，以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形，v4>v3>v5
• 规律：
  • 第一个三角形：v0>v1>v2
  • 第偶数个三角形：以上一个三角形的第二条边+下一个点为基础，以和第二条边相反的方向绘制三角形
  • 第奇数个三角形：以上一个三角形的第三条边+下一个点为基础，以和第二条边相反的方向绘制三角形

7 ）TRIANGLE_FAN 三角扇

• 上面四个面的绘制顺序是：
  • v0>v1>v2: 以上一个三角形的第三条边+下一个点为基础，按照和第三条边相反的顺序，绘制三角形
  • v0>v2>v3: 同上
  • v0>v3>v4: 同上
  • v0>v4>v5: 同上
• 注意，如果绘制的点数大于实际的点数
  • gl.drawArrays(gl.TRIANGLES, 0, 6); 这里其实只需要5就行，但是给了6
  • 那么按照上述规律再继续找原点继续绘制出一个三角形