gl-opendrive插件(车俩3D仿真模拟自动驾驶)

这篇具有很好参考价值的文章主要介绍了gl-opendrive插件(车俩3D仿真模拟自动驾驶)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

简介

本插件基于免费opendrive开源插件、Threejs和Webgl三维技术、vue前端框架,blender开源建模工具等进行二次开发。该插件由本人独立开发以及负责,目前处于demo阶段,功能还需待完善,由于开发仓促代码还需优化。

两个版本:
1.vue版本pc端可视化展示
2.非vue版本支持内嵌到安卓,QT

因此,使用和阅读者需要具备 :

  • opendrive源码基础,xodr文件格式理解
  • threejs三维渲染引擎
  • webgl三维协议以及相关着色器知识
  • 会使用blender,具备一定的建模基础
  • javaScript技术
  • vue框架
  • echarts数据可视化图表库
  • 熟悉各种坐标系,如 世界坐标系,st坐标系,uv坐标系,xyz惯性坐标系,物体坐标系,
  • 数学知识基础(极坐标,微分,向量)等
  • 离屏渲染思想、webgl着色器(vertexShader、fragmentShader)
  • glsl语法

OpenDriver源码版

该版本只展示高精地图,无任何功能

opendriver-源代码

https://www.alipan.com/s/AaB1nULGC6a

点击链接保存,或者复制本段内容,打开「阿里云盘」APP ,无需下载极速在线查看,视频原画倍速播放。

步骤:

1.使用idea或者eclipse打开java项目jsView并启动资源服务端gl-opendrive插件(车俩3D仿真模拟自动驾驶)
2.使用Hbuilder或者vscode打开目录opendrive

gl-opendrive插件(车俩3D仿真模拟自动驾驶)
3.运行html

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

4.预览效果

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

核心功能

  • xodr文件解析
  • 地图渲染
  • 车辆三视图(算法优化)
  • 道路追踪
  • 全局路径规划展示
  • 自定义打点
  • 车辆运行
  • 车轮旋转
  • 鼠标定位(三维)
  • GPU颜色拾取
  • 支持远程或者本地数据文件加载
  • 其他

xodr文件解析

该功能由opendrive插件实现,具体的文件格式可查阅opendrive官方

或者推荐网址

自动驾驶场景仿真标准(一)- OpenDRIVE - 知乎

《OpenDRIVE1.6规格文档》1_opendrive官方文档-CSDN博客

《OpenDRIVE1.6规格文档》3_opendrive 1.6_YMWM_的博客-CSDN博客

道路追踪

利用离屏渲染技术以及定位功能实现

gpu拾取颜色获取车道ID

 //跟踪屏幕中间位置(近似跟踪车的位置)
        camera.setViewOffset(
          renderer.domElement.width, //画布的宽度
          renderer.domElement.height, //画布的高度
          renderer.domElement.width/2 | 0, //画布坐标系中,相机的x坐标位置
          renderer.domElement.height/2 | 0, //画布坐标系中,相机的y坐标位置
          1, //副相机的宽度
          1 //副相机的高度
        );
        //离屏渲染
        renderer.setRenderTarget(lane_picking_texture);
        renderer.render(lane_picking_scene, camera);

        renderer.setRenderTarget(roadmark_picking_texture);
        renderer.render(roadmark_picking_scene, camera);

        renderer.setRenderTarget(xyz_texture);
        renderer.render(xyz_scene, camera);

        renderer.setRenderTarget(st_texture);
        renderer.render(st_scene, camera);

        const lane_id_pixel_buffer = new Float32Array(4);
        //拾取颜色
        //console.log(mouse.x, window.innerHeight - mouse.y)
        renderer.readRenderTargetPixels(
          lane_picking_texture,
          0, //相机截图左上角为坐标原点,相对于截图左上角而言的渲染起始点x坐标
          0, //相机截图左上角为坐标原点,相对于截图左上角而言的渲染起始点y坐标
          1, //渲染宽度范围
          1, //渲染高度范围
          lane_id_pixel_buffer
        );

