首先来看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 绘制。