片元着色器

为每个像素运行一个小程序

交互演示

交互演示 · 移动指针或点击画面，观察变化

片元着色器是一个小程序，GPU 会为表面覆盖的每个像素运行它，以决定该像素的颜色。每次运行都有各自的输入，例如 UV 坐标和时间，成千上万次运行可以并行进行。示例中的放大镜把像素显示为一个个方格，每个方格都是单次运行的结果。

适用场景

使用片元着色器制作表面图案、溶解、染色，以及其他可以逐片元独立计算的效果。片元是对最终像素的候选贡献，深度测试与混合决定最终图像。

不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。

vec2 uv = vUv;
float wave = 0.5 + 0.5 * sin(uv.x * uScale + uTime);
vec3 color = mix(uColorA, uColorB, wave);
fragColor = vec4(color, 1.0);

看起来开销很小的着色器，在覆盖整个屏幕或被反复绘制时，也可能变得昂贵。在增加更多数学运算之前，先检查纹理采样、透明度与过度绘制。

内容原作 Nicolas Zullo · 中文整理与交互改编