Introduction

This plug-in is based on free opendrive open source plug-in, Threejs and Webgl 3D technology, vue front-end framework, blender open source modeling tool, etc. for secondary development. The plug-in is independently developed and responsible by myself. It is currently in the demo stage, and the functions still need to be improved. Due to the rush of development, the code still needs to be optimized.

Therefore, users and readers need to have:

Opendrive source code foundation, xodr file format understanding
threejs three-dimensional rendering engine
webgl 3D protocol and related shader knowledge
Can use blender, have a certain modeling foundation
JavaScript technology
vue framework
echarts data visualization chart library
Familiar with various coordinate systems, such as world coordinate system, st coordinate system, uv coordinate system, xyz inertial coordinate system, object coordinate system,
Basic knowledge of mathematics (polar coordinates, differential, vectors), etc.
Off-screen rendering ideas, webgl shaders (vertexShader, fragmentShader)
glsl syntax

Core functions

xodr file parsing
map rendering
Vehicle three-view (algorithm optimization)
road tracking
Global path planning display
Custom RBI
vehicle operation
wheel spinning
Mouse Positioning (3D)
GPU color picking
Support remote or local data file loading
other

xodr file parsing

This function is implemented by the opendrive plug-in, and the specific file format can be found in the official opendrive

or referral URL

Simulation Standards for Autonomous Driving Scenarios (1) - OpenDRIVE - Programmer Sought

"OpenDRIVE1.6 Specification Document" 1_opendrive Official Document - CSDN Blog

"OpenDRIVE1.6 Specification Document" 3_opendrive 1.6_YMWM_'s Blog-CSDN Blog

road tracking

Realized by using off-screen rendering technology and positioning function

gpu picks up color to get lane 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
        );

Get lanes for color rendering


        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";
          }
        }