微信小程序高性能粒子系统实战：基于Three.js的雨雪天气特效实现

1. 项目概述当微信小程序遇见粒子特效最近在做一个需要展示3D场景的微信小程序项目客户要求在特定场景下能动态切换天气效果比如从晴天切换到下雨或下雪。这让我想到了用three.js的粒子系统来实现。在微信小程序里玩three.js本身就有不少坑而粒子系统因为涉及大量对象的创建与更新对性能的挑战更大。但一旦做出来那种动态、沉浸的视觉效果对用户体验的提升是巨大的。这篇文章我就来详细拆解一下如何在微信小程序中利用three.js构建高性能的雨雪粒子天气系统分享从原理、实现到性能优化的完整心路历程。这个方案特别适合需要在电商展示、文旅导览、教育模拟等小程序中增加环境氛围感的场景。无论你是刚开始接触小程序3D开发还是已经踩过一些坑想寻求优化方案相信接下来的内容都能给你带来直接的帮助。我们会从最基础的粒子概念讲起一步步深入到着色器优化确保你能看懂、能做出来并且跑得流畅。2. 核心思路与方案选型为什么是GPU粒子在决定用粒子系统模拟天气时第一个要回答的问题就是如何实现three.js提供了几种创建粒子的方式比如使用THREE.Points配合THREE.BufferGeometry或者更基础的THREE.Sprite。对于雨雪这种需要成千上万颗粒子、每帧都要更新位置的场景性能是首要考虑因素。2.1 CPU粒子 vs GPU粒子最初我尝试了最直观的方法在requestAnimationFrame循环里遍历一个包含数千个THREE.Mesh比如使用小球体的数组逐个更新它们的position.y。这就是典型的CPU粒子。结果可想而知在小程序里帧率直接掉到个位数完全不可用。CPU粒子的瓶颈在于每一帧都需要JS逻辑计算每个粒子的新位置然后通过WebGL API调用更新JS与GPU之间的通信开销巨大。所以我们几乎必须选择GPU粒子方案。其核心思想是将粒子的初始状态如位置、速度和运动规律如重力、风力通过数据属性和算法着色器传递给GPU让GPU在顶点着色器中并行计算所有粒子的位置。JS端每帧只负责更新少数几个全局变量如时间、风力强度通信量极小。THREE.Points类就是为这种场景设计的它代表一个由顶点构成的点云非常适合用顶点着色器来驱动每个“点”即粒子的运动。2.2 粒子属性的数据结构设计确定了使用THREE.Points后我们需要为每个粒子定义一组属性。对于雨滴和雪花我设计了以下属性初始位置 (positionStart): 粒子诞生时的位置。为了简单我们可以在一个长方体区域即“天空”内随机生成。初始速度 (velocityStart): 粒子诞生时的速度向量。雨滴主要是向下的速度Y轴负方向并可能带有随机的水平方向X, Z轴速度来模拟风。雪花下落慢且水平飘动更明显。创建时间 (startTime): 粒子被“发射”的时间戳。这是实现粒子循环的关键。当一个粒子落到地面以下我们可以通过判断当前时间与它的“创建时间”之差是否超过一个生命周期来“重置”它到天空中的随机新位置。但在GPU中这个“重置”逻辑也写在着色器里。随机种子 (seed): 一个随机浮点数。在着色器中真正的随机函数开销很大且可能造成不同GPU结果不一致。通常我们传入一个随机种子在着色器内用伪随机函数如sin(seed * 某大数)来生成各粒子独有的随机偏移用于计算飘动、旋转等。这些属性我们将通过THREE.BufferAttribute传递给着色器。一个重要的优化点是对于不需要每帧从JS更新的属性如初始位置、初始速度、种子我们应该将它们作为BufferAttribute一次性传入。而对于需要每帧更新的全局变量如当前时间、重力、风向量则通过uniform传递。2.3 着色器代码的组织策略在微信小程序中我们不能像在Web端那样方便地使用THREE.ShaderMaterial并直接传入GLSL代码字符串因为小程序环境对new Function()和eval有严格限制。通常的解决方案是将GLSL代码字符串提前写好放在一个单独的.glsl或.js文件中作为字符串常量导出。使用THREE.RawShaderMaterial并传入这些字符串。这样做的好处是代码清晰且绕开了小程序的动态代码执行限制。我们将分别编写顶点着色器(vertexShader)和片元着色器(fragmentShader)。顶点着色器负责计算粒子位置片元着色器负责决定每个粒子点最终在屏幕上呈现的颜色和形状比如雨滴是拉长的雪花是六角形。3. 核心实现从零构建雨雪粒子系统理论讲完我们开始动手。首先确保你的小程序项目已经正确集成了three.js库例如使用threejs-miniprogram这个适配版本。下面我将以“下雨”效果为例分步骤实现。3.1 创建粒子几何体与属性我们首先创建一个THREE.BufferGeometry来承载粒子数据。// utils/rainParticleSystem.js import * as THREE from threejs-miniprogram; export function createRainParticleSystem(count 5000) { const particles count; const geometry new THREE.BufferGeometry(); // 1. 初始位置属性在天空盒子内随机分布 const positionsStart new Float32Array(particles * 3); const velocityStart new Float32Array(particles * 3); const startTime new Float32Array(particles); const seed new Float32Array(particles); const skyWidth 50; // 天空区域宽度 const skyHeight 30; // 天空高度 const skyDepth 50; // 天空深度 for (let i 0; i particles; i) { const i3 i * 3; // 初始位置在天空盒子内随机 positionsStart[i3] (Math.random() - 0.5) * skyWidth; // x positionsStart[i3 1] Math.random() * skyHeight; // y (从地面到天空顶部) positionsStart[i3 2] (Math.random() - 0.5) * skyDepth; // z // 初始速度主要向下带一点随机水平方向 const baseSpeed -15.0; // 基础下落速度 const windStrength 2.0; // 风力强度 velocityStart[i3] (Math.random() - 0.5) * windStrength; // x方向速度 velocityStart[i3 1] baseSpeed (Math.random() - 0.5) * 2.0; // y方向速度 velocityStart[i3 2] (Math.random() - 0.5) * windStrength; // z方向速度 // 创建时间错开模拟持续下雨而非同时爆发 startTime[i] Math.random() * 10.0; // 0-10秒内随机开始 // 随机种子 seed[i] Math.random() * 1000.0; } geometry.setAttribute(positionStart, new THREE.BufferAttribute(positionsStart, 3)); geometry.setAttribute(velocityStart, new THREE.BufferAttribute(velocityStart, 3)); geometry.setAttribute(startTime, new THREE.BufferAttribute(startTime, 1)); geometry.setAttribute(seed, new THREE.BufferAttribute(seed, 1)); return geometry; }注意这里我们创建了positionStart而不是position。因为粒子的实时位置将由着色器计算THREE.Points需要的position属性我们稍后会在着色器中动态赋值。但THREE.BufferGeometry要求有一个position属性才能被正确渲染所以我们可以先给一个和positionStart相同的值作为占位符。3.2 编写着色器材料这是最核心的部分。我们需要创建顶点和片元着色器代码。顶点着色器 (rain.vert.glsl):// 从JS传递进来的统一变量 uniform float uTime; // 全局时间 uniform vec3 uGravity; // 重力例如 vec3(0.0, -9.8, 0.0) uniform vec3 uWind; // 风力方向例如 vec3(1.0, 0.0, 0.0) uniform float uLifeTime; // 粒子生命周期 // 从BufferGeometry传递进来的属性 attribute vec3 positionStart; attribute vec3 velocityStart; attribute float startTime; attribute float seed; // 传递给片元着色器的变量如果需要 varying float vAlpha; // 伪随机函数用于生成可控的随机值 float rand(float n) { return fract(sin(n) * 43758.5453123); } void main() { // 计算粒子年龄 float age uTime - startTime; // 取模运算实现循环当年龄超过生命周期时粒子“重生” age mod(age, uLifeTime); // 利用种子生成一些随机扰动 float randOffset rand(seed) * 2.0 - 1.0; // -1 到 1 // 物理模拟位置 初始位置 初始速度 * 时间 0.5 * 加速度 * 时间^2 // 加速度 重力 风力 vec3 acceleration uGravity uWind; vec3 newPosition positionStart velocityStart * age 0.5 * acceleration * age * age; // 简单的边界检查与重置可选如果mod方式不能满足需求可以用if判断 // if (newPosition.y -10.0) { // 落到地面以下 // newPosition.y 20.0; // 重置到高处 // } // 将计算出的新位置赋值给gl_Position vec4 mvPosition modelViewMatrix * vec4(newPosition, 1.0); gl_Position projectionMatrix * mvPosition; // 控制粒子大小可根据距离或年龄变化 float pointSize 3.0; // 基础大小 // 让远处的粒子小一点可选 pointSize * (1.0 / -mvPosition.z); gl_PointSize pointSize; // 计算透明度模拟雨滴下落时的视觉衰减例如近实远虚或根据年龄 vAlpha 1.0 - (age / uLifeTime); // 线性衰减越老越透明 // 或者基于距离的衰减 // vAlpha 1.0 / (1.0 0.1 * -mvPosition.z); }片元着色器 (rain.frag.glsl):// 从顶点着色器传递来的变量 varying float vAlpha; uniform sampler2D uPointTexture; // 粒子的纹理一个雨滴形状的贴图 void main() { // 获取纹理颜色。gl_PointCoord是片元在点精灵内的坐标0.0到1.0 vec4 texColor texture2D(uPointTexture, gl_PointCoord); // 如果纹理是透明背景的我们可以利用它的alpha通道 // 也可以自己绘制形状例如画一个拉长的椭圆来模拟雨滴 // 这里我们采用一个简单的圆形并应用纹理颜色 vec2 center gl_PointCoord - vec2(0.5); float dist length(center); if (dist 0.5) { discard; // 丢弃点精灵圆以外的片元形成圆形点 } // 最终颜色可以混合纹理色和自定义色并应用透明度 vec3 rainColor vec3(0.7, 0.8, 1.0); // 淡蓝色 gl_FragColor vec4(rainColor, vAlpha * 0.8); // 整体透明度 }然后在JS中创建着色器材质// utils/rainParticleSystem.js (续) import rainVert from ./shaders/rain.vert.glsl; import rainFrag from ./shaders/rain.frag.glsl; export function createRainMaterial() { const material new THREE.RawShaderMaterial({ uniforms: { uTime: { value: 0.0 }, uGravity: { value: new THREE.Vector3(0, -9.8, 0) }, uWind: { value: new THREE.Vector3(2.0, 0, 0.5) }, // 一点斜风 uLifeTime: { value: 5.0 }, // 粒子生命周期5秒 uPointTexture: { value: null } // 纹理稍后设置 }, vertexShader: rainVert, fragmentShader: rainFrag, transparent: true, // 启用透明度 depthWrite: false, // 粒子通常不需要写入深度缓冲区可以避免排序问题但可能引起遮挡错误需根据情况调整 blending: THREE.AdditiveBlending, // 加法混合能让叠加的雨滴看起来更亮、更柔和 }); return material; }3.3 组装并添加到场景最后我们将几何体和材质组合起来创建THREE.Points对象并添加到场景中。// pages/weather/index.js import * as THREE from threejs-miniprogram; import { createRainParticleSystem, createRainMaterial } from ../../utils/rainParticleSystem; import { loadTexture } from ../../utils/textureLoader; // 一个简单的纹理加载器 Page({ data: { /* ... */ }, onReady() { // 初始化three.js场景、相机、渲染器此部分略假设已存在 const scene this.scene; const renderer this.renderer; // 1. 创建粒子系统 const particleCount 8000; // 根据性能调整 const rainGeometry createRainParticleSystem(particleCount); const rainMaterial createRainMaterial(); // 2. 加载雨滴纹理一个小的透明PNG中心白色边缘透明 loadTexture(https://your-cdn-path.com/raindrop.png).then(texture { rainMaterial.uniforms.uPointTexture.value texture; }); // 3. 创建Points对象 const rainParticles new THREE.Points(rainGeometry, rainMaterial); rainParticles.frustumCulled false; // 禁用视锥体剔除确保粒子始终被渲染 scene.add(rainParticles); this.rainParticles rainParticles; // 4. 在动画循环中更新uTime const clock new THREE.Clock(); const animate () { const deltaTime clock.getDelta(); this.totalTime deltaTime; if (this.rainParticles) { this.rainParticles.material.uniforms.uTime.value this.totalTime; } renderer.render(scene, camera); this.requestID requestAnimationFrame(animate); }; this.totalTime 0; animate(); }, onUnload() { if (this.requestID) cancelAnimationFrame(this.requestID); // 妥善处置几何体和材质避免内存泄漏 if (this.rainParticles) { this.scene.remove(this.rainParticles); this.rainParticles.geometry.dispose(); this.rainParticles.material.dispose(); } } })3.4 实现雪花系统雪花系统的实现逻辑与雨滴高度相似主要区别在于物理参数和视觉表现物理参数重力更小uGravity.y -1.0初始速度更慢且随机性更强风力影响更大生命周期更长。运动轨迹可以在着色器中加入更多基于sin/cos和随机种子的水平摆动模拟飘落感。视觉表现片元着色器中可以绘制更复杂的形状如六角星或者使用雪花的纹理。粒子大小 (gl_PointSize) 可以更随机透明度变化更平缓。混合模式雪花可能更适合THREE.NormalBlending而非AdditiveBlending以避免过亮。你可以创建另一套createSnowParticleSystem和createSnowMaterial通过切换场景中的粒子系统对象来实现雨雪天气的转换。4. 性能优化与避坑指南在小程序里运行3D粒子不优化等于自杀。下面是我踩过坑后总结的几条黄金法则。4.1 控制粒子数量与渲染状态数量是性能第一杀手先从较少的粒子数如2000开始测试逐步增加直到帧率开始明显下降建议保持在50-60fps。中低端手机上5000-10000个高质量粒子可能是极限。合并绘制调用使用一个THREE.Points绘制数万个粒子远比使用数千个独立的THREE.Mesh高效得多因为前者只有一个绘制调用(Draw Call)。谨慎使用透明和混合transparent: true和blending会要求GPU对片元进行排序和混合开销较大。如果粒子是纯加法效果且不需要与背景复杂混合可以尝试blending: THREE.NoBlending并关闭透明用纹理本身的alpha做裁剪。深度测试与写入对于像雨雪这种全屏覆盖的半透明粒子通常设置depthWrite: false。这避免了粒子之间以及粒子与场景其他物体之间不必要的深度比较能提升性能。但副作用是可能造成错误的遮挡关系比如雪花穿进建筑内部。你需要根据场景内容权衡。4.2 着色器优化技巧避免着色器条件分支GPU不喜欢if语句尤其是在顶点着色器中。尽量用step()、mix()等GLSL内置函数来替代条件判断。例如上面重置粒子的逻辑用mod取模循环就比用if判断再重置要好。简化计算在顶点着色器里开方(sqrt)、三角函数(sin,cos)、除法都是相对耗时的操作。能省则省。例如计算距离时可以先比较距离的平方避免开方。纹理图集如果你需要多种粒子形态比如不同形状的雪花不要为每种形态创建不同的Points对象。可以将所有形态打包到一张纹理图集(Texture Atlas)中在着色器里根据粒子的属性如种子计算对应的纹理坐标。4.3 微信小程序特定问题纹理加载小程序对网络图片有域名白名单限制。粒子纹理图片需要放在小程序项目内/assets/images/或配置了downloadFile合法域名的服务器上。使用wx.createImage()或three.js的TextureLoader加载本地图片路径时注意路径前缀如./assets/raindrop.png。帧率控制小程序页面切换或失去焦点时务必停止requestAnimationFrame循环并在页面显示时重新启动否则会持续消耗性能。内存管理小程序内存管理比浏览器更严格。在onUnload生命周期中必须手动dispose()掉几何体(geometry)、材质(material)、纹理(texture)和渲染器(renderer)。否则页面跳转后这些WebGL资源不会被自动释放可能导致页面卡顿甚至崩溃。iOS与Android差异某些Android机型特别是低端机的GPU精度较低可能导致粒子闪烁(Z-fighting)或计算误差。如果遇到可以尝试在片元着色器中增加一个很小的深度偏移(gl_FragDepth)或者统一降低粒子系统的规模。4.4 常见问题排查表问题现象可能原因排查与解决思路粒子完全不显示1. 相机位置/朝向不对。2. 粒子初始位置在相机视锥体外。3. 着色器编译错误。1. 调整相机位置确保看向粒子区域。2. 设置points.frustumCulled false。3. 打开小程序开发者工具的“调试”模式查看控制台是否有WebGL编译错误。检查着色器代码语法。帧率极低卡顿1. 粒子数量过多。2. 着色器计算太复杂。3. 每帧在JS中更新了大量BufferAttribute数据。1. 减少粒子数量(count)。2. 简化着色器移除不必要的计算和分支。3. 确保粒子运动逻辑在GPU着色器中完成JS端只更新uniform如uTime。粒子闪烁或抖动1. 深度测试冲突(Z-fighting)。2. 时间(uTime)精度问题数值过大导致浮点精度丢失。1. 尝试设置材质depthWrite: false或polygonOffset: true。2. 在着色器中对uTime取模或每运行一段时间如一小时重置uTime。透明度混合异常1. 混合模式(blending)设置不当。2. 半透明物体渲染顺序问题。1. 根据需求尝试NormalBlending、AdditiveBlending或NoBlending。2. 确保粒子系统在场景中最后渲染后添加或手动设置renderOrder。在iOS上正常在部分Android机上异常低端Android机GPU精度或驱动支持问题。1. 简化着色器避免高精度运算(highp)。2. 使用更保守的粒子数量和效果。3. 提供画质选项让用户选择“性能模式”。5. 效果增强与实战技巧基础功能跑通后我们可以进一步打磨效果让它更真实、更吸引人。5.1 融入环境交互静态的雨雪看久了会腻。让粒子与环境互动能极大提升真实感地面涟漪这不是粒子系统本身但可以配合实现。在片元着色器中可以根据雨滴位置投影到地面XZ平面在一个作为地面的平面纹理上动态绘制扩散的圆形波纹。这需要额外的渲染目标(Render Target)或动态纹理更新性能开销大需谨慎使用。风力变化不要让uWind恒定不变。可以在JS端用Math.sin(uTime * 0.1)来生成一个缓慢变化的风力值并传递给着色器模拟风力的起伏。与相机距离关联在顶点着色器中可以根据粒子到相机的距离(length(mvPosition))来动态调整粒子大小(gl_PointSize)和透明度(vAlpha)。近处的雨滴大而清晰远处的细密而模糊能增强空间纵深感。5.2 视觉细节打磨雨滴形态用一个拉长的椭圆形纹理代替简单的圆形点。在片元着色器中可以对gl_PointCoord进行拉伸变换vec2 stretchedCoord vec2(gl_PointCoord.x, gl_PointCoord.y * 2.0 - 0.5);然后再判断是否在椭圆内。雪花旋转在顶点着色器中将随机种子传递给片元着色器。在片元着色器中利用这个种子和当前时间对gl_PointCoord进行旋转矩阵变换再采样纹理就能实现雪花各自旋转飘落的效果。颜色与光照简单的颜色 (vec3(1.0)) 很假。可以尝试根据场景的主光源方向计算粒子表面的简单漫反射。或者更取巧的方法是根据粒子在屏幕上的Y坐标下落高度来混合颜色比如高空的雪花偏蓝灰色近处的偏亮白色。5.3 性能与效果的平衡艺术这是实战中最纠结的部分。我的经验是分层渲染将粒子系统分成近景层和远景层。近景层使用较少的粒子但渲染质量高更复杂的着色器、更大的点大小远景层使用更多的粒子但渲染简化更简单的着色器、更小的点大小、甚至可以用公告板代替。两者叠加用较低的成本获得丰富的层次感。动态细节等级(LOD)根据设备的帧率或用户设置动态调整粒子数量、着色器复杂度。可以在动画循环中监测performance.now()计算帧间隔如果连续几帧太慢就自动降低一个等级。纹理分辨率粒子纹理不需要很高清32x32或64x64像素通常就够了。高分辨率纹理只会增加GPU的采样开销和内存占用。最后别忘了在小程序真机上尤其是低端Android机进行充分的性能测试。开发者工具里的帧率往往很美好但真机才是试金石。通过不断调整参数、优化代码最终在效果和流畅度之间找到一个完美的平衡点那种成就感正是我们做开发的乐趣所在。