着色器是什么？
在计算机图形学领域，着色器（英语：shader）就像一位魔法师一样，可以让我们的图像变得更好看。它们最初是用来处理图像的浓淡，比如计算光照、亮度、颜色等，但现在它们的能力不止于此，可以被用于各种不同领域，比如处理CG特效、进行视频后期处理，甚至在与计算机图形学无关的领域也有用武之地。
使用着色器在图形硬件上计算渲染效果有很高的自由度。虽然不是强制要求，但大多数着色器都是针对GPU开发的。GPU的可编程绘图管线已经全面取代了传统的固定管线，可以使用着色器语言对其进行编程。这意味着，像像素、顶点和纹理这些构成最终图像的基本元素，它们的位置、色相、饱和度、亮度和对比度等等都可以通过着色器中的算法进行动态调整。而且，外部程序可以利用着色器提供的外部变量和纹理，修改着色器中的参数。
在电影后期处理、计算机成像、电子游戏等领域，着色器经常被用来制作各种特效。除了普通的光照模型，着色器还可以调整图像的色相、饱和度、亮度和对比度，生成模糊、高光、有体积光源、失焦、卡通渲染、色调分离、畸变、凹凸贴图、色键（即所谓的蓝幕、绿幕抠像效果）、边缘检测等效果。
在GLSL中，着色器通常由GLSL语言编写。GLSL着色器支持许多不同的特性，包括通用算法、向量和矩阵操作、纹理处理和光照计算等。着色器还可以使用条件语句、循环和函数等编程结构，以实现更复杂的效果。
着色器的历史
1988年5月，Pixar公布了第三版RenderMan规范，将“着色器”的使用推广到了各大应用领域。[2]
随着图形处理器的进步，主要的图形软件库如OpenGL和Direct3D开始支持着色器。最初支持着色器的 GPU 仅支持像素着色器，但随着开发者逐渐认识到着色器的强大，很快便出现了顶点着色器。2000年，第一款支持可编程像素着色器的显卡 Nvidia GeForce 3（NV20）问世。Direct3D 10 和 OpenGL 3.2 则引入了几何着色器。在现代计算机图形学中，可编程着色器已经成为了不可或缺的一部分。它们允许开发者创建高质量的、高度可定制的图形效果，从而为游戏、电影和其他应用程序带来更逼真的视觉效果。
着色器在WebGL中是什么？
着色器就像一群画师，负责给我们的几何形状上色，让它们在屏幕上变得好看。他们会为每个顶点和像素涂上颜色，以及添加纹理和光照效果。我们提供了大量数据，比如顶点的位置、相机信息、颜色、纹理等等，然后GPU根据着色器的指令和这些数据，让我们的几何图形以最佳状态出现在我们面前。
着色器类型
Vertex shader顶点着色器
顶点着色器就是那个能够让你的几何形状在屏幕上出现的魔法师。他会把每个顶点的位置、网格变换、相机信息等发送给GPU，然后GPU会遵循他的指令，在屏幕上把你的形状投影成2D空间的图像，就像画在画布上一样。他的代码会被应用于几何体的每个顶点，但有些数据会在顶点之间变化，这些叫做attribute“属性”，而有些数据则不会变化，这些叫做uniform“统一的”。顶点着色器的工作完成后，GPU知道哪些像素是可见的，就可以让片段着色器为它们上色了。
简单来说同一个顶点着色器将用于每个顶点，但是像顶点位置这样的数据在每个顶点中是不一样的，这些类型的数据就叫做属性
Fragment shader片段着色器
glsl中的颜色转换
在GLSL中，颜色通道的值范围是从0到1。因此，我们需要将每个通道的值转换为0到1之间的小数。
为了将
rgba(255, 0, 0, 255)转换为GLSL中0到1的颜色值，我们需要将每个通道的值除以255。这将会得到下面的RGBA颜色值：vec4(1.0, 0.0, 0.0, 1.0)。具体地说，红色通道的值为255，所以 255 / 255 = 1.0。绿色和蓝色通道的值都是0，所以 0 / 255 = 0.0。透明度通道的值也是255，所以 255 / 255 = 1.0。因此，最终的GLSL颜色值为
vec4(1.0, 0.0, 0.0, 1.0)。
片段着色器就是给几何图形的每个小片段上色的程序，就像给一张拼图每个小块涂上颜色一样。它会被用于每一个可见的小片段上，就像拼图每一个小块都需要涂上颜色一样。我们可以像给顶点着色器一样直接把颜色等数据扔给它，或者从顶点着色器那里把数据传给它。这些从顶点着色器到片段着色器的数据被称为varying“可变的”，也就是说，它们的值会随着小片段的不同而不同。
总之，GLSL就是在画师们的帮助下，让我们的几何图形变得更好看更真实的程序。如果你想深入了解它，可以看看参考文章哦。
uniform变量是全局变量，它的值在整个着色器程序中都是不变的。uniform变量通常用于表示材质属性、光照属性等。【可以理解为常量】
varying变量是从顶点着色器传递到片元着色器的变量。它的值在顶点着色器和片元着色器之间进行插值，以便在片元着色器中进行颜色计算。varying变量通常用于表示顶点属性，如顶点颜色、纹理坐标等。
基本类型
- void – 用于没有返回值的函式
- bool – 条件类型，其值可以是真或假
- int – 带负号整数
- float – 浮点数
- vec2 – 2 个浮点数组成的向量
- vec3 – 3 个浮点数组成的向量
- vec4 – 4 个浮点数组成的向量
- bvec2 – 2 个布林组成的向量
- bvec3 – 3 个布林组成的向量
- bvec4 – 4 个布林组成的向量
- ivec2 – 2 个整数组成的向量
- ivec3 – 3 个整数组成的向量
- ivec4 – 4 个整数组成的向量
- mat2 – 浮点数的 2X2 矩阵
- mat3 – 浮点数的 3X3 矩阵
- mat4 – 浮点数的 4X4 矩阵
- sampler1D – 用来存取一维纹理的句柄（handle）（或：操作，作名词解。）
- sampler2D – 用来存取二维纹理的句柄
- sampler3D – 用来存取三维纹理的句柄
- samplerCube – 用来存取立方映射纹理的句柄
- sampler1Dshadow – 用来存取一维深度纹理的句柄
- sampler2Dshadow – 用来存取二维深度纹理的句柄
内置常用变量
modelMatrix（模型矩阵）：表示将模型从模型空间变换到世界空间的矩阵。它通常用于将模型的顶点位置从局部坐标系转换为世界坐标系。viewMatrix（视图矩阵）：表示将场景从世界空间变换到观察者（摄像机）空间的矩阵。它通常用于将顶点从世界坐标系转换为观察者坐标系。projectionMatrix（投影矩阵）：表示将场景从观察者空间变换到裁剪空间的矩阵。它通常用于执行投影变换，将顶点从观察者坐标系转换为裁剪空间（标准化设备坐标系）。modelViewMatrix（模型视图矩阵）：是viewMatrix和modelMatrix的组合。它表示将模型从模型空间变换到观察者空间的矩阵。通过将模型的顶点首先应用于modelMatrix，然后应用于viewMatrix，可以将其从局部坐标系转换为观察者坐标系。
GLSL颜色转换
16进制转换rgb颜色
。在计算机编程的上下文中，十六进制是一种基于16的数字系统，使用数字0-9和字母A-F来表示值。在这种情况下，“0xFF0000"表示RGB格式中的红色，前两个数字表示红色通道值，接下来两个数字表示绿色通道值，最后两个数字表示蓝色通道值。
在rgba格式中，每个颜色通道的值范围是从0到255，因此我们可以将16进制颜色代码中的每个2位数转换为10进制数，并将它们分别映射到对应的红色，绿色和蓝色通道中。
在这个例子中，0x前缀用于表示其后面的值以十六进制格式表示， FF 转换为10进制数是255，因此这个颜色的红色通道是255。绿色和蓝色通道都是0，因为在16进制代码中，它们的值都是00。 同时，因为没有透明度通道的值，所以A=1.0,透明度通道的值也是255，因为它是完全不透明的。
因此，这个16进制颜色的RGBA表示为 rgba(255, 0, 0, 255),GLSL中的颜色值为vec4(1.0, 0.0, 0.0, 1.0)。
glsl颜色转为rgba
在GLSL中，颜色通道的值范围是从0到1。因此，我们需要将每个通道的值转换为0到1之间的小数。 为了将 rgba(255, 0, 0, 255) 转换为GLSL中0到1的颜色值，我们需要将每个通道的值除以255。这将会得到下面的RGBA颜色值： vec4(1.0, 0.0, 0.0, 1.0)。 具体地说，红色通道的值为255，所以 255 / 255 = 1.0。绿色和蓝色通道的值都是0，所以 0 / 255 = 0.0。透明度通道的值也是255，所以 255 / 255 = 1.0。因此，最终的GLSL颜色值为 vec4(1.0, 0.0, 0.0, 1.0)。