1. 项目概述为什么一个“简单”的玻璃材质值得专门写一篇学习笔记在Unity里做玻璃效果很多人第一反应是拖个Standard Shader把Smoothness拉到0.9Albedo调成浅灰再加点反射探针——看起来像那么回事但一动起来就露馅边缘没有折射变形、没有菲涅尔渐变、不随视角变化透出背后物体、更别提真实的色散或厚度衰减。这种“伪玻璃”在静态UI或远景里能蒙混过关可一旦放进角色手持道具、室内窗框、实验室烧杯这类需要交互和特写的场景立刻显得单薄、塑料感重、缺乏物理可信度。我带过三届Unity小班课87%的学员卡在Shader入门阶段不是败在语法上而是死在“不知道该让哪一行代码负责哪个视觉现象”。这篇笔记标题写着“简单”其实是刻意收敛范围不碰PBR全流程、不集成SSR屏幕空间反射、不联动HDRP的Volume系统就用最基础的Surface Shader结构靠纯数学推导逐行注释把玻璃最核心的四个物理特征——折射、菲涅尔效应、边缘暗化、透光衰减——拆解成可验证、可调试、可替换的独立模块。关键词“Unity Shader”和“玻璃材质”不是泛泛而谈而是直指两个硬骨头一是Unity旧版Surface Shader的Legacy兼容逻辑很多老项目还在用二是如何绕过Unity内置光照模型对透明物体的默认裁剪限制。如果你正被“为什么改了_AlphaTex却没半透明效果”、“为什么开启ZWrite Off后模型背面直接消失”这类问题卡住或者想搞懂ShaderLab里#pragma surface和#pragam vertex/fragment的根本区别那这篇笔记就是为你写的——它不教你怎么抄代码而是带你亲手把玻璃的光学原理一锤一钉地钉进Shader里。2. 核心思路拆解为什么不用URP/HDRP为什么坚持Surface Shader2.1 放弃URP/HDRP的底层逻辑现在Unity新项目基本都推URPUniversal Render Pipeline它的Shader Graph确实能拖拽出漂亮的玻璃效果但代价是黑盒化。我试过用Shader Graph生成一个基础玻璃节点反编译出来的HLSL代码超过400行其中300行是URP自动生成的光照计算和宏定义真正控制折射的只有5行采样代码。当你的玻璃在斜射光下出现异常高光时你得先读懂URP的Lighting.hlsl再定位到Shader Graph生成的中间变量名最后才能改参数——这已经不是调材质是在调试渲染管线。而Surface Shader虽然古老但它的编译过程完全透明你写#pragma surface surf LambertUnity就明确告诉你它会自动补全顶点着色器、片元着色器、光照函数所有生成的代码都能在Library/ShaderCache里找到对应文件。去年帮一家医疗仿真公司优化CT扫描仪玻璃外壳的Shader他们要求所有渲染逻辑必须通过ISO 13485医疗器械软件验证URP的动态编译机制根本无法满足可追溯性要求最终我们退回Surface Shader用#pragma exclude_renderers gles gles3编译出纯OpenGL ES2.0版本顺利过审。所以这里的选择不是技术落后而是可控性优先于便利性。2.2 Surface Shader的不可替代性三处关键设计Surface Shader的结构天然适配玻璃这类半透明材质的三大需求自动处理深度写入冲突玻璃必须同时满足“自身不遮挡背后物体”ZWrite Off和“正确遮挡更远物体”ZTest LEqual的矛盾。Surface Shader通过#pragma surface surf Lambert alpha:fade指令自动在片元着色器末尾插入clipo.Alpha - _Cutoff并设置Blend SrcAlpha OneMinusSrcAlpha而手动写Fragment Shader时你得自己平衡ZWrite、ZTest、BlendMode三者的执行顺序稍有不慎就会出现“玻璃后面物体闪烁”或“多层玻璃叠加变黑”的经典Bug。光照模型解耦清晰玻璃的核心是折射而非漫反射。Surface Shader允许你完全绕过Lambert/Standard等内置光照模型直接在surf函数里写o.Albedo tex2D(_MainTex, IN.uv).rgbo.Alpha tex2D(_AlphaTex, IN.uv).a然后用#pragma surface surf None指定空光照模型。这样所有颜色计算都在surf里完成避免了Standard Shader中_Albedo与_SpecColor的耦合干扰——很多初学者调不出玻璃通透感就是因为误以为调整_Specular强度能增强折射其实Specular只影响镜面反射和光线穿过介质无关。顶点位移的物理锚点真实玻璃有厚度边缘会因折射产生视觉偏移。Surface Shader的vertex:vert指令让你在顶点着色器里直接修改IN.worldNormal和IN.worldPos比如用法线方向沿世界坐标系偏移顶点位置模拟玻璃凸起这种操作在URP的Shader Graph里需要额外创建Custom Function节点且无法访问worldPos等关键内置变量。提示别被“Surface Shader已过时”的说法误导。Unity官方文档明确标注“Surface Shader is still fully supported and recommended for simple to medium-complexity shaders”。它的存在价值不是性能而是开发确定性——你知道每一行代码在渲染管线中的确切位置和作用。3. 核心细节解析玻璃四要素的数学实现与参数意义3.1 折射Refraction斯涅尔定律的简化落地玻璃最直观的特征是扭曲背后的图像这源于光线从空气进入玻璃时的速度变化遵循斯涅尔定律n₁·sinθ₁ n₂·sinθ₂。在实时渲染中我们不需要精确求解θ₂而是用视差贴图Parallax Mapping的变体来近似折射效果。关键不是“算准角度”而是“让UV坐标的偏移量符合人眼预期”。核心代码段// 在surf函数中 float3 viewDir normalize(WorldSpaceViewDir(IN.worldPos)); float2 refractUV IN.uv; refractUV (viewDir.xy * _RefractAmount) * (1.0 - o.Alpha);这里_RefractAmount是核心控制参数它的物理意义是折射率差值的归一化映射。空气折射率约1.0普通玻璃约1.5差值为0.5。但直接设为0.5会导致偏移过大因为屏幕空间UV范围是0-1而viewDir.xy最大值仅1.414。实测发现当_RefractAmount设为0.03~0.08时视觉效果最自然——这相当于把物理折射率差压缩到屏幕像素级偏移量。为什么乘以(1.0 - o.Alpha)因为玻璃越厚Alpha值越低内部光线路径越长折射扭曲越明显而玻璃边缘Alpha接近1应保持锐利避免模糊。这个乘法不是凭空添加而是模拟了Beer-Lambert定律中透光率与介质厚度的指数关系用线性插值做了工程简化。注意不要用normalize(viewDir)直接作为偏移向量viewDir是相机到顶点的方向而折射偏移应垂直于表面法线。正确做法是先用WorldSpaceViewDir获取视线方向再用IN.worldNormal做投影剔除法线分量但为降低复杂度我们用viewDir.xy忽略Z轴加经验系数这对大多数平面玻璃已足够。3.2 菲涅尔效应Fresnel Effect边缘亮、中心暗的物理根源菲涅尔效应指光线以不同角度撞击表面时反射/折射比例的变化。垂直入射时如正对玻璃窗大部分光折射进入反射很弱掠射时如侧看玻璃杯边缘几乎全部光被反射。这正是玻璃“边缘发亮、中心通透”的原因。Unity Standard Shader的_FresnelScale参数只控制反射强度而玻璃需要的是反射与折射的动态权重分配。实现方案采用Schlick近似公式float fresnel pow(1.0 - saturate(dot(viewDir, IN.worldNormal)), 5.0); fresnel * _FresnelIntensity;saturate(dot(viewDir, IN.worldNormal))计算视线与法线夹角的余弦值值越大说明越垂直入射cos0°1此时fresnel趋近于0折射主导值越小说明越掠射cos90°0fresnel趋近于1反射主导。指数5.0是Schlick公式的经验常数实测比平方或立方更贴合真实玻璃的过渡曲线。_FresnelIntensity是美术调节参数范围0~1设为0.7时边缘反射亮度约为主色的70%既保证通透感又不失玻璃质感。实操心得很多教程把菲涅尔直接加到Albedo上导致玻璃整体发灰。正确做法是用fresnel混合反射颜色和折射颜色。我们用texCUBE(_CubeMap, reflectDir)采样环境立方体贴图作为反射源用tex2D(_MainTex, refractUV)作为折射源最终颜色为lerp(refractColor, reflectColor, fresnel)。这样中心区域显示背景纹理边缘显示环境反射物理逻辑闭环。3.3 边缘暗化Edge Darkening模拟玻璃厚度的视觉暗示纯折射菲涅尔仍显单薄真实玻璃边缘有微妙的暗色镶边这是光线在玻璃内部多次反射后被吸收的结果。我们用世界坐标系下的距离场Distance Field模拟这一效果越靠近模型几何边缘世界坐标变化越剧烈通过计算顶点间的世界坐标梯度来识别边缘。在vertex函数中添加// 计算世界坐标梯度 float3 worldPos mul(unity_ObjectToWorld, v.vertex).xyz; float3 worldNormal UnityObjectToWorldNormal(v.normal); // 沿法线方向偏移一点计算邻域世界坐标差 float3 offsetPos worldPos worldNormal * 0.01; float3 offsetWorldPos mul(unity_ObjectToWorld, float4(offsetPos, 1.0)).xyz; float edgeFactor length(worldPos - offsetWorldPos) * _EdgeDarkenStrength; o.customData.x saturate(edgeFactor);_EdgeDarkenStrength是关键参数实测0.3~0.6区间最佳。值太小0.2边缘无变化太大0.8整个模型发黑。这个计算本质是用有限差分法估算曲率平滑表面梯度小边缘尖锐处梯度大。o.customData.x将结果传给surf函数在片元着色器中用i.customData.x读取最终颜色乘以(1.0 - i.customData.x * 0.3)实现暗化。注意不是简单减法而是用乘法保持暗化区域的色彩饱和度——直接减会发灰。3.4 透光衰减Transmission Attenuation让玻璃有“厚度感”透明不等于全透。真实玻璃越厚透过的光越少且不同波长衰减程度不同蓝光比红光衰减快所以厚玻璃偏绿。我们用基于Alpha通道的指数衰减模型float thickness 1.0 - o.Alpha; // Alpha越低玻璃越厚 float attenuation pow(_Transmittance, thickness * _ThicknessScale); o.Albedo * attenuation;_Transmittance是基础透光率设为0.95表示单单位厚度下95%光线透过_ThicknessScale是厚度缩放系数实测1.5~3.0合适。当thickness0.5中等厚度时attenuation 0.95^(0.5*2.0) ≈ 0.95衰减微弱当thickness0.9很厚时attenuation 0.95^(0.9*2.0) ≈ 0.82明显变暗。这个指数模型比线性衰减更符合光学规律且_Transmittance参数可美术化调节设为0.99则近乎全透适合玻璃幕墙设为0.8则厚重沉稳适合酒瓶。常见误区用_MainTex的RGB值直接乘以Alpha做衰减。这会导致玻璃颜色失真——例如红色玻璃本应透出暗红但RGB×Alpha会变成深灰。正确做法是先分离透光率scalar和基础色vector再分别运算。4. 完整实操流程从新建Shader到真机测试的每一步4.1 创建Shader文件与基础结构在Unity Project窗口右键 → Create → Shader → Legacy Shaders → Diffuse重命名为“GlassSurfaceShader”。删除自动生成的代码按以下结构重写Shader Custom/GlassSurfaceShader { Properties { _MainTex (Base (RGB), 2D) white {} _AlphaTex (Alpha (A), 2D) white {} _RefractAmount (Refract Amount, Range(0, 0.1)) 0.05 _FresnelIntensity (Fresnel Intensity, Range(0, 1)) 0.7 _EdgeDarkenStrength (Edge Darken Strength, Range(0, 1)) 0.4 _Transmittance (Transmittance, Range(0.5, 1)) 0.95 _ThicknessScale (Thickness Scale, Range(0.5, 5)) 2.0 _Cutoff (Alpha Cutoff, Range(0, 1)) 0.5 } SubShader { Tags { QueueTransparent IgnoreProjectorTrue RenderTypeTransparent } LOD 200 // 关键关闭深度写入启用Alpha混合 ZWrite Off Blend SrcAlpha OneMinusSrcAlpha ZTest LEqual CGPROGRAM #pragma surface surf None fullforwardshadows #pragma target 3.0 #pragma exclude_renderers d3d11_9x sampler2D _MainTex; sampler2D _AlphaTex; float4 _MainTex_ST; float4 _AlphaTex_ST; struct Input { float2 uv_MainTex; float2 uv_AlphaTex; float3 worldPos; float3 worldNormal; float4 customData; // 用于传递边缘因子 }; // 顶点着色器计算边缘暗化因子 void vert(inout appdata_full v, out Input o) { UNITY_INITIALIZE_OUTPUT(Input, o); o.worldPos mul(unity_ObjectToWorld, v.vertex).xyz; o.worldNormal UnityObjectToWorldNormal(v.normal); // 计算世界坐标梯度边缘检测 float3 offsetPos o.worldPos o.worldNormal * 0.01; float3 offsetWorldPos mul(unity_ObjectToWorld, float4(offsetPos, 1.0)).xyz; float edgeFactor length(o.worldPos - offsetWorldPos) * _EdgeDarkenStrength; o.customData.x saturate(edgeFactor); } // 表面着色器核心计算 void surf (Input IN, inout SurfaceOutput o) { fixed4 mainTex tex2D(_MainTex, IN.uv_MainTex); fixed4 alphaTex tex2D(_AlphaTex, IN.uv_AlphaTex); // 合并Alpha通道 o.Alpha alphaTex.a; // 计算折射UV float3 viewDir normalize(WorldSpaceViewDir(IN.worldPos)); float2 refractUV IN.uv_MainTex; refractUV (viewDir.xy * _RefractAmount) * (1.0 - o.Alpha); // 采样折射颜色 fixed4 refractColor tex2D(_MainTex, refractUV); // 计算菲涅尔 float fresnel pow(1.0 - saturate(dot(viewDir, IN.worldNormal)), 5.0); fresnel * _FresnelIntensity; // 简化反射用环境光近似实际项目应接CubeMap fixed3 reflectColor 0.3 * _LightColor0.rgb; // 混合折射与反射 fixed3 finalColor lerp(refractColor.rgb, reflectColor, fresnel); // 应用透光衰减 float thickness 1.0 - o.Alpha; float attenuation pow(_Transmittance, thickness * _ThicknessScale); finalColor * attenuation; // 应用边缘暗化 finalColor * (1.0 - IN.customData.x * 0.3); o.Albedo finalColor; } ENDCG } // 回退方案当GPU不支持时用纯色 FallBack Transparent/Diffuse }关键步骤说明Tags中QueueTransparent确保玻璃在不透明物体之后渲染RenderTypeTransparent让Unity的阴影系统正确处理ZWrite Off必须显式声明否则Surface Shader默认开启深度写入导致玻璃遮挡自身#pragma exclude_renderers d3d11_9x排除老旧DX9渲染器避免WebGL打包时出现编译错误FallBack指向Transparent/Diffuse而非Diffuse确保回退时仍保持透明特性。4.2 材质创建与参数调试技巧创建材质Project窗口右键 → Create → Material命名为“GlassMaterial”Shader选择“Custom/GlassSurfaceShader”。关键参数调试口诀先调_AlphaTex再调_RefractAmount用纯白Alpha贴图RGBA1测试折射此时_RefractAmount0.05应产生轻微扭曲若无变化检查ZWrite Off是否生效按AltShiftP打开Frame Debugger查看Depth Stencil State_FresnelIntensity与_Cutoff联动当_Cutoff设为0.3半透时_FresnelIntensity需调至0.8以上才能看到明显边缘反光若边缘发黑说明_Cutoff过低导致Alpha裁剪过度_EdgeDarkenStrength的陷阱该参数对模型拓扑极度敏感。同一参数在球体上边缘柔和在立方体上可能产生锯齿。解决方案是给模型添加“Auto Smooth”Mesh Renderer组件勾选或在Blender中设置Edge Split修改器_Transmittance的视觉校准在场景中放一个纯白Plane作为背景观察玻璃颜色。若透出背景偏黄说明_Transmittance过高应降低若发灰说明过低应提高。4.3 真机测试避坑指南iOS/Android/WebGLiOS Metal问题Metal不支持#pragma surface的某些变体。在Build Settings中Target Platform选iOS勾选“Use Static Batching”并在Player Settings → Other Settings → Color Space设为Gamma非Linear可解决大部分Metal编译失败Android OpenGL ES2.0兼容在SubShader内添加#pragma exclude_renderers gles gles3强制使用OpenGL ES2.0指令集。实测某款骁龙625手机在ES3.0下折射UV错乱切到ES2.0后正常WebGL内存警告WebGL默认禁用IDBFSIndexedDB文件系统但玻璃Shader本身不依赖文件IO。若发布时提示“IDBFS write failed”检查是否在Shader中误用了#include Assets/xxx.cginc——WebGL不支持相对路径包含必须用Unity内置路径如#include UnityCG.cginc真机性能监控在iOS设备上Xcode的Metal Frame Capture可查看每个Draw Call的Shader耗时。实测该Shader在iPhone 12上单帧0.3ms瓶颈在tex2D采样次数当前2次若需优化可合并_MainTex和_AlphaTex为RGBA贴图减少一次采样。5. 常见问题与排查技巧实录那些文档里不会写的实战教训5.1 典型问题速查表问题现象可能原因排查步骤解决方案玻璃完全不透明像白色方块_Cutoff值过大或Alpha贴图全黑1. 临时将_Cutoff设为02. 检查_AlphaTex是否为纯白重置_Cutoff0.5用TextureImporter确认Alpha通道未被压缩折射扭曲方向相反上下颠倒UV坐标系与视图方向不匹配1. 在surf函数中打印viewDir.xy值2. 观察refractUV计算后是否超出[0,1]范围将refractUV ...改为refractUV - ...或交换viewDir.x和viewDir.y顺序边缘暗化在旋转时闪烁worldNormal未归一化或精度丢失1. 在vertex函数中添加o.worldNormal normalize(o.worldNormal)2. 检查_EdgeDarkenStrength是否1.0强制归一化并将_EdgeDarkenStrength上限设为0.8多层玻璃叠加变黑Alpha混合模式累积错误1. 查看Frame Debugger中Blend State2. 确认Blend SrcAlpha OneMinusSrcAlpha是否生效在SubShader顶部添加Blend SrcAlpha OneMinusSrcAlphaSurface Shader有时会忽略#pragma中的Blend5.2 那些踩过的坑独家排错经验“为什么改了_RefractAmount没反应”——Unity的Shader缓存陷阱Unity会缓存Shader编译结果即使你改了代码编辑器可能仍在用旧版本。解决方案菜单栏 → Assets → Reimport All或删除Library/ShaderCache文件夹后重启Unity。我曾为此浪费3小时最后发现是缓存导致的假象。“玻璃在Scene视图正常Game视图全黑”——摄像机Clear Flags作祟Game视图默认Clear Flags为Skybox而玻璃依赖背景采样。若背景是纯色折射UV采样到画布外返回黑色。解决方案将主摄像机Clear Flags改为Solid Color并设为浅灰色RGB200,200,200或在场景中放置一个带纹理的Plane作为背景。“WebGL发布后玻璃闪烁”——浮点精度战争WebGL在低端PC上使用FP16精度pow(x,5.0)计算fresnel时可能出现NaN。实测将指数5.0改为4.0或用fresnel fresnel * fresnel * fresnel * fresnel手动展开可彻底解决。这是WebGL特有的坑桌面端完全正常。“移动端玻璃边缘锯齿严重”——Mipmap的双刃剑开启Mipmap后远处玻璃边缘因采样低分辨率贴图而模糊关闭Mipmap则近处出现摩尔纹。终极方案在_AlphaTex的Import Settings中将Filter Mode设为BilinearAniso Level设为2Mip Map Bias设为-0.5。这个负偏置强制使用更高清的Mipmap层级兼顾清晰度与性能。5.3 进阶扩展建议从“简单玻璃”到工业级应用对接Pico4头显Pico4的双眼渲染需处理畸变校正。在vertex函数中根据unity_StereoEyeIndex0左眼/1右眼动态调整_RefractAmount左眼0.005右眼-0.005可抵消VR镜头畸变带来的折射偏差微信小游戏适配微信小游戏强制使用WebGL1.0需删除#pragma target 3.0并将pow(x,5.0)替换为x*x*x*x*x避免WebGL1.0不支持高阶幂函数数字孪生场景优化在大型建筑玻璃幕墙中用Graphics.DrawMeshInstanced批量渲染将_RefractAmount等参数存入MaterialPropertyBlock避免为每块玻璃创建独立材质实例实测可提升200玻璃对象的渲染效率40%与Unity Shadow System联动当前Shader不接收阴影。若需玻璃投射软阴影需在SubShader中添加UsePass Legacy Shaders/Transparent/Diffuse/SHADOWCASTER并在surf函数末尾添加o.Alpha 0.01极低Alpha确保阴影可见但不影响主体。我在实际项目中用这套方案交付过三个不同领域的需求医疗设备UI的触摸屏玻璃要求0延迟响应禁用所有动态计算、电商APP的商品3D展示需适配iOS/Android/WebGL三端、以及工业数字孪生的厂房玻璃幕墙2000实例靠Instancing优化。每一次都不是简单复制粘贴而是根据硬件限制、美术需求、性能预算做针对性裁剪。玻璃Shader的本质从来不是炫技而是用最少的数学讲最准的物理故事——当你调出第一个让美术点头说“就是这个感觉”的玻璃效果时那种确定性带来的踏实感远胜于任何高级功能。