目录
绘制多个顶点
使用缓冲区对象
创建缓冲区对象
var vertexBuffer = gl.createBuffer(); if(!vertexBuffer) {
console.log('Failed to create the buffer object ');
return -1;
}
绑定缓冲区对象
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
将数据写入缓冲区对象
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
将缓冲区对象分配给一个attribute变量
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
开启attribute变量
gl.enableVertexAttribArray(a_Position);
类型化数组
使用类型化数组存储大量相同类型的数据，比如顶点的坐标和颜色数据。
var vertices = new Float32Array{
[0.0,0.5,-0.5,-0.5,0.5,-0.5]
};
使用drawArrays()函数绘制图形
第一个参数是代表不同的绘制图形的方式。
以上顺序的绘制图形效果如下所示:
图形的移动
利用表达式实现移动
//顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform vec4 u_Translation;\n' +
'void main() {\n' +
' gl_Position = a_Position + U_Translation;\n' +
'}\n';
var Tx = 0.5,Ty = 0.5,Tz = 0.0;
...
function main()
{
var u_Translation = gl.getUniformLocation(gl.program,'u_Translation');
...
gl.uniform4f(u_Translation, Tx, Ty, Tz, 0.0);
}
即相同类型的变量之间的赋值操作，通过a_Position和u_Translation之间相加传给gl_Position;在gl.uniform4f最后一个分量为0.0的原因是这是一个平移矢量，不是一个点，因此在齐次坐标中最后一个分量是0.0；
通过以上代码后每次调用gl.drawArrays(gl.TRIANGLES,0,n)执行顶点着色器都会执行以下三步：
- 将顶点坐标传给a_Position；
- 向a_Position加上u_Translation；
- 结果赋值给gl_Position；
利用旋转矩阵实现移动
图形的旋转
描述一个旋转需要指明
- 旋转轴
- 旋转方向
- 旋转角度
利用表达式实现旋转
//顶点着色器
var VSHADER_SOURCE =
//x' = x cos b - y sin b
//y' = y sin b + y cos b
//z' = z
'attribute vec4 a_Position;\n' +
'uniform float u_CosB,u_SinB;\n' +
'void main() {\n' +
' gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;\n'+
' gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;\n'+
'}\n';
var angle = 90.0;
...
function main()
{
var radian = Math.PI * angle / 180.0;//转为弧度制
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var u_CosB = gl.getUniformLocation(gl.program, 'u_CosB');
var u_SinB = gl.getUniformLocation(gl.program, 'u_SinB');
...
gl.uniform1f(u_CosB,cosB);
gl.uniform1f(u_SinB,sinB);
}
利用变换矩阵实现旋转
三阶矩阵实现
四阶矩阵（保持和移动阶数相同）
使用变换矩阵程序代码（旋转）
//顶点着色器
var VSHADER_SOURCE =
'attribute vec4 a_Position;\n' +
'uniform mat4 u_xformMatrix;\n' +//变换矩阵的定义,使用mat4表示4阶
'void main() {\n' +
' gl_Position = u_xformMatrix * a_Position;\n' +
'}\n';
var angle = 90.0;
...
function main()
{
var radian = Math.PI * angle / 180.0;//转为弧度制
var cosB = Math.cos(radian);
var sinB = Math.sin(radian);
var xformMatrix = new Float32Array{[
cosB, sinB, 0.0, 0.0,
-sinB, cosB, 0.0, 0.0,
0.0, 0.0, 1.0, 0.0,
0.0, 0.0, 0.0, 1.0
]};
...
var u_xformMatrix = gl.getUniformLocation(gl.program, 'u_xformMatrix');
...
gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
}
WebGL中矩阵元素是按照列主序存储在数组中的。
如[a,e,i,m,b,f,i,n,c,g,k,o,d,n,l,p]排序：
平移的变换矩阵实现代码和旋转类似。
图形的缩放
利用变换矩阵实现
代码和上述旋转代码类似。