做了一个网页天气可视化 2
上一篇写完之后，本想先停一停的。结果项目一开着就关不掉了。白天调太阳光斑，晚上改雷声，挂在副屏上跑着跑着，又开始觉得"这里还差一点，那里也还能再补"。于是它从一个"网页天气可视化 demo"，慢慢长成了一个我真的会开着用的东西。
如果说第一篇写的是"怎么把雨、雪、雾这些视觉效果做出来"，那第二篇更像是后续更新记录：我把这个项目继续往"长期运行、可交互、可沉浸"的方向推了一大截。
这次主要更新了这些：
• 声音系统全面重做——雷声、雨声、风声都有了，而且风向会影响左右声道
• 新增两种极端天气——冰雹和沙尘暴，从粒子到音效全套做完
• 世界地图选点——点哪看哪的天气，带 24 小时和 7 天预报时间线
• 沉浸模式、控制面板重做、深色主题，以及一轮继续往下抠的性能优化
开源地址：https://github.com/greywen/web-weather
在线体验：https://weather.anhejin.cn
从"有画面"到"有气氛"——声音系统是怎么做的
第一版项目其实是静音的。
视觉上已经有雨、有雾、有闪电，看着挺像回事，但一旦全屏挂到副屏上，就总觉得少了点什么。不是少一个特效，而是少了"环境"。真实天气打动人的地方，从来不只是你看到了什么，还包括你听到了什么。
雷声合成：七层叠加
最开始我也想过偷懒，直接找几段雨声、雷声 MP3 循环播放就完了。但这么做有两个问题：重复感太强，控制粒度不够。尤其雷声这种东西，一旦你听到第三次完全一样的波形，沉浸感会瞬间消失。
所以最后还是走了更麻烦的路：用 Web Audio API 合成。雷声被拆成了七个阶段，每个阶段都是独立的音频节点链路：
// ═══ 1. THE CRACK — 闪电回击瞬间的尖锐爆点 + 短弧尾 ═══playBuf(snapBuf, now, v *1.2, {hpFreq:1800,bpFreq:4800,distAmount:0.45,pan: mainPan });playBuf(arcTailBuf, now +0.003, v *0.42, {hpFreq:900,bpFreq:2600,pan: mainPan });// ═══ 2. SUB-BASS BOOM — 正弦波下扫，胸口被震一下的感觉 ═══playBuf(bassBuf, now +0.005, v *1.2, {lpFreq:120});// ═══ 3-4. RE-STRIKE — 分支闪电的二次、三次回击 ═══playBuf(rs1Buf, now +0.045+ random, v *0.68, {pan: mainPan + offset });playBuf(rs2Buf, rs1Time +0.03+ random, v *0.4, {pan: -mainPan + offset });// ═══ 5. ROLLING RUMBLE — 远处滚动的低频隆隆声 ═══playBuf(rumbleBuf, now +0.08, v *0.55, {lpFreq:250});// ═══ 6-7. 延迟重击 + 远方余震 ═══playBuf(bass2Buf, rs1Time +0.01, v *0.7, {lpFreq:90});playBuf(distRumbleBuf, now +0.5+ random, v *0.25, {lpFreq:150,pan: random });
这七层不是随便叠的。
你做了个网页天气可视化，能改成问句吗？
摘要：做了一个网页天气可视化 2 上一篇写完之后，本想先停一停的。结果项目一开着就关不掉了。白天调太阳光斑，晚上改雷声，挂在副屏上跑着跑着，又开始觉得"这里还差一点，那里也还能再补"。于是它从一