WebGL执行原理
图形流水线
文字描述
- 确定图形的每一个顶点，比如说一个三角形，她需要三个顶点来确定他的大小位置等
- 图元装配： 他的意思主要是通过上面的
顶点来确定一个图形 - 光栅化： 你已经有了形状，就是骨架但是他的内部是空的，我们可以想象一下 3个火柴棍，拼成一个三角形，但是他不是有面积的，中间是空的，通过光栅化把他中间进行填充，这样他就变成了
类似一个实体 - 片元着色：这里我们举个栗子，
风筝的制作流程： 第一步肯定要先搭好骨架，也就是我们上面说的图元装配； 第二步，我们需要的是为风筝的骨架铺上需要的布料或者其他材料，就是光栅化，光栅化过后就得到基本的风筝了。但是这样的风筝肯定不好看啊，这时候我们肯定想要好看点的 风筝不能比其他小伙伴的不好看吧，这就需要我们的片元着色了。第三步：就是在风筝上面涂上图案 - 逐片元操作：这里我们可以理解对图案的一些
优化和处理
重点的2个就是我们的着色器
着色器的作用
首先，WebGL里有顶点着色器和片元着色器两种着色器。顶点着色器和片元着色器是相互依赖的，缺一不可，并且首先被调用的是顶点着色器。
可以把顶点相关的所有情报都传给顶点着色器。比如，顶点的位置，顶点法线，纹理坐标，顶点颜色等等，跟顶点相关的所有情报都可以传给顶点着色器。在这里，我们可以自由决定传入着色器的内容，这种灵活性就是可编辑渲染管线的好处。但是，虽然说传入着色器的内容是自由决定的，但是顶点的位置情报是必须的，因为如果不知道顶点的位置的话，是没有办法绘制模型的。
顶点着色器就跟他的字面上的意思一样，接受顶点相关的情报，最后决定如何处理这些顶点。而片元着色器则决定了画面上用什么颜色来输出。片元着色器的英文是fragment，其实就是断片，碎片的意思。而画面上的像素则是画面上的最小的断片，所以片元着色器操作的是颜色。
最通俗的说就是，顶点着色器就是处理顶点相关的信息，片元着色器就是处理画面上的颜色信息。
顶点着色器（Vertex shader）
顶点着色器是用来描述
顶点特性（如位置、颜色等）的程序。顶点（Vertex）是指二维或三维空间中的一个点，比如二维或三维图形的端点或交点。
- 顶点着色器源码
顶点着色器源码是通过javascript字符串形式表示出来的 - 内置变量
定点着色器有一先内置的变量，这些变量的名字是不可以变的，而且是区分大小写的 - 自定义
Attribute变量
自定义变量需要3种限定字，他是表示变量的不同含义和作用，具有一定的限制
表示每一个点的数据，可以定义很多个 - 自定义Uniform变量
定义一个常量，uniform变量就像是ES6里面的常量（const），它不能被shader程序修改 - 自定义Varying变量
他是顶点着色器和片元着色器传导数据用的
片元着色器（Fragment shader）
进行逐片元处理过程如光照（后续教程继续解释光照）的程序。片元（fragment）是一个WebGL术语，你可以将其理解为像素（图像的单元）。
- 片元色器源代码
- 内置变量
- Uniform 和 Samplers
samplers 主要用来储存纹理的，顶点着色器没有这个概念的 - 自定义Varying变量