引言：
Shader（可编程着色器）是用来实现图像渲染的可编辑程序。它并不是简单的计算机应用，要想真正地掌握 Shader，需要对图形学、图形 API、GPU、显卡等都有个宏观概念。而对大多数游戏开发者来说，“快速”入门又是当下的迫切需求。因此，Cocos 布道师放空整理了一个 Cocos Shader 基础系列教程（8期入门+2期扩展），介绍 Shader 的基础知识以及在 Cocos Creator 里的应用，带一些小伙伴快速入门 Shader 编写。
在 Cocos Shader 开始之前，我会先介绍一些 Shader 基础知识，从最浅显的部分开始，揭开 Shader 的神秘面纱。本次讲解采用的渲染引擎是 WebGL，首先来了解一些渲染管线知识。
CPU 与 GPU 的区别
在介绍 WebGL 之前先来了解一些前置知识，也就是 CPU 和 GPU。
CPU 和 GPU 都属于处理单元，但是结构不同。形象来说，CPU 有点像大型的传输管道，等待处理的任务只能依次通过，所以 CPU 处理任务的速度取决于处理单个任务的时间。又由于 CPU 内部结构异常复杂，能够处理大量的数据和逻辑判断，所以处理一些大型任务是足够的。但是处理图像却不在行，因为处理图像的逻辑通常不复杂，但是由于一幅图像是有成千上万的像素点构成，每个像素的处理都是一个任务，如果由 CPU 处理，那简直就是大材小用。因此就需要用到 GPU。GPU 由大量的小型处理单元构成，处理能力没 CPU 强大，但胜在数量多，并且能够并行处理。
渲染管线
在渲染过程中需要 CPU 和 GPU 之间的通力合作。CPU 如同进货的卡车不断地将要处理的数据丢给 GPU，GPU 工厂调动一个个如工人一般的计算单元对这些数据进行简单的处理，最后组装出产品——图像。
什么是 WebGL？
WebGL 是一种 3D 绘图标准，它的本质是 JavaScript 操作 OpenGL 接口，所以 WebGL 是在 OpenGL 的基础上做了一层封装，底层本质还是 OpenGL。利用 WebGL 可以根据你的代码绘制出点、线和三角形。任何复杂的场景都可以组合使用点、线和三角形实现。WebGL 运行在 GPU 中，因此需要使用能够在 GPU 上运行的程序。这样的程序需要成对提供，每对方法中都包含一个顶点着色器和一个片断着色器，并且使用 GLSL 语言（GL 着色语言）编写。每对组合起来称作一个 program（着色程序）。
在 WebGL 中，任何事物都处于 3D 空间中，但最终输出呈现给观众的往往是屏幕或者窗口这种 2D 像素，因此，在渲染引擎底层大部分工作都是把 3D 坐标转变成适应屏幕的 2D 像素。3D 坐标转 2D 的处理过程是由 WebGL 的图形渲染管线处理，它的主要传输流程分为两步：
将 3D 坐标转换成 2D 坐标
把 2D 坐标转变成实际有颜色的像素
这两个流程又被