不过在此之前，我们先简单介绍一下 shader 是什么。

Shader 是什么？能吃吗？

我不想讲那些太学术官方的解释，一句话概括：Shader 是系统给你的一系列钩子函数，主要用在图形上，你可以在上面的钩子函数基于像素级别改变甚至创造图形。

Shader 的使用场景

可以看下别人用 shader 创造的东西：https://www.shadertoy.com/
有人可能会问，这些东西为什么不直接通过绘图软件或者动画软件搞出来，而非要用 shader 实现呢？
举个例子：大家有玩过游戏吧（没玩过那就去玩），一些游戏中当鼠标移到可交互的物品，为了看起来更显眼，这些物品会有边缘的高光，当鼠标移出去又恢复原状。这系列的场景的存在，要求我们要有动态修改图形的能力。

Shader 编程的一些基础概念和术语

下面的术语和概念在之后的教程中会反复提及，这里先预习一下，看不懂也没关系，后面会再提。
概念：

• 图形学渲染流水线：一个图形需要经过多道工艺渲染出来，每项工艺接受上一条工艺的产物进行进一步的加功，这样每道工艺互不相干形成了流水线，我们关注的 shader 就是其中的一道工艺。详细介绍：https://zhuanlan.zhihu.com/p/79183044

术语：

• fragment shader：处理每个像素的绘制颜色、方式的 shader
• vetex shader：处理像素要在哪里绘制的 shader
• uv：画布所有的像素点，整体表现为一个 0 到 1 分布的矩阵
• 零点：坐标系的 (0,0) 点，本系列教程采用 webgl，默认零点在左下角

教程的一些参考和说明

这系列教程大部分思路和实现均来自 https://www.youtube.com/watch?v=u5HAYVHsasc&list=PLGmrMu-IwbguU_nY2egTFmlg691DN7uE5，教程很不错建议去看一下。
本人目前也还在根据上述的视频学习 shader，水平有限难免有错误，如果有什么说得不对的欢迎指正。