企业官网建设流程全解析

我最早被Unity Shader里的噪声折腾到崩溃，是在一个开放世界Demo里做地形裂缝溶解。当时美术丢给我一张2048的噪声贴图，说“你把Scale拉大，叠上去就行”。结果模型稍微放大一点，边缘锯齿、重复纹理、拉伸感全冒出来了；我把贴图换到4096，还是不够看。最后真正解决问题的方式，是在片元着色器里直接写程序化噪声，让Shader现场计算。这样做的好处是颠覆性的：噪声不再受贴图分辨率限制，可以无限放大、任意流动、逐帧变化，关键是在所有设备上算出来的结果都一样。

这篇文章我就把Unity Shader里使用噪声的完整经验梳理一遍，围绕三种主流噪声算法的实现思路、溶解/地形/水面这几个高频场景，以及我在实际项目里踩过的坑展开。适合有点Shader基础、想摆脱贴图依赖的程序员或者TA同学，看完至少能自己拼出一套可用的程序化噪声工具。

1. 为什么贴图代替不了程序化噪声——先想清楚再动手

很多刚接触这个方向的人第一反应是：噪声贴图不是也能出效果吗？确实能，Shader里tex2D一张柏林噪声图，叠加、扭曲、阈值化，一套操作下来效果也不错。但一旦你开始做需要“动态流动”或者“无限放大”的效果，贴图方案的短板会非常明显。

1.1 随机数和噪声的本质区别：为什么直接Hash会闪烁

搞明白程序化噪声，首先得区分两个概念：随机数和噪声。随机数函数输入一个值，输出一个不可预测的值，比如frac(sin(x) * 43758.5453)，每个像素各算各的，完全独立。如果直接把这种结果用于颜色，画面会变成一锅彩色雪花，而且因为GPU并行执行时没有存储状态，同一像素每帧算出的结果都独立，动画一播放就疯狂闪烁。

噪声函数不一样。它的核心特征是“空间连续性”：输入坐标邻近，输出值也邻近。实现这个连续性的标准思路是“网格随机值+插值”——把空间切成规则格子，每个格点存一个随机数，格子内部用平滑函数把周围格点的随机值插值过渡。就像棋盘上每个交叉点定好高度，格子内部的表面自然起伏，而不是每个点独立乱跳。

1.2 程序化噪声在Shader里的独特价值

用代码生成噪声，本质上是把“纹理”从存储问题变成了计算问题。我总结了几个贴图方案永远做不到的点：

• 无限分辨率：噪声函数是连续数学定义，在任何缩放级别下都不会出现像素化。地形贴图放大到几百米依然有细节，而噪声贴图放大后要么糊要么锯齿。
• 天然无缝：只要采样坐标设计得当，在世界空间里跨物体连续。不同模型共享同一套噪声场，接缝处不会出现硬边。
• 可控流动：把时间作为噪声采样轴，就能得到无方向感的动画。贴图只能整体平移旋转，做不到“从内部慢慢侵蚀”这种效果。
• 跨设备一致：纯数学计算，只要GPU的浮点精度差异可接受，各个平台渲染结果几乎完全一致，不会出现贴图压缩导致的色块。

1.3 三类主流噪声怎么选：Value、Perlin与Simplex

做技术选型之前，先看一个对比表，这是我平时给团队做方案时常用的：

实际项目里，我通常把Perlin和Simplex作为主力，Value Noise用来做原型和教学。不过Value Noise有一个巨大优势：实现极简、出错概率低，很多效果它已经足够，不必一上来就上Simplex。Unity 2021 LTS之后的版本还直接内置了Unity.Mathematics的noise.snoise，就是Simplex噪声，开箱即用，后面会讲具体怎么接。

2. 从零手写三维噪声：Value、Perlin与Simplex到底差在哪

这一节我们直接写代码。我建议你先在Unity里建一个Unlit Shader，跟着把函数贴进去，跑起来看效果，再回头理解原理，比先啃公式要快得多。

2.1 先用Value Noise理解“网格+插值”的核心套路

