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

[coolwulf]

做了个副项目 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

欢迎试用，有问题随时问！

Reddit post 地址: https://www.reddit.com/r/webdev/comments/1sbnhvm/i_built_a_realtime_flight_tracker_with_rust/

这个项目实际上是我从 2018 年开始做的 Neuralrad 医学影像前段渲染的技术下放到民用应用的一个技术展示。

[chatbase]

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

[coolwulf]

[coolwulf]

[coolwulf]

[coolwulf]

[coolwulf]

[superlxt]

wasm 这么厉害

[chihiro2014]

感觉可以加个 loading 条，wasm 那个文件下的超慢

[coolwulf]

@chihiro2014 我这里基本上是顺时，可能是国内连这边云服务器的问题

[yazoox]

很厉害的样子。去看看！

[va3rrw]

感谢分享，可以学习到很多东西。

[TerryBlues]

好酷！

[coolwulf]

这个项目实际上是我从 2018 年开始做的 Neuralrad 医学影像前段渲染的技术下放到民用应用的一个技术展示。

[beimenjun]

但是感觉好像大陆只有北京附近有数据？数据源问题？

[coolwulf]

@beimenjun 数据源主要来自 OpenSky, 你如果知道航班号，可以直接在左边的搜索栏查询，即时一开始的地图上没有也会找到并在地图上显示

[xing7673]

性能很强，就是用户交互有点奇怪，地图级别低（国家级、球级）时候鼠标对地图的步进大，级别高的时候（城市级就不一样了）鼠标对地球步进小（就是难拖拽，不知道有没有专业术语），用的时候会比较在意这个拖拽的速度。

[karocXing]

正好有类似在网页实现一些复杂动画的需求，这个帮忙了，感谢。

[shui14]

wasm 还可以再 br 压一次，现在很慢
没有做视锥剔除、lod 吗
SDF 在这里感觉意义不是很大，可以把它们封成二进制，直接往显存复制顶点
既然已经上 rust 路线，egui 它哥 rerun 的方向就挺好，直接换 webgpu 计算管线

[coolwulf]

@shui14 这个技术栈是我在 2018 年开始写的，那个时候 rerun 或者 webgpu 根本还不成熟

[pagxir]

@coolwulf 是不是可以试试让 AI 改改

[coolwulf]

@pagxir 这个 Tech Stack 是我们 Neuralrad 现在 FDA 510k Pending 程序的 stack, 改动会太大

[lancevps]

很强

[jl779]

国内航班几乎不显示，是不是数据不全？