ESC
开源 2 分钟阅读

tidewater:用 Opus 5.5 打造的 WebGPU 海岛钓鱼游戏

开发者用 Opus 5.5 打造的开源浏览器海岛钓鱼游戏 tidewater:自研 WebGPU/WGSL 渲染引擎,无需任何框架,实现 FFT 海洋模拟、体积云、物理大气与拍岸浪等效果,MIT 协议开源。在 Apple M5 Pro 上以 2560×1267 分辨率达 60 帧,需支持 WebGPU 的 Chrome、Edge 或 Safari 浏览器。

来源:GitHub

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 中。