基于 navmesh 的路径搜索技术剖析 (游戏、三维方向必看!!!)

这篇文章,将会讲解基于 navmesh 的路径搜索技术,可能有的同学第一次听说 navmesh,但是路径搜索肯定略有耳闻,以下举几个简单常见的例子。

  1. 游戏中,你点击任务列表的任务,系统将会自动将你的角色导航至任务地点。
  2. 王者荣耀的小地图里,点一个标记,系统将会操作你的角色以最优的路线移动至标记点。

这些都绕不开路径搜索,常见的路径搜索算法有 dijkstraaStar ,其中dijkstra基于图,路径搜索结果局限于图的边上aStar基于网格,路径也规划在规则网格上

以上稍微拓展一下,现在回到这篇文章的主题。

navmesh(navigation mesh) 也称 导航网格,这里的网格以三角网格为最小单元,路径搜索算法讲基于这个网格,也就是说,路径将在这个网格上。

如下绿草地:其中每个三角形,都是最小的三角网格。其中红线为模拟dijkstra算法搜索得到的路径,蓝线为基于当前算法搜索得到的路径。

在大多数的自由的游戏场景下,我们需要得到的路径是蓝线路径,因为这更贴合实际。

  1. 根据网格数据,构建连通图

    以三角形为节点,构建整张图的数据结构

    javascript 复制代码
    // 两个节点的公共边
    interface Portal {
        left:Vector3[],
        right:Vector3[]
    }
    
    // 节点
    interface Node {
        neighbors:Node[],
        vertices:Vector3[],
        portals:Portal[],
        center:Vector3
    }
  2. 使用A*算法在连通图上搜索

    步骤一得到的图为三角形节点的连通图,基于 A* 算法搜索得到的路径为节点列表 Node[]

    javascript 复制代码
    // 使用A*在三角节点的连通图上搜索,得到的路径为红色路径
    const nodePath:Node[] = Astar.search(graph,start,end)
    
    // 根据节点路径计算得到路径通道,如下图绿色线条,为 NodeA=>NodeB 的必经通道 P 
    const portals:Portal[] = findPortals(nodePath)


3. 使用漏斗算法生成最终路径

这篇博客对这个算法讲的比较详细 几何寻路:漏斗算法(Funnel Algorithm)-CSDN博客

需要注意的是,在三维场景下,下图为截面图,黄色线为二维漏斗算法生成的路径,不考虑高度差。 与实际路径差距很大,绿色为我们需要的实际路径。黄色路线和绿色路线在俯视图均为直线。

在漏斗算法每一次插入节点的时机,需要对当前路径进行投影,计算是否存在高度差,如果存在,则需要将有高度差的节点依次加入到路径。

注意事项:

  1. 基于navmesh的路径搜索算法对三角形有要求,不规则的三角形搜索的路径不一定是最近的,因为A*算法执行依赖三角节点图。
  2. 高度,概念需要注意,三维世界中,需要确定代表高度的坐标轴,Y or Z

代码地址:

gitee:yangjun/three-pathfinding-3d

github:MrYang614/three-pathfinding-3d

npm: three-pathfinding-3d - npm

相关推荐
烬头88211 小时前
React Native鸿蒙跨平台实现二维码联系人APP(QRCodeContactApp)
javascript·react native·react.js·ecmascript·harmonyos
pas1361 小时前
40-mini-vue 实现三种联合类型
前端·javascript·vue.js
2601_949833392 小时前
flutter_for_openharmony口腔护理app实战+预约管理实现
android·javascript·flutter
军军君013 小时前
Three.js基础功能学习十三:太阳系实例上
前端·javascript·vue.js·学习·3d·前端框架·three
xiaoqi9223 小时前
React Native鸿蒙跨平台如何实现分类页面组件通过searchQuery状态变量管理搜索输入,实现了分类的实时过滤功能
javascript·react native·react.js·ecmascript·harmonyos
qq_177767374 小时前
React Native鸿蒙跨平台实现应用介绍页,实现了应用信息卡片展示、特色功能网格布局、权限/联系信息陈列、评分展示、模态框详情交互等通用场景
javascript·react native·react.js·ecmascript·交互·harmonyos
2603_949462104 小时前
Flutter for OpenHarmony社团管理App实战:预算管理实现
android·javascript·flutter
wuhen_n4 小时前
JavaScript内存管理与执行上下文
前端·javascript
Hi_kenyon4 小时前
理解vue中的ref
前端·javascript·vue.js
jin1233225 小时前
基于React Native鸿蒙跨平台地址管理是许多电商、外卖、物流等应用的重要功能模块,实现了地址的添加、编辑、删除和设置默认等功能
javascript·react native·react.js·ecmascript·harmonyos