V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
coolwulf
V2EX  ›  分享创造

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

  •  
  •   coolwulf · 1 天前 · 1398 次点击
    做了个副项目 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

    欢迎试用,有问题随时问!
    第 2 条附言  ·  1 天前
    这个项目实际上是我从 2018 年开始做的 Neuralrad 医学影像前段渲染的技术下放到民用应用的一个技术展示。
    21 条回复    2026-04-07 22:57:34 +08:00
    chatbase
        1
    chatbase  
       1 天前
    太酷了一直在想怎么实现一个机场 arriving 的牌子,竟然实现了
    coolwulf
        2
    coolwulf  
    OP
       1 天前
    coolwulf
        3
    coolwulf  
    OP
       1 天前
    coolwulf
        4
    coolwulf  
    OP
       1 天前
    coolwulf
        5
    coolwulf  
    OP
       1 天前
    coolwulf
        6
    coolwulf  
    OP
       1 天前
    superlxt
        7
    superlxt  
       1 天前 via Android
    wasm 这么厉害
    chihiro2014
        8
    chihiro2014  
       1 天前
    感觉可以加个 loading 条,wasm 那个文件下的超慢
    coolwulf
        9
    coolwulf  
    OP
       1 天前
    @chihiro2014 我这里基本上是顺时,可能是国内连这边云服务器的问题
    yazoox
        10
    yazoox  
       1 天前 via Android
    很厉害的样子。去看看!
    va3rrw
        11
    va3rrw  
       1 天前
    感谢分享,可以学习到很多东西。
    TerryBlues
        12
    TerryBlues  
       1 天前 via Android
    好酷!
    coolwulf
        13
    coolwulf  
    OP
       1 天前
    这个项目实际上是我从 2018 年开始做的 Neuralrad 医学影像前段渲染的技术下放到民用应用的一个技术展示。
    beimenjun
        14
    beimenjun  
    PRO
       1 天前
    但是感觉好像大陆只有北京附近有数据?数据源问题?
    coolwulf
        15
    coolwulf  
    OP
       1 天前
    @beimenjun 数据源主要来自 OpenSky, 你如果知道航班号,可以直接在左边的搜索栏查询,即时一开始的地图上没有也会找到并在地图上显示
    xing7673
        16
    xing7673  
       1 天前
    性能很强,就是用户交互有点奇怪,地图级别低(国家级、球级)时候鼠标对地图的步进大,级别高的时候(城市级就不一样了)鼠标对地球步进小(就是难拖拽,不知道有没有专业术语),用的时候会比较在意这个拖拽的速度。
    karocXing
        17
    karocXing  
       1 天前
    正好有类似在网页实现一些复杂动画的需求,这个帮忙了,感谢。
    shui14
        18
    shui14  
       1 天前
    wasm 还可以再 br 压一次,现在很慢
    没有做视锥剔除、lod 吗
    SDF 在这里感觉意义不是很大,可以把它们封成二进制,直接往显存复制顶点
    既然已经上 rust 路线,egui 它哥 rerun 的方向就挺好,直接换 webgpu 计算管线
    coolwulf
        19
    coolwulf  
    OP
       1 天前
    @shui14 这个技术栈是我在 2018 年开始写的,那个时候 rerun 或者 webgpu 根本还不成熟
    pagxir
        20
    pagxir  
       7 小时 8 分钟前 via Android
    @coolwulf 是不是可以试试让 AI 改改
    coolwulf
        21
    coolwulf  
    OP
       6 小时 34 分钟前
    @pagxir 这个 Tech Stack 是我们 Neuralrad 现在 FDA 510k Pending 程序的 stack, 改动会太大
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   927 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 21:31 · PVG 05:31 · LAX 14:31 · JFK 17:31
    ♥ Do have faith in what you're doing.