【Unity Shader URP】色带渐变着色（Ramp Shading）实战教程

文章目录0. 效果预览1. 原理简述2. 功能点3. 完整 Shader可直接用4. 使用方法5. 参数说明6. 变体与扩展6.1 卡通二分着色Cel Shading6.2 多光源 Ramp6.3 2D Ramp 贴图多条件查表7. 常见问题8. 性能建议0. 效果预览色带渐变着色Ramp Shading是最灵活的非真实感光照技巧之一把 NdotL 当索引用一张 1D 渐变贴图查表让光影过渡完全由美术控制。卡通赛璐珞硬切、冷暖色调渐变、金属质感色带——换张贴图就换一种风格代码不用动。1. 原理简述Ramp Shading 的本质把 Lambert 光照的连续灰度值映射到一张渐变贴图上查色用贴图颜色代替数学公式决定明暗过渡。标准 Lambert 着色的流程是float NdotL dot(normalWS, lightDirWS); // -1 ~ 1 float halfLambert NdotL * 0.5 0.5; // 映射到 0 ~ 1 finalColor baseColor * halfLambert; // 连续灰度过渡Ramp Shading 只改了最后一步——不直接用halfLambert乘颜色而是拿它当 UV.x 去采样一张渐变贴图float2 rampUV float2(halfLambert, 0.5); // halfLambert 做横轴坐标 half3 rampColor SAMPLE_TEXTURE2D(rampTex, sampler_rampTex, rampUV).rgb; finalColor baseColor * rampColor; // 贴图颜色决定明暗贴图的左端对应暗部NdotL ≈ 0右端对应亮部NdotL ≈ 1。贴图里画什么色阶渲染就出什么过渡——硬切两色就是卡通平滑渐变就接近 PBR中间加一道亮色就是金属高光带。2. 功能点1D Ramp 查表着色用 Half-Lambert 值采样渐变贴图光影过渡完全由贴图控制Half-Lambert 映射NdotL 重映射到 0~1消除背光面全黑问题主贴图叠乘保留模型原始纹理细节Ramp 只控制明暗色调Ramp 贴图可热替换Inspector 里换一张渐变图就换一种风格无需改代码环境光补偿叠加一层环境色避免暗部纯黑GPU Instancing支持多实例合批渲染3. 完整 Shader可直接用Shader Custom/RampShading_URP { Properties { // 主贴图模型漫反射纹理 _BaseMap (Base Map, 2D) white {} // 主颜色叠乘 _BaseColor (Base Color, Color) (1,1,1,1) // Ramp 渐变贴图1D 查表左暗 右亮 _RampTex (Ramp Texture, 2D) white {} // Ramp 影响强度0纯 Lambert1完全 Ramp 查表 _RampStrength (Ramp Strength, Range(0, 1)) 1.0 // 环境光颜色补偿暗部避免全黑 _AmbientColor (Ambient Color, Color) (0.1, 0.1, 0.15, 1) } SubShader { Tags { RenderPipeline UniversalRenderPipeline Queue Geometry RenderType Opaque } Pass { Name RampShadingPass Tags { LightMode UniversalForward } Cull Back ZWrite On Blend Off HLSLPROGRAM #pragma vertex vert #pragma fragment frag // GPU Instancing 支持 #pragma multi_compile_instancing #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Core.hlsl #include Packages/com.unity.render-pipelines.universal/ShaderLibrary/Lighting.hlsl // // 贴图声明 // TEXTURE2D(_BaseMap); SAMPLER(sampler_BaseMap); TEXTURE2D(_RampTex); SAMPLER(sampler_RampTex); // // 材质属性与 Properties 一一对应 // float4 _BaseMap_ST; float4 _BaseColor; float4 _RampTex_ST; float _RampStrength; float4 _AmbientColor; struct Attributes { float4 positionOS : POSITION; // 模型空间顶点 float3 normalOS : NORMAL; // 模型空间法线 float2 uv : TEXCOORD0; // UV 坐标 UNITY_VERTEX_INPUT_INSTANCE_ID }; struct Varyings { float4 positionHCS : SV_POSITION; // 裁剪空间位置 float2 uv : TEXCOORD0; // 传递 UV float3 normalWS : TEXCOORD1; // 世界空间法线 UNITY_VERTEX_INPUT_INSTANCE_ID UNITY_VERTEX_OUTPUT_STEREO }; // // 顶点着色器变换位置 传递世界空间法线 // Varyings vert(Attributes v) { Varyings o; UNITY_SETUP_INSTANCE_ID(v); UNITY_TRANSFER_INSTANCE_ID(v, o); UNITY_INITIALIZE_VERTEX_OUTPUT_STEREO(o); // 模型空间 → 裁剪空间 o.positionHCS TransformObjectToHClip(v.positionOS.xyz); // UV 变换支持 Tiling / Offset o.uv TRANSFORM_TEX(v.uv, _BaseMap); // 模型空间法线 → 世界空间法线 o.normalWS TransformObjectToWorldNormal(v.normalOS); return o; } // // 片元着色器Half-Lambert → Ramp 查表 → 最终着色 // half4 frag(Varyings i) : SV_Target { UNITY_SETUP_INSTANCE_ID(i); // 1) 采样主贴图 half4 baseCol SAMPLE_TEXTURE2D(_BaseMap, sampler_BaseMap, i.uv); baseCol * (half4)_BaseColor; // 2) 获取主光源方向 Light mainLight GetMainLight(); float3 lightDirWS normalize(mainLight.direction); // 3) 计算 Half-Lambert float3 normalWS normalize(i.normalWS); // NdotL法线·光照方向范围 -1 ~ 1 float NdotL dot(normalWS, lightDirWS); // Half-Lambert映射到 0 ~ 1消除背光面全黑 float halfLambert NdotL * 0.5 0.5; // 4) Ramp 贴图查表 // 用 halfLambert 做 UV.x0.5 做 UV.y取贴图中间行 float2 rampUV float2(halfLambert, 0.5); half3 rampColor SAMPLE_TEXTURE2D(_RampTex, sampler_RampTex, rampUV).rgb; // 5) 混合最终颜色 // _RampStrength 控制 Ramp 查表和普通 Lambert 的混合比例 half3 lambert (half3)(halfLambert * mainLight.color); half3 lighting lerp(lambert, rampColor * mainLight.color, _RampStrength); // 叠加环境光补偿 lighting _AmbientColor.rgb; // 基础色 × 光照结果 half3 finalColor baseCol.rgb * lighting; return half4(finalColor, baseCol.a); } ENDHLSL } } }4. 使用方法在 Unity 项目的Assets/Shaders/下新建文件RampShading_URP.shader粘贴上方完整代码。新建材质Create → MaterialShader 选择Custom/RampShading_URP。准备 Ramp 渐变贴图打开 Photoshop / GIMP / 任意绘图工具新建一张256×1的图片宽 256 像素高 1 像素从左到右画渐变左端暗部颜色右端亮部颜色导出为 PNG导入 Unity关键Ramp 贴图的 Import Settings不设会糊掉Wrap Mode→Clamp防止边缘采样到对面的颜色Filter Mode→Point硬切风格或Bilinear平滑渐变风格关闭Generate Mip Maps1D 查表不需要 Mip将材质赋给场景中的模型球体、角色模型效果最明显。在 Inspector 中配置参数Base Map模型的漫反射贴图Ramp Texture拖入刚才做的渐变贴图Ramp Strength1.0 完全 Ramp 查表0.5 可以和 Lambert 混合Ambient Color暗部补色推荐偏冷的深蓝(0.05, 0.05, 0.1)在场景中旋转光源方向观察明暗分界处的色带变化——这就是 Ramp Shading 的核心视觉效果。5. 参数说明参数类型范围/默认值说明_BaseMap2Dwhite模型主贴图漫反射纹理_BaseColorColor(1,1,1,1)主颜色叠乘_RampTex2DwhiteRamp 渐变贴图左暗 右亮建议 256×1_RampStrengthRange(0,1)1.0Ramp 查表强度0纯 Lambert1完全 Ramp_AmbientColorColor(0.1,0.1,0.15,1)环境光补偿色避免暗部纯黑6. 变体与扩展6.1 卡通二分着色Cel Shading最简单的卡通风格——亮面和暗面只有两个色阶硬切分界// 方法 A用 step 替代 Ramp 贴图不需要额外贴图 half3 shadow half3(0.4, 0.3, 0.5); // 暗部色偏紫 half3 lit half3(1.0, 0.95, 0.9); // 亮部色偏暖 float cel step(0.5, halfLambert); // halfLambert 0.5 ? 1 : 0 half3 rampColor lerp(shadow, lit, cel);也可以用smoothstep(0.48, 0.52, halfLambert)做一个极窄的软过渡避免锯齿。6.2 多光源 Ramp当前代码只用了主光源。如果需要额外光源点光源等也走 Ramp 查表// 在 frag 中主光源计算之后追加 uint additionalLightCount GetAdditionalLightsCount(); for (uint idx 0; idx additionalLightCount; idx) { Light addLight GetAdditionalLight(idx, positionWS); float addNdotL dot(normalWS, normalize(addLight.direction)); float addHalf addNdotL * 0.5 0.5; half3 addRamp SAMPLE_TEXTURE2D(_RampTex, sampler_RampTex, float2(addHalf, 0.5)).rgb; // 乘以光源颜色和衰减 lighting addRamp * addLight.color * addLight.distanceAttenuation; }需要在 Varyings 中传递positionWS并在顶点着色器中计算。6.3 2D Ramp 贴图多条件查表用一张256×N的 2D Ramp 贴图UV.x 仍用 halfLambertUV.y 用另一个参数如粗糙度、海拔、生命值百分比等// 例UV.y 用材质的 _RampRow 参数选择 Ramp 行 float2 rampUV float2(halfLambert, _RampRow); half3 rampColor SAMPLE_TEXTURE2D(_RampTex, sampler_RampTex, rampUV).rgb;这样一张贴图就能存多种光影风格运行时通过_RampRow切换。7. 常见问题Q: Ramp 贴图效果和预期不一致明暗分界位置偏了A: 检查贴图的Wrap Mode是否设为Clamp。如果是 RepeathalfLambert 在 0 和 1 附近会采样到贴图另一端的颜色导致边缘出现错误色带。Q: 想要硬切卡通风格但过渡还是有模糊A: 把 Ramp 贴图的Filter Mode改为Point (no filter)。Bilinear/Trilinear 会在相邻像素之间插值把硬切的色阶边界平滑掉。Q: 模型背光面完全是 Ramp 贴图最左端的颜色太暗/太脏A: 两个解法① 调大_AmbientColor补亮暗部② 修改 Ramp 贴图左端的颜色让暗部也有明确的色调比如冷紫色、深蓝色不要用纯黑。Q: 场景里没有灯光模型全黑A: 这个 Shader 依赖场景主光源GetMainLight()计算 NdotL。确保场景中有一个 Directional Light并且 URP 的 Lighting 设置中主光源没有被禁用。Q: Ramp 贴图需要很高分辨率吗A: 不需要。Ramp 本质是一维查表256×1 完全够用。即使做 2D Ramp多行256×16 也绰绰有余。文件极小运行时采样开销可忽略。8. 性能建议采样开销极低Ramp 查表只增加一次 texture fetch256×1 贴图常驻缓存对帧率几乎无影响。关闭 Mip MapsRamp 贴图是 1D 查表生成 Mip 没有意义反而会在远处模糊掉色阶边界。Import Settings 中关掉Generate Mip Maps。Clamp 模式必选Wrap Mode 设为 Clamp 不只是视觉正确性问题也避免了边缘采样穿越到另一端带来的额外缓存未命中。合批友好单 Pass Opaque Shader不影响 SRP Batcher。如果多个物体共用同一张 Ramp 贴图和材质可以正常合批。如果需要不同风格但想保持合批用 2D Ramp MaterialPropertyBlock设置不同的_RampRow。移动端安全整个 Shader 没有复杂数学运算最重的计算就是一个dot和一次贴图采样低端手机也能流畅运行。