在WebGL笔记_绘制流程以及三维坐标变换(一)这篇文章介绍了WebGL绘制三维模型的流程。其中提到了顶点着色器、片元着色器、以及一系列的矩阵变换。如果直接用WebGL提供的API来实现，需要自己去读取并解析模型文件、自己去写着色器、自己进行构造相应的矩阵变换。
WebGL经历了如下处理流程：
准备数据阶段：在这个阶段，我们需要提供顶点坐标、索引（三角形绘制顺序）、uv（决定贴图坐标）、法线（决定光照效果），以及各种矩阵（比如投影矩阵）。其中顶点数据存储在缓存区（因为数量巨大），以修饰符attribute传递给顶点着色器；矩阵则以修饰符uniform传递给顶点着色器。
生成顶点着色器：根据我们需要，由Javascript定义一段顶点着色器（opengl es）程序的字符串，生成并且编译成一段着色器程序传递给GPU。
图元装配： GPU根据顶点数量，挨个执行顶点着色器程序，生成顶点最终的坐标，完成坐标转换。
生成片元着色器：模型是什么颜色，看起来是什么质地，光照效果，阴影（流程较复杂，需要先渲染到纹理，可以先不关注），都在这个阶段处理。
光栅化：能过片元着色器，我们确定好了每个片元的颜色，以及根据深度缓存区判断哪些片元被挡住了，不需要渲染，最终将片元信息存储到颜色缓存区，最终完成整个渲染。
下面是WebGL的工作流程图：
Three.js是一个基于WebGL的框架，对于以上过程进行了大量封装，减少了工作量。它将webGL基于光栅化的2D API，封装成了我们人类能看懂的 3D API。three.js会根据我们所选的材质，选择对应的顶点着色器和片元着色器。
- 辅助我们导出了模型数据；
- 自动生成了各种矩阵；
- 生成了顶点着色器；
- 辅助我们生成材质，配置灯光；
- 根据我们设置的材质生成了片元着色器。
