跳到正文
研发中2026 年 10 月 —独立开发

三维驾驶演示

把「看车」变成「在车里」:沿真实线路驾驶,周围跑着同一时刻的其它公交,三维车模取代箭头符号。仍在研发中。

三维驾驶演示 主图
技术栈
CesiumWebGLVue 3TypeScriptglTFVitestPlaywright
标签
#Cesium#三维地图#实时公交

亮点

  • 车辆沿真实道路行驶:位置由线路里程驱动,路面、标线、站点区全部贴合地形
  • 周围实时车流:与地图页共用同一时刻的车辆位置,不是另做一套假数据
  • 三维车模取代方向箭头:同一线路固定同款车型,12 款车模按统一规格批量入库
  • 曲面细节(路面颜色、标线宽度、车模朝向)都有回归测试盯着,避免视觉问题反复回归

这是什么

前面两个作品都是「俯视观察一座城市」。这个方向换了个视角:坐进车里。

玩家沿一条真实的公交线路行驶,路面、标线、站点停靠区都按实际线路几何生成并贴合地形;周围跑着同一时刻城市里的其它公交车 —— 不是另做一套假数据。车辆用三维模型呈现,取代了俯视图里那种箭头符号。

三条技术主线

曲线约束插值。 服务端推送的车辆位置是稀疏的离散点。要让它们沿真实道路平滑行驶,必须把点投影到线路折线上、在弧长维度插值,而不是在两点之间拉直线。航向也不能直接用相邻帧差分 —— 那样会抖,需要低通滤波。

贴地渲染。 道路面、标线、站点停靠区都要贴住地形。Cesium 的地面图元有几个不太直观的限制(比如某些图元只接受一种外观、线宽的单位是屏幕像素而不是米),把这些绕明白花的时间比预期多。

车模流水线。 12 款真实车型的 glTF 模型,统一按一条命令入库:自动检查朝向、缩放、包围盒,把不同来源的模型规整成同一规格。规格不统一的话,同一段路上会出现一辆比公交车大两倍的公交车。

一个值得记的教训:闪烁不是几何问题

路面曾经持续闪烁。第一反应是几何精度问题,于是改几何、改材质、改贴合方式 —— 都没根治。

最后定位到真正的原因:路面每 2 秒被整体重建一次。

为了让路面只覆盖车辆前方一段距离,实现上采用了滑动窗口:车辆每前进 50 米就重建「后方 250 米到前方 1200 米」的整条路面。以 25m/s 的速度算,就是每两秒重建一次。重建时新图元先建、旧图元后删,两者至少有 一帧同时存在并重叠,深度裁切开始争夺 —— 画面就开始闪。

解法不是把重建做快,而是不再重建:把路面按弧长切成分段,段边界只与线路长度有关、与玩家位置无关;移动时只切换分段的可见性,不做任何几何操作。

这个教训后来写进了《曲线约束插值》之外的这篇文章里 —— 它是「先问是不是重建,再问几何对不对」的典型案例。

当前状态

研发中,尚未完成。 已完成的部分:线路行驶、第一/第三人称相机、贴地道路与标线、站点停靠区、实时车流与三维车模。

还没做的:驾驶手感与车辆动力学仍在调整;复杂路口的路面拼接还不够干净;性能在低端设备上没有达标。所以这里只放截图,不放可交互的演示 —— 现在拿出去会给人错误的预期。

截图点击可放大 · 共 9 张

本项目的技术文章

本文含 4 个小节。