Value Noise的思路一句话总结：给每个整数格点随机数，格点之间做平滑过渡。手写之前需要一个可靠的哈希函数，它负责把“整数坐标”映射成“伪随机数”，并且要求：同一坐标永远返回同一结果。

我常用的是一个比较典型的shadertoy风格哈希，在GPU上表现稳定：

float hash3(float3 p) { p = frac(p * 0.1031); p += dot(p, p.zyx + 31.32); return frac((p.x + p.y) * p.z); }

这个函数的优点是代码量少、分布均匀度在移动端可接受。有了哈希，Value Noise本体就很容易写了：

float valueNoise(float3 p) { float3 i = floor(p); // 整数格点 float3 f = frac(p); // 格子内的小数坐标 // 五次平滑插值：比线性插值更平滑，能明显减少晶格伪影 float3 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0); // 八个角点的随机值 float c000 = hash3(i); float c100 = hash3(i + float3(1, 0, 0)); float c010 = hash3(i + float3(0, 1, 0)); float c110 = hash3(i + float3(1, 1, 0)); float c001 = hash3(i + float3(0, 0, 1)); float c101 = hash3(i + float3(1, 0, 1)); float c011 = hash3(i + float3(0, 1, 1)); float c111 = hash3(i + float3(1, 1, 1)); // 先沿X、再沿Y、最后沿Z做三次线性插值 return lerp( lerp(lerp(c000, c100, u.x), lerp(c010, c110, u.x), u.y), lerp(lerp(c001, c101, u.x), lerp(c011, c111, u.x), u.y), u.z); }

看到没，算法本身就这么点东西。八个角点取随机值，然后按小数坐标加权平均。很多人会忽略插值函数，直接lerp，结果就是格子边界能看到明显的“十字缝”。我吃过这个亏，所以现在新写的噪声函数一律用五次平滑。

2.2 Perlin Noise：从“随机值”升级到“随机梯度”

Value Noise的缺陷在于，它把格点当作高度场来插值，低频信号偏弱，看起来有点“块状”。Perlin Noise换了一个思路：格点上不放随机值，放一个随机梯度向量，然后计算“点到格点的向量”和“梯度向量”的点积，最后插值。

点积的意义在于：它其实是在用一个平面去拟合格点附近的局部变化，近似于给每个格子赋予了一个“趋势方向”。这样生成的结果更接近自然界的随机起伏，不会有明显的块状感。

核心片段长这样：

// 用两个哈希生成大致随机的梯度方向 float3 randomGradient(float3 p) { float u = hash3(p) * 2.0 - 1.0; float v = hash3(p + 13.46) * 2.0 - 1.0; float z = 1.0 - abs(u) - abs(v); if (z < 0.0) { // 简化处理：把方向翻到另一侧 z = -z; u = -u; } return normalize(float3(u, v, z)); } float perlinNoise(float3 p) { float3 i = floor(p); float3 f = frac(p); float3 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0); float n000 = dot(randomGradient(i), f); float n100 = dot(randomGradient(i + float3(1, 0, 0)), f - float3(1, 0, 0)); float n010 = dot(randomGradient(i + float3(0, 1, 0)), f - float3(0, 1, 0)); float n110 = dot(randomGradient(i + float3(1, 1, 0)), f - float3(1, 1, 0)); float n001 = dot(randomGradient(i + float3(0, 0, 1)), f - float3(0, 0, 1)); float n101 = dot(randomGradient(i + float3(1, 0, 1)), f - float3(1, 0, 1)); float n011 = dot(randomGradient(i + float3(0, 1, 1)), f - float3(0, 1, 1)); float n111 = dot(randomGradient(i + float3(1, 1, 1)), f - float3(1, 1, 1)); return lerp( lerp(lerp(n000, n100, u.x), lerp(n010, n110, u.x), u.y), lerp(lerp(n001, n101, u.x), lerp(n011, n111, u.x), u.y), u.z); }

这个版本的梯度分布是通过一个立方体约束生成的，虽然不是完美的球面均匀分布，但实际视觉使用完全够。如果你追求严谨，可以用经典的三维梯度表加排列置换表实现，不过那套代码量翻几倍，优化收益却没有质的提升。做产品效果，够用就行。

2.3 Simplex Noise和Unity自带的snoise：最省事的接入方式

Simplex Noise在原理上比Perlin更进一步：它把空间划分成单形体（三角形、四面体），减少了需要插值的顶点数量，同时在各方向上的分布更均匀，不太会出现Perlin噪声在某些角度下隐约可见的网格方向性。

如果不想自己维护一大堆梯度表，Unity 2021.2之后可以直接用官方Mathematics包。操作方法：Window -> Package Manager，搜索并安装Mathematics，然后在Shader里这样引用：

#include "Packages/com.unity.mathematics/Unity.Mathematics/Noise/classicnoise3D.hlsl" float n = snoise(p); // 返回范围约[-1, 1]

需要注意两点。第一，包内noise.snoise要求在C#侧声明，且Shader里包含路径要精确，不同Unity小版本的内部路径可能有出入，如果include报错，去包目录下看一眼实际文件名即可。第二，snoise返回值是-1到1，而Value Noise是0到1，接到采样结果时别忘了做n * 0.5 + 0.5映射，否则阈值化、颜色混合都会出问题。

2.4 用fBM做多频率叠加：噪声瞬间变丰富的关键

单一频率的噪声看久了很“平”，就像一段没有起伏的旋律。分形噪声（fBM）的思路特别简单：把多个频率、多个振幅的噪声叠加起来，低频决定大形，高频补充细节。

float fbm(float3 p) { float value = 0.0; float amplitude = 0.5; float frequency = 1.0; for (int i = 0; i < 4; i++) { value += amplitude * valueNoise(p * frequency); amplitude *= 0.5; // 振幅逐层减半 frequency *= 2.0; // 频率逐层翻倍 } return value; }

这段代码里，amplitude决定每层细节对结果的贡献权重，frequency决定每层噪声的疏密程度，octave数量决定最终细节丰富度。四层是性能和效果都相对舒服的平衡点，五层以上在移动端片元着色器里经常吃不消。你还可以继续加入lacunarity（频率增长倍率）和gain（振幅衰减率）作为参数控制，这就变成标准的Perlin噪声分形了。

3. 噪声最常见的三种落地玩法：溶解、地形与水面

原理讲完了，这一节专门讲怎么用。很多教程只给公式不给场景，导致读者看完依然不知道往哪儿贴。我挑三个最典型、也是我实际做过项目验证过的场景。

3.1 溶解特效：一张噪声阈值图就能做出的燃烧边缘

溶解是Shader效果里的“入门级硬菜”，原理一句话：用噪声值做阈值裁剪，低于阈值的片元丢弃，高于阈值的保留，阈值随时间变化就形成了“从外向内燃烧”的动画。

Shader片段思路：

float v = saturate(fbm(worldPos * _NoiseScale + _Time.y * _NoiseSpeed)); clip(v - _Threshold); float edge = 1.0 - smoothstep(0.0, _EdgeWidth, v - _Threshold); fixed4 col = tex2D(_MainTex, uv); col.rgb += _EdgeColor.rgb * edge * _Glow;

这里有几个别人不常说的细节：

• 采样坐标用worldPos而不是本地顶点坐标，多个物体拼在一起时噪声场是连续的，溶解边缘能自然对接。
• 想得到更随机的燃烧痕迹，不要用单一噪声，用fBM，并且可以让p += float3(_Time.y, _Time.y * 0.6, 0)这种“各轴速度不同”的方式制造拉伸感。
• edge是用噪声值与阈值的差值做的渐变，它天然只在临界点附近发光，不需要额外判断边界，算法极其省。

3.2 地形高度生成：fBM叠加与分形噪声

做地形时噪声一般用在两个地方：顶点偏移和表面色带。顶点偏移的常规写法是：

float h = fbm(worldPos.xz * _Scale); float3 pos = vertex.xyz; pos.y += h * _Height;

为什么用worldPos.xz而不是模型坐标？原因有两个：一是地形块经常分块渲染，用世界坐标能保证相邻块的噪声场完全连续，不会出现块与块之间的断层；二是xz平面采样天然是俯视视角的高度场逻辑，和地形的真实几何尺寸一一对应。

fBM叠加到地形高度后会生成很自然的高低起伏。如果只用单层噪声，地形会像“海绵”一样均匀鼓起，缺少山脉的大尺度骨架和岩石的小尺度细节。低层octave用低频率提供山脉轮廓，高层octave用高频率补充碎石感，这正是分形噪声的核心逻辑。

还有一个调参心得：_Height不要定死，在顶点Shader里用o.worldPos.y乘上它之前，先乘一个基于噪声值的权重，比如越接近山顶噪声越“锋利”，这样山脊会显得更有棱角，具体做法是pos.y += pow(h, 1.5) * _Height。这个技巧是常规文档里不会写的，我试过，立体感提升非常明显。

3.3 水面波纹：3D噪声切片与法线扰动

水面效果是一个特别好的“3D噪声胜过2D噪声”的例子。如果用2D噪声直接采样UV随时间平移，波纹会朝着一个固定方向漂移，看起来像传送带。换成3D噪声，把时间当第三个轴去切片，波纹会原地起伏、自然扩散，没有方向性。

高度场算出后我们需要法线。常规做法是用相邻采样差分近似梯度：

float h = valueNoise(float3(worldPos.xz * _Freq, _Time.y * _Speed)); float eps = 0.01; float hx = valueNoise(float3((worldPos.x + eps) * _Freq, _Time.y * _Speed)); float hz = valueNoise(float3((worldPos.z + eps) * _Freq, _Time.y * _Speed)); float3 normal = normalize(float3(h - hx, 1.0, h - hz));

eps的取值是关键。它要和采样频率匹配，频率高则eps取小，否则法线会变平滑；频率低但eps太小，数值误差会放大。我用下来一般让eps = 1.0 / _Freq附近，效果最稳。如果你需要高性能方案，可以直接在片元里用ddx和ddy求偏导，少两次噪声采样，但精度必须实测确认。

3.4 体积云和雾气：把噪声当成“密度场”使用

这一类属于进阶场景，但思路值得提前了解：在ray marching里，每个步进点采样fbm(worldPos)，把返回值当作该点的密度，累加进透明度。因为fBM生成的密度场具有空间连续性，云层看起来才会是一团团的结构，而不是干巴巴的颗粒。这类效果对性能要求高，通常用低分辨率全屏Pass加双线性升采样，噪声层数控制在3到4层以内。

4. 写噪声Shader踩过的坑：伪影、性能、维度和接缝

这节是我最想让你认真看的。很多教程代码是能跑的，但放到真实项目里，各种环境因素一叠加就出问题。这些问题不是Shader语法错误，而是工程经验。

4.1 晶格伪影：线性插值和哈希质量不足

最常见的伪影就是格子感。原因基本只有两个：插值阶数不够、哈希函数太烂。

插值阶数问题很好理解。线性插值在格点处会留下折角，视觉上像棋盘格。解决办法就是前面代码里用的五次平滑函数，这个函数比smoothstep更平缓，能明显压掉二阶导数突变。

哈希函数问题更隐蔽。很多人图省事用frac(sin(dot(p, float3(12.9898,78.233,45.164))) * 43758.5453)这种古老写法，在PC上还行，一到移动端或者某些低精度设备上，因为sin函数在弱GPU上的精度不一致，会出现肉眼可见的规律条纹。我建议直接切换到整数运算类的哈希，或者用第一节那个0.1031的版本，在各类GPU上实测表现都更稳。

4.2 性能陷阱：octave数量和GPU架构的关系

写噪声Shader的人都会遇到性能问题，我自己也栽过。fBM里每层octave都需要完整遍历一次三维噪声，而三维Value Noise又要采样8个角点，四层octave就意味着32次哈希加上32次插值。这在PC上没什么感觉，移动端中低端GPU的ALU吞吐量一压，帧率立刻掉给你看。

我的经验排序是：

如果你的效果不要求逐帧变化，把所有噪声烘焙进一张纹理，片元里直接tex2D，这是性价比最高的做法。动态时间流动效果则很难逃掉实时计算，只能控制octave数量。移动端建议最多三层fBM，并且能用2D的不要用3D。

4.3 维度陷阱：2D噪声做动画为什么会“拉伸”

这是我最常看到的新手问题。想给一个平面加流动噪声，很自然的写法是：

float2 uv = worldPos.xz + _Time.y * _Speed; float n = valueNoise(uv);

这确实会动，但你会看到噪声整体朝一个方向平移，像风吹过的沙尘。原因是：时间被当成了二维坐标里的“加法偏移”，噪声场的等高线整体位移。等价于沿着坐标方向平移了整张噪声场。

正确做法是把时间当第三维：

float3 p = float3(worldPos.xz, _Time.y * _Speed); float n = valueNoise(p);

这样每一帧相当于在三维噪声场里切一片二维切片，切片位置随时间变化，噪声形态原地变化而不产生固定方向的平移感。这个观念的转变，能立刻让水面、岩浆、能量护盾这类效果质感上一个档次。

4.4 坐标空间导致接缝、拉伸和不连续

噪声是无状态的，它好不好看，完全取决于采样坐标选得好不好。我见过有人直接用模型本地坐标采样，模型缩放不均匀时噪声就被拉伸成畸形的条纹；还有人用UV采样，物体UV接缝处噪声断成两块。

我的选型经验：

• 小物件特效：用模型本地坐标乘以一个缩放系数，注意物体缩放必须是均匀的，否则噪声会形变。
• 地形、场景级大物件：用世界坐标，把坐标原点偏移到物体中心或相机位置附近，避免浮点精度在距离原点几十公里处崩掉。
• UI、平铺类效果：用UV坐标，要确保噪声函数的周期和UV的Tileable周期一致，否则接缝藏不住。

世界坐标有个著名的坑：数值过大时，Unity世界坐标浮点精度在游戏物体离原点很远的场景下会不足以支撑噪声的高频细节。大地图项目通常需要“浮动原点”，即每帧把物体坐标统一偏移回原点附近，或者直接把噪声坐标的基准点搬到相机位置，这样精度隐患就消失了。

5. 用一个溶解Shader把知识串起来：完整代码与调参心得

前面给了很多函数片段，这一节把它们组装成一个能放进场景直接用的完整效果。我选溶解，是因为它同时用到了fBM、动态时间轴、阈值裁剪、边缘色混合，是检验前面知识最好的试金石。

5.1 完整Shader代码：带边缘发光的溶解

Shader "Custom/NoiseDissolve" { Properties { _MainTex ("Albedo", 2D) = "white" {} _Color ("Tint", Color) = (1,1,1,1) _NoiseScale ("Noise Scale", Range(0.5, 20)) = 4 _NoiseSpeed ("Noise Speed", Range(-5, 5)) = 0.5 _Threshold ("Dissolve Amount", Range(0, 1)) = 0.5 _EdgeWidth ("Edge Width", Range(0.001, 0.2)) = 0.05 _EdgeColor ("Edge Color", Color) = (1, 0.6, 0, 1) _Glow ("Edge Glow", Range(1, 8)) = 2 } SubShader { Tags { "Queue"="Transparent" "RenderType"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha Cull Off ZWrite Off Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" sampler2D _MainTex; float4 _MainTex_ST; float4 _Color; float _NoiseScale; float _NoiseSpeed; float _Threshold; float _EdgeWidth; float4 _EdgeColor; float _Glow; struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; }; struct v2f { float4 pos : SV_POSITION; float2 uv : TEXCOORD0; float3 worldPos : TEXCOORD1; }; float hash3(float3 p) { p = frac(p * 0.1031); p += dot(p, p.zyx + 31.32); return frac((p.x + p.y) * p.z); } float valueNoise(float3 p) { float3 i = floor(p); float3 f = frac(p); float3 u = f * f * f * (f * (f * 6.0 - 15.0) + 10.0); float c000 = hash3(i); float c100 = hash3(i + float3(1,0,0)); float c010 = hash3(i + float3(0,1,0)); float c110 = hash3(i + float3(1,1,0)); float c001 = hash3(i + float3(0,0,1)); float c101 = hash3(i + float3(1,0,1)); float c011 = hash3(i + float3(0,1,1)); float c111 = hash3(i + float3(1,1,1)); return lerp( lerp(lerp(c000, c100, u.x), lerp(c010, c110, u.x), u.y), lerp(lerp(c001, c101, u.x), lerp(c011, c111, u.x), u.y), u.z); } float fbm(float3 p) { float value = 0.0; float amplitude = 0.5; float frequency = 1.0; for (int i = 0; i < 4; i++) { value += amplitude * valueNoise(p * frequency); amplitude *= 0.5; frequency *= 2.0; } return value; } v2f vert (appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.worldPos = mul(unity_ObjectToWorld, v.vertex).xyz; return o; } fixed4 frag (v2f i) : SV_Target { float3 p = i.worldPos * _NoiseScale; p += float3(_Time.y * _NoiseSpeed, 0, 0); float v = saturate(fbm(p)); clip(v - _Threshold); float edge = 1.0 - smoothstep(0.0, _EdgeWidth, v - _Threshold); fixed4 col = tex2D(_MainTex, i.uv) * _Color; col.rgb += _EdgeColor.rgb * edge * _Glow; col.a = saturate((v - _Threshold) / _EdgeWidth); return col; } ENDCG } } }

这段代码复制到Unity里，新建一个Material，把Shader设为Custom/NoiseDissolve，调_Threshold就能看到溶解过程。直接拖进场景跑，效果是完整的。

5.2 参数调优与几个容易忽视的细节

代码能跑之后，重点在调参数，这里分享我调这个Shader的几条经验：

• _NoiseScale不是一个绝对值，要和物体实际大小匹配。一个边长10米的物体，Scale=4看起来正好；一个边长1米的小道具，Scale可能要到15才有细节。判断标准：让噪声特征尺寸大约是你预期溶解碎块的一半大小。
• _NoiseSpeed不要超过1。时间速度越高，溶解动画越像“闪烁”而不是“燃烧”。我一般控制在0.3到0.8之间。
• _EdgeWidth和噪声频率成正比。频率越高，边缘越窄，这个值要跟着Scale走，不能单独固定。
• 如果想让溶解边缘更像火焰，可以给采样坐标加一个“域扭曲”预处理：先采样一次低频噪声，把结果作为坐标偏移再次采样fBM。这样边缘会变得卷曲自然，代价是片元Shader计算量翻倍，移动端慎用。
• 关于透明排序：这个Shader用了Transparent队列，如果多个物体叠加，注意ZWrite Off会带来绘制顺序问题，必要时把Queue改成AlphaTest，用clip裁剪配合半透明边缘。

5.3 从一个Shader到一套可复用的噪声工具库

这一节是给进阶者的建议。当你试通了一个噪声效果，下一步不是继续往这个Shader里塞代码，而是把噪声函数抽离成一个公共文件，比如NoiseLib.cginc，让项目里所有Shader共享同一套实现。这样做的好处不止是少写重复代码，更重要的是统一了哈希函数和插值函数，避免A效果和B效果因为噪声质量不同而产生视觉落差。

工具库里还可以加两个实用模块：一个是可视化编辑器窗口，在Inspector里预览噪声纹理，调整频率和octave时能看到实时变化；另一个是低分辨率预烘焙工具，把需要的噪声场离线烘成3D纹理，运行时直接采样，适合高频使用噪声但性能压力大的体积云、全局扰动效果。

写噪声Shader这一年多，我最核心的体会

如果你只记住一件事，我建议是：写噪声之前先问自己，这个效果到底需要哪个频段的细节，以及这个细节是静态的还是流动的。静态大尺度用低分辨率烘焙省性能，动态小尺度用实时fBM保质量，方向错了再炫的算法也救不回来。

另一个让我受益很多的小习惯是：所有噪声函数单独写一个测试Shader，用uv坐标直接输出颜色，挂在场景里观察。调好噪声形态再往目标Shader移植，而不是直接在复杂效果里调试噪声参数，排查问题会快得多。希望这篇经验总结能让你少走几个弯路，有自己跑出来的新玩法也欢迎交流。