《WebGL 编程指南》笔记 —— 第三章 绘制和变换三角形

1. 缓冲区对象（buffer object）: 可以一次性地向着色器传入多个顶点的数据。
   缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。

2. 使用缓冲区对象向顶点着色器传入多个顶点

使用缓冲区对象向顶点着色器传入多个顶点

使用缓冲区对象向顶点着色器传入多个顶点的数据步骤：

var vertices = new Float32Array([
  0.0, 0.5, -0.5, -0.5, 0.5, -0.5
])

（1） 创建缓冲区对象 （var vertexBuffer = gl.createBuffer()）

创建缓冲区对象前后： WebGL系统中多了一个缓冲区对象。

创建缓冲区对象

gl.createBuffer()

（2） 绑定缓冲区对象 （gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)）

将缓冲区对象绑定到了 gl.ARRAY_BUFFER 目标上，缓冲区对象中存储着顶点的坐标数据。

gl.bindBuffer()

绑定完成后，WebGL系统中：

将缓冲区对象绑定到目标上

（3） 将数据写入缓冲区对象 （gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)）

将顶点数据写入绑定到gl.ARRAY_BUFFER上的缓冲区对象。
我们不能直接向缓冲区写数据，而只能向“目标”写入数据。
所以，要向缓冲区写数据，必须先绑定。

该方法执行后，WebGL系统的内部状态如下：

分配空间并向缓冲区对象中写入数据

gl.bufferData()

（4） 将缓冲区对象分配给一个 attribute 变量
（gl.vertexAttribPointer(a_Position, 2, gl_FLOAT, false, 0, 0)）

gl.vertexAttrib[1 2 3 4]f系列函数一次只能向 attribute 变量分配（传输）一个值。
所以，使用gl.vertexAttribPointer()一次性将整个缓冲区对象（实际上是缓冲区对象的引用或指针 => 多个顶点数据）分配给一个 attribute 值。

gl.vertexAttribPointer()

执行完第四步后，WbeGL系统内部如下：

将缓冲区对象分配给attribute变量

（5） 开启 attribute 变量 （gl.enableVertexAttribArray(a_Position)）

传入一个已经分配好缓冲区的 attribute 变量， 我们就开启了该变量。

gl.enableVertexAttribArray()

也可以使用 gl.disableVertexAttribArray() 来关闭分配

gl.disableVertexAttribArray()

总结：

使用缓冲区对象向顶点着色器传输多个顶点数据的5个步骤

3. 类型化数组
   为了绘制三维图形，WebGL通常需要同时处理大量相同类型的数据，例如顶点的坐标和颜色数据。
   为了优化性能，WebGL为每种基本数据类型引入了一种特殊的数组（类型化数组）。
   浏览器事先知道数组中的数据类型，所以处理起来也更有效率。

WebGL使用的各种类型化数组

与普通的Array数组不同，类型化数组不支持push() 和 pup()方法。

4. gl.drawArrays()

gl.drawArrays()

该方法的mode参数选择：

WebGL可以绘制的基本图形

5. gl_PositionSize = 10.0 只有在绘制单个点（gl.POINTS）的时候才起作用。

6. 平移 translate
   步骤：
   （1）将顶点坐标传给a_Position attribute vec4 a_Position;
   （2）向 a_Position 加上 u_Translation a_Position + u_Translation;
   （3）结果赋值给 gl_Position gl_Position = a_Position + u_Translation;

7. 旋转
   为了描述一个旋转，必须指明：
   （1）旋转轴（图形将围绕旋转轴旋转）
   （2）旋转方向（方向：顺时针或逆时针）
   （3）旋转角度（图形旋转经过的角度）

正旋转（右手法则旋转）：

3-18.png

8. gl.uniformMatrix4fv(location, transpose, array)

gl.uniformMatrix4fv()