04:30 · 雨夜铁馆
Published:
凌晨 4:30，雨还在下，铁馆里刚有人练完离开。整个场景在浏览器里实时渲染：没有一张贴图来自下载，没有一段声音来自音频文件。
短片
场景里有什么
- 安藤忠雄式的清水混凝土建筑：模板缝、螺栓孔、通长横向长窗、悬浮薄屋盖。
- 三层景深雨幕 —— 近、中、远三层不同宽度与速度，配合阵风让雨丝倾斜；落地有溅射冠与抛物线水珠。
- 柏油路面 + 十处积水，用 TSL 的 reflector() 做真实平面反射。
- 四个剪影人物：深蹲、卧推、站立休息、引体向上。
- 软硬材质分层：泡棉地胶、皮革软垫、会飘的布料、金属、橡胶、玻璃。
怎么交互
- 拖动环绕沙盘，WASD 漫游，Q/E 升降，Shift 加速。
- 场景里有一块 3D 控制台：切换灯光预设、拖动雨量、开关路灯/风扇/水汽。
- 点击沙袋会摆动并发声，点击器械有金属撞击声。
- 所有声音都是 Web Audio 实时合成的雨、风、电流嗡鸣、撞击与远雷。
技术栈
- three.js r186 + WebGPURenderer + TSL 节点图。
- 体积光锥用顶点色渐变 + 加色混合实现，几乎零额外开销。
- 全部几何与贴图程序化生成；仅相机路径与构图经过多轮迭代校准。