着色器

着色器是用来实现图像渲染的，用来替代固定渲染管线的可编程程序。其中 VertexShader（定点着色器）主要负责顶点的几何关系等的运算，FragmentShader（片元着色器）主要负责片元颜色等的计算。

1. 定点着色器

定点着色器顾名思义是对定点进行一系列操作的着色器。顶点除了有最基本的位置属性，还可能包含很多其他属性，比如纹理、法线等。

通过顶点着色器，显卡就知道顶点应该绘制在具体哪个位置。顶点着色器是非常重要的着色器，且必须我们自己去定义。

顶点着色器作用于每个顶点，可以生成每个顶点的最终位置。针对每个顶点，它都会执行一次，一旦每个顶点的最终位置确定了，GPU 就可以把这些可见顶点的集合组装成点、直线以及三角形，从而提高渲染场景和模型的速度。

2. 片元着色器

如果你已经有使用电脑绘图的经验，你就会知道在这个过程中你会画一个圆，然后是一个矩形、一条线、一些三角形，知道你组成你想要的图像。这个过程与手写一封信或一本书非常相似——它是一组执行一项又一项任务的指令。着色器也是一组指令，但指令是针对屏幕上每个像素一次性执行的。这意味着您编写的代码必须根据屏幕上像素的位置表现出不同的行为。就像打字机一样，您的程序将作为一个接收位置并返回颜色的函数工作，并且当他被编译时，他会运行的非常快。

着色器语音——Shader

语言特性

一种强类型语音，赋值时等号左右两侧的数据类型必须一致，否则报错，定义函数时必须指定函数的返回值类型；
对大小写敏感；
每个语句都已英文分号结束；
程序自上而下逐行执行；

VScode Shader 插件

Shader languages support for VS Code（着色器语音的语法高亮器）；
GLSL Lint（语法报错提示）；
glsl-canvas、Shader Toy（在 VScode 里可视化展示渲染效果）；

除此之外，也可以使用 gl-lint js 包检查 Shader 语法（在项目里直接引入即可）；

Shader 颜色

颜色分为红(r)、绿(g)、蓝(b)，透明度(a)，组合为4个维向量(r, g, b, a)；
每个分量的范围是 0~1，即：颜色值/255；
可以每个分量进行加减乘除运算，也可以对整个颜色向量进行加减乘除运算；

(0.0, 0.0, 0.0, 0.0)：黑色；
(1.0, 1.0, 1.0, 1.0)：摆色；
(1.0, 0.0, 0.0, 1.0)：红色；
(0.0, 1.0, 0.0, 1.0)：绿色；
(0.0, 0.0, 1.0, 1.0)：蓝色；

Shader 坐标系统

`gl_Position`	`gl_FragCoord`	`gl_PointCoord`
描述的是顶点在世界坐标系中的坐标	描述的是片元在以 canvas 画布窗口坐标系统中的坐标	描述的是点域图元（点精灵/PointSprite）光栅化后的片元，表示的坐标就是 `gl_PointSize` 定义的区域内的片元坐标
根据坐标比例来设定	默认是画布的长和宽	区间是`[0, 1]`