GoForum🌐 V2EX

用 Rust + WASM + WebGL2 做了个实时 3D 航班追踪器,浏览器里跑 1 万架飞机 60fps

coolwulf · 2026-04-06 07:44 · 0 次点赞 · 7 条回复

做了个副项目 Flight-Viz ( https://flight-viz.com ),在浏览器里用 3D 地球实时显示全球航班。整个项目用 Rust 编译成 WebAssembly ,渲染层是原生 WebGL2 着色器,没有用任何 JS 框架。

前两天发到了 Reddit r/webdev ( https://www.reddit.com/r/webdev/comments/1sbnhvm/i_built_a_realtime_flight_tracker_with_rust/)冲到了版块第一,评论区反响不错。Hacker News 上也进了当天前十( https://news.ycombinator.com/item?id=47603966 )。来 V2EX 也分享一下。

技术细节:

SDF 飞机图标:5 种不同的飞机形状(客机、货机、螺旋桨、直升机、军机)全部在片段着色器里用有符号距离场画的,完全不用贴图。单次 glDrawArraysInstanced 渲染 1 万+ 飞机。

飞机分类:OpenSky 不返回机型信息,所以根据呼号来判断——三字母 ICAO 代码+数字是客机,FDX/UPS 是货机,N 开头是私人螺旋桨飞机,RCH/EVAC 是军机。

平滑移动:数据每 2 分钟更新一次,中间用线性插值让飞机持续移动。插值结束后用航向+速度做外推,飞机不会卡住。

FlightRadar24 补充数据:OpenSky 大概覆盖 6000-10000 架飞机。搜索不在 OpenSky 里的航班时会按需从 FR24 拉取实时坐标,通过 Cloudflare Workers 代理。

机场信息牌:点击机场能看到类似真实机场 FIDS 的出发/到达信息牌,深蓝色背景,有登机口、延误信息。还能搜索任意航班号查看时刻表。

技术栈:Rust/WASM (Trunk) + egui + glow/WebGL2 + 自写 GLSL 着色器 + OpenSky + FR24 + Cloudflare Workers + nginx/$5 VPS 。WASM 二进制约 4MB gzip 。

在线体验: https://flight-viz.com 技术博客: https://dev.to/hao_jiang_c21b032bd6fbcfa/how-i-render-10000-live-aircraft-at-60fps-in-the-browser-with-rust-wasm-and-raw-webgl2-4360

欢迎试用,有问题随时问!

7 条回复
chatbase · 2026-04-06 08:04
#1

太酷了一直在想怎么实现一个机场 arriving 的牌子,竟然实现了

coolwulf · 2026-04-06 08:14
#2
coolwulf · 2026-04-06 08:14
#3
coolwulf · 2026-04-06 08:14
#4
coolwulf · 2026-04-06 08:14
#5
coolwulf · 2026-04-06 08:14
#6
superlxt · 2026-04-06 10:04
#7

wasm 这么厉害

添加回复
你还需要 登录 后发表回复

登录后可发帖和回复

登录 注册
主题信息
作者: coolwulf
发布: 2026-04-06
点赞: 0
回复: 0