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

相关推荐
开发者小天13 小时前
调整为 dart-sass 支持的语法,将深度选择器/deep/调整为::v-deep
开发语言·前端·javascript·vue.js·uni-app·sass·1024程序员节
STARBLOCKSHADOW15 小时前
【游戏设计】游戏概念设计图、游戏原画以及游戏插画的区别
游戏·游戏设计·游戏原画·游戏插画·游戏概念设计
学习笔记10117 小时前
第十五章认识Ajax(六)
前端·javascript·ajax
上海云盾第一敬业销售17 小时前
游戏盾和高防IP的差异与选择
网络·tcp/ip·游戏
芝麻粒儿18 小时前
天龙八部TLBB系列 - 客户端技术整体性分析
游戏开发·天龙八部·网单·引擎脚本
theOtherSky19 小时前
element+vue3 table上下左右键切换input和select
javascript·vue.js·elementui·1024程序员节
会联营的陆逊20 小时前
JavaScript 如何优雅的实现一个时间处理插件
javascript
over69720 小时前
浏览器里的AI魔法:用JavaScript玩转自然语言处理
前端·javascript
Amy_cx20 小时前
搭建React Native开发环境
javascript·react native·react.js
代码AI弗森20 小时前
Python × NumPy」 vs 「JavaScript × TensorFlow.js」生态全景图
javascript·python·numpy