获取车道进行颜色渲染


        if (isValid(lane_id_pixel_buffer)) {
          //根据颜色值解码成车道ID
          const decoded_lane_id = decodeUInt32(lane_id_pixel_buffer);
          //自定义数据中获取所有车段中的所有车道数据
          const odr_lanes_mesh =
            road_network_mesh.userData.odr_road_network_mesh.lanes_mesh;
          //本次选中的区域车道ID是否和上次一样
          if (INTERSECTED_LANE_ID != decoded_lane_id) {
            //当前是否是初始化状态,如果不是则进行初始化,防止重复初始化
            if (INTERSECTED_LANE_ID != 0xffffffff) {
              //根据车道ID索引获取车道信息
              road_network_mesh.geometry.attributes.color.array.fill(
                COLORS.road
              );
            }

            //保存选中车道ID
            INTERSECTED_LANE_ID = decoded_lane_id;
            //根据车道ID获取车道信息
            const lane_vert_idx_interval =
              odr_lanes_mesh.get_idx_interval_lane(INTERSECTED_LANE_ID);
            //获取该车道长度
            const vert_count =
              lane_vert_idx_interval[1] - lane_vert_idx_interval[0];
            //修改离屏渲染场景中该车道的背景颜色
            applyVertexColors(
              road_network_mesh.geometry.attributes.color,
              new THREE.Color(COLORS.lane_highlight),
              lane_vert_idx_interval[0],
              vert_count
            );
            //手动更新颜色值
            road_network_mesh.geometry.attributes.color.needsUpdate = true;
            //显示左上角信息展示
            spotlight_info.style.display = "block";
          }
          //使用过后删除数据冗余,避免造成内存泄漏
          odr_lanes_mesh.delete();
        } else {
          //鼠标拾取无效色素

          //恢复初始化数据
          //当前是否已经是初始化状态如果不是则进行初始化
          if (INTERSECTED_LANE_ID != 0xffffffff) {
            const odr_lanes_mesh =
              road_network_mesh.userData.odr_road_network_mesh.lanes_mesh;
            const lane_vert_idx_interval =
              odr_lanes_mesh.get_idx_interval_lane(INTERSECTED_LANE_ID);
            road_network_mesh.geometry.attributes.color.array.fill(COLORS.road);
            road_network_mesh.geometry.attributes.color.needsUpdate = true;
            odr_lanes_mesh.delete();
            INTERSECTED_LANE_ID = 0xffffffff;
            spotlight_info.style.display = "none";
          }
        }

车辆三视图(算法优化)

优点:避免了点过于分散和间距过大造成的视图摇晃和颠簸问题

s:上一个点的位置

e:下一个点的位置

b:当前点的位置

a:摄像机的位置

正视图 

算法

 效果图

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

侧视图

算法

效果图:

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

 俯视图

效果图

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

 全局路径规划展示

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

 车轮旋转

非车辆原地不动,车轮旋转,地图动的方式(录制软件掉帧问题,效果不太明显)

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

三维定位

左上角webgl坐标

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

自定义打点 

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

点击开始打点,可在地图上进行自定义路径,点击启动,将展示路径和启动模型运行

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

中间红色线则为路线 

其他

转弯

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

 直行

gl-opendrive插件(车俩3D仿真模拟自动驾驶)

变道

 gl-opendrive插件(车俩3D仿真模拟自动驾驶)

 全局鸟瞰图

gl-opendrive插件(车俩3D仿真模拟自动驾驶)文章来源地址https://www.toymoban.com/news/detail-475607.html

