性能指南

粒子模拟的实际性能考量。

最重要的方面

性能敏感的主要区域：

1. 计算通道 - compute.wgsl 中的 GPU 物理
2. 渲染通道 - render.wgsl 中的 GPU 绘制
3. 帧编排 - renderer.ts 中的 CPU 端
4. 质量选择 - quality.ts 中的自适应缩放

运行时设计选择

选择	为何重要
工作组大小 64	针对大多数 GPU 架构优化
共享着色器前言	防止常量漂移
持久轨迹纹理	无每帧分配
自适应粒子数量	优雅降级
均匀缓冲区复用	可预测的 CPU 开销

测量性能

开发 HUD

内置 HUD 显示：

• 当前 FPS
• 粒子数量
• 质量等级

浏览器开发者工具

1. 打开开发者工具（F12）
2. 转到性能标签
3. 录制几秒钟的交互
4. 分析长帧或 GPU 停顿

对比内容

声称性能改进时需对比：

• 相同浏览器
• 相同视口大小
• 相同粒子等级
• 相同交互模式

高风险更改

着色器修改

• 影响性能和正确性
• 保持 CPU 参考与 WGSL 一致
• 更改后重新运行物理测试

渲染器更改

• 避免每帧分配
• 注意轨迹纹理生命周期
• 除非画布调整大小否则复用资源

质量启发式

• 粒子缩放影响稳定性
• 优先使用可预测的上限而非复杂启发式

性能检查清单

合并性能敏感更改前：

1. 验证运行时行为与文档仍然一致
2. 检查质量等级是否意外变化
3. 检查是否有每帧资源创建
4. 运行 npm run verify
5. 如果是实质性更改，在多种设备上测试

粒子数量影响

粒子数	计算时间	渲染时间	总帧时间
2,500	~0.5ms	~0.3ms	~1-2ms
5,000	~1.5ms	~0.6ms	~3-4ms
10,000	~3ms	~1ms	~5-6ms

*中端 GPU 上的典型值