基于 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

相关推荐
雾恋3 小时前
最近一年的感悟
前端·javascript·程序员
华仔啊3 小时前
Vue3 的 ref 和 reactive 到底用哪个?90% 的开发者都选错了
javascript·vue.js
A黄俊辉A4 小时前
axios+ts封装
开发语言·前端·javascript
小李小李不讲道理4 小时前
「Ant Design 组件库探索」四:Input组件
前端·javascript·react.js
郑板桥305 小时前
tua-body-scroll-lock踩坑记录
前端·javascript
解道Jdon5 小时前
SpringBoot4与Spring7发布:云原生深度进化
javascript·reactjs
gnip6 小时前
pnpm 的 monorepo架构多包管理
前端·javascript
zolty6 小时前
基于hiprint的票据定位打印系统开发实践
javascript
百思可瑞教育8 小时前
使用UniApp实现一个AI对话页面
javascript·vue.js·人工智能·uni-app·xcode·北京百思可瑞教育·百思可瑞教育
伐尘8 小时前
【CE】图形化CE游戏教程通关手册
前端·chrome·游戏·逆向