Three.js + WebGL 粒子动画实测:10 万粒子流畅运行
基于 C# 结合 WebView2 与 Three.js 进行大规模粒子动画性能测试。在 i9-14900HX 环境下,10 万粒子可达 53 FPS,流畅运行;50 万粒子降至 14 FPS,出现卡顿。瓶颈主要在于 CPU 每帧状态更新及 GPU 缓冲数据上传成本。建议实时应用粒子数控制在 10 万以内,百万级仅适合静态展示。

基于 C# 结合 WebView2 与 Three.js 进行大规模粒子动画性能测试。在 i9-14900HX 环境下,10 万粒子可达 53 FPS,流畅运行;50 万粒子降至 14 FPS,出现卡顿。瓶颈主要在于 CPU 每帧状态更新及 GPU 缓冲数据上传成本。建议实时应用粒子数控制在 10 万以内,百万级仅适合静态展示。


Windows 桌面,WPF + WebView2。
处理器 Intel(R) Core(TM) i9-14900HX (2.20 GHz)
机带 RAM 32.0 GB (31.7 GB 可用)
系统类型 64 位操作系统,基于 x64 的处理器
操作系统版本 Windows 11 家庭中文版
核心思路是:用 C# 承载页面,用 Three.js 组织 3D 场景,用 WebGL 做底层 GPU 绘制。
整体如下:
WPF 窗口中嵌入 WebView2。NavigateToString 注入页面。three.min.js,创建 Scene / Camera / WebGLRenderer。THREE.BufferGeometry 与多个 BufferAttribute 存储。window.chrome.webview.postMessage(...) 回传给 C#,在 UI 上实时显示。总结为:这是一个'CPU 负责粒子状态更新,GPU 负责大规模点精灵绘制'的混合型架构。
EnsureCoreWebView2Async() 初始化浏览器内核。WebMessageReceived 接收前端消息,把 FPS 同步回桌面 UI。Float32Array 组织。geometry.setAttribute(...) 绑定到 GPU 可消费的缓冲属性。gl_PointCoord 裁剪圆形粒子并做柔和边缘。AdditiveBlending,形成更亮的粒子叠加效果。当前粒子运动(重力、阻力、边界反弹、重生)都在 JS for 循环中执行。
这使逻辑直观易控,但也带来一个关键瓶颈:粒子数线性增长时,CPU 计算和属性回写成本同步上升。
private const int ParticleCount = 100000;positions / colors / sizes / lifetimes / maxLifetimes 都是 Float32Array。BufferAttribute 绑定后由 THREE.Points 进行一次性批量绘制。THREE.ShaderMaterial({...}) 挂载 vertexShader 与 fragmentShader。transparent + AdditiveBlending + depthWrite:false,确保粒子叠加效果。updateParticles(deltaTime) 内遍历全部粒子更新状态。particles.geometry.attributes.position.needsUpdate = trueparticles.geometry.attributes.lifetime.needsUpdate = truepostMessage('FPS: ' + fps)。WebMessageReceived 更新 txtFPS.Text。1 万粒子:FPS 145 , 非常流畅; 10 万粒子:FPS 53 ,流畅; 50 万粒子:FPS 14 ,明显卡顿; 100 万粒子:FPS 7,严重卡顿,接近不可用;
BufferGeometry,减少了对象级 draw call。核心原因不是'GPU 不能画点',而是CPU + 数据传输 + GPU 渲染三者叠加后的总成本爆炸:
position/lifetime 每帧都标记 needsUpdate,意味着大体量数据频繁上传。WebView2 + Three.js + WebGL 路线在桌面应用中的可行性。

微信公众号「极客日志」,在微信中扫描左侧二维码关注。展示文案:极客日志 zeeklog
使用加密算法(如AES、TripleDES、Rabbit或RC4)加密和解密文本明文。 在线工具,加密/解密文本在线工具,online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具,Base64 字符串编码/解码在线工具,online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具,Base64 文件转换器在线工具,online
将 Markdown(GFM)转为 HTML 片段,浏览器内 marked 解析;与 HTML转Markdown 互为补充。 在线工具,Markdown转HTML在线工具,online
将 HTML 片段转为 GitHub Flavored Markdown,支持标题、列表、链接、代码块与表格等;浏览器内处理,可链接预填。 在线工具,HTML转Markdown在线工具,online
通过删除不必要的空白来缩小和压缩JSON。 在线工具,JSON 压缩在线工具,online