Tidewater
一款面向浏览器的海岛钓鱼游戏。你可以在码头、海滩或自己的船上抛竿,与鱼搏斗,把渔获卖给鱼摊的 Joe,再到 Marta 的船舶用品店购买更好的装备。周围是一片实时渲染的热带海岛与海洋:可以潜到珊瑚礁游泳、驾船驶向深水,还能欣赏座头鲸跃出水面的瞬间。它直接运行在 WebGPU 和 WGSL 上,使用自研的小型渲染引擎,不依赖任何框架。
试玩地址: https://dgreenheck.github.io/tidewater/


配置要求
- 支持 WebGPU 的浏览器:较新版本的 Chrome、Edge 或 Safari。
- 性能足够的 GPU。在 Apple M5 Pro 上目标为 2560×1267 分辨率下 60 帧,较慢的机器上动态分辨率会自动降低渲染分辨率。
- 首次加载需编译数百个着色器,可能需要一分钟或更久。由于浏览器会缓存,之后的访问会更快。
功能特性
钓鱼
- 纺车轮与鱼竿,可抛投、收线并在受力时弯曲,线杯、转子与摇臂均有动画。
- 鱼讯取决于水域(浅滩、码头、珊瑚礁、海湾、深水)、深度和一天中的时间,涵盖 18 种加勒比海鱼类。
- 鱼线张力搏斗机制:将张力保持在绿色区间,鱼冲刺时适当放松。
- 全屏渔获卡片显示鱼的长度和重量,还有带记录功能的钓鱼日志和保温箱。
- Joe 的鱼摊收购你的渔获;Marta 的船舶用品店出售鱼线、渔轮、鱼竿、更大的鱼舱、燃油、翻新发动机、探鱼器和用于夜钓的甲板泛光灯。
- 船只漂流时可以在甲板和驾驶室走动;船会消耗燃油。
- 首次游玩引导、情境提示和小地图。进度保存在浏览器中。
海洋
- 四级级联 FFT 海洋(Tessendorf 频谱),带泡沫、白浪、风纹和涌浪。
- 具备深度感知的破碎浪,带卷曲浪肩、白水、飞沫和泡沫花边。
- 浅水模拟,实现冲上岸又退去的拍岸浪。
- 船尾航迹、船艏飞沫,以及鲸鱼的尾迹。
- 海床和水中的焦散效果,带光柱。
- 在水线处的半水下/半水上分割视图,浮出水面后镜头上会有水滴。
- 海床透过水面的折射效果,包括码头和船只后方的区域。
天空
- 基于物理的大气模拟(Hillaire 2020),带太阳、月亮和星星。
- 体积积云和丝状卷云,云影投射在地面上。
- 空气透视和海上薄雾。
- 上帝光(体积光),以及带遮挡的镜头光晕。
世界
- 一座海岛,有海滩、丘陵、海岬和礁石。
- 一个渔村、一座码头,以及基于 Poly Haven 扫描数据搭建的摊位。
- 逼真的摊主角色(Microsoft Rocketbox),带蒙皮动画。
- 有鱼群游弋的珊瑚礁。
- 棕榈、香蕉树、龟背竹、海芋、蝎尾蕉、天堂鸟、阔叶树、灌木和沙丘草,带公告板替代物和抖动 LOD 过渡。
- 海滩上的漂浮物。
- 鸟类、螃蟹和海洋雪。
- 一头座头鲸,带随行的鱼群,会喷水、甩尾下潜和跃出水面。
光照与后期
- 级联阴影,带接触硬化半影,以及屏幕空间接触阴影。
- 地面反弹光。
- GTAO 环境光遮蔽。
- 时间性超采样和锐化。
- 泛光、自动曝光和运动模糊。
- 来自灯笼、窗户和船只的夜间照明,还有一支水下也能使用的手电筒。
音频
- 基于真实 CC0 实地录音的空间音频:与每一次碎浪同步的涛声、风声、鸟鸣、船用发动机、不同地表的脚步声、水下环境音、鲸歌,以及鱼竿渔轮的声音(抛投、线杯、收线、泄力、断线、水花声)。
操作方式
| 按键 | 操作 |
|---|---|
| W A S D | 移动 |
| 鼠标 | 视角(点击捕获鼠标,Esc 释放) |
| Shift | 冲刺 / 船只加速 |
| 空格 | 跳跃 / 向上游 |
| C | 蹲下 / 下潜 |
| E | 交互:登船、掌舵或离舵、上岸、与鱼贩或船舶用品店交易 |
| V | 掌舵时的船视角(第一/第三人称) |
| R | 取出/收起鱼竿 |
| 鼠标左键 | 按住蓄力,松开抛投 · 鱼咬钩时刺鱼 · 按住收线 |
| 鼠标右键 | 收回空线 |
| I 或 Tab | 保温箱/鱼舱与钓鱼日志 |
| F | 自由视角 |
| L | 手电筒 |
| T | 暂停时间 |
| M | 静音 |
| H | 设置面板 |
| P | 照片模式 |
| F1 或 ? | 全部操作说明 |
钓鱼
可以在船漂流时在甲板上走动,也可以在码头和海滩垂钓。抛竿,等浮漂下沉,在被拉入水下时刺鱼,然后开始遛鱼:让鱼线张力保持在绿色区间,鱼冲刺时适当放松。不同的水域栖息着不同的鱼(浅滩、码头、珊瑚礁、海湾和近海深水),有些鱼在黎明、黄昏或夜间咬钩最活跃。把渔获卖给码头边海滩上鱼摊的 Joe,再到船屋旁 Marta 的船舶用品店消费:更结实的鱼线、更快的渔轮、更长的鱼竿、更大的鱼舱、更大的油箱、翻新发动机、探鱼器以及用于夜钓的甲板泛光灯。掌舵时船会消耗柴油;可在船舶用品店加油。进度保存在浏览器中。
设置面板(H)可以调节海况、一天中的时间、太阳方位角、云、雾霭、后期处理等。
URL 参数
将这些参数添加到 URL 中,例如 ?fly&noAudio:
| 参数 | 效果 |
|---|---|
fly | 以自由视角开始 |
noAudio | 禁用声音 |
noClouds | 跳过体积云 |
noHaze | 跳过雾霭和太阳光柱 |
noCaustics | 跳过焦散 |
noVeg | 跳过植被 |
noSim | 跳过拍岸浪(浅水)模拟 |
本地运行
npm install
npm run dev # http://127.0.0.1:5189
npm run build # static build in dist/
每次推送到 main 分支都会通过 .github/workflows/deploy.yml 部署到 GitHub Pages。
项目结构
| 文件夹 | 内容 |
|---|---|
src/game/ | 钓鱼游戏:鱼竿、鱼讯、搏鱼、渔获卡片、保温箱与日志、摊主与摊位、引导、小地图、HUD |
src/engine/ | 渲染引擎:数学库、场景图与几何体、GPU 资源、WGSL 着色器组合、材质、光照与阴影 |
src/ocean/ | FFT 海洋、水面与材质、近岸浪、碎浪、拍岸浪、航迹、焦散、水下光照 |
src/sky/ | 大气、云、天空与环境 |
src/world/ | 地形、村庄、码头、珊瑚礁、鱼群、植被、礁石、漂浮物、野生动物、鲸鱼、船只 |
src/post/ | 后期处理链:AO、水下合成、雾霭、TAAU、运动模糊、泛光、镜头光晕、水滴 |
src/materials/ | 共享光照:阴影过滤、反弹光、接触阴影、局部光、LOD 过渡 |
src/player/ | 行走、游泳、船只与自由视角 |
src/audio/ | 基于采样的音景 |
src/ui/ | 设置面板、加载画面和 HUD |
tools/ | 用于获取并转换角色、摊位道具和钓鱼音效的脚本 |
test/ | 无头引擎冒烟测试和游戏逻辑测试(npm test),以及 HUD / 加载器开发页面 |
致谢与许可
代码以 MIT 许可证发布;参见 LICENSE。第三方资源(来自 Freesound 的 CC0 音频、来自 Poly Haven 的 CC0 扫描、来自 Microsoft Rocketbox 的 MIT 角色、OFL / Apache 字体)及技术参考列在 CREDITS.md 中。