何为Shader：让画面活起来的魔法代码

最新推荐文章于 2026-04-18 22:58:47 发布

原创最新推荐文章于 2026-04-18 22:58:47 发布 · 3.8k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#shader

Shader实用教程——从入门到高阶实例专栏收录该内容

74 篇文章

订阅专栏

文章摘要

Shader是运行在GPU上的小程序，负责控制计算机图形渲染的各个环节。它就像一位美术老师，指导显卡如何绘制屏幕上的每个像素。主要分为顶点着色器（处理3D模型顶点位置）和片元着色器（计算像素颜色），以及几何着色器等高级功能。通过GLSL等专用语言编写，Shader可实现从简单上色到复杂动态特效（如彩虹渐变、水波动画、光影效果）的各类视觉渲染。现代游戏引擎通过Shader让虚拟世界呈现出逼真材质和炫酷特效，开发者可在Unity等平台用ShaderLab语言快速实现自定义渲染效果。学习Shader需从基础着色器入手，逐步掌握光照模型、纹理映射等核心技术。

一、故事版：美术老师和画布

想象你在玩一款3D游戏，屏幕上有各种炫酷的画面：光影、颜色、纹理、特效……
这些画面是怎么“画”出来的？
这就要靠Shader，它就像一位美术老师，专门教“画布”（显卡）怎么画画！

1. 画布和美术老师

画布：显示器上的每一个像素点。
美术老师（Shader）：一段小程序，告诉画布“怎么画”。
颜料：各种颜色、光线、纹理、特效数据。

2. Shader的工作流程

（1）老板（CPU）下达任务

游戏主程序（CPU）说：“我要画一个3D小人，给他穿红衣服，打上灯光。”

（2）美术老师（Shader）分工

顶点着色器（Vertex Shader）：
先把小人的骨架（顶点）摆好位置，决定每个点在画布上的位置。
- 比如：小人抬手、转身、跳跃，都是顶点着色器在“摆造型”。
片元着色器（Fragment/Pixel Shader）：
决定每个像素的颜色和明暗。
- 比如：衣服是红色，脸上有阴影，头发反光，这些都是片元着色器“上色”。
几何着色器、计算着色器等：
还有其他老师，负责特殊效果，比如烟雾、爆炸、流水等。

（3）画布执行

画布（显卡）按照Shader老师的指令，把每个像素点画出来，最终显示在屏幕上。

二、技术版：Shader到底是什么？

Shader就是运行在显卡（GPU）上的“小程序”。
它们用专门的语言写成（如GLSL、HLSL、Cg等）。
主要类型有：
- 顶点着色器：处理每个顶点的位置。
- 片元着色器：处理每个像素的颜色。
- 几何着色器、计算着色器：做更复杂的特效或计算。

三、形象小结

Shader = GPU上的美术老师，教显卡怎么画画。
没有Shader，画面就会很单调、呆板。
有了Shader，画面可以变得五彩斑斓、光影流转、特效炫酷！

四、生活类比

Shader就像美图秀秀的滤镜：
一张普通照片，套上不同滤镜（Shader），立刻变得有艺术感、特效感。
Shader就像蛋糕师的裱花嘴：
同样的蛋糕胚，用不同的裱花嘴（Shader），能做出各种花纹和造型。

五、简单代码例子

比如一个最简单的片元着色器（GLSL）：

// 每个像素都画成红色
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // RGBA: 红色
}

这就像老师说：“每个像素都涂成红色！”

六、口诀记忆

Shader老师教画布，
画出光影和特效；
没有Shader画面土，
有了Shader美如画！

下面我会用通俗易懂+代码实例+应用流程的方式，带你快速入门Shader的世界！

一、Shader怎么写？

Shader一般用专门的语言编写，比如GLSL（OpenGL）、HLSL（DirectX）、Cg（Unity早期）、ShaderLab（Unity封装）等。
我们以GLSL为例，写一个最简单的顶点着色器和片元着色器。

1. 顶点着色器（Vertex Shader）

// 这是GLSL的顶点着色器
attribute vec3 aPos; // 顶点位置（输入）
void main() {
    gl_Position = vec4(aPos, 1.0); // 输出到屏幕坐标
}

2. 片元着色器（Fragment Shader）

// 这是GLSL的片元着色器
void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // 输出红色
}

二、Shader怎么用？

Shader本身只是“画画的规则”，要让它生效，需要在程序里加载和使用。
以OpenGL为例，流程大致如下：

写好Shader代码（如上面两个文件）。
在程序中加载Shader（读取文件内容）。
编译Shader（OpenGL API：glCompileShader）。
链接Shader程序（glLinkProgram）。
使用Shader程序（glUseProgram）。
传递数据给Shader（如顶点、颜色、纹理等）。
绘制图形（如glDrawArrays）。

在Unity、Unreal等引擎里，Shader的加载和使用会更简单，直接拖到材质球上即可。

三、特效Shader例子

1. 彩虹渐变Shader（GLSL片元着色器）

让每个像素根据位置显示不同颜色，形成彩虹渐变：

precision mediump float;
varying vec2 vUv; // 传入的UV坐标（0~1）

void main() {
    float r = vUv.x;
    float g = vUv.y;
    float b = 1.0 - vUv.x;
    gl_FragColor = vec4(r, g, b, 1.0);
}

效果：左下角蓝色，右上角红色，中间有渐变。

2. 动态水波Shader（GLSL片元着色器）

让画面像水面一样波动：

precision mediump float;
varying vec2 vUv;
uniform float uTime; // 传入的时间变量

void main() {
    float wave = sin(10.0 * vUv.x + uTime) * 0.05;
    float y = vUv.y + wave;
    gl_FragColor = vec4(y, y, 1.0, 1.0); // 蓝色水波
}

效果：画面会随时间动态起伏，像水波一样。

3. 灯光高光Shader（GLSL片元着色器）

模拟一个简单的高光效果：

precision mediump float;
varying vec3 vNormal; // 法线
uniform vec3 lightDir; // 灯光方向

void main() {
    float brightness = max(dot(normalize(vNormal), normalize(lightDir)), 0.0);
    vec3 color = vec3(1.0, 0.8, 0.6) * brightness; // 暖色高光
    gl_FragColor = vec4(color, 1.0);
}

效果：有光照的立体感。

四、在Unity中写Shader（ShaderLab例子）

Unity的Shader写法和GLSL类似，但有自己的结构。
下面是一个简单的Unity表面着色器（Surface Shader）：

Shader "Custom/SimpleColor"
{
    Properties
    {
        _Color ("Main Color", Color) = (1,0,0,1)
    }
    SubShader
    {
        Tags { "RenderType"="Opaque" }
        CGPROGRAM
        #pragma surface surf Lambert
        struct Input { };
        fixed4 _Color;
        void surf (Input IN, inout SurfaceOutput o)
        {
            o.Albedo = _Color.rgb;
        }
        ENDCG
    }
    FallBack "Diffuse"
}