Interactive / 试玩
撕开
海面
一条触手正从水下顶上来。向下滚动，它会把海面撕开一个洞；把鼠标移到它附近，它会绕开你；按住不放，它发力。
向下滚动
01 / 海面
不是一张海的照片
整片海由噪声高度场实时算出来：透视把它压向地平线，法线决定月光落在哪里，菲涅尔让远处的水更亮、更薄。
0张图片素材
5层噪声叠加
1个着色器
透视越远采样越密，所以远处的浪看起来更细、更碎。
月光高光是算出来的，不是贴图。鼠标一动，光带跟着偏。
02 / 触手
一根曲线，要有重量
触手是 18 个脊柱点连成的曲线，越靠尖端越细。它每帧朝鼠标的反方向偏一点，所以看起来像在躲，而不是被粘在屏幕上。
牵引鼠标进入 380 像素范围，中段被推开，幅度随距离衰减。
摆动两个不同频率的正弦叠成八字段，避免机械来回。
发力按住鼠标：脊柱拉直再弹回，同时溅起水花。
03 / 撕口
撕多宽，你说了算
洞口大小直接绑在滚动进度上：从一条缝，到能看见下面的深水。洞口边缘会起白沫，因为撕裂处的水被顶起来，光在那里散射。
| 滚动位置 | 洞口 | 触手 |
|---|---|---|
| 0 — 10% | 一条细缝 | 尖端刚顶破水面 |
| 10% — 55% | 向两侧撕开 | 抬出水面，开始摆动 |
| 55% — 100% | 露出深水与光柱 | 整条竖起，随鼠标躲闪 |
04 / 结论
背景不该只是背景。—— 屿 · 技术展示
让它回应你，页面才开始有分量。