当前位置：首页 > news >正文

Shader魔法揭秘：3D画面背后的神奇代码

news 2026/8/6 7:27:41

引子：Shader？听起来好难啊！

嗨，小朋友！

今天我们要聊一个听起来"很酷但很吓人"的东西——叫做Shader。

Shader是什么？——别慌——我用你能听懂的话来说：

Shader——就是"告诉电脑’这个东西看起来该长什么样’的一张纸条"！

打个比方：

你妈妈做菜要看菜谱**
画家画画要看参考图**
**电脑画3D画面——也要看一张"说明书"
这张说明书——就叫Shader！

Shader告诉电脑：

“这个球是红色的”
“这个盒子有花纹”
“这个水面在波动”
“这个火焰在闪烁”

没有Shader——电脑就不知道该怎么画你的游戏画面——屏幕上什么都没有！

今天——我们就来看一份真实的Shader代码——**一行一行拆开——用最简单的话解释——保证你能看懂！

一、准备工作：先看整体"骨架"

先来看看我们今天要研究的Shader——一个"给物体染色 + 贴图"的简单Shader：

Shader "MyShader/Simple" { Properties { _MainTex ("贴图", 2D) = "white" {} _Color ("颜色", Color) = (1, 1, 1, 1) } SubShader { Tags { "RenderType" = "Opaque" } Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" sampler2D _MainTex; float4 _Color; struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; }; v2f vert(appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; } fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return col * _Color; } ENDCG } } FallBack "Diffuse" }

看到这一堆代码——你可能吓一跳——“这什么鬼？”**

别怕——我们把它想象成一个"魔法配方"——一层一层拆开——你会发现它其实很简单！

二、第一层：这个魔法叫什么名字？

Shader "MyShader/Simple"

这一行就像给你的魔法起名字：

**"我这个Shader——名字叫MyShader/Simple"
就像你写作业要写上名字一样
**电脑要知道"这是哪个Shader"——才能用它

想象一下：妈妈的菜谱本子里——有一页写着"红烧肉的做法"——这就是这道菜的"名字"。

**这里的MyShader/Simple——就是我们这份Shader的名字。

三、第二层：可以调节的"魔法材料"

Properties { _MainTex ("贴图", 2D) = "white" {} _Color ("颜色", Color) = (1, 1, 1, 1) }

这里叫Properties——中文是"属性"——就是"可以调节的材料"**。

想象你在做菜：

一份菜谱说：“放多少盐、放多少糖、放什么肉”**
这些"放多少、放什么"**——就是可以调节的
每次做菜可以调：“今天多放点糖”、“今天用鸡肉”

Shader也一样：

_MainTex——“用什么图片当花纹”**（就像"用什么肉"）
_Color——“要染成什么颜色”**（就像"放多少糖")

具体来看每一行：

第一行：_MainTex ("贴图", 2D) = "white" {}

**_MainTex——**这个材料的名字（电脑内部叫它这个）
**"贴图"——**在Unity里显示的名字（给美术姐姐看的）
**2D——**说这是一张"平面的图片"
**"white"——**默认给一张"白色的图"

翻译成人话：**"我需要一张图片作为花纹——默认是白色的"。

第二行：_Color ("颜色", Color) = (1, 1, 1, 1)

**_Color——**颜色材料的名字
**"颜色"——**给美术看的名字
**Color——**类型是"颜色"
**(1, 1, 1, 1)——**默认是"白色 + 完全不透明"

这四个数字什么意思？：

**第1个1——**红色的多少（1=最红）
**第2个1——**绿色的多少（1=最绿）
**第3个1——**蓝色的多少（1=最蓝）
**第4个1——**透明度（1=完全看得见，0=完全看不见）

当红、绿、蓝都是1**——混合出来就是白色**！

这就是Properties——就是"可以调节的材料清单"**。

四、第三层：具体的"做法"（SubShader）

SubShader { Tags { "RenderType" = "Opaque" } // ... }

**SubShader——就是"具体的做法"。

为什么可以有好几个SubShader？——因为：

你家有个"高级烤箱"**——做法可以复杂点、味道更好
你奶奶家只有"普通锅"**——做法要简单点、能做就行
一份好的菜谱——要为不同的厨房准备不同做法

Shader也一样：

**好电脑——**用复杂的做法（画面漂亮）
**旧手机——**用简单的做法（能跑起来就行）

Tags：给这份做法贴个"标签"

Tags { "RenderType" = "Opaque" }

**Tags——就是"标签"。

"RenderType" = "Opaque"翻译："这个物体是不透明的"（Opaque的意思就是"不透明"）**。

这个标签告诉电脑："我不是玻璃、不是水——我是实心的东西"**。

电脑收到这个标签就知道：“哦，那我按’画不透明物体’的方式来处理你”。

五、第四层：真正的"魔法配方"（Pass）

Pass { CGPROGRAM // ... 这里面就是真正的魔法！ ENDCG }

Pass——中文叫"一遍"——意思是"画一遍这个物体"。

为什么叫"一遍"？——因为：

**有些复杂物体——要"画好几遍"才漂亮
比如描边效果——先画一遍黑色的外壳——再画一遍正常的物体**——就有描边了
**每一遍——就是一个Pass

**我们这个简单Shader——只有一个Pass——画一遍就够了。

CGPROGRAM 和 ENDCG——“魔法开始"和"魔法结束”

**CGPROGRAM——就像说"魔法开始了！"
**ENDCG——就像说"魔法结束了！"

**中间的所有东西——都是"真正的魔法代码"。

六、魔法内部：告诉电脑"两件事"

**打开魔法的盒子——里面有两个最重要的"魔法师"：

#pragma vertex vert #pragma fragment frag

这两行是什么意思？：

**vertex——**中文是"顶点"（就是物体的一个个"角"）
**fragment——**中文是"片段"（就是屏幕上的一个个小点）

#pragma vertex vert——"顶点魔法师"叫vert**
#pragma fragment frag——"片段魔法师"叫frag**

这两个魔法师分工不同——我们分别来看看。

七、魔法师1号：顶点魔法师（vert）

v2f vert(appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = v.uv; return o; }

这个魔法师的工作——处理物体的"每一个角"。

想象你的球——是由很多个三角形拼起来的**：

每个三角形有3个角**
每个角——就是一个"顶点"

顶点魔法师的任务："把这些顶点，从3D世界变到屏幕上**"**。

打个比方：

你的球——在"游戏世界里"（比如说"位置(10, 5, 3)"）
但屏幕是"平的"——只有左右和上下（没有前后）
必须有人"把3D位置变成屏幕位置"**——**这就是顶点魔法师的工作！

一行一行看

v2f o;——创建一个"结果盒子"（等下要把结果放进去）

o.pos = UnityObjectToClipPos(v.vertex);——**这是最重要的一行！

翻译：

**v.vertex——**这个顶点原本的位置（游戏世界里的3D位置）
UnityObjectToClipPos(...)——一个神奇的转换器——Unity帮我们写好的函数
它能把"游戏世界的3D位置"——变成"屏幕上的2D位置"

就像有一台"神奇的相机"——它站在你选的角度——"咔嚓"一下——把3D世界拍成一张平面照片！

o.uv = v.uv;——把"贴图坐标"传下去

uv是什么？——它告诉电脑：“这个顶点要贴上图片的哪一部分”**。

打个比方：

你有一张"世界地图"**
**你的球体表面——**要贴上这张地图
球上的每个点——要对应地图上的某个位置
**这个"对应关系"——**就叫uv

顶点魔法师说：“记住这个uv，等下画颜色的时候用得到！”

return o;——把结果送出去

顶点魔法师的工作到这里结束——它告诉电脑：

“这个顶点在屏幕上的位置在这里”
“它要贴图片的这一块”

八、魔法师2号：片段魔法师（frag）

fixed4 frag(v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return col * _Color; }

片段魔法师的工作——处理屏幕上的"每一个小点"！

你的手机屏幕——其实是由很多很多小方块组成的**：

每个小方块——叫一个"像素"
每一个像素——要有一个颜色
片段魔法师——就是决定每个像素颜色的人！

一行一行看

fixed4 col = tex2D(_MainTex, i.uv);

翻译：

tex2D(...)——"从图片里取颜色"的函数
**_MainTex——**我们的贴图（还记得Properties里的吗？）
**i.uv——**顶点魔法师传下来的"贴图坐标"

这行代码在做什么？：

看这个像素的uv坐标
去贴图上找对应位置的颜色
把那个颜色取出来，存到col里

打个比方：

你在一张"世界地图"**上
你想知道"北京"是什么颜色
找到"北京的uv坐标"
看地图上那个位置——是红色
**好——**这里就是红色！

fixed4是什么？——它是一种"能装4个数字的盒子"——装红、绿、蓝、透明度四个值。

return col * _Color;——返回最终颜色

这一行——把两个东西乘起来：

**col——**从贴图取的颜色
**_Color——**Properties里设的颜色

为什么要乘起来？：

打个比方：

贴图是一张"白色的猫咪"**图
你在Properties里设了"红色"**
白色 × 红色 = 红色的猫咪！
相当于"给贴图染色"**！

如果Properties设的是"蓝色"**：

白色的猫咪 × 蓝色 = 蓝色的猫咪！

这就是"染色"的魔法——通过一个乘法，就能让一张图变成各种颜色！

片段魔法师说：“这个像素就用这个颜色！”

九、`FallBack "Diffuse"`——“备胎小哥”

FallBack "Diffuse"

这一行——是"备胎小哥"——Shader的"救命机制"**。

它在说什么？："如果我这个Shader有些事情做不到**——请让Diffuse这个Shader来帮我做"。

打个比方：

**你去学校演出——要跳舞
但你不会翻跟头**
老师说："没事，你不会翻跟头的部分——让李小明上来翻"
**李小明——就是你的"备胎"

Shader也一样：

**我们这个Shader——只会画物体本身
但游戏里还需要"投射影子"——我们没写这个功能
FallBack "Diffuse"——就是说"影子的部分，让Diffuse来帮我画"

没有这一行会怎样？——你的物体没有影子**！

加上这一行——电脑会自动去Diffuse里"借"投影的代码——你的物体就有影子了！

十、完整流程：一个小球的"魔法之旅"

让我们把整个过程串起来——看看一个小球在游戏里是怎么被画出来的：

第一步：Unity打开你的Shader——看到名字MyShader/Simple——“好，我要用这个”

第二步：读取Properties

看看用户在Material里设了什么
哦，贴图是"苹果.jpg"
颜色是红色(1, 0, 0, 1)

第三步：顶点魔法师上场

拿到小球的每一个顶点
算出它们在屏幕上的位置
传递uv坐标

第四步：片段魔法师上场

对屏幕上小球覆盖的每一个像素**
从"苹果.jpg"里取对应的颜色
和"红色"相乘
得到最终颜色

第五步：画到屏幕上！

第六步（如果需要影子）：用Diffuse的投影代码画影子

**你的红色苹果小球——就出现在屏幕上了！

十一、举一反三：小小的变化能玩出很多花样

**理解了这个基础Shader——我们能玩很多花样：

花样1：让它变亮！

把最后一行改成：

return col * _Color * 2; // 乘以2！

结果：颜色变成两倍亮——物体像发光一样！

花样2：让它闪烁！

改成：

return col * _Color * (sin(_Time.y) + 1); // 用时间的sin值

_Time是Unity自动给你的"时间"变量——sin函数会不断变化——物体就会"呼吸一样闪烁"**！

花样3：让它反色！

改成：

return 1 - col * _Color; // 用1减去颜色

结果：红色变成青色、黑色变成白色——像照片的负片**！

看到了吗？——Shader其实是"给电脑写数学"**——**只要你会一点数学——就能创造各种视觉效果！

十二、总结：Shader没那么难！

**回头看看——我们刚才做了什么：

Shader = 告诉电脑怎么画东西的"配方"
Properties = “可以调节的材料”
SubShader = “具体的做法”
Pass = “画一遍”
顶点魔法师 = “算出每个角在屏幕上的位置”
片段魔法师 = “算出每个像素的颜色”
FallBack = “备胎小哥，我不会的它帮我”

Shader不是"神秘的黑魔法"——它是"一份写给电脑的说明书"**！

每一行代码——都在说"电脑，你这样做"：

“用这张贴图”
“和这个颜色相乘”
“变成屏幕位置”
“输出到屏幕上”

就这么简单！

结语：一份"魔法配方"的温暖

从一个看起来吓人的Shader代码，
到把它拆解成"配方"、“魔法师”、"备胎小哥"的小学生语言，
到看清楚每一行在做什么事情——

Shader其实是这样一个东西：

它是给电脑的"画画说明书"——告诉它"这个物体长什么样"**：

Properties——“可以调节的颜料”
SubShader——“具体的画法”
Pass——“画一遍的动作”
顶点魔法师——“把3D变到屏幕”
片段魔法师——“给每个像素上色”
FallBack——“我不会的让别人帮我”

它像一个精心设计的画画流程：

每一步都清晰
每一步都有意义
每一步都在为"最终画面"服务

它有小小的Properties——让美术姐姐能调颜色调贴图。
它有魔法师的分工——顶点管位置、片段管颜色。
它有贴心的FallBack——不会的事情有人帮忙。
它有清晰的结构——从名字到属性到画法，一目了然。

下次当你打开一个Shader文件——请记得：

那看起来"密密麻麻的代码"——其实是：

一份给电脑的说明书**
一份画画的配方**
一份每一行都在做一件具体事情**的清单

每一行float4、return、tex2D——都不神秘——都在说一件很具体的小事。
每一个Property——都是一个"可以调节的东西"。
每一个Pass——都是"画一遍"的动作。
每一个函数——都是"魔法师的一个小工作"。