Autonomous pathfinding is a core technology for robot navigation thatThe principle mainly involves complex information interaction and processing between the robot and the environment. During automated wayfinding, the robot relies on advanced sensor systems, such as high-definition cameras, precision LIDAR and sensitive ultrasonic devices, to sense its surroundings in all directions. These sensors capture and analyze obstacles, changes in terrain and key waypoints in the environment in real time, providing the robot with precise navigation data.
Auto-seeking plays a key role in a number of fields, from the automated inspection system in Tupou's data center room, to the navigation system of intelligent robots, to the intelligent management of smart terminal yards, auto-seeking technology is everywhere. This function not onlyCan plan the optimal routeIt is also possible to consider in real timeObstacle avoidanceand other complex practical factors, with the flexibility to adjust paths to ensure safety and efficiency.
At first glance, the autopath function sounds slightly complex, and the implementation process does involve some algorithms. Before the concrete implementation, we need to solve two key problems:
1. How to avoid obstacles in the scene?
2. How is the optimal path calculated?
To solve these two problems, we can utilize the plug-in provided by HT for Web, which is developed by Tupou Software. The plug-in hasInitialize grid and auto-search pathsand other features that efficiently simplify the implementation of auto-routing.
system analysis
Scene Gridding
The scene is first divided into two-dimensional grids, and obstacles are distributed on different grid cells, and some larger obstacles may occupy multiple grid cells. The path computation actually analyzes the occupation of the grid, and when the platform monitors that a grid is occupied, the system will automatically find a detour path to generate an optimal one.
When developing, you first need to instantiate (view, params). where view can be either ht.graph3d.Graph3dView. params is an object that contains basic property settings.Listed below are some of the params The common parameters of the
✧simplify:Whether to enable path simplification.
✧closest:Whether to enable nearest path optimization.
✧nodeRectExtend: extends the node range.
✧ gridSizeY: The size of the grid in the Y direction.
✧ gridSizeX: The size of the grid in the X direction.
✧diagonal: whether to allow movement along the diagonal.
✧ fastOverlap: whether to enable the fast monitoring overlap algorithm.
✧filter: filter function is used to filter specific nodes during path computation.
✧turnPunish: turn penalty factor, higher values indicate a preference for straight paths.
Specific code implementation:
const hindrance = (‘hindrance’);
const astar = new (view, {
gridSizeX: 50, // grid
gridSizeY: 50,
nodeRectExtend: 50,
fastOverlap: false,
filter: function (data) {
return (hindrance);
}
});
Path calculation
During path computation, the system needs to monitor the occupancy status of each grid cell in real time. If the planned path encounters a grid occupied by an obstacle, the system willAutomatically find detour paths to dynamically avoid obstacles。
During the development process, we need toListen to the scene background's click eventto get the coordinates of the clicked position. Then, combining the coordinates of the starting point, the (pFrom, pTo) function calculates the specific path. The calculated path is a set of point data, which can be used to draw a path pipeline in the scene. Specific code implementation:
(function (e) {
const { kind, data, event } = e;
if (kind === 'clickBackground') {
const animOb = ().getDataByTag('people'); // Get the character node
let pFrom = animOb.p3(); // get the coordinates of the character node (starting point coordinates)
pFrom = { x: pFrom[0], y: pFrom[2] }
let position = (event); // get the logical coordinates in the scene based on the mouse event
const pTo = { x: position[0], y: position[2] }; const path = (pFrom, pTo); // Get the path.
const path = (pFrom, pTo); // get the path
createPloyline(path); // generate the pipe
}
})
// Generate the pipeline
createPloyline(){
const points: any = [];
((p: any, i: number) => {
({ x: , y: , e: 0 });
})
const polyline = new ();
({
"shape3d": false,
});
(points);
().add(polyline);
}
Path animation
After generating a pipe in the scene, character nodes can move along this pipe. The code for character node movement along the pipe is as follows:
const animOb = ('people');
('walk'); // The character model in the example uses an fbx model that plays the animation on the node
const length = (polyline);
let moveAnim = null;
const params = {
delay: 100,
duration: 1000 * (length / 200), // set the animation period based on the length of the pipe
easing: function (t) { return t },
action: function (v, t) {
var offset = (polyline, length * v);
if (offset) {
var point = ,
px = ,
py = ,
pz = ,
tangent = ,
tx = ,
ty = ,
tz = ;
([px + tx, py + ty, pz + tz], 'front');
animOb.p3(px, py, pz);
}
// The viewpoint always follows when the character is moving
([px, py, pz]);
([px + 400, py + 800, pz + 400]);
},
finishFunc: () => {
moveAnim = null;)
// Toggle scene view
([-84, 3435, 3142], [-28, -821, -160)], {
duration: 1000
})
(); // Pause the character model animation
}
};
moveAnim = (params);
Optimize visual effects
Based on the above, we have realized the basic autopath function. In the actual project still need to improve certain visual effects, so that the display page is beautiful enough, we can take the following strategy:
- First, hide the pipe path (using ('', true));
- Subsequently, nodes are utilized and maps are set up to render the movement path of the character. This not only fulfills the function, but also dramatically enhances the visual appeal.
The specific implementation code is as follows:
createShape(points) {
if(uvAnim) (); // Remove the uv offset animation from the old shape before creating the new one.
const shape = = new ();
({
"": "rgb(255,0,0)",
"": false,
"": true,
"": true,
"": "assets/",
"": [
length / 500,
1
],
"": true,
"": true,
"": false,
"": false,
"": true
})
(shape);
(30);
(points);
return shape;
}
// the uv offset animation
playShapeAnim(shape) {
if (!shape) return;
const params = {
duration: 2000,
easing: function (t: number) {
return t;
},
action: function (v: number, t: number) {
("", [v, 0]);
},
finishFunc: () => {
uvAnim = null;
uvAnim = (params);
}
};
uvAnim = (params);
}
const points: any = [];
((p: any, i: number) => {
({ x: , y: , e: 0 });
})
const shape = createShape(points);
let uvAnim = nullplayShapeAnim(shape); // Execute the shape's uv offset animation.
playShapeAnim(shape); // Perform the shape's uv offset animation.
summarize
As developers, we will continue to explore and optimize the autopath technology, and use the plug-in tools provided by Tupu HT to continuously improve the algorithm efficiency and user experience. Through reasonable parameter settings, precise grid division and intelligent path planning, we will provide better autopath solutions for various application scenarios.
You can go to the official website of Tupou Software to see more cases and effects:
/demos/