WebGL学习笔记（二）

目录

• 绘制多个顶点
  • 使用缓冲区对象
  • 类型化数组
  • 使用drawArrays()函数绘制图形
    • 图形的移动
      • 利用表达式实现移动
      • 利用旋转矩阵实现移动
    • 图形的旋转
      • 利用表达式实现旋转
      • 利用变换矩阵实现旋转
      • 使用变换矩阵程序代码（旋转）
    • 图形的缩放
      • 利用变换矩阵实现

绘制多个顶点

使用缓冲区对象

1. 创建缓冲区对象

   var vertexBuffer = gl.createBuffer();
   
   if(!vertexBuffer) {
       console.log('Failed to create the buffer object ');
       return -1;
   }
   

2. 绑定缓冲区对象

   gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
   

3. 将数据写入缓冲区对象

   gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
   

4. 将缓冲区对象分配给一个attribute变量

   gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
   

5. 开启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;
' +
    'uniform vec4 u_Translation;
' +
    'void main() {
' +
    ' gl_Position = a_Position + U_Translation;
' +
    '}
';
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)执行顶点着色器都会执行以下三步：

1. 将顶点坐标传给a_Position；
2. 向a_Position加上u_Translation；
3. 结果赋值给gl_Position；

利用旋转矩阵实现移动

图形的旋转

描述一个旋转需要指明

1. 旋转轴
2. 旋转方向
3. 旋转角度

利用表达式实现旋转

//顶点着色器
var VSHADER_SOURCE =
//x' = x cos b - y sin b
//y' = y sin b + y cos b
//z' = z
    'attribute vec4 a_Position;
' +
    'uniform float u_CosB,u_SinB;
' +
    'void main() {
' +
    ' gl_Position.x = a_Position.x * u_CosB - a_Position.y * u_SinB;
'+
    ' gl_Position.y = a_Position.x * u_SinB + a_Position.y * u_CosB;
'+
    '}
';
    
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;
' +
    'uniform mat4 u_xformMatrix;
' +//变换矩阵的定义,使用mat4表示4阶
    'void main() {
' +
    ' gl_Position = u_xformMatrix * a_Position;
' +
    '}
';
    
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]排序：

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

图形的缩放

利用变换矩阵实现

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