水珠怎么做的
照业内成熟的做法(Codrops · Lucas Bebber 的 RainEffect、
Shadertoy · BigWings 的 Heartfelt):
下面的水珠行为是逐条照它们的源码移植的。
照 Codrops 原文和源码(raindrops.js、water.frag)移植,规律都照它:
- 直接用它的:水珠贴图(
drop-alpha.png、drop-color.png)、生成 255 档厚度的方法、画水珠的方法、着色器的取色方式,都是 Codrops 原样的(它的许可允许整合进自己的项目)。水珠截边后略下坠、上平下圆;里面是一张倒置、缩小、很糊的场景。
- 为什么会往下掉:新雨点落在旧水珠上就合并,越并越大;每一帧按「半径越大越可能」被猛拉一下(表面张力抓不住了),拉多少也随机,动量很快衰减——所以是一顿一顿地往下走,不是匀速滑。
- 扫下去:往下走的水珠碰到下面比它小的就吞掉(面积相加),吞完更快、并往被吞的那颗偏一点,于是一路把下面的水珠扫下去。
- 留痕:走过的路上按动量留下小水珠(被拉长一点),自己缩一点;细水雾被抹出一道;小水珠慢慢干。
- 跟风:往下走时按实况风在画面上的横向分量往下风带,水股斜着流;挂着不动的水珠不受影响。
- 起雾(四周一圈、中间透明):三个参考都有——Codrops 的背景本身是糊的、raindrop-fx 有一层约 10 秒起满的雾、Heartfelt 写明「玻璃起雾、水珠划出痕」。雾面糊、水珠清(里面是一个清晰的小倒像)、划过的地方一道清痕,人眼靠这个反差认出「玻璃上的水」。这里雨天镜头慢慢蒙雾,水珠停留和滑过的地方擦清、再慢慢雾回去;只起在四周一圈、往中间渐淡,中间留透明(最浓处小雨约四成、大雨约七成),门店柱子始终看得清,字和数字不受影响;雨停后 5 秒左右散掉。
- 雪花:落在镜头上的是六角对称的冰晶——星状枝晶、羊齿枝晶、六角片、扇形片,大雪时还有几片粘成的一团;每条臂长短略不齐,偶尔断一截。落上来先是清楚的晶体,然后边缘变软、细枝先化没、中间攒出一小摊冰水,最后缩成一颗水珠混进镜头上的水里;越冷挂得越久、化得越慢。
- 明暗:取自另一个复刻 raindrop-fx(MIT)的合成着色器——按水珠法线加一层漫反射,背光一侧暗、迎光一侧略亮。Codrops 的水珠只做折射,靠亮背景才看得出;大屏是深色夜景,需要这一层。
- 改了的参数:水珠半径从它的 20–50 改成 14–38(原版在大屏上挡视线,再小又没存在感);细碎小水珠照它的密度乘雨量;下流留下的小水珠一两秒就干;被水盖住的面积封顶(小雨约 2.5%、大雨约 7%),画面中间生成的少一半。
树叶、风向、雷暴、开关
- 树叶是弯的 3D 叶片:横向微卷、沿主脉微折,程序画的高清纹理(主脉、侧脉、细网脉、斑点、叶缘锯齿、叶柄),逆光时叶脉透亮。贴在镜头上时边缘随阵风起伏,风大了先从上风一侧掀起,再整片被带走。
- 风向按实况:风是「从哪边来」,世界里的雨、雪、落叶、雾都往下风走;镜头转到哪个角度,贴镜头的叶子就从画面里对应的上风一侧进来。实况标签里的小箭头是「按现在的视角,风往哪边吹」。
- 雷暴只闪 3D 世界(远处一道闪电、全城一亮),镜头和文字不闪。
- 顶部「天气」按钮一键开关,记在这台设备上;关掉后 2 秒内所有效果淡出。
实况 → 效果(规则)
| 实况 | 判定(open-meteo 字段) | 3D 世界 | 镜头 |
|---|
| 雨 | 天气码 51–67、80–82;强度 = 降水 mm/h ÷ 8 | 雨线(随风斜)、地面涟漪与湿反光 | 小水珠铺满、大水珠成股流下;强度大时股数多、流得快 |
| 雷阵雨 | 天气码 95–99 | 同大雨 + 远处闪电、全城一亮 | 不闪(只有水珠) |
| 大风 | 阵风 ≥ 25 km/h 开始,50 km/h 封顶;方向 = wind_direction_10m | 落叶、雨雪雾随风走 | 叶子从上风侧飞来贴住、晃、被揭走;水股往下风斜 |
| 雾 | 天气码 45 / 48,或能见度 visibility < 3 km | 低处一层薄雾随风飘,远处发白;近处门店始终看得清 | — |
| 霾 | 空气质量接口 pm2_5 ≥ 75(≥ 225 封顶) | 远处发黄发灰 | 整体轻微发灰(最多降 20% 对比度) |
| 雪 | 天气码 71–77、85–86;强度 = 降雪 cm/h ÷ 2.5 | 雪花飘落,地面与柱顶慢慢积白,停了慢慢化 | 雪花落上来化成小水珠;四周轻微结冰 |
| 寒潮 | 气温 ≤ 0℃,或 24 小时降温 ≥ 8℃ | 画面偏冷 | 四周结冰、冰下的画面发虚,越冷越往中间长,中间始终留出来 |
数据从哪来
按大屏城市中心的坐标取:天气用库存包已经在用的 open-meteo,只多问一组 current(天气码、降水、降雪、风速、阵风、风向、气温、能见度);霾用同一家的空气质量接口(pm2_5)。POS 接入的大屏快照带 weather 块,15 分钟一刷;取不到就当晴天,状态栏说一句。
还要你定的
- 夜里看昨天时,天气用此刻的实况(建议)还是昨天的?
- 效果的强度上限:演示里大雨时镜头上水股已经不少,在店里电视上要不要再收一档?