-
缓冲区对象（buffer object）: 可以一次性地向着色器传入多个顶点的数据。
缓冲区对象是WebGL系统中的一块内存区域，我们可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用。 -
使用缓冲区对象向顶点着色器传入多个顶点
使用缓冲区对象向顶点着色器传入多个顶点
使用缓冲区对象向顶点着色器传入多个顶点的数据步骤：
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个步骤
- 类型化数组
为了绘制三维图形，WebGL通常需要同时处理大量相同类型的数据，例如顶点的坐标和颜色数据。
为了优化性能，WebGL为每种基本数据类型引入了一种特殊的数组（类型化数组）。
浏览器事先知道数组中的数据类型，所以处理起来也更有效率。
WebGL使用的各种类型化数组
与普通的Array数组不同，类型化数组不支持push() 和 pup()方法。
gl.drawArrays()
gl.drawArrays()
该方法的mode参数选择：
WebGL可以绘制的基本图形
-
gl_PositionSize = 10.0只有在绘制单个点（gl.POINTS）的时候才起作用。 -
平移
translate
步骤：
（1）将顶点坐标传给a_Positionattribute vec4 a_Position;
（2）向 a_Position 加上 u_Translationa_Position + u_Translation;
（3）结果赋值给 gl_Positiongl_Position = a_Position + u_Translation; -
旋转
为了描述一个旋转，必须指明：
（1）旋转轴（图形将围绕旋转轴旋转）
（2）旋转方向（方向：顺时针或逆时针）
（3）旋转角度（图形旋转经过的角度）
正旋转（右手法则旋转）：
3-18.png
gl.uniformMatrix4fv(location, transpose, array)
gl.uniformMatrix4fv()
网友评论