从“消融”到“流动岩浆”：用Unity Shader的Tilling和Offset玩转动态纹理（URP/HDRP通用）
从“消融”到“流动岩浆”：用Unity Shader的Tilling和Offset玩转动态纹理（URP/HDRP通用）
想象一下：你的游戏场景中，炽热的岩浆在地表缓缓流动，水面泛起涟漪般的波纹，或是能量屏障表面流淌着神秘的光纹。这些令人惊叹的动态效果，其实都可以通过Unity Shader中两个看似简单的属性——Tilling和Offset来实现。本文将带你深入探索如何利用这两个属性，结合时间变量，创造出令人惊艳的无限循环动态纹理效果。
1. 动态纹理的核心原理
在传统3D渲染中，纹理映射通常被认为是静态的——一张图片贴在模型表面就完成了。但游戏开发中，我们常常需要让纹理"活"起来。这就是Tilling和Offset大显身手的地方。
Tilling（平铺）控制纹理在UV空间中的重复次数。数值大于1时，纹理会变得更密集；小于1时，纹理会被拉伸放大。而Offset（偏移）则决定了纹理在UV空间中的起始位置。
当我们将这两个属性与Unity内置的_Time变量结合时，魔法就发生了：
float2 uv = i.uv * _MainTex_ST.xy + _Time.x * float2(0.1, 0) + _MainTex_ST.zw;这段代码会让纹理沿着X轴方向持续流动。其中：
_MainTex_ST.xy是Tilling参数_MainTex_ST.zw是Offset参数_Time.x * float2(0.1, 0)添加了随时间变化的动态偏移
2. 打造流动岩浆效果
让我们具体实现一个岩浆流动的效果。关键在于使用多层纹理叠加，每层以不同速度流动，创造出复杂的动态效果。
2.1 基础Shader结构
Shader "Custom/LavaFlow" { Properties { _MainTex ("Base Texture", 2D) = "white" {} _NoiseTex ("Noise Texture", 2D) = "white" {} _FlowSpeed ("Flow Speed", Vector) = (0.1, 0.05, 0, 0) _Color ("Color", Color) = (1, 0.5, 0, 1) } SubShader { Tags { "RenderType"="Opaque" } 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; sampler2D _NoiseTex; float4 _NoiseTex_ST; float2 _FlowSpeed; fixed4 _Color; 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 { // 基础纹理流动 float2 uv1 = i.uv * _MainTex_ST.xy + _Time.x * _FlowSpeed.x + _MainTex_ST.zw; fixed4 col1 = tex2D(_MainTex, uv1); // 噪波纹理流动（不同速度） float2 uv2 = i.uv * _NoiseTex_ST.xy + _Time.x * _FlowSpeed.y + _NoiseTex_ST.zw; fixed4 col2 = tex2D(_NoiseTex, uv2); // 混合效果 fixed4 finalColor = col1 * col2 * _Color; return finalColor; } ENDCG } } }2.2 参数优化技巧
为了获得更逼真的岩浆效果，我们可以调整以下参数：
| 参数 | 推荐值 | 效果说明 |
|---|---|---|
| _FlowSpeed.x | 0.05-0.2 | 控制基础纹理流动速度 |
| _FlowSpeed.y | 0.1-0.3 | 控制噪波纹理流动速度 |
| _Color | (1,0.3,0,1) | 岩浆基础色调 |
| Tilling | (2,2) | 增加纹理密度 |
提示：使用不同流动方向的纹理叠加能创造出更复杂的动态效果。例如让一层向左流动，另一层向右流动。
3. 水面波纹效果实现
同样的技术可以应用于水面效果，只需调整纹理和参数：
Shader "Custom/WaterFlow" { Properties { _NormalMap ("Normal Map", 2D) = "bump" {} _Distortion ("Distortion", Range(0, 0.1)) = 0.02 _WaveSpeed ("Wave Speed", Vector) = (0.05, 0.1, 0, 0) } SubShader { // ... 省略顶点着色器部分 fixed4 frag (v2f i) : SV_Target { // 两层法线贴图以不同速度流动 float2 uv1 = i.uv * _NormalMap_ST.xy + _Time.x * _WaveSpeed.x + _NormalMap_ST.zw; float2 uv2 = i.uv * _NormalMap_ST.xy * 1.5 + _Time.x * _WaveSpeed.y + _NormalMap_ST.zw; fixed3 normal1 = UnpackNormal(tex2D(_NormalMap, uv1)); fixed3 normal2 = UnpackNormal(tex2D(_NormalMap, uv2)); // 混合法线 fixed3 finalNormal = normalize(normal1 + normal2); // 应用光照计算... } } }4. 性能优化与进阶技巧
虽然动态纹理效果很酷炫，但在移动设备上可能会成为性能瓶颈。以下是几个优化建议：
顶点着色器计算：将UV变换计算移到顶点着色器中
v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv1 = TRANSFORM_TEX(v.uv, _MainTex) + _Time.x * _FlowSpeed.x; o.uv2 = TRANSFORM_TEX(v.uv, _NoiseTex) + _Time.x * _FlowSpeed.y; return o; }使用宏定义简化代码：Unity提供了
TRANSFORM_TEX宏来处理Tilling和Offset#define TRANSFORM_TEX(tex,name) (tex.xy * name##_ST.xy + name##_ST.zw)纹理压缩：确保使用适当压缩格式（如ASTC或ETC2）
LOD优化：对远处物体使用简化的Shader变体
对于更复杂的效果，可以尝试：
- 结合顶点动画增强立体感
- 使用遮罩纹理控制流动区域
- 添加边缘发光效果（适用于能量屏障类效果）
5. 实战案例：能量屏障效果
让我们看一个完整的能量屏障Shader示例，展示Tilling和Offset的高级应用：
Shader "Custom/EnergyShield" { Properties { _MainTex ("Energy Pattern", 2D) = "white" {} _NoiseTex ("Distortion Noise", 2D) = "white" {} _FlowSpeed ("Flow Speed", Vector) = (0.1, 0.2, 0, 0) _EdgeColor ("Edge Color", Color) = (0, 0.8, 1, 1) _Intensity ("Intensity", Range(0, 5)) = 2 } SubShader { Tags { "Queue"="Transparent" "RenderType"="Transparent" } Blend SrcAlpha OneMinusSrcAlpha Pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #include "UnityCG.cginc" struct appdata { float4 vertex : POSITION; float2 uv : TEXCOORD0; float3 normal : NORMAL; }; struct v2f { float2 uv : TEXCOORD0; float4 vertex : SV_POSITION; float3 worldNormal : TEXCOORD1; float3 viewDir : TEXCOORD2; }; sampler2D _MainTex; float4 _MainTex_ST; sampler2D _NoiseTex; float4 _NoiseTex_ST; float2 _FlowSpeed; fixed4 _EdgeColor; float _Intensity; v2f vert (appdata v) { v2f o; o.vertex = UnityObjectToClipPos(v.vertex); o.uv = TRANSFORM_TEX(v.uv, _MainTex); o.worldNormal = UnityObjectToWorldNormal(v.normal); o.viewDir = normalize(WorldSpaceViewDir(v.vertex)); return o; } fixed4 frag (v2f i) : SV_Target { // 动态UV计算 float2 uv1 = i.uv * _MainTex_ST.xy + _Time.x * _FlowSpeed.x + _MainTex_ST.zw; float2 uv2 = i.uv * _NoiseTex_ST.xy + _Time.x * _FlowSpeed.y + _NoiseTex_ST.zw; // 纹理采样 fixed4 pattern = tex2D(_MainTex, uv1); fixed4 noise = tex2D(_NoiseTex, uv2); // 边缘发光计算 float rim = 1.0 - saturate(dot(i.viewDir, i.worldNormal)); rim = pow(rim, 3) * _Intensity; // 最终颜色合成 fixed4 col = pattern * noise; col.rgb += rim * _EdgeColor.rgb; col.a = saturate(col.a + rim); return col; } ENDCG } } }这个Shader结合了：
- 动态流动的纹理图案
- 边缘发光效果
- 透明混合
- 法线相关的边缘计算
通过调整_FlowSpeed参数，你可以控制能量流动的速度和方向，创造出各种科幻风格的能量场效果。