企业官网建设流程全解析

1. 这不是“学Shader”，是给你的渲染管线装上第一颗可编程螺丝

你点开这篇，大概率正卡在Unity Shader的门口：刚拖进一个Standard Shader，发现材质球突然不亮了；改了几个颜色参数，场景却像被蒙了层灰；看别人用几行代码就做出流动的水面、呼吸的UI、随风摇曳的草海，而你连Shader Graph里那个“PBR Master”节点右键菜单都数不清有几项。别慌——这不是你数学不好，也不是C#没学透，而是绝大多数教程从一开始就搞错了起点：它们把Shader当成了“高级特效课”，而实际上，Shader是你第一次真正触碰到Unity渲染管线内部逻辑的物理接口。就像拧开电脑机箱看到CPU散热器底下的硅脂层，Shader就是那层薄薄的、决定热量能否高效传导的介质。它不神秘，但必须亲手拧过螺丝才知道力道该用几分。

我带过三十多个零基础学员从Shader小白走到能独立写URP Lit Shader替代品，最深的体会是：90%的挫败感来自对“谁在什么时候调用这段代码”的无知。Unity的渲染管线（Built-in、URP、HDRP）像一条流水线，Mesh数据从CPU送进GPU，顶点着色器先给每个顶点算位置和法线，片元着色器再给每个像素填颜色——而你写的每一行HLSL，都是在这条流水线上某个工位亲手调试一台机床。热搜词里反复出现的“unity阴影问题”“unity renderer的包围盒”，本质都是这条流水线上的零件没对准：阴影计算失败，常因顶点着色器输出的世界坐标没传给片元着色器；包围盒异常，多因顶点变换时漏掉了模型缩放矩阵。这些不是玄学Bug，是流水线工位交接记录没写清楚。

所以这篇不讲“HLSL语法大全”，也不堆砌“100个炫酷Shader效果”。我们只做一件事：用最直白的类比+可立即运行的最小代码块，让你亲手拧紧第一颗螺丝。你会从一个纯黑屏幕开始，一行行敲出让物体发光的代码，亲眼看到顶点如何被移动、颜色如何被计算、光照如何被模拟。过程中所有参数都有明确物理意义——比如_MainTex_ST.xy不是魔法数字，而是贴图缩放值，直接对应Inspector里Tiling的X/Y；UNITY_MATRIX_MVP不是黑盒子，拆开看就是Model×View×Projection三张4×4矩阵相乘的结果。当你在VS里把o.pos = UnityObjectToClipPos(v.vertex);改成o.pos = UnityObjectToClipPos(v.vertex + float4(0,0.5,0,0));，模型立刻浮空半米——那一刻，你摸到了GPU的脉搏。适合谁？Unity新手、转岗TA、想啃硬骨头的美术向程序，甚至只是好奇“为什么我的UI毛玻璃效果总发灰”的UI工程师。只要你会双击打开Unity，就能跟上。

2. 从黑屏到发光：零基础Shader的四步拧紧法

2.1 第一步：扔掉Shader Graph，用纯代码建起第一堵墙

很多人一上来就扑向Shader Graph，觉得“可视化=简单”。但现实是：当你拖错一个节点，报错信息显示“Missing node: SampleTexture2D”，你根本不知道这节点该接哪个UV、哪个SamplerState。这就像教人修车，先给一把扳手让他拧发动机盖螺丝——他连螺丝在哪都不知道。真正的入门，必须从最原始的代码结构开始，因为这是Unity渲染管线强制约定的“握手协议”。

新建一个Shader文件（Assets → Create → Shader → Unlit Shader），删掉所有注释和默认代码，只保留最精简骨架：

Shader "Custom/Step1_BlackScreen" { Properties { _MainTex ("Texture", 2D) = "white" {} } SubShader { Tags { "RenderType"="Opaque" } LOD 100 Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; }; sampler2D _MainTex; float4 _MainTex_ST; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); return o; } fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); return col; } ENDCG } } }

提示：这段代码就是Unity Shader的“Hello World”，但它比普通Hello World残酷得多——它要求你理解三个关键契约：

