测试环境
Windows 桌面，WPF + WebView2 (基于 Chromium)。
处理器：Intel(R) Core(TM) i9-14900HX (2.20 GHz) 内存：32.0 GB (31.7 GB 可用) 系统类型：64 位操作系统，基于 x64 的处理器 操作系统版本：Windows 11 家庭中文版
实现原理
核心思路是：用 C# 承载页面，用 Three.js 组织 3D 场景，用 WebGL 做底层 GPU 绘制。
整体架构如下：
- WPF 窗口中嵌入 WebView2 控件。
- 在 C# 中动态拼接 HTML，并通过 NavigateToString 注入页面。
- 页面侧加载 three.min.js，创建 Scene / Camera / WebGLRenderer。
- 粒子通过 THREE.BufferGeometry 与多个 BufferAttribute 存储。
- 每帧在 JS 中更新粒子位置与生命周期，提交属性更新后由 GPU 渲染。
- 页面每秒统计一次 FPS，通过 window.chrome.webview.postMessage(...) 回传给 C#，在 UI 上实时显示。
总结为：这是一个'CPU 负责粒子状态更新，GPU 负责大规模点精灵绘制'的混合型架构。
关键技术点
1. 跨技术栈集成：WPF 与 Web 3D 的桥接
C# 端调用 EnsureCoreWebView2Async() 初始化浏览器内核。使用 WebMessageReceived 接收前端消息，把 FPS 同步回桌面 UI。这样可以让原生桌面应用拥有 WebGL 渲染能力，同时保留 WPF 的业务壳层。
2. 大规模粒子数据结构：BufferGeometry
粒子位置、颜色、尺寸、生命周期都以 Float32Array 组织。通过 geometry.setAttribute(...) 绑定到 GPU 可消费的缓冲属性。相比逐对象管理，结构化数组 + 批量绘制是海量粒子的基础。
3. 自定义 Shader：粒子视觉在 GPU 完成
顶点着色器负责点大小透视缩放、生命周期透明度系数计算。片段着色器利用 gl_PointCoord 裁剪圆形粒子并做柔和边缘。材质配置启用 AdditiveBlending，形成更亮的粒子叠加效果。
4. 仿真更新模型：每帧 CPU 循环
当前粒子运动（重力、阻力、边界反弹、重生）都在 JS for 循环中执行。这使逻辑直观易控，但也带来一个关键瓶颈：粒子数线性增长时，CPU 计算和属性回写成本同步上升。
核心代码逻辑
1. 粒子总量入口
private const int ParticleCount = 100000;
这是压测的直接控制阀，影响所有数组长度和每帧循环规模。
2. GPU 友好数据准备
positions / colors / sizes / lifetimes / maxLifetimes 都是 Float32Array。BufferAttribute 绑定后由 THREE.Points 进行一次性批量绘制。
3. 渲染材质与 Shader
THREE.ShaderMaterial({...}) 挂载 vertexShader 与 fragmentShader。开启 transparent + AdditiveBlending + depthWrite:false，确保粒子叠加效果。