绘制多个顶点

绘制多个顶点

使用缓冲区对象

创建缓冲区对象

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]排序：

平移的变换矩阵实现代码和旋转类似。

图形的缩放

利用变换矩阵实现

代码和上述旋转代码类似。

巴特西

WebGL学习笔记（二）