WebGL相关概念

        WebGL是跨平台的应用程序接口API。它是使用JavaScript编程开发语言开发适合动态3D网页应用的理想工具，可以运行于任何操作系统以及从手机、平板电脑到桌面电脑的任何设备。

一、 3D图形学

1. 网格（Mesh）：由一个或多个多边形组成的物体，各个顶点的坐标（x, y, z）定义了多边形在3D空间中的位置。网格中的多边形通常都是三角形和四边形。
2. 模型（Model）：3D网格。
3. 纹理（Texture）：网格表面同样也可以由一个或多个位图来决定，这就是我们通常所说的纹理映射（texture mapping），简称纹理。
4. 材质（Material）：网格表面的特性统称为材质。材质通常依赖于一个或多个光源来呈现出外观效果。
5. 变换（Transform）和矩阵（Matrix）：一种不需要遍历每个顶点就可以移动模型的操作，不需要明确的逐个改变每个顶点的位置。变换包括对渲染模型的缩放、旋转、位移操作，而不必手动设定任何顶点的值。变换通常由矩阵来操作。
6. 相机（Camera）、视口（Viewport）和投影（Projection）：

   
   

   每个场景在渲染时都需要又一个视点，用户正是从视点的位置去观察场景。3D图形系统通常使用camera来定义用户与场景的相对位置和朝向。相机将3D场景渲染图像传送给2D viewport，viewport是由浏览器窗口或canvas元素决定的。上图中只有处于view frustum内部的物体才可以被渲染到屏幕上。

7. 着色器（Shader）：指一组供计算机图形资源在执行渲染任务时使用的程序代码。编写WebGL程序必须定义着色器，否则图形是不会显示在屏幕上的。着色器由顶点着色器和片元着色器（片段着色器or像素着色器）。顶点着色器处理每个顶点，将顶点的空间位置投影在屏幕上，即计算顶点的二维坐标。同时，它也负责顶点的深度缓冲（Z-Buffer）的计算。顶点着色器可以掌控顶点的位置、颜色和纹理坐标等属性，但无法生成新的顶点。像素着色器(Direct3D)，常常又称为片断着色器(OpenGL)，负责生成最后的颜色输出到每个转换后的顶点像素，而颜色的输入则可以是纯色、纹理、光源或者材质。像素着色器常用来处理场景光照和与之相关的效果，如凸凹纹理映射和调色。
8. 模型视图矩阵（modelview matrix）：定义了相机的位置和朝向。
9. 投影矩阵（projection matrix）：用于在着色器中将相机空间中模型的3D坐标转换为视口中的2D绘制空间中的坐标。
10. 图元（primitive）：WebGL的绘制是由图元组成的，图元的种类包括三角形、三角形带（triangle strip）、点和线。三角形带是指使用前三个顶点画出第一个三角形，然后再利用这前三个顶点中的后两个与下一个顶点结合再绘制下一个三角形，以此类推。

二、WebGL应用结构

        WebGL本质上只是一个绘制库，但也可以把WebGL理解成另一种画布，类似于HTML5浏览器中的2DCanvas。实际上，WebGL也正是使用了HTML5中的元素来在浏览器页面中显示3D图形。

1. 创建一个画布元素；
2. 获取画布的上下文；
3. 设置视口；
4. 创建一个或多个包含渲染数据的数组（通常是顶点数组）；
5. 创建一个或多个矩阵（mvmatrix&pmatrix），将顶点数组变换到屏幕空间中；
6. 创建一个或多个着色器来实现绘制算法（实际中，经常只提供一个着色器来满足整个应用程序，然后每次用不同的参数多次复用这个着色器）；
7. 使用参数初始化着色器；
8. 绘制图元。