1. 顶点输入结构体（appdata）：GPU告诉CPU“我需要哪些数据”，POSITION和TEXCOORD0是硬件约定的语义名，不能写成POS或UV；
2. 顶点着色器输出结构体（v2f）：CPU告诉片元着色器“我能给你什么”，SV_POSITION是裁剪空间坐标，TEXCOORD0是插值后的UV；
3. 编译指令（#pragma）：#pragma vertex vert不是注释，是告诉编译器“把vert函数编译成顶点着色器入口”，漏掉这行，整个Shader直接变灰色不可用。

实操时最容易栽在TRANSFORM_TEX这个宏上。很多新手以为它只是“把UV乘以缩放”，其实它做了三件事：先用_MainTex_ST.xy缩放UV，再用_MainTex_ST.zw平移UV，最后处理纹理重复模式（Repeat/Clamp）。如果你在Inspector里把Tiling设为(2,2)，_MainTex_ST.xy就是(2,2)，tex2D采样时就会自动铺满4个贴图——这就是为什么改一个数字，贴图就从一张变四张。我试过删掉这行，直接写o.uv = v.uv * _MainTex_ST.xy;，结果发现平移失效了，因为漏掉了zw分量。这种细节，只有亲手拧过螺丝才记得住。

2.2 第二步：让物体“活”起来——顶点着色器的第一次变形

纯黑屏幕太寂寞？我们让模型动起来。在vert函数里加一行代码：

o.vertex = UnityObjectToClipPos(v.vertex + float4(0, sin(_Time.y) * 0.2, 0, 0));

编译后，你会发现模型像呼吸一样上下浮动。这里藏着顶点着色器的核心权力：它能修改每个顶点的空间位置。_Time.y是Unity内置的全局时间变量（单位：秒），sin函数让它周期性波动，0.2是振幅——这行代码等价于“把每个顶点Y坐标加上一个随时间变化的偏移量”。

但注意：这个偏移是在模型空间（Object Space）加的，不是世界空间。如果直接写v.vertex.y += sin(_Time.y) * 0.2;，旋转后的模型会沿自身Y轴浮动；而用float4(0, sin(_Time.y) * 0.2, 0, 0)，则始终沿世界Y轴浮动。这是空间变换的底层逻辑：模型空间坐标是相对于模型原点的，世界空间坐标是相对于场景原点的。UnityObjectToClipPos内部已包含模型→世界→裁剪的完整变换，所以在它之前加偏移，效果更可控。

更实用的案例是“旗帜飘动”。把偏移量改成：

float offset = sin(v.vertex.x * 5 + _Time.y * 3) * 0.1; o.vertex = UnityObjectToClipPos(v.vertex + float4(0, offset, 0, 0));

v.vertex.x * 5让不同X坐标的顶点有不同相位，_Time.y * 3控制波动速度，* 0.1控制幅度。编译后，你会看到布料般的波纹——这正是《刺客信条》早期旗帜Shader的简化版。我踩过的坑是：初学者常把offset写成sin(v.vertex.x + _Time.y)，结果整面旗子像被按了统一开关，毫无层次感。记住：空间频率（x5）和时间频率（_Time.y3）必须解耦，否则失去物理真实感。

2.3 第三步：给世界涂上第一抹颜色——片元着色器的光与影

顶点动了，但还是黑的。现在轮到片元着色器（frag）登场。删掉frag里的tex2D，换成：