到了这里,关于gl-opendrive插件(车俩3D仿真模拟自动驾驶)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 使用echarts-gl 绘制3D地球配置详解

    大屏可视化绘制关联配置绘制3D地球 为 ECharts 准备一个定义了宽高的 DOM 实例化 指定图表的配置项和数据

    2024年02月11日
    浏览(39)
  • vue使用echarts与echarts-gl实现3d地图与 3d柱状图

    目录 前言 一、下载echarts与echarts gl 二、vue引入与页面使用 1.引入 2.页面引入echarts-gl 三、下载地图数据 四、使用地图 1、html初始化地图放入位置: 2、data创建变量 3、创建地图 4、钩子函数渲染地图 5、渲染完成效果 总结 提示:本项目使用vue,请提前搭建好vue项目 本次需求

    2024年02月12日
    浏览(43)
  • 【React】【react-globe.gl】3D Objects效果

    示例地址 踩坑 示例是通过script引入的依赖,但本人需要在react项目中实现该效果。 按照react-globe.gl官方方法引入总是报错 Can\\\'t import the named export \\\'AmbientLight\\\' from non EcmaScript module (only default export is available) 。 原因是通过 import Globe from \\\'react-globe.gl\\\'; 引入的是.mjs文件, react-glob

    2024年02月05日
    浏览(33)
  • Flow3D 11.1 LPBF熔池仿真模拟和SLM技术-详细操作步骤、模型及常见问题解析

    Flow3d 11.1 lpbf 熔池仿真模拟 slm 选区激光熔化 1.该模拟设包含颗粒床以及建立过程(有视频),运用Flow3D11.1、EDEM软件以及Gambit软件(含安装包),步骤清晰内容详细。 2.Flow3d 软件操作过程介绍详细,包含二次编译文件及过程(含二次编译软件安装包),具有两种模型(各种常

    2024年04月22日
    浏览(78)
  • 3d模型面部自动绑定插件及算法相关研究

    本文站在程序的角度介绍了目前对市面上的一些面部骨骼自动绑定方案及算法的一些心得 1) 线性混合蒙皮 线性蒙皮公式: 其中Cji代表骨骼变换矩阵(rotation, position,和scale矩阵)。Wi代表第i个顶点的权重,V代表对应的顶点。V`由各个骨骼的累加计算得出。但是线性混合蒙皮

    2024年02月08日
    浏览(46)
  • BlenderGIS插件 城市建筑3D模型自动生成 教程

    目录 一、下载Blender和BlenderGIS 二、解决 No imaging library...报错 三、生成城市3D模型  四、导出模型 本文所需文件可在如下链接下载,或者直接按照博文下载步骤下载  https://download.csdn.net/download/ChaoChao66666/87071901?spm=1001.2014.3001.5501   打开blender官网来下载对应版本的blender(Dow

    2024年02月02日
    浏览(53)
  • echarts + echarts-gl - 使用geo3d + map3d + scatter3D做3d地图

    一、使用插件 echarts@5.2.2 、 echarts-gl@2.0.8 、 jquery ; jquery 是使用 ajax 加载 json 文件的。 二、准备地图json文件 因为找了一圈,网上的地图 js 文件都需要花钱去购买, json 文件可以在阿里云数据可视化平台下载,下载链接为:免费地图json文件下载 ECharts 提供了两种格式的地图数

    2024年02月16日
    浏览(43)
  • NavMesh 导航网格神级插件发布!高效实现 3D 自动寻路

    寻路是游戏开发中不可忽视的功能之一,NavMesh 导航网格寻路则被广泛用于在复杂的 3D 游戏世界中实现动态物体自动寻路。 开发者 iwae 创作了插件 Easy NavMesh,在 Cocos Creator 3.x 中实现了完善的 3D 自动寻路功能。 导航网格(Navigation Mesh,简称 NavMesh) 能够存储可行走区域的网

    2024年02月04日
    浏览(57)
  • vue-使用echarts+echarts-gl实现某个省份地区地图3d可视化

    前言 最近在开发中遇到一个需求,需要把一个地区地图变成3d感觉悬浮在大屏中间配合业务需求 其实echarts配合三方库就可以实现这个效果,具体细节需要自己调整 代码实现 1.下载各省份各地区地图数据-json文件-根据需求下载对应地图json数据引入即可 最新全国地图JSON数据

    2024年01月20日
    浏览(60)
  • vue中使用echarts与echarts-gl 实现3D饼图环形饼图

    注意:我不知道版本差异会不会有影响(可以指定版本 也可以借鉴我的) 指定版本命令 加个@后面跟版本号即可 成功之后可以在package.json中检查是否安装成功(如上图) 引入位置:我没有在main.js中全局引用,而是哪个页面用到就引入哪里 代码: 注意:我没有封装起来(你

    2024年02月03日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包