《WebGL编程指南》学习——绘制和变换三角形

《WebGL编程指南》的第三章用了两天看完，现将看完之后的总结和心得写下来！

• 三维模型的基本组成部分就是三角形。

一、绘制多个点

WebGL提供了 缓冲区对象（Buffer Object），可以一次性的向缓冲区内传入多个顶点数据。例如下面在同时绘制三个点的时候，就用到了缓冲区对象。

function main() {          //设置顶点位置       var n = initVertexBuffers(gl);       。。。       //绘制多个点       gl.drawArrays(gl.POINTS, 0, n); } function initVertexBuffers(gl) {       var vertices = new Float32Array([             0.0, 0.5, -0.5, -0.5, 0.5, -0.5       ])      var n = 3;//设置点的个数 } var vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);//将缓冲区绑定到目标 gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);//向缓冲区对象中写入数据 gl.vertexAttribPointer(Points, 2, gl.FLOAT, false, 0, 0);//将缓冲区对象分配给Points变量 gl.enableVertexAttribArray(Points);//连接Points变量与分配给他的缓冲区对象

 

缓冲区对象是WebGL系统中的存储区，在存储区中保存着想要使用的顶点数据。使用缓冲区的句提步骤如下：

创建缓冲区》》绑定缓冲区对象》》将数据写入缓冲区》》将缓冲区对象分配给一个attribute变量》》启用attribute变量。

一、移动、旋转、缩放

• 移动

为了将目标移动，只需要在顶点着色器中为顶点坐标的每个分量都加上需要移动的数值即可。

首先在顶点着色器中添加相应代码：

'uniform vec4 u_Translation;\n' +    'void main() {\n' +    '   gl_Position = a_Position + u_Translation;\n' + ........ //将移动距离传递给顶点着色器 var u_Translation = gl.getUniformLocation(gl.program, 'u_Translation'); gl.uniform4f(u_Translation, x, y, z, 0.0);

•     旋转

旋转稍微复杂，需要自己进行空间关系的计算，之后在程序里写出来，这里只给出代码：

'   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' +    '   gl_Position.z = a_Position.z;\n' +    '   gl_Position.w = 1.0;\n' +    '}\n';//顶点着色器中进行计算与赋值 //将旋转需要的数据传递给顶点着色器    var radian = Math.PI * ANGLE / 180.0; // Convert to radians    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');    if (!u_CosB || !u_SinB) {       console.log('Failed to get the storage location of u_CosB or u_SinB');       return;    }    gl.uniform1f(u_CosB, cosB);    gl.uniform1f(u_SinB, sinB);