从“消融”到“流动岩浆”：用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 { RenderTypeOpaque } 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.x0.05-0.2控制基础纹理流动速度_FlowSpeed.y0.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或ETC2LOD优化对远处物体使用简化的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 { QueueTransparent RenderTypeTransparent } 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参数你可以控制能量流动的速度和方向创造出各种科幻风格的能量场效果。