做Laya项目时被“下雨”这个需求卡住过的人应该不少。它不是那种看一眼文档就能写完的天气系统牵扯到粒子、Shader、层级遮挡、H5性能预算一堆事。这篇把我自己踩过的坑和最终沉淀的流程完整捋一遍从怎么拆解“看起来真”的雨到LayaAir里各层效果的具体参数配置再到常见问题排查全部按实操顺序来照着做基本能复现出还算像样的雨天场景。1. 先想清楚看起来很“真”的雨其实是由哪几层组成的1.1 下雨天不只是“从天上掉白线”很多人一开始做下雨效果第一反应就是加一堆从上往下落的粒子然后调完发现画面很假雨丝像面条一样挂在原地没有远近层次镜头一动粒子全穿帮天空明明暗下来了却没有“雨幕感”。做完几版之后我总结出来一个规律观众在游戏里感知到的“雨”其实是三层东西叠加起来的视觉印象。第一层是中远景的雨幕。这层雨负责让整个画面暗下来、模糊起来让人觉得“现在确实是阴雨天”。它一般是由大面积、低透明度、长条状的粒子或片元组成的贴近背景不需要太清晰的雨丝形状甚至带点雾气效果更好。第二层是近景雨丝。这一层必须清晰、速度快、密度高粒子要相对靠近镜头才能让人明显感觉到“雨在下”。很多雨效做得假就是只有远景没有近景或者反过来了。第三层是湿感和积水。屏幕上有雨滴滑过、地面有反光、角色踩下去有水花这些东西负责把“雨”从环境元素升级成“天气叙事”。少了这一层哪怕前面两层粒子做得再细也撑不起沉浸感。LayaAir里做雨说白了就是围绕这三层去做资源分配和技术选型粒子系统负责前两层Shader或后处理负责第三层。我的建议是别想着一个方案吃到底分层做每个环节用最顺手的工具最后合到场景里效果才扎实。1.2 Laya里实现下雨的3个核心手段与适用场景先明确一点LayaAir不是为程序化天气系统设计的引擎它主打的是H5小游戏和轻量级3D/2D应用所以很多做端游常用的“体积云”“体积光”“屏幕空间特效”在里面并不能直接用或者需要自己做很多贴合引擎的封装。在Laya里做下雨业内用得最多的方案是下面这三种第一种纯粒子系统ParticleSystem3D模拟雨丝。这是最主流、也最稳妥的方案。引擎自带粒子发射、生命周期、颜色变化、大小变化、旋转、速度控制等功能配合一张雨丝贴图就能模拟出比较自然的雨。它的优势是兼容性极好LayaAir 2.x和3.x都能跑性能开销完全可控调参空间大。绝大多数2.5D视角、横版卷轴、甚至是部分3D俯视角小游戏这一套就够用。第二种片元面片叠加雨线层。就是在摄像机近裁剪面前方放几层带透明贴图的大面片面片上画满雨线并让它们以不同速度滚动。这种做法做“镜头前雨丝模糊”“雨刮器效果”“快速流动感”非常合适因为它是贴着屏幕的天然有近景感和景深感。缺点是它跟世界坐标里的场景没有交互不能用在相机需要大幅旋转、拉近拉远的场景里。第三种自定义Shader做屏幕雨滴与水痕。适合给镜头加“湿感”比如雨滴滑落、模糊扰动、积水反光。LayaAir 3.x支持自定义Shader挂到材质上可以在后处理阶段对屏幕内容做采样和扰动。这个能极大拉高视觉上限但对Shader能力有一定要求而且H5平台要特别注意GPU兼容性。个人实际项目里我通常把第一种和第三种组合着用粒子做世界坐标里的雨幕和雨丝Shader做屏幕层的湿感。这样一个偏“场景内”一个偏“镜头内”互不干扰效果又完整。1.3 开工前的素材准备以及热词“laya模型下载”的价值点动手之前素材先备齐不然写代码写到一半回去找贴图会很打断状态。你需要准备的核心素材是三类雨丝贴图就是一张偏长的、带渐变的半透明白色线条。网上有很多现成的雨粒子贴图但涉及到授权问题我更建议自己画。用Photoshop或Figma都行新建一张256x512的透明图层画一条斜向的窄矩形两端做羽化导出成PNG就行。真实感的关键是两端要淡出不能是硬边。雨滴/水花贴图用于地面水花、积水涟漪。圆形放射状渐变的白色贴图类似光的发射图样配和减淡混合效果很好。场景模型和地形资源如果你想搭一个能看出下雨效果的完整场景而不是在空场景里干看粒子那可能需要一些城市场景、植被或建筑模型。这时候“laya模型下载”这个方向就有用了很多做Laya项目的朋友会在资源平台搜现成的模型来搭场景注意确认授权和格式通常需要fbx或gltf格式导入后用Laya的模型加载器直接加载就行。另外准备一个256x256的噪点贴图做Shader雨滴扰动时用得上不是必须但加了之后真实度明显提升。2. 环境准备与粒子系统关键概念梳理2.1 LayaAir 2.x和3.x的差异怎么选才不返工这部分我必须多写几句因为版本选错神仙难救。LayaAir目前主流是2.x和3.x两套分支它们在粒子系统上的API和编辑器布局差异不小。LayaAir 2.x的3D粒子系统相对老派写法上比较贴近传统3D引擎的粒子模块粒子属性分布在ParticleSystem3D节点和相关ParticleSetting配置上编辑器里可选发射器形状、颜色渐变、大小曲线、速度曲线等。网上搜到的很多旧教程、老项目源码都是基于2.x的如果你打算改现成项目大概率会遇到这套。LayaAir 3.x则做了比较大的重构渲染管线和材质系统都改了粒子系统被集成进了新的节点和编辑器组件里Shader编写也依赖引擎内置的ShaderPass和Uniform结构。好处是3.x的渲染效果上限更高能接自定义Shader做后处理做屏幕雨痕更方便坏处是网上资料相对少遇到问题只能翻文档或源码。我的建议很直接新项目无脑选3.x考虑的是后续维护和效果上限。如果要改老项目先看原项目用的是几.x别硬迁。这篇博文后面给的流程以LayaAir 3.x为主体但我会标出哪些参数在2.x里也能对应上两边用户都能用。2.2 粒子系统核心概念与参数速查表在点开编辑器之前先把粒子系统里的几个核心概念嚼碎了不然你会在成千上万个参数里迷失。一个粒子节点ParticleSystem内部主要控制三大块发射器Emitting。它决定粒子从哪生成、以什么形状生成、生成多少。常用的有Box盒状和Sphere球状两种。做降雨几乎都用Box因为我们要的是一个“头顶上方大面积区域往下面飘雨”的效果。想象一下下雨场景雨水是从一个大平面均匀往下落的所以Box发射器的x和z范围要拉大y方向高度一般是发射器的厚度不需要太厚。粒子生命周期Particle Lifecycle。每个粒子生成后都会走完一个“出生-成长-消亡”的过程。这里控制它的大小变化、颜色变化、速度变化、旋转变化。雨丝的生命周期就是“在下落过程中保持长条状靠近地面时略微变淡变慢最后消失”。渲染属性。包括粒子使用什么材质、贴图怎么混合、透明度怎么处理、是否受雾影响等。雨的材质里最核心的是混合模式BlendMode正常用透明混合Alpha BlendingBlendMode选Normal如果你想做那种大暴雨里雨水被灯光照亮的氛围可以考虑半叠加混合Additive但注意加性混合会让雨丝发白、变亮需要压暗粒子颜色。这里先给一个常用参数速查表后面第3节会逐个讲功能模块关键参数推荐值/方向作用发射器形状Box长500、高20、宽500形成大面积均匀降雨区域发射器位置场景坐标Y50~80空中让粒子生成在画面外上方粒子数量Max Particles200~600控制密度和性能开销速度方向轴向速度向下0,-8,0到0,-15,0模拟下落速度粒子大小长条形宽0.15~0.3长2~4模拟雨丝形态生命周期1.2~2s短一点显急促长一点显绵密影响雨幕感粒子颜色浅蓝灰色半透明白偏蓝匹配阴天色温混合模式BlendModeNormal透明避免雨丝发白过曝雨丝贴图单条白色羽化线RGBA半透明让雨丝两边淡出这个表不是死标准但它是一个经过多次验证的起点。你后面需要根据自己场景的光照、天气、视角来微调。先跑起来再调方向远比一开始追求“终极参数”更重要。3. 主体实现LayaAir 3.x雨粒子系统搭建全流程3.1 创建3D场景与摄像机设置第一步新建一个LayaAir 3.x 3D项目如果你用的是LayaAirIDE直接在创建项目时选“3D示例项目”就行里面已经带好了场景、摄像机、灯光和基础渲染管线。进入场景后先把摄像机的位置调整到一个适合看雨的角度。做降雨时摄像机最好不要仰角太大否则你看到的粒子全是侧面挤在一起的线条疏密不均。稍微带点俯视30度左右往下看视野里同时能容纳天空、雨幕和地面接水点这才能展示出下雨的完整层次。然后处理天空和雾。下雨天的氛围靠两个东西撑一是把环境光压暗二是加上雾。LayaAir 3.x场景里有天空盒和环境光设置你可以把环境光强度降到0.3以下或者直接把天空盒换成灰蓝色调的阴天贴图。雾效可以直接开启场景的Fog选项把颜色调到浅灰色、密度设到0.01~0.02。雾不能太浓否则雨幕会和背景糊成一片分不清远近但也不能没有雨天没有雾就会显得空气特别干完全没有潮湿感。灯光方面主光源要有但仍要弱方向光强度降到0.4左右颜色往冷色调偏。如果你有补光或环境反射也一并调冷。实在不想调太多可以给场景加一个暗色调的“雨天环境球谐探针”让整体色温偏蓝灰。3.2 创建粒子节点并配置Box发射器在LayaAir 3.x场景层级里创建一个空节点命名为“RainParticleSystem”然后给这个节点挂上ParticleSystem组件如果是2.x则是ParticleSystem3D。关键参数逐个来说发射器形状选择Box。Box发射器的三个尺寸分别对应X、Y、Z方向的发射范围。我做一个中等规模城市街道的雨天场景发射器尺寸设置成长500、高20、宽500。这样发射器模型就是一个扁扁的大方块粒子在这个体积内均匀生成头顶上方大片区域都在产出雨丝非常自然。发射器位置放在场景上方60~80米处。如果你场景里的角色在海拔零的地面上那60米以上基本超出视线顶端的裁剪范围粒子生成时会在画面外开始下落不会出现“雨突然在镜头里凭空长出来”的穿帮。粒子总数Max Particles我这里设的是500。这是一个性能与视觉的平衡点。500个粒子在H5设备上压力不大密度也很适中。如果你做的是大暴雨想把雨幕做得非常厚重那可以到800~1000但建议配合LOD策略远处设备用300性能高的用800后面性能优化部分再细说。速度方向把主速度设置为Y轴负方向数值在-8到-15之间模拟下落。太慢像飘雪太快像橡皮筋一闪而过。初始值先用-10跑起来再微调。另外给速度加一点X轴和Z轴方向的随机散布范围控制在±2以内这样雨不会完全笔直有风吹斜的感觉但又不乱。如果你要做有风感的雨可以再挂一个全局方向力往X或Z方向拉模拟大风斜雨。3.3 粒子材质与贴图一套不穿帮的配置粒子节点搭好之后需要给它指定材质和贴图否则渲染出来是一堆白色方块特别吓人。创建一个新材质Shader类型选择Particle模式LayaAir 3.x内置粒子着色器把雨丝贴图拖进材质的贴图槽位。材质参数里有两个必调项第一个是混合模式选Normal透明混合。之前说过用Additive加性混合会让雨丝偏白偏亮只有在大雨叠加灯光氛围时才用。普通雨天场景Normal模式下贴图的半透明通道能正确呈现出雨丝“中间实、两边虚”的形态更接近肉眼看到的真实雨。第二个是渲染队列RenderQueue。粒子默认在Transparent队列但如果你场景里有水面、玻璃、半透明特效它们之间的排序可能会出问题。让雨粒子渲染队列排在大多数透明物体后面也就是Queue值稍微大一点比如从3000调到3050左右或者直接参考引擎文档建议的透明优先级顺序来设置。避免出现雨丝被错误遮挡、或者雨丝像刻进墙里的情况。贴图选择上雨丝贴图最好是单条线不要多根线拼在一起的“复合雨丝”贴图。为什么因为粒子系统本身已经靠大量粒子来堆密度了一张贴图里塞很多根线碰到不同的旋转、缩放中间会出现“重叠线变成粗白块”的情况反而不好看。我用下来最舒服的贴图是一张256x512的PNG透明底中间一条宽度占画布百分之八左右的白线两端羽化到完全透明。3.4 颜色、生命周期与大小曲线雨滴感从哪来这一步就是远看和近看都过关的关键。粒子颜色设置成浅蓝灰色比如RGB(0.72, 0.82, 1.0)透明度0.35左右。这个颜色让雨丝在暗色背景上略显清冷又不会过分抢眼。你可以把颜色的Alpha做成“出生时透明中间变实结尾快速淡出”的曲线。具体操作是在粒子颜色生命周期曲线里把起始Alpha设为0.1中段调到0.4结尾0.0。这样雨丝刚生成时是淡入的飘到镜头前最清晰落地前消失跟人眼对雨丝远近的感知是一致的。生命周期我设的是1.5秒到2秒之间的随机范围。这个值不是拍脑袋雨滴从60米处落到地面按速度10米/秒计算理论上只需要6秒左右但粒子系统里的雨丝并不是从最高点一直落到地面的它会生成在发射器的体积范围内而发射器是一个50米以上的大扁盒粒子生成位置已经在视野内或略高于视野顶端了所以生命周期控制在2秒内就可以既保证雨丝在视野内完整坠完一段又不会让粒子在空中悬停太久造成“雨丝漂浮”的错觉。大小参数是雨丝“像不像雨”的核心。刚才说过贴图本身是竖长的所以粒子大小要设置成宽窄不对称宽度0.15到0.3高度2到4这样雨丝看起来就是被拉伸的长条。更进一步让大小在生命周期里从出生时的0.5倍逐渐放大到结尾的1.2倍左右近处的雨丝因为透视关系本来就比远处大这样的模拟会让场景更立体。旋转方面如果速度方向是垂直向下的雨丝贴图竖着放就正常。但如果你加了风方向需要让粒子朝运动方向旋转。旋转到与速度方向一致设定旋转角度跟速度向量的方向对齐保证雨丝永远顺着运动轨迹拉伸不然画面会出现“横着飘的竖雨丝”特别出戏。LayaAir 3.x粒子组件里有一个“发射时对齐速度方向”的开关2.x里没有需要在脚本里手动让粒子旋转跟随速度。这块API名字每个版本略有不同但思路是取速度向量的atan2角度赋给粒子的旋转值。需要贴代码的话我放到第5节Shader部分后面一起给纯粹逻辑上用Math.atan2(vx, vy)换算角度就行。3.5 让雨跟着场景动位置、视差与场景跟随方案很多人在这一步翻车雨粒子挂在世界坐标里角色一跑动雨就留在原地画面瞬间穿帮。解决这个问题我必须强调一个经验雨粒子系统应该作为场景的“挂件”跟随摄像机或主角移动而不是固定在世界原点。具体做法有两个方向我亲测都有效方案A雨粒子系统跟随主角。在角色控制脚本里每帧把雨粒子节点的X和Z坐标同步到主角位置Y轴保持固定高度不变。这样做的好处是雨在世界坐标里真实存在场景里的地面能接到雨水、水花、物理交互都正常。缺点是你需要确保粒子位置不会在同步时产生跳变否则会看到雨幕闪一下。处理方式很简单同步用平滑插值Lerp进行不要直接赋值。方案B把雨粒子节点挂在摄像机子节点下。这样雨永远渲染在镜头周围做“镜头前雨幕”很方便但问题更大粒子会跟着摄像机倾斜而倾斜人一抬头能看到雨是水平飞的非常出戏。所以这个方案只适合摄像机固定视角的2.5D游戏3D自由视角强烈不建议。我最终采用的做法就是方案A雨粒子节点挂在场景根节点脚本里用Update对主角位置做平滑跟随XZ同步Y不动。这样帧率和视觉都很稳。还有一个细节雨粒子范围一定要比可视范围大。如果你的雨区只有镜头那么宽镜头一转看到“雨区边界”氛围全毁。所以Box发射器的长宽至少是可视范围的两倍。这就是我之前为什么把长宽拉到500的原因宁可多几个看不见的粒子也别让边界出现在画面内。4. 层次感的进阶镜头前雨线、地面水花与雾气组合4.1 使用第二套粒子系统制作近景雨线只用一套世界坐标粒子雨丝会显得很“干净”因为所有雨丝都在同一深度透视变化不明显。真实下雨时贴近镜头的雨丝因为离人眼极近会变成快速的、模糊的、大面积的白线产生很强的“雨幕压迫感”。要模拟这种感觉我采用加一层“镜头雨”的办法在摄像机前方大约0.5~1.5米处额外挂一个独立的粒子系统发射范围比场景那套小很多比如长5、高5、宽5只要覆盖住镜头视野就行但粒子的尺寸要调大几倍宽度0.5、长度4以上透明度也更高速度更快。这样镜头前就有一层清晰飞驰的雨丝背景远处还有一层绵密的雨幕两层叠起来视觉层次一下子拉开了。跑动的时候镜头雨会跟着镜头移动天然形成“雨丝从眼前划过”的效果代入感极强。这里有一个关键约束这层镜头雨的粒子数量不需要多几十个就够。因为它离镜头太近渲染面积大但粒子少才可以避免糊成一片。另外记得把它的投射距离限制在近距离不要让它跑出镜头被远景遮挡。4.2 动态水花与涟漪地面上的反馈层雨落到地面不会是没有反应的。想让雨效更完整的可以在地面上加第三套粒子系统做水花效果但这套不需要一直开着否则性能浪费严重。我的做法是在玩家落地范围内放置一个局部粒子发射器持续小规模发射水珠粒子当角色移动或踩踏时额外爆发一波。水花粒子用圆形水珠贴图从地面向四周呈伞状溅射。发射器形状用一个半球或圆环范围控制在砸地直径0.5米以内速度从中心向四周衰减Y方向给一个向上的初速度然后再被重力拉回地面。生命周期很短0.3秒到0.6秒所以视觉反馈很脆一下就没了这个“脆”正是水花真实感的关键千万别把水花拉成长尾效果。如果场景里有水面池子还可以在水面上叠加一圈圈涟漪。涟漪比较吃贴图你可以用一张白色环状渐变的贴图设成垂直朝向的粒子面片从原点向外扩散大小慢慢变大透明度同时衰减生命周期1秒左右。这一层要注意渲染顺序要晚于水面否则涟漪会被水面半透明遮挡或排到水下。4.3 DrawCall、粒子预算与性能优化策略LayaAir是H5引擎性能永远是悬在头上的剑。粒子效果做得好不好看是审美问题跑不动是事故。我实测下来完整的三套粒子系统远处雨幕、镜头雨、地面水花加上场景里原有的模型在中等手机上会吃掉不少性能所以必须做几件事限制粒子总数远雨幕500个镜头雨80个水花30个总量控制在600左右。如果场景模型复杂度高可以再下调到400。粒子数量是影响性能的第一变量比材质复杂度影响大得多。尽量使用同一张贴图材质三套粒子系统尽量复用同一张雨丝材质减少材质切换的DrawCall。镜头雨可以复制一份材质调高透明度但贴图保持一致这样渲染状态切换少。开启合批或使用InstancingLayaAir 3.x的粒子系统支持自动批处理如果项目里粒子数量大检查是否开启了动态合批或者手动把同一材质、同一贴图、同一Shader的粒子节点集中在一起状态一致才能合批否则还是会逐个DrawCall。远处降级通过Laya的LOD或手动判断摄像机距离远处时把远雨幕的粒子数量从500降为200镜头雨直接关掉。近处再拉满。这个方案在手机上效果很明显。还有一点很值得留意透明物体的排序。雨粒子是半透明的跟场景里其他半透明物体同时渲染时引擎会按深度排序。如果你的雨粒子数量特别多排序不稳定会出现雨丝忽前忽后的闪动这时候把雨粒子渲染队列固定到透明物体之后并关闭深度写入来减少排序压力。5. 进阶玩法屏幕雨滴与水痕的Shader实现思路5.1 屏幕空间雨滴扰动与划痕的核心逻辑如果粒子雨已经满足基础需求但你还想让镜头本身也有“湿哒哒”的感觉那就要上Shader了。屏幕空间雨滴思路拆到底其实就三步在屏幕UV上叠加一层动态的“水滴图案”让水滴图案随时间向下滑动或摇摆最后用这个图案去扰动背景画面的UV坐标或亮度。具体一点说你需要在片元着色器里拿到屏幕坐标的UV在LayaAir里叫vScreenUV或者从顶点着色器传递然后用一组数学函数生成雨滴的“滑行轨迹”每个雨滴就是一个由噪声种子控制的球体它沿着屏幕向下移动每移动一段距离就重置一次。这就是常见的“水滴划痕”效果。我做一个简化版的思路供参考// 片元着色器示意伪代码具体uniform和attribute名需按Laya自定义Shader规范映射 float2 uv vScreenUV; float t uTime * 0.6; // 将屏幕分割成网格每个网格里有一颗水滴 float2 grid float2(6.0, 4.0); float2 cell floor(uv * grid); float2 cellUV frac(uv * grid); // 水滴随时间向下滑动并且每次到达底部时跳回顶部 float slide frac(t * 0.3 dot(cell, float2(12.3, 45.6)) * 0.35); float2 dropCenter float2(0.5, slide); // 计算像素到水滴中心的距离距离越近扰动越强 float d distance(cellUV, dropCenter); float mask smoothstep(0.35, 0.0, d); // 扰动原屏幕UV让画面在水滴处扭曲 uv uv (cellUV - dropCenter) * mask * 0.08;这个代码片段的重点是用grid把屏幕切成一个个小格子每个格子里的水滴独立且错峰下滑mask控制每个水滴的覆盖范围和强度最后拿这个值去扰动原屏幕颜色。它不做复杂物理但视觉上已经很像手机屏幕上挂满雨珠的效果。接下来还可以加一层“雨痕拖尾”思路是在滑落方向上把mask拉长用前一帧或过去N帧位置的采样形成拖尾。可以简单理解为把水滴的maskBi线性插值到它过去0.2秒位置之间中间再做渐变这样水滴移动过的路径上会留下细长的透明划痕非常像雨点刮过镜头的轨迹。5.2 在LayaAir 3.x里接入自定义Shader的注意事项LayaAir 3.x自定义Shader的接入方式和Unity不太一样它需要你创建一个继承Shader类或者使用引擎提供的Shader3D类把顶点着色器和片元着色器的GLSL代码注册进去然后定义一个材质类来把C#或TS属性映射到Shader变量。大致的流程是创建GLSL代码片段注意Uniform要显式声明attribute要匹配引擎内置语义POSITION、TEXCOORD0、COLOR等。在代码里用Shader3D或类似API编译并注册这个Shader。创建一个继承自BaseMaterial或对应材质基类的类添加属性和Uniform变量映射。把这个材质挂到全屏Quad或作为后处理材质在渲染最后阶段对屏幕缓冲采样。这里面最容易踩的坑有三个。第一个坑是sRGB/Gamma问题。LayaAir 3.x默认是线性空间还是Gamma空间取决于项目设置。如果你的雨滴效果做完之后颜色发灰或者过亮多半是采样屏幕颜色时没有正确转换色彩空间或者贴图采样被当成线性值直接输出。第二个坑是平台差异。GLSL在WebGL1和WebGL2下的精度声明和内置函数支持能力不一样。你要是用到高阶导数或者循环次数太多低端安卓机容易编译失败或闪退。稳妥做法是shader里避免循环、避免dFdx/dFdy依赖所有效果控制在两层采样以内。第三个坑是性能。全屏后处理在H5上并不便宜尤其在低端手机上。我一般会做一个质量档位高端机开启动态雨滴扰动中端机只做静态雨滴贴图叠加低端机直接关闭Screen Effect。毕竟再好看的雨滴效果如果掉帧掉到看不清画面就是负优化。5.3 雨雾与灯光联动把阴天氛围讲完整只做雨丝和屏幕雨滴还不够“阴天”。真实的雨天除了雨还有弥漫的湿气和被压暗的光线。如果要在LayaAir里增加雾感和灯光联动我建议用这两种手段一个是“体积雾片”Volumetric Fog Cards。很简单在场景里放几片大的、半透明的、带渐变噪点贴图的面片位置在角色中高位置上下浮动缓慢旋转颜色取蓝灰色透明度很低。它们会随摄像机移动给人“空气里一直飘着水汽”的感觉。因为它是2D面片放射不是体渲染性能几乎无压力效果却很扎实。一个是“灯光响应”。雨天下雨时路灯和场景灯光周围会有丁达尔光或者一圈光晕。在LayaAir里可以用点光源配合半透明的体积光贴片做模拟或者直接给雨粒子加一个靠近光源时增亮的Pass。如果只是想让雨丝在灯光下有存在感把粒子混合模式在特定区域切换成Additive雨丝就会在灯底下发光氛围极好。实测下来这两招加上第三层水花一套完整的雨天视觉效果就很说明问题了。6. 常见问题与排查技巧实录6.1 粒子不出来先检查Shader、贴图和坐标我最常被问的问题就是“粒子系统挂上了怎么跑起来什么也看不见”这种情况九成以上是下面几个原因之一材质没生效。检查粒子的材质是不是正确指定了贴图并且混合模式是Transparent而不是Opaque。如果材质是Opaque粒子会被渲染成不透明矩形但在特定场景里又看不到因为被相机背面剔除了。Shader编译失败。在编辑器和浏览器控制台里看有没有GLSL报错。一旦屏幕出现一大片黑色或渲染警告基本都是自定义Shader或粒子Shader不兼容。换成引擎内置粒子Shader就能解决。粒子位置不对。发射器位置在几千单位外或者摄像机裁剪距离太小粒子压根没出现在视野内。先把发射器节点位置临时改成(0, 10, 0)粒子数量调到最高对比确认能显示再调回原位置。粒子生命周期太短。生命周期如果设成了0.01秒粒子一秒闪现就消失人眼根本捕捉不到。排查时先把生命周期临时设为2秒确保粒子能平稳出现在画面里。我自己的排查顺序是这样先看材质再看Camera裁剪再看粒子位置最后看Shader日志。按照这个顺序走基本十分钟内能找到问题。6.2 雨丝不像雨反而像雪或雾微调清单给你参考这个问题很主观但有几个客观参数很容易导致翻车。粒子太小/太粗会像雪或灰尘完全看不出雨丝形状。检查粒子大小是否呈长条状宽高比至少要1:5哪怕最细也要1:3否则视觉上就是一团线雾。速度太慢会像飘絮完全没有雨滴下坠的惯性。速度从-10起步往上调如果你发现雨丝跟雪一样在空中晃悠绝大多数情况是速度不够快或者生命周期太长。贴图边缘没有羽化会像纸条。雨丝贴图只要是硬边不管粒子参数怎么调都白搭。确认贴图是两端淡出的透明PNG。相机背景太亮会让雨丝看不清。做雨效果前先把天空、环境光压暗雨丝和背景的明暗对比一旦不够再多的粒子也糊成一片。我建议微调时不要一个参数一个参数慢慢碰那样很容易迷失。先整体把粒子数量调大、速度调快、透明度调低建立一个偏抽象但动态流畅的底子再逐步减小数量、增加对比度、细化贴图直到出现想要的手感。6.3 性能面板数值正常手机上就是卡透明排序和合批是关键有时候在PC上跑得很顺一部署到真机就卡成PPT这时候看帧率和DrawCall往往发现没到预期瓶颈。问题往往出在合批和透明排序上。LayaAir里的合批前提是材质相同、Shader参数一致、贴图相同、渲染队列接近。只要雨粒子用了独一份的材质或者每个粒子节点单独创建了一个材质实例引擎就无法合批DrawCall会在节点数量上直线翻倍。遇到这种情况检查一下你是不是用了“每个粒子系统一个材质实例”的写法。应该改成多个粒子系统共用同一个材质对象Material这样合批器才能识别出它们是同一种渲染状态并合并。透明排序则表现在视觉上雨丝和半透明物体交替闪烁、或雨丝从水面后面透出来。之前说过设置粒子材质的渲染队列值比普通透明物体大一些、并关闭深度写入能显著缓解排序抽搐。另外一个隐蔽的坑是粒子系统里的节点Scale如果带负数镜面翻转也会导致排序计算异常排查的时候看一下节点缩放系数。6.4 一个完整的雨效打包流程附最终参数参考到这里我把最终沉淀下来的一套“默认可跑”的参数列出来你照着先复现一遍再在这个基础上去细化出自己的风格比从零开始试要快不少。层级节点挂载发射器形状数量速度(m/s)生命周期(s)大小(宽x高)颜色/RGB(A)远雨幕场景跟随Box(500,20,500)5000,-10,01.5~2.00.2x3.00.72,0.82,1.0(0.35)镜头雨线摄像机下方Box(5,5,5)800,-14,00.8~1.20.5x4.00.85,0.90,1.0(0.5)地面水花玩家脚下Sphere(半径0.5)30向四周散开0.3~0.60.1x0.10.90,0.95,1.0(0.6)雾片场景挂机平面面片3片缓慢漂浮循环20x100.70,0.75,0.90(0.12)打包发布时记得把雨丝贴图等资源放到Bundle的根目录或合理分组里如果是微信小游戏临时下载机制要处理贴图的加载优先级否则用户一进场景雨是空的要等几秒才加载出来特别掉印象分。7. 写在最后的几句实操体会这套方案我前后改过三个项目从最早的纯粒子到后来的粒子加Shader组合最大的感受是做天气效果真正的门槛不在于某个特效技术够不够炫而在于你怎么把层与层之间的关系想清楚。雨幕是背景情绪雨丝是视觉主体水花和屏幕雨滴是质感收尾雾和灯光是统一氛围每个环节卡一个性能预算加起来才算一套能拿得出手的下雨环境。如果你刚接触LayaAir第一次做雨效不用急着把所有进阶方案都塞进去。先用远雨幕粒子加上镜头雨线把这两个跑顺了场景里能看到清晰的雨天印象了再考虑Shader和性能优化。我见过很多项目恰恰是前期堆得太满后期调优时砍哪个都舍不得反而拖垮了进度。最后分享一个调节雨效的小技巧每次调完参数不要只看编辑器里的画面一定要在真机上跑一遍。编辑器的帧率和颜色校准跟手机差别很大雨效这类半透明材质堆叠的项目尤其明显。很多在PC上觉得“正好”的参数到手机上一看要么过曝要么太暗原因就是屏幕亮度曲线不一样。以真机画面为准调整就靠谱得多。