7. 性能监控集成 javascript // Stats.js性能监控器 stats = new Stats(); stats.update(); // 每帧更新 // 显示信息： // - FPS：帧率（越高越好） // - MS：每帧渲染时间（越低越好） // - MB：内存使用量 三、关键算法和数学原理 1. 粒子位置生成 javascript // 在立方体空间内随机分布 (Math.random() * 2 - 1) * radius // -1到1之间随机 * 半径 2. 颜色渐变算法 javascript // HSL色彩空间渐变 color.setHSL(i / particles, 1.0, 0.5) // i/particles: 0到1的色相值 → 彩虹渐变 3. 动态大小算法 javascript // 正弦波动公式 10 * (1 + Math.sin(0.1 * i + time)) // 分解： // Math.sin(0.1 * i + time): [-1, 1] // 1 + Math.sin(...): [0, 2] // 10 * (...): [0, 20] 最终大小范围 4. 透视大小计算（着色器中） glsl size * (300.0 / -mvPosition.z) // 原理：模拟近大远小的透视效果 // -mvPosition.z: 距离相机的深度 // 300.0: 控制透视效果的强度因子 四、技术架构优势 1. 性能优势 GPU加速：所有计算在GPU并行执行 最小CPU干预：数据一次上传，GPU持续处理 批量渲染：10万粒子作为单个Draw Call发送 2. 可扩展性 易于修改粒子数量、分布、颜色算法 着色器可定制各种视觉效果 支持多种纹理和混合模式 3. 现代Web标准 纯WebGL/WebGPU标准，无插件依赖 ES6模块化代码组织 响应式设计，适配各种设备 -->
Three.js WebGL - BufferGeometry(缓冲几何体) 自定义属性 - 粒子系统演示
Three.js
WebGL技术演示 - BufferGeometry(缓冲几何体) 自定义属性 - 10万粒子系统
粒子大小动态变化，使用自定义着色器渲染，支持纹理贴图