开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
1、 着色器之间数据传递
介绍一种新变量，varying变量能够从顶点着色器向片元着色器传递数据。具体使用见代码：code
const VSHADER_SOURCE = `
attribute vec4 a_Position;
attribute vec4 a_Color;
varying vec4 v_Color;
void main() {
gl_Position = a_Position;
v_Color = a_Color;
}
`;
const FSHADER_SOURCE = `
precision mediump float;
varying vec4 v_Color;
void main() {
gl_FragColor = v_Color;
}
`;
在顶点着色器中声明了attribute变量a_Color接收缓冲区的数据。声明varying变量v_Color，把a_Color的值传递给v_Color。
片元着色器中只要声明了相同名字的varying变量就可以接收顶点着色器传递的数据了。
上图就是数据传递的所有过程，通过传参的片元着色器得到的是一个五彩缤纷的三角形：
2、图形装饰和光栅化
为什么会得到这样的结果呢，再来理解一下两个着色器，我是这么理解的，顶点着色器会在处理每个顶点时执行一次，片元着色器是每个像素都会执行一次，片元着色器不会属于一个顶点所以不能使用attribute变量。在顶点和片元之间还会存在下面两个步骤：
- 图形装配过程：把孤立的点通过drawArrays的参数装配成几何图形，drawArrays的绘制次数的参数说明执行多少次片元着色器
- 光栅化过程：把装配好的几何图形转换成片元。举个不恰当的例子，就是类似于把svg转换成png，svg是每个点线的描述文件，png是像素信息的文件。
颜色会被写入颜色缓冲区最后渲染在浏览器上面。
3、varying变量的内插
我们只对每个顶点设置了颜色，每一个片元的颜色需要怎么确认呢，顶点着色器的v_Color传递到片元着色器的v_Color之间进行了内插的过程，如果是两个顶点，就会对两个点进行插值获取到中间的颜色，所以片元着色器会因为位置不同而渲染不同的颜色。
从数据到最后渲染的全部流程就在下面：
4、gpu来加速运行
大家可能认为一个模型这么多顶点，一个页面这么多片元需要处理，WebGL岂不是非常的慢？第一章我们轻描淡写了一句“着色器语言在GPU中运行”，WebGL的渲染依赖底层GPU的渲染能力。大家也许见过这个图，通过上面对WebGL全部流程的了解就知道为什么WebGL有这么多独立的计算任务。CPU单个核心的运算速度非常快但是对于大量任务也只能排队执行，而GPU（图形处理器: Graphic Processor Unit)可以看成有非常多的小管道，每一个管道执行一个着色器，整体的执行速度就会非常的迅速了。
