粒子渲染升级：从方块噪点到柔光 Bokeh

第一版粒子被吐槽”像噪点”——因为 Three.js 默认的 Points 是方块。这轮升级记录：

核心：自定义 ShaderMaterial 粒子

• 用 Canvas 画一张径向渐变圆形贴图（glow.ts），粒子着色器里 texture2D(uMap, gl_PointCoord) 采样，方块变柔光圆斑
• 逐粒子属性：aSize（大小，支持多段分布混入大 bokeh）、aPhase（随机相位闪烁）、aColor
• gl_PointSize = aSize * pixelRatio * (150 / -mv.z) 实现近大远小

后期管线

EffectComposer → RenderPass → UnrealBloomPass(0.9/0.65/0.12) → OutputPass， 荧光感主要靠 Bloom；暗角和胶片颗粒用 CSS 叠层（radial-gradient + SVG feTurbulence），零 GPU 成本。

场景元素（对照 activetheory.net）

• 锥形螺旋飘带：参数曲线 spread = 0.35 + t/2π × 1.5，越往下越宽，底部交叉成 X
• 丝线簇：每股飘带 = 1 根发光管芯 + 7 根抖动细线（Line）
• 红色水母：半球伞盖 + 线框 + 垂曲线触须，程序化生成
• 流星拖尾：Canvas 渐变贴图 Plane，池化循环，sin(p·π) 淡入淡出

工程习惯

• 改动前 git 打 tag 备份旧版（v1-basic 分支可随时回退）
• 新模块一律自包含 + dispose()，3D 层不碰业务 DOM

待实验

• 滚动驱动相机穿越（进阶版核心）
• 玻璃质感（transmission 材质需要 env map）
• 移动端自动降档 bloom 分辨率