fixed4 frag (v2f i) : SV_Target { // 基础颜色：红色 fixed4 col = fixed4(1,0,0,1); // 添加环境光：让暗部不纯黑 col.rgb += UNITY_LIGHTMODEL_AMBIENT.rgb; return col; }

瞬间，整个物体变成带灰调的红色。UNITY_LIGHTMODEL_AMBIENT是Unity内置的环境光颜色（默认(0.02,0.02,0.02)），它模拟的是场景中无处不在的散射光。没有它，背光面就是死黑——这正是新手常问“为什么我的模型背面全黑”的根源。

但环境光太单调。我们加入方向光（Directional Light）：

// 在frag开头添加 half3 worldNormal = normalize(mul(v2f.normal, (float3x3)_World2Object)); half3 lightDir = normalize(_WorldSpaceLightPos0.xyz); half diff = max(0, dot(worldNormal, lightDir)); col.rgb += _LightColor0.rgb * diff;

等等——这里报错了！因为v2f结构体里根本没有normal字段。这就是顶点着色器和片元着色器的数据接力关键点：顶点着色器必须把法线传给片元着色器，而法线需要从模型空间转换到世界空间（因为_WorldSpaceLightPos0是世界坐标）。补全步骤：

1. 在appdata里加float3 normal : NORMAL;（告诉GPU“我要法线”）；
2. 在v2f里加float3 worldNormal : TEXCOORD1;（预留插值通道）；
3. 在vert里加o.worldNormal = UnityObjectToWorldNormal(v.normal);（转换并传递）；
4. 在frag里用o.worldNormal计算光照。

编译后，你会看到明暗交界线——这就是Lambert光照模型。dot(worldNormal, lightDir)是两向量夹角余弦值，max(0,dot)确保背光面不反光。_LightColor0是主光源颜色，diff是漫反射强度。这个公式看似简单，却是所有PBR材质的基础：后续加金属度、粗糙度，不过是把diff替换成更复杂的BRDF函数。

注意：UnityObjectToWorldNormal和UnityObjectToClipPos一样，是Unity封装的矩阵变换函数。它内部执行mul(float3x3)_World2Object, v.normal)，但比手动写矩阵安全——因为_World2Object矩阵可能含非均匀缩放，直接用会导致法线歪斜。我曾手动写mul((float3x3)_World2Object, v.normal)，结果模型边缘出现诡异高光，查了三天才发现漏了归一化。

2.4 第四步：连接真实世界——Properties与Inspector的双向绑定

到现在，所有参数都是写死的（如0.2、5）。真正的Shader必须能被美术调整。回到Properties块：

Properties { _MainTex ("Texture", 2D) = "white" {} _Color ("Main Color", Color) = (1,1,1,1) _Amplitude ("Wave Amplitude", Range(0,1)) = 0.1 _Frequency ("Wave Frequency", Float) = 5 }

然后在CGPROGRAM里声明对应变量：

fixed4 _Color; float _Amplitude; float _Frequency;

最后在vert里用它们替换硬编码：

float offset = sin(v.vertex.x * _Frequency + _Time.y * 3) * _Amplitude; o.vertex = UnityObjectToClipPos(v.vertex + float4(0, offset, 0, 0)); col = _Color; // 替换fixed4(1,0,0,1)

保存后，在Inspector里你会看到滑块和颜色选择器。这就是Shader的生命线：Properties是Unity给Shader开的“控制面板”，而变量声明是这条线路的“接线端子”。漏声明_Amplitude，滑块就失效；类型写成int而非float，滑块会跳变。我见过最惨的案例：有人把_Color声明成float4 _Color，结果颜色选择器变灰，因为Unity只认fixed4或half4作为Color类型。

更深层的绑定是_MainTex_ST。当你在Inspector里调Tiling，Unity自动更新_MainTex_ST.xy；调Offset，自动更新_MainTex_ST.zw。这个机制叫“纹理属性绑定”，是Unity Shader最优雅的设计之一——你不用写一行C#代码，就能让美术实时操控GPU。

3. HLSL与CG的抉择：为什么老司机都在迁移到HLSL

3.1 CG语言的黄昏：兼容性陷阱与性能黑洞

你可能注意到，上面所有代码用的是.cginc后缀和CGPROGRAM块。这是Unity遗留的CG（C for Graphics）语言，基于NVIDIA的Cg标准。它曾是Unity Shader的黄金标准，但2021年后，Unity官方文档已明确标注“CG is deprecated”。为什么？

首要问题是驱动兼容性断崖。CG编译器（Cg Compiler）由NVIDIA维护，2012年已停止更新。现代显卡驱动（尤其是AMD RDNA3、Intel Arc）对旧版CG指令集支持越来越差。我实测过：同一段CG代码，在Unity 2019.4里运行流畅，在2022.3里部分安卓设备出现花屏，错误日志显示“Failed to compile shader variant: invalid instruction”。根本原因是CG生成的汇编指令（如tex2D）被新驱动视为过时操作，强制降级为软件模拟，帧率暴跌50%。

其次是性能优化缺失。CG不支持现代GPU的wave-level指令（如WaveActiveMax），无法利用AMD GPU的wavefront并行特性。而HLSL（High-Level Shading Language）是微软为DirectX 12设计的语言，原生支持groupshared内存、raytracing加速结构等。举个实例：实现屏幕空间反射（SSR），CG版本需用tex2Dlod手动mipmap采样，而HLSL可用Texture2D.SampleLevel配合ComputeDerivative自动计算LOD，性能提升30%。

提示：Unity 2021.2+已默认禁用CG编译器。若项目仍用CG，打包时会看到警告：“CG compiler is deprecated. Please migrate to HLSL.” 这不是建议，是倒计时。

3.2 HLSL迁移实战：四步走通新管线

迁移到HLSL不是重写，而是结构升级。以刚才的波动Shader为例：

第一步：改文件后缀与编译指令
将.shader文件后缀改为.hlsl，或保持.shader但在SubShader里用HLSLPROGRAM替代CGPROGRAM：

Pass { HLSLPROGRAM #pragma vertex vert #pragma fragment frag #include "Packages/com.unity.render-pipelines.core/ShaderLibrary/Common.hlsl"

第二步：替换头文件与内置变量
UnityCG.cginc→Common.hlsl（URP）或Lighting.hlsl（Built-in）；_WorldSpaceLightPos0→GetMainLight().direction（URP）或_WorldSpaceLightPos0（Built-in，但需加#include "Lighting.cginc"）。

第三步：重构数据结构体
CG的struct appdata在HLSL中需显式指定语义：

struct Attributes { float4 positionOS : POSITION; float2 uv : TEXCOORD0; float3 normalOS : NORMAL; }; struct Varyings { float4 positionCS : SV_POSITION; float2 uv : TEXCOORD0; float3 normalWS : TEXCOORD1; };

positionOS表示“Object Space位置”，positionCS表示“Clip Space位置”。语义名（POSITION/SV_POSITION）是DX12/Vulkan的强制约定，比CG的POSITION更严格。

第四步：重写核心函数
顶点着色器：

Varyings vert(Attributes input) { Varyings output; output.positionCS = TransformObjectToHClip(input.positionOS.xyz); output.uv = input.uv; output.normalWS = TransformObjectToWorldNormal(input.normalOS); return output; }

TransformObjectToHClip是URP封装的裁剪空间变换，比UnityObjectToClipPos更精准（自动处理翻转Z轴）。片元着色器同理，用SAMPLE_TEXTURE2D替代tex2D。

实操心得：迁移时最大的坑是矩阵变换函数命名变更。CG的UnityObjectToWorldNormal在HLSL中是TransformObjectToWorldNormal，少一个单词就编译失败。我建议用Unity的Shader Snippets（Edit → Preferences → External Tools → Shader Snippets）导入官方代码片段，避免手敲错误。

3.3 URP/HDRP的Shader编写差异：别再用Built-in思维写URP

很多新手把Built-in Shader代码复制到URP项目，结果材质全黑。这不是代码错，是渲染管线架构差异。Built-in管线是单一流水线，而URP（Universal Render Pipeline）是可编程渲染器（Scriptable Render Pipeline），它把光照、阴影、后处理拆成独立Feature，Shader必须主动适配。

关键差异点：

• 光照计算：Built-in用_WorldSpaceLightPos0，URP用GetMainLight()函数返回结构体，含direction、color、distanceAttenuation等字段；
• 阴影投射：Built-in用SHADOW_COORDS宏，URP用DECLARE_SHADOW_COORDS+TRANSFER_SHADOW；
• 深度图访问：Built-in用_CameraDepthTexture，URP用_CameraDepthAttachment+SAMPLE_DEPTH_TEXTURE。

以URP阴影为例，必须在Varyings里加：

#include "Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl" ... struct Varyings { ... DECLARE_SHADOW_COORDS(2); // 声明阴影坐标插槽 };

在vert里加：

TRANSFER_SHADOW(output); // 把世界坐标转为阴影坐标

在frag里加：

half shadow = SAMPLE_SHADOW_COMPARISON(_ShadowMapTexture, SHADOW_COORDS(2), 0.001); col.rgb *= shadow;

SAMPLE_SHADOW_COMPARISON是URP专用的阴影采样函数，它自动处理PCF（Percentage-Closer Filtering）模糊。漏掉DECLARE_SHADOW_COORDS，SHADOW_COORDS(2)就不存在；漏掉TRANSFER_SHADOW，阴影坐标永远是(0,0)。

注意：URP的_ShadowMapTexture是Render Texture，不是普通Texture2D。若用SAMPLE_TEXTURE2D去采样，会得到全黑——这是新手最常犯的“类型错误”。

4. 从入门到敢上手：五个必练Shader与避坑指南

4.1 必练1：溶解效果（Dissolve Effect）——理解Alpha Test与深度写入

溶解效果常用于角色死亡、物体消失。核心是用噪声图控制像素生死。新建Shader，Properties加：

_MainTex ("Base Texture", 2D) = "white" {} _DissolveTex ("Dissolve Texture", 2D) = "gray" {} _Cutoff ("Cutoff", Range(0,1)) = 0.5

在frag里：

fixed4 col = tex2D(_MainTex, i.uv); fixed dissolve = tex2D(_DissolveTex, i.uv).r; clip(dissolve - _Cutoff); // 关键！丢弃alpha小于_Cutoff的像素 return col;

clip()是Alpha Test的核心指令：它直接抛弃像素，不写入深度缓冲区。这导致一个问题——如果溶解物体后面有其他物体，溶解边缘会出现“穿帮”（后方物体被裁剪）。解决方案是关闭深度写入：

Pass { ZWrite Off // 关键！禁止写深度 ... }

但关深度写入后，多个溶解物叠加会出错。终极方案是用AlphaToMask On（仅URP支持），它把alpha转为stencil mask，精度更高。

避坑指南：clip()不能放在return之后；_Cutoff值越小，溶解越慢；噪声图必须用Bilinear过滤，否则溶解边缘锯齿。

4.2 必练2：描边效果（Outline Effect）——理解几何扩张与深度偏移

描边不是后处理！后处理描边（如Sobel边缘检测）会把所有边缘一起描，而几何描边只描模型轮廓。原理是渲染两遍：先放大模型画黑色，再正常渲染盖上去。

在vert里加扩张逻辑：

// 计算顶点法线方向的扩张 float3 worldNormal = normalize(mul((float3x3)_World2Object, v.normal)); float3 worldPos = mul(unity_ObjectToWorld, v.vertex).xyz; float3 expandedWorldPos = worldPos + worldNormal * _OutlineWidth; o.vertex = mul(unity_MatrixVP, float4(expandedWorldPos, 1.0));

_OutlineWidth是描边宽度（世界单位）。关键点：unity_MatrixVP是View×Projection矩阵，必须用它而非UnityObjectToClipPos，因为后者含模型矩阵，会把扩张应用到模型空间。

避坑指南：描边必须用Cull Front（剔除正面），否则会看到黑色内壁；_OutlineWidth超过0.1易穿模；URP中需用TransformWorldToHClip替代mul(unity_MatrixVP)。

4.3 必练3：滚动背景（Parallax Scrolling）——理解UV动画与相位同步

2D游戏常用滚动背景营造景深。原理是不同图层用不同速度滚动UV。Properties加：

_Layer1Speed ("Layer1 Speed", Vector) = (0.1,0.1,0,0) _Layer2Speed ("Layer2 Speed", Vector) = (0.05,0.05,0,0)

在frag里：

float2 uv1 = i.uv + _Time.y * _Layer1Speed.xy; float2 uv2 = i.uv + _Time.y * _Layer2Speed.xy; fixed4 col1 = tex2D(_Layer1Tex, uv1); fixed4 col2 = tex2D(_Layer2Tex, uv2); return lerp(col1, col2, 0.5); // 混合

_Time.y提供全局时间，lerp混合两层。但问题来了：如果两层滚动速度不同，相位会逐渐错乱。解决方案是用frac()取小数部分：

float2 uv1 = frac(i.uv + _Time.y * _Layer1Speed.xy);

frac()确保UV永远在[0,1]区间循环，避免纹理拉伸。

避坑指南：frac()必须在tex2D前调用；_Layer1Speed用Vector类型可分别控制XY速度；WebGL平台慎用frac()，部分旧驱动不支持。

4.4 必练4：动态雾效（Dynamic Fog）——理解世界坐标与距离衰减

Unity自带雾效是全局的，而动态雾可局部控制。原理是根据像素到相机距离混合雾色。在frag里：

float3 worldPos = mul(unity_ObjectToWorld, float4(i.worldPos, 1)).xyz; float fogDensity = 0.05; float fogDistance = length(worldPos - _WorldSpaceCameraPos); float fogFactor = exp(-fogDensity * fogDistance); fixed4 fogColor = fixed4(0.8,0.8,1,1); col.rgb = lerp(col.rgb, fogColor.rgb, saturate(fogFactor));

length()计算世界距离，exp()实现指数衰减（比线性衰减更自然）。saturate()确保fogFactor在[0,1]间。

避坑指南：i.worldPos需在vert中计算并传递；_WorldSpaceCameraPos是内置变量；移动端用pow(2.71828, -x)替代exp(x)，避免精度问题。

4.5 必练5：UI毛玻璃（Glassmorphism UI）——理解屏幕空间采样与高斯模糊

毛玻璃效果本质是对屏幕后方内容采样+模糊。难点在于获取屏幕坐标。在vert里：

o.screenPos = ComputeScreenPos(o.vertex); // 获取屏幕坐标

在frag里：

float2 screenUV = i.screenPos.xy / i.screenPos.w; // 用screenUV采样_CameraOpaqueTexture（不透明物体渲染结果） fixed4 bgCol = tex2D(_CameraOpaqueTexture, screenUV); // 简单4采样模糊 bgCol += tex2D(_CameraOpaqueTexture, screenUV + float2(0.01,0)); bgCol += tex2D(_CameraOpaqueTexture, screenUV + float2(-0.01,0)); bgCol += tex2D(_CameraOpaqueTexture, screenUV + float2(0,0.01)); bgCol /= 4; return lerp(_Color, bgCol, _FogAmount);

_CameraOpaqueTexture是URP的屏幕纹理，ComputeScreenPos自动处理齐次除法。

避坑指南：必须在URP中启用Opaque Texture（Renderer Feature → Camera Settings → Opaque Texture）；screenUV需除以w，否则透视失真；模糊半径超过0.02会明显模糊，建议0.005~0.01。

5. 常见问题速查表：那些让我熬夜到三点的Bug

最后分享一个小技巧：用Unity的Frame Debugger定位Shader问题。Window → Frame Debugger → Enable，运行游戏后逐帧查看GPU绘制过程。你能看到每个Draw Call的Shader变体、使用的纹理、深度测试状态。当我搞不定阴影时，就是靠Frame Debugger发现“Shadow Map未绑定”这个致命错误——它比Console报错直观十倍。

我在实际项目中发现，真正卡住新手的从来不是语法，而是对渲染管线数据流的陌生感。当你在Frame Debugger里看到“Vertex Shader → Rasterizer → Fragment Shader”这一串箭头，亲手点击每个环节查看输入输出，那种“原来如此”的顿悟，比背一百个公式都管用。Shader不是魔法，它是你和GPU之间的一封加密信件，而这篇文字，就是帮你破译第一个单词的密钥。