缓冲区对象
(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系统中多了一个缓冲区对象。
(2) 绑定缓冲区对象 (gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer)
)
将缓冲区对象绑定到了 gl.ARRAY_BUFFER
目标上,缓冲区对象中存储着顶点的坐标数据。
绑定完成后,WebGL系统中:
(3) 将数据写入缓冲区对象 (gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW)
)
将顶点数据写入绑定到gl.ARRAY_BUFFER
上的缓冲区对象。
我们不能直接向缓冲区写数据,而只能向“目标”
写入数据。
所以,要向缓冲区写数据,必须先绑定。
该方法执行后,WebGL系统的内部状态如下:
(4) 将缓冲区对象分配给一个 attribute
变量
(gl.vertexAttribPointer(a_Position, 2, gl_FLOAT, false, 0, 0)
)
gl.vertexAttrib[1 2 3 4]f
系列函数一次只能向 attribute
变量分配(传输)一个值。
所以,使用gl.vertexAttribPointer()
一次性将整个缓冲区对象(实际上是缓冲区对象的引用或指针 => 多个顶点数据)分配给一个 attribute
值。
执行完第四步后,WbeGL系统内部如下:
(5) 开启 attribute
变量 (gl.enableVertexAttribArray(a_Position)
)
传入一个已经分配好缓冲区的 attribute
变量, 我们就开启了该变量。
也可以使用 gl.disableVertexAttribArray()
来关闭分配
总结:
- 类型化数组
为了绘制三维图形,WebGL通常需要同时处理大量相同类型的数据,例如顶点的坐标和颜色数据。
为了优化性能,WebGL为每种基本数据类型引入了一种特殊的数组(类型化数组)。
浏览器事先知道数组中的数据类型,所以处理起来也更有效率。
与普通的Array数组不同,类型化数组不支持push()
和 pup()
方法。
gl.drawArrays()
该方法的mode
参数选择:
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)旋转角度(图形旋转经过的角度)
正旋转(右手法则旋转):
gl.uniformMatrix4fv(location, transpose, array)