webgl学习系列--1 hello webgl

首先来看webgl的工作流程

1 创建画布元素--也就是canvas元素

2 获取画布上下文

3 初始化视口  

4 创建渲染数据

5 创建转换矩阵

6 着色器绘制算法

7 使用参数初始化着色器

8 绘制。

解释：

1 2自然不用说

3  想象我们会如何去画图。由于我们拿到的是整个canvas，绘图要有一个指定的区域和开始的起点。因此需要指定绘图的范围和下笔的那一点，webgl提供了函数，即gl.viewport(p1,p2,p3,p4)我们再结合API来看看这四个参数是什么意思。虽然此前没有用过这个函数，但是大致就才出来了。，通过这一步，我们就完成了视口的初始化。

4 创建渲染数据，这个就是我们要绘制的数据。

vertexBuffer = gl.createBuffer();
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

其中createBuffer和bindBuffer基本都是固定的，目前不理解为何这样设计。（猜想是代理了整个buffer对象，也就是一个三维模型的所有数据，然后复制引用，不必多个创建。）

然后使用bufferData 绑定数据

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(verts), gl.STATIC_DRAW);

  var square = {buffer:vertexBuffer, vertSize:3, nVerts:4, primtype:gl.TRIANGLE_STRIP};
        return square;

返回的这个square对象也就没有什么特殊的含义了，就是一个json对象，只不过统一管理了。

5 创建转换矩阵 

包括在3D坐标系中模型相对相机的位置，即模型视图矩阵。第二个就是投影矩阵。

模型视图矩阵很好理解，就是你的三维模型坐标在canvas中绘制的坐标（这一点对地信的同学来说极好理解，因为也要设计地理坐标转换）。

那么第二个问题就来了。由于计算机屏幕是2D的，我们不能绘制三维的物体，只是在视觉上的三维，因此需要投影矩阵变换一下

才能变为视觉上的三维。就跟我们在纸上画正方体一样，虽然都是相同坐标，但是画的是斜线。

6 着色器绘制算法

也可以说着色器绘制函数。那么应该传进去绘制的模型，在一个就是canvas上下文，顶点着色器参数，片元着色器参数（这都是我的猜想）

实际上的参数是 createShader(gl, str, type） 即上下文，着色器，和类型（也就是上面提到的两种着色器参数）。这么看着色器自然就可以复用了。

7 传参初始化着色器

这里面包含很多代码，暂时就不做研究了。

8 绘制。