简介

Shader（着色器）是现代图形渲染管线中的核心组件，它是一种运行在 GPU 上的程序，主要用于控制图形的外观，如颜色、光照、纹理等。Cesium 使用 WebGL 作为底层渲染引擎，因此 Shader 是以 GLSL（OpenGL Shading Language）语言编写的。

基本分类

Shader 分为 Vertex Shader（顶点着色器）和 Fragment Shader（片元着色器）。

Vertex Shader（顶点着色器）

作用：处理每个顶点的属性（位置、法线、纹理坐标等），将它们从模型空间转换到屏幕空间。

输入：顶点数据（如位置、法线等）。

输出：变换后的顶点位置、传递给片元着色器的插值变量。

它可以改变物体的形状，比如拉伸、变形等。

Fragment Shader（片元着色器）

作用：计算屏幕上每个像素（片元）的最终颜色。

输入：来自顶点着色器的插值变量（如纹理坐标、颜色等）。

输出：像素颜色值。

它可以改变物体的颜色、透明度、光照效果等。

TIP

那么着色器在webgl中是承担什么样的工作呢，这就得提一下渲染管线了。

渲染管线

渲染管线（图形渲染流程）是将三维场景中的图像转换成二维图像的过程。这一过程通常有下面几个步骤：

1、顶点处理: 顶点着色器 读取在顶点缓冲区中的输入数据，这一步主要是将输入的顶点进行坐标转换。

2、几何着色器处理: 这一步是可选的，几何着色器将一组顶点作为输入，这些顶点形成图元，并且能够通过发出新的顶点来形成新的(或其他)图元来生成其他形状。

3、图元装配与裁剪: 图元装配是从先前阶段输出的顶点数据中收集并将其组合成一系列图元的过程。用户渲染使用的图元类型决定了这个过程的工作方式。 该过程的输出是一个有序序列的简单图元（线、点或三角形）。接下来进行图元裁剪，这个阶段图元和视口进行相交测试，只有处在视口内的图元会保留，其他则丢弃。

4、光栅化阶段: 这个阶段会将图元映射成屏幕上的像素，生成下一步片元着色器使用的片元，这之后还会进行一次裁剪操作剔除屏幕外的片元（P.S. 片元不等同于像素，像素是屏幕上的最小可见单位，它代表了屏幕上的一个点。而片元是渲染管线中的一个中间阶段的概念，它表示在光栅化阶段生成的每个图元所覆盖的像素，另外还包含了一些额外的信息，如深度值、法线、纹理坐标等）。

5、片元处理: 通过 片元着色器 计算一个片元最终的颜色

6、测试和混合阶段：这一阶段用于控制像素的可见性和颜色混合，这个阶段检测片元的对应的深度和模板(Stencil)值，用它们来判断这个片元是其它物体的前面还是后面，决定是否应该丢弃。这个阶段也会检查alpha值（alpha值定义了一个物体的透明度）并对物体进行混合

ShaderToy

ShaderToy 是一个在线的 Shader 编辑器，它允许用户创建和分享 Shader 代码。它提供了一个基于 WebGL 的渲染环境，用户可以编写 GLSL 代码来控制渲染效果。

现在你肯定很好奇shader到底能实现什么样的效果，相信这个网站能让你大开眼界。去看看吧

另外网站创始人 Inigo Quilez 在b站上也有投稿：用数学画风景