Mechanism animation model self-building sharing method, system and equipment based on WebGL and URDF

By using WebGL and URDF technologies, we have enabled the creation and sharing of high-fidelity, interactive mechanism animation models in a browser. This solves the problem of difficulty in displaying mechanism motion in traditional teaching, provides smooth simulation and multi-user sharing functions, and improves learning efficiency and experience.

CN121685774APending Publication Date: 2026-03-17HARBIN INSTITUTE OF TECHNOLOGY (SHENZHEN) (INSTITUTE OF SCIENCE AND TECHNOLOGY INNOVATION HARBIN INSTITUTE OF TECHNOLOGY SHENZHEN)
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202511850458.0
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2025-12-09
Publication Date
2026-03-17

AI Technical Summary

Technical Problem

Existing mechanism animation models cannot achieve high-fidelity interactive motion simulation in the Web environment, cannot support community-based co-construction and sharing of models, and traditional teaching methods are costly and cannot directly display dynamic mechanism motion in a browser.

Method used

Using a WebGL and URDF-based approach, the system optimizes the 3D model during the preprocessing stage, constructs a tree-structured scene graph during the loading stage, performs kinematic calculations and renders the model during the runtime stage, and responds to user adjustments during the interaction stage, enabling the self-built and shared mechanism model and multi-user interaction.

Benefits of technology

Enables smooth and accurate mechanism motion simulation in a browser, supports real-time parameter adjustment and multi-view observation, promotes the understanding of mechanism motion forms, and builds an open model sharing ecosystem.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN121685774A_ABST
    Figure CN121685774A_ABST
Patent Text Reader

Abstract

The invention provides a WebGL and URDF-based mechanism animation model self-building sharing method, system and device, relates to the technical field of data sharing platforms, and comprises a preprocessing stage, a loading stage, a running stage and an interaction stage. According to the technical scheme, the dependence of traditional mechanism simulation software on specific equipment and complex environments is eliminated, and smooth and high-precision mechanism motion simulation can be completed in a universal web browser by calling the GPU computing power of a local computer of a user. Through a Web technical architecture, a user can access the system through a browser anytime and anywhere and conveniently carry out real-time parameter adjustment and multi-view dynamic observation, so that the movement mechanism and the working principle of a mechanism are intuitively and deeply understood. Besides, an open model sharing ecology is also constructed, different users are supported to upload and share an autonomously constructed mechanism model, and the movement process of a complex mechanism is vividly demonstrated through custom animations, so that the communication and propagation of technical knowledge are facilitated.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This invention relates to the field of data sharing platform technology, and in particular to a method for self-building and sharing mechanism animation models based on WebGL and URDF. Background Technology

[0002] Traditional teaching of mechanical principles has long faced the dilemma of abstract and difficult-to-understand principles of mechanism motion and insufficient spatial imagination among students. For example, current teaching methods often rely on static diagrams or pre-set animations, which, while somewhat intuitive, fail to demonstrate the dynamic process and internal connections of mechanism motion. Furthermore, the teaching process often uses physical motion models that are poorly made, and adding more complex teaching models incurs high customization costs. Additionally, commonly used CAD software requires complex simulations with high learning costs, and visualization is limited to fixed software, unable to directly display dynamic mechanisms in a web environment. Finally, existing motion simulation platforms only support model files in fixed formats and do not support sharing and collaboration. The real-time motion effects of existing platforms are poor, and parameters and transparency cannot be adjusted.

[0003] In other words, current institutional animation models are generally of low quality, costly, outdated, and cannot be dynamically updated, and do not support students to create their own.

[0004] Therefore, there is an urgent need for a solution that can realize high-fidelity interactive motion simulation in a web browser and support the community-based co-construction and sharing of models, so as to break through the bottleneck of traditional teaching and improve learning efficiency and experience. Summary of the Invention

[0005] This invention overcomes the shortcomings of the prior art and provides a method, system and device for self-building and sharing mechanism animation models based on WebGL and URDF, which realizes smooth simulation in the browser and allows for interactive adjustment and multi-user model sharing.

[0006] To solve the above-mentioned technical problems, the present invention is achieved through the following technical solution:

[0007] A method for self-building and sharing mechanism animation models based on WebGL and URDF includes the following steps:

[0008] Preprocessing stage: Obtain the mechanism model created by the user in the 3D modeling software and export the model as a URDF format file, which contains link information and joint information;

[0009] Loading phase: The URDF format file is parsed in the browser environment, the link and joint data are extracted, and a WebGL scene graph is constructed based on the extracted data. The scene graph is a tree structure, with the root node being the base link and the joints being inserted as transformation nodes between the parent and child links.

[0010] Operation phase: Receive mechanism motion parameters input by the user through the graphical interface, perform kinematic calculations based on the motion parameters, update the transformation matrix of each node in the scene graph, and perform 3D rendering using WebGL based on the updated scene graph;

[0011] Interaction phase: Responds to the user's real-time adjustments to the mechanism's motion and visual parameters, updates the motion calculation results and visual effects, and provides real-time feedback in the graphical interface.

[0012] Furthermore, the preprocessing stage also includes resource optimization for optimizing the 3D model, including:

[0013] An edge folding algorithm is used to simplify the model mesh. The number of vertices is reduced by iteratively merging edges with the smallest error. The edge folding cost function is:

[0014] ,

[0015] in Let Q be the two vertices of the edge, and let Q be the quadratic form of the sum of the squares of the distances from the vertex to all adjacent planes.

[0016] Based on the distance from the camera to the object, different levels of detail are dynamically switched in the model using layer detail technology.

[0017] Furthermore, the implementation of the level of detail technique includes:

[0018] Calculate the radius of the basic enclosing sphere: ;

[0019] Calculate the baseline switching distance based on the radius r of the model's bounding sphere: , ;

[0020] Calculate the complexity factor based on the number of vertices N_v in the model: k = log 10 (N_v / 1000); k represents the complexity factor;

[0021] Calculate the actual switching distance: ;

[0022] It is the distance from the camera to the object. , Distance threshold

[0023] When the camera distance < When using a high-detail model, ≤ < When using detailed models, when ≥ Use low-detail models.

[0024] Furthermore, the scene graph construction in the loading phase includes:

[0025] For each joint, calculate its local transformation matrix: ,

[0026] Where T_fixed is the fixed transformation matrix of the joint, T_joint(q) is the motion transformation matrix of the joint, and q is the joint variable;

[0027] The transformation matrix of each node in the world coordinate system is calculated using a recursive algorithm:

[0028] If i is the root node, then T_world(i) = I4; otherwise, T_world(i) = T_world(parent(i)) × T_local(i).

[0029] Furthermore, the motion transformation matrix T_joint(q) of the joint is calculated according to the joint type:

[0030] For rotational joints: ,

[0031] in, : Joint axis unit vector;

[0032] : The angle of the i-th rotational joint;

[0033] The i-th joint around the axis Rotation The rotation matrix of the angle; the specific expression can be derived from the Rodriguez formula as follows:

[0034]

[0035] For translational joints: ,

[0036] Translation distance, joint variable; translation is along the direction in the parent link's coordinate system. Performed;

[0037] For fixed joints: no relative motion, the transformation matrix is ​​unit 1.

[0038] .

[0039] Furthermore, the kinematic calculations during the operation phase include:

[0040] For rotary joints, calculate the joint angles: ,

[0041] :time No. The angle of a rotational joint;

[0042] Initial moment The joint angles are obtained from the initial state of the URDF joint or the state of the previous frame.

[0043] User-defined reference angular velocity (rad / s);

[0044] Current time (seconds);

[0045] Initial time (seconds);

[0046] For translational joints: ,

[0047] :time No. Displacement (meters) of each translational joint;

[0048] Initial moment Joint displacement;

[0049] Joint limiting treatment formula:

[0050] ,

[0051] = ,

[0052] , : The angle limit of the i-th rotational joint is set from the joint element in the URDF file;

[0053] , : The displacement limit of the i-th translational joint, set from the joint element in the URDF file.

[0054] Furthermore, the visual effects update during the interaction phase includes at least one of the following:

[0055] For transparency interaction, three different levels of transparency interaction control modes are provided, derived from the following formulas; each corresponding to different usage scenarios and adjustment needs: the first is automatic transparency adjustment on mouse hover, the second is user-defined transparency adjustment, and the third is widget hiding function.

[0056] ,

[0057] In the formula: For the updated transparency, For initial transparency, , , These are hidden mode, mouse hover mode, and user-adjustable mode;

[0058] Dynamic specular highlight effect: Based on time-modulated specular light intensity, I_s_specular = I_s_base × (1 + A× sin(2π × f × t));

[0059] I_s_base: Base specular intensity, obtained from the URDF file; if not available, it is 0.5.

[0060] A: Amplitude coefficient, controls the variation of the highlight dynamic effect, which can be adjusted by the user using the GUI slider, ranging from [0-1], with a default value of 0.3;

[0061] f: Frequency, controls the speed at which the highlight dynamic effect changes. It can be adjusted by the user using a GUI slider, ranging from [0.05-15], with a default value of 1.

[0062] t: System uptime;

[0063] Smooth color transition: The color transition achieves a smooth change in the material color, avoiding color abruptness and improving visual comfort;

[0064] The use of exponential smoothing transitions results in more natural color reproduction.

[0065] C_current = C_previous + (C_target - C_previous) × (1 - e^(-k×Δt));

[0066] Component calculation:

[0067] R_current = R_previous + (R_target - R_previous) × (1 - e^(-k×Δt));

[0068] G_current = G_previous + (G_target - G_previous) ×(1 - e^(-k×Δt));

[0069] B_current = B_previous + (B_target - B_previous) × (1 - e^(-k×Δt));

[0070] A_current = A_previous + (A_target - A_previous) × (1 - e^(-k×Δt));

[0071] C_previous: Stores the material color state of the previous frame;

[0072] C_target: User selection: Get RGB values ​​from the color picker;

[0073] k: Fast transition: k = 8-10; Medium transition: k = 3-5; Slow transition: k = 1-2.

[0074] Furthermore, it also includes performance optimization steps:

[0075] A dirty flag is set for each node in the scene graph to compare the joint change states of the current frame and the previous frame. Each node is judged using a Boolean flag:

[0076] dirty ) = ,

[0077] dirty ): Node Dirty mark;

[0078] : Parent node reference;

[0079] Incremental update of transformation matrix:

[0080] T_world( ) = .

[0081] A self-built and shared system for mechanism animation models based on WebGL and URDF, comprising:

[0082] The preprocessing module is used to acquire and optimize the mechanism model created by the user in the 3D modeling software, and export the model as a URDF format file;

[0083] The loading module is used to parse the URDF format file in the browser environment and construct a WebGL scene graph based on the parsing results;

[0084] The runtime module is used to receive the mechanism motion parameters input by the user, perform kinematic calculations, update the scene graph transformation matrix, and perform 3D rendering through WebGL;

[0085] The interaction module is used to respond to users' real-time parameter adjustments and update motion calculation results and visual effects.

[0086] An electronic device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the method described above.

[0087] Compared with the prior art, the beneficial effects of the present invention are:

[0088] 1. It can utilize your computer's GPU to achieve smooth and accurate simulation of mechanical motion in a browser.

[0089] 2. Based on a browser, it can be accessed anytime, anywhere, and parameters can be adjusted in real time. It allows for observation from multiple perspectives, which can help to better understand the movement of the mechanism.

[0090] 3. Different users can upload and share their own mechanism models, and set animations to demonstrate the motion principles of complex mechanisms. Attached Figure Description

[0091] The accompanying drawings are provided to further illustrate the invention and are used together with the embodiments of the invention to explain the invention. They do not constitute a limitation of the invention. In the drawings:

[0092] Figure 1 This is a flowchart illustrating the steps of the self-built and shared mechanism animation model method described in this invention.

[0093] Figure 2 This is a schematic diagram of the preprocessing stage;

[0094] Figure 3 This is a diagram illustrating the loading phase;

[0095] Figure 4 This is a schematic diagram of the operational phase;

[0096] Figure 5 This is a diagram illustrating the interaction phase. Detailed Implementation

[0097] The preferred embodiments of the present invention are described below. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0098] like Figures 1 to 5 As shown, this invention claims protection for a method for self-building and sharing mechanism animation models based on WebGL and URDF, comprising the following steps:

[0099] Preprocessing stage: Obtain the mechanism model created by the user in the 3D modeling software and export the model as a URDF format file, which contains link information and joint information;

[0100] Loading phase: The URDF format file is parsed in the browser environment, the link and joint data are extracted, and a WebGL scene graph is constructed based on the extracted data. The scene graph is a tree structure, with the root node being the base link and the joints being inserted as transformation nodes between the parent and child links.

[0101] Operation phase: Receive mechanism motion parameters input by the user through the graphical interface, perform kinematic calculations based on the motion parameters, update the transformation matrix of each node in the scene graph, and perform 3D rendering using WebGL based on the updated scene graph;

[0102] Interaction phase: Responds to the user's real-time adjustments to the mechanism's motion and visual parameters, updates the motion calculation results and visual effects, and provides real-time feedback in the graphical interface.

[0103] Specifically, the preprocessing stage includes the following:

[0104] 1.1 Users use their familiar 3D modeling software to build the model. The modeling process requires decomposing the mechanism into multiple rigid links and connecting them through kinematic pairs (joints).

[0105] 1.2 Exporting the URDF Model

[0106] After the model is created, you need to define the color and material of the materials and save it as URDF format when exporting. This can be achieved through relevant plugins, such as the sw_urdf_exporter plugin in SolidWorks. When exporting URDF file format, you need to set two main parts: links and joints.

[0107] Link: Describes the geometry (mesh), material, inertial parameters, etc. of a component.

[0108] Joint: Describes the joint type, parent link, child link, motion axis, and limits. The following are some joint types:

[0109] 1) Revolute joint: rotates around a single axis with limited angle.

[0110] 2) Continuous rotational joint: A rotational joint without angle limitations.

[0111] 3) Prismatic joint: translates along a single axis, with positional restrictions.

[0112] 4) Fixed joint: No relative movement.

[0113] 1.3 Resource Optimization

[0114] To improve WebGL rendering performance, the 3D model needs to be optimized.

[0115] 1.3.1 Mesh Simplification: Mesh simplification is performed using an edge-folding algorithm while preserving visual fidelity. The cost function of the edge-folding algorithm is as follows:

[0116]

[0117] Cost function

[0118] in Let Q be the two vertices of the edge, and let Q be the quadratic form of the sum of the squares of the distances from the vertex to all adjacent planes. It is a 4×4 symmetric matrix that quantifies the distance error from the vertex to the adjacent triangle plane. The number of vertices is reduced by iteratively merging the edges with the smallest errors. The specific solution needs to be calculated according to the actual situation.

[0119] v1 = [x1, y1, z1]ᵀ, v2 = [x2, y2, z2]ᵀ

[0120] =(x1-x2)² + (y1-y2)² + (z1-z2)²

[0121] 1.3.2 LOD (Level of Detail) Generation

[0122] Based on the critical frequency domain principle in visual physiology, when the projection of an object onto the retina is less than a certain threshold, details cannot be perceived. Therefore, the LOD switching distance satisfies:

[0123] If d < d1, use a high-detail model.

[0124] If d1 <= d < d2, use the medium detail model.

[0125] If d >= d2, use the low-detail model.

[0126]

[0127] d1 and d2 are the distances from the camera to the object, and d1 and d2 are the distance thresholds.

[0128] The methods for obtaining d1 and d2 are as follows:

[0129] 1) Calculate the radius of the basic enclosing sphere

[0130]

[0131] 2) Determine the reference switching distance

[0132]

[0133]

[0134] 3) Adjust according to model complexity

[0135] k = log 10 (N_v / 1000)

[0136]

[0137]

[0138] N_v represents the number of vertices in the model, and k represents the complexity factor.

[0139] 2. Loading Phase

[0140] 2.1 URDF parsing

[0141] The URDF file is read using an XML parser to extract link and joint information and construct the internal data structure. The data structure of the mechanism model is built, including a list of links, a list of joints, and the parent-child relationships between them.

[0142] 2.2 Scene Graph Construction:

[0143] A scene graph is constructed based on the parsed URDF data. The scene graph is a tree structure, with the root node being the base link, and each joint being inserted as a transformation node between the parent link and the child link.

[0144] For each joint, its transformation matrix consists of fixed transformations and joint motion transformations.

[0145] (1) Fixed transformation calculation:

[0146] T_fixed = T_translate(x, y, z) × T_rotate_z(ψ) × T_rotate_y(θ) ×T_rotate_x(φ)

[0147] T_fixed: The fixed transformation part of the joint.

[0148] T_translate(x, y, z): Translation matrix

[0149] T_rotate_x(φ): The transformation matrix for rotating the x-axis by an angle φ, where φ is the roll angle.

[0150] T_rotate_y(θ): The transformation matrix for rotating about the Y-axis by an angle θ, where θ is the pitch angle.

[0151] T_rotate_z(ψ): The transformation matrix for rotating the z-axis by an angle ψ, where ψ is the yaw angle.

[0152] Translation matrix:

[0153]

[0154] Rotation matrix:

[0155]

[0156]

[0157]

[0158] (2) Calculation of joint motion transformation:

[0159] Rotational joint:

[0160]

[0161] Joint motion transformation matrix

[0162] : Rotation angle, joint variable; rotation is about an axis in the parent link's coordinate system. Performed

[0163] It is a unit vector defined in the parent link coordinate system, representing the reference direction of joint movement, not the absolute direction. From the URDF joint <axis xyz="...">Obtain and normalize.

[0164] : around axis Rotation The rotation matrix of the angle can be derived from the Rodriguez formula as follows:

[0165]

[0166] Translational joint:

[0167]

[0168] Translation distance, joint variable; translation is along the direction in the parent link's coordinate system. Performed

[0169] Fixed joint:

[0170] There is no relative motion, and the transformation matrix is ​​unit 1.

[0171]

[0172] (3) Transformation matrix of joint motion transformation:

[0173]

[0174] : This is a joint variable, which can be a rotation angle. It can also be the translation distance.

[0175] (4) Transform the joint motion into the world coordinate system.

[0176]

[0177] : 4×4 transformation matrix of node i in world coordinate system

[0178] A 4×4 identity matrix, indicating that the root node has no parent node transformation.

[0179] : Parent node of node i

[0180] The transformation matrix of the parent node in the world coordinate system is obtained through the same recursive formula:

[0181]

[0182] :node The local transformation matrix relative to the parent node.

[0183]

[0184] 2.3 Material Loading:

[0185] Load the materials defined in the URDF, including colors and textures. In WebGL, materials are implemented through shaders. The commonly used lighting model is the Phong model.

[0186]

[0187] Diffuse reflection coefficient, obtained from the material definition of the URDF model.

[0188] Specular reflectance

[0189] Ambient light

[0190] Intensity of ambient light, diffuse light, and specular light. , ,

[0191] Surface normal vectors, obtained from vertex data. Original length divided by modulus

[0192] : Light direction vector

[0193] Reflected ray vector,

[0194] ,

[0195] Camera position

[0196] Current position of the fragment

[0197]

[0198] The specular reflection index controls the size of the highlight area and is obtained from the material definition of the URDF model.

[0199] 3. Operational Phase

[0200] Process user input, perform kinematic calculations, update the transformation matrix, and render via WebGL.

[0201] 3.1 User Input:

[0202] Users can set the joint's rotation speed ratio, direction of movement, etc. through the interface.

[0203] Speed ​​ratio setting:

[0204]

[0205] :Speed ​​ratio vector

[0206] The value is obtained through a GUI slider or input box, and its range is [-1, 1]. > 0: Positive motion;

[0207] < 0: Reverse motion; rᵢ = 0: Stationary

[0208] The number of kinematic joints in the mechanism, obtained by parsing from the URDF format.

[0209] 3.2 Kinematic Calculations:

[0210] Based on the user-set rotation speed ratio and the current time, calculate the motion parameters (such as rotation angle or translation distance) of each joint.

[0211] Joint angle update formula:

[0212] For rotational joints:

[0213]

[0214] :time No. The angle (radians) of each rotational joint.

[0215] Initial moment The joint angles are obtained from the initial state of the URDF joint or the state of the previous frame.

[0216] User-defined reference angular velocity (rad / s)

[0217] Current time (seconds)

[0218] Initial time (seconds)

[0219] For translational joints:

[0220]

[0221] :time No. Displacement (meters) of each translational joint

[0222] Initial moment Joint displacement

[0223] Joint limiting treatment formula:

[0224]

[0225] =

[0226] , The angle limit of the i-th rotational joint is set from the joint element in the URDF file.

[0227] , The displacement limit of the i-th translational joint is set from the joint element in the URDF file.

[0228] 3.3 Matrix Update:

[0229] Based on the kinematic calculations, update the transformation matrix of each node in the scene graph.

[0230] Joint transformation matrix calculation:

[0231] For the rotational joint transformation matrix:

[0232]

[0233] : Joint axis unit vector

[0234] : Angle of the i-th rotational joint

[0235] The i-th joint around the axis Rotation The rotation matrix of the angle can be derived from the Rodriguez formula as follows:

[0236]

[0237] For the translational joint transformation matrix:

[0238]

[0239] Node world matrix update formula:

[0240]

[0241] in, Solved using a recursive algorithm.

[0242]

[0243] : World transformation matrix of the i-th node

[0244] The index of the parent node of the i-th node.

[0245] The fixed transformation matrix of the i-th node is calculated from the joint description in the URDF file.

[0246] The joint motion transformation matrix of the i-th node can be obtained from the parent-child relationship in the URDF file.

[0247] Joint variables, θᵢ for rotational joints and dᵢ for translational joints.

[0248] 3.4 WebGL Rendering:

[0249] The rendering engine, Three.js, is used to render based on the scene graph. This includes traversing the scene graph and calculating the world transformation matrix for each node.

[0250] Pass the geometry and materials to the rendering pipeline. Execute WebGL drawing commands.

[0251] 3.4.1 Vertex transformation is the process of converting a 3D model from a local coordinate system to the screen coordinate system. The vertex transformation formula is as follows:

[0252]

[0253] The coordinates of the vertex in the local coordinate system of the model are read from the vertex buffer of the 3D model.

[0254] : Read from scene graph nodes, see 3.3 for details.

[0255] The view transformation matrix transforms vertices from the world coordinate system to the camera coordinate system.

[0256]

[0257] The inverse of the camera rotation matrix.

[0258] The position of the camera in the world coordinate system

[0259]

[0260]

[0261]

[0262]

[0263] The camera's position in the world coordinate system is set by the user or controlled by the animation.

[0264]

[0265] Camera orientation:

[0266] target: The target point observed by the camera, target = [x_target, y_target, z_target]ᵀ, controlled by the user via the mouse, used to define the camera's viewing direction.

[0267] Camera Up Vector:

[0268] The projection transformation matrix transforms the vertices from the camera coordinate system to the clip space.

[0269]

[0270] in,

[0271]

[0272] Vertical field of view angle controls the visible range, with a value ranging from 45° to 60°.

[0273] Aspect: Aspect ratio, to keep the image from being distorted. It is usually set to 4:3 or 16:9.

[0274] n: Distance to the nearest clipping plane, the closest visible distance, ranging from 0.1 to 1.

[0275] Distance to the far clipping plane, the farthest visible distance, with a value ranging from 100 to 10000.

[0276] 4. Interaction Phase

[0277] 4.1 Parameter Adjustment

[0278] Users adjust various parameters through the GUI interface, and the system immediately provides corresponding responses.

[0279] Angular velocity reference adjustment formula:

[0280]

[0281] Updated angular velocity

[0282] Current reference angular velocity

[0283] The change in angular velocity input by the user is obtained through the step value of the GUI control.

[0284] Linear velocity reference adjustment formula:

[0285] Speed ​​after update

[0286] Current reference speed

[0287] The change in speed input by the user is obtained through the step value of the GUI control.

[0288] Transparency adjustment formula:

[0289]

[0290] : Current transparency value, read from the material properties in the URDF file.

[0291] The amount of transparency change input by the user, obtained from the transparency slider step value.

[0292] The updated transparency value is obtained from the transparency slider step value in the GUI interface.

[0293] 4.2 Real-time feedback

[0294] Angle updated immediately

[0295]

[0296] Transformation matrix update:

[0297]

[0298] 4.3 Performance Optimization

[0299] Techniques such as incremental updates and dirty marking are used to ensure smooth interaction and maintain a high frame rate.

[0300] Node dirty flags are used to compare the joint change states of the current frame and the previous frame. Each node uses a boolean flag for this determination.

[0301] dirty ) =

[0302] dirty ): Node Dirty mark;

[0303] :Parent node reference

[0304] Incremental update of transformation matrix:

[0305] T_world( ) =

[0306] 4.4 Visual Effects Update

[0307] The visual effects are updated in real time based on user interaction, including transparency blending, color transitions, and highlight effects.

[0308] 4.4.1 Transparency Mixing System

[0309] Transparency blending is the core technology for processing semi-transparent objects. It uses the Alpha blending formula to combine the current fragment color with the existing color in the frame buffer to achieve transparent and semi-transparent visual effects.

[0310] Transparency blending formula update

[0311] C_result = α × C_source + (1 - α) × C_destination

[0312] Each color comprises four components: R, G, B, and A, corresponding to the three primary colors red, green, and blue, and transparency. The specific expression for each component is as follows:

[0313] C_result_R = α × C_source_R + (1 - α) × C_destination_R

[0314] C_result_G = α × C_source_G + (1 - α) × C_destination_G

[0315] C_result_B = α × C_source_B + (1 - α) × C_destination_B

[0316] C_result_A = α × C_source_A + (1 - α) × C_destination_A

[0317] C_source: Source color (current fragment), output of the fragment shader.

[0318] C_destination: Target color (frame buffer), read from the current frame buffer.

[0319] α: Transparency value, obtained from the material properties in the URDF file.

[0320] C_result: The blended result, written to the framebuffer.

[0321] 4.4.2 Color Transition System

[0322] Color transitions achieve smooth changes in material color, avoiding abrupt color changes and improving visual comfort.

[0323] The exponential smooth transition results in more natural color reproduction.

[0324] C_current = C_previous + (C_target - C_previous) × (1 - e^(-k×Δt))

[0325] Component calculation:

[0326] R_current = R_previous + (R_target - R_previous) × (1 - e^(-k×Δt))

[0327] G_current = G_previous + (G_target - G_previous) ×(1 - e^(-k×Δt))

[0328] B_current = B_previous + (B_target - B_previous) × (1 - e^(-k×Δt))

[0329] A_current = A_previous + (A_target - A_previous) × (1 - e^(-k×Δt))

[0330] C_previous: Stores the material color state of the previous frame.

[0331] C_target: User selection: Get RGB values ​​from the color picker.

[0332] k: Fast transition: k = 8-10 (emergency state change) Medium transition: k = 3-5 (normal state change) Slow transition: k = 1-2 (background color change)

[0333] 4.4.3 Specular Dynamic Effects

[0334] I_s_specular = I_s_base × (1 + A × sin(2π × f × t))

[0335] I_s_base: Base specular intensity, obtained from the URDF file; if not found, it is 0.5.

[0336] A: Amplitude coefficient, controls the variation range of the highlight dynamic effect. It can be adjusted by the user using a GUI slider, ranging from [0-1], with a default value of 0.3.

[0337] f: Frequency, controls the speed at which the highlight dynamic effect changes. It can be adjusted by the user using a GUI slider, ranging from [0.05-15], with a default value of 1.

[0338] t: System uptime

[0339] 4.4.4 Motion Fuzzy Simulation System

[0340] For transparency interaction, three different levels of transparency interaction control modes are provided, derived from the following formulas; each corresponding to different usage scenarios and adjustment needs: the first is automatic transparency adjustment on mouse hover, the second is user-defined transparency adjustment, and the third is widget hiding function.

[0341] ,

[0342] In the formula: For the updated transparency, For initial transparency, , , These are hidden mode, mouse hover mode, and user-adjustable mode.

[0343] This invention also discloses a self-built and shared system for mechanism animation models based on WebGL and URDF. The system mainly includes a preprocessing module, a loading module, a running module, and an interaction module. These modules work together to achieve a complete process from importing and parsing the mechanism model, motion simulation, to interactive control within a web browser. Specifically:

[0344] The preprocessing module is responsible for connecting with the original mechanism model created by the user using 3D modeling software.

[0345] The loading module runs in a browser environment that supports WebGL and is responsible for parsing URDF files and building renderable 3D scenes.

[0346] The runtime module is the core computing and rendering engine of the system, responsible for driving the movement of the mechanism. It includes the following: parameter reception and kinematic calculation. The module provides an API interface to receive the mechanism's motion parameters input by the user through the interface. Based on the kinematic model defined in URDF, the module calculates the state values ​​of relevant joints in real time. Scene graph updating and rendering: Based on the kinematic calculation results, the module updates the transformation matrices of the corresponding joint nodes in the scene graph, thereby changing the position and orientation of each component in the model in 3D space. The updated scene graph is redrawn frame by frame by the WebGL rendering pipeline, achieving smooth and realistic 3D animation effects of the mechanism.

[0347] The interaction module is responsible for handling real-time interaction between the user and the 3D animation model, enhancing the user experience.

[0348] The present invention also discloses an electronic device for implementing the above-mentioned self-built and shared method for mechanism animation models based on WebGL and URDF.

[0349] The electronic device includes:

[0350] One or more processors, such as a central processing unit (CPU);

[0351] Memory, used to store executable instructions;

[0352] Input or output interfaces are used to interact with external devices, such as monitors, mice, and keyboards, to exchange data.

[0353] A communication interface used for data transmission over a network.

[0354] The memory stores a computer program that can run on the processor; when the processor executes the computer program, it implements the method steps described in the foregoing system embodiments.

[0355] This application's technical solution eliminates the dependence of traditional mechanism simulation software on specific equipment and complex environments. By utilizing the GPU computing power of the user's local computer, it enables smooth and high-precision mechanism motion simulation within a common web browser. Through a web-based architecture, users can access the system anytime, anywhere via a browser, conveniently adjusting parameters in real time and observing dynamic movements from multiple perspectives, thereby gaining an intuitive and in-depth understanding of the mechanism's motion mechanisms and working principles. Furthermore, the system establishes an open model-sharing ecosystem, supporting different users to upload and share their self-built mechanism models, and vividly demonstrating the motion process of complex mechanisms through custom animations, greatly promoting the exchange and dissemination of technical knowledge.

[0356] Finally, it should be noted that the above are merely preferred embodiments of the present invention and are not intended to limit the present invention. Although the present invention has been described in detail with reference to the embodiments, those skilled in the art can still modify the technical solutions described in the foregoing embodiments or make equivalent substitutions for some of the technical features. However, any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.< / axis>

Claims

1. A method for building and sharing a mechanism animation model based on WebGL and URDF, characterized in that, The method comprises the following steps: A preprocessing stage: obtaining a mechanism model created by a user in a three-dimensional modeling software, and exporting the model into a URDF format file containing link information and joint information; A loading stage: parsing the URDF format file in a browser environment, extracting link and joint data therein, and constructing a WebGL scene graph according to the extracted data, the scene graph being a tree structure, a base link being a root node, and a joint being inserted between a parent link and a child link as a transformation node; A running stage: receiving mechanism motion parameters input by the user through a graphical interface, performing kinematics calculation according to the motion parameters, updating transformation matrices of nodes in the scene graph, and performing three-dimensional rendering based on the updated scene graph through WebGL; An interaction stage: updating motion calculation results and visual effects in response to real-time adjustment of mechanism motion parameters and visual parameters by the user, and feeding back in real time in the graphical interface.

2. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 1, characterized in that, The preprocessing stage further comprises resource optimization for optimizing the three-dimensional model, including: An edge collapse algorithm is used to simplify the model mesh, and the number of vertices is reduced by iteratively merging edges with minimum error, wherein the edge collapse cost function is: , wherein are the two vertices of the edge, Q is the quadratic form of the squared sum of the distances of the vertices to all adjacent planes; Based on the distance from the camera to the object, a level of detail technique is used to dynamically switch between different levels of detail of the model.

3. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 2, characterized in that, The implementation of the level of detail technique comprises: Computational basis enclosing sphere radius: ; The reference switching distance is calculated according to the model enveloping sphere radius r: , ; A complexity factor k is calculated as a function of the number of vertices N_v of the model: k = log 10 (N_v / 1000); k represents the complexity factor; Calculating the actual switching distance: ; is a distance from the camera to the object, , is a distance threshold, When the camera distance < When using a high-detail model, ≤ < When using detailed models, when ≥ Use low-detail models.

4. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 1, characterized in that, The scene graph construction in the loading stage comprises: For each joint, compute its local transformation matrix: , Wherein T_fixed is a fixed transformation matrix of the joint, T_joint(q) is a motion transformation matrix of the joint, and q is a joint variable; A recursive algorithm is used to calculate the transformation matrix of each node in the world coordinate system: If i is the root node, then T_world(i) = I4; otherwise, T_world(i) = T_world(parent(i)) × T_local(i).

5. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 4, characterized in that, The motion transformation matrix T_joint(q) of the joint is calculated according to the joint type: For revolute joints: , wherein : joint axis unit vector; : angle of the i-th revolute joint; : the i-th joint axis rotation rotation matrix of an angle; the specific expression can be derived from the Rodrigues formula as: For prismatic joints: , : translation distance, joint variable; translation is along the direction in the parent link coordinate system : performed; For fixed joints: no relative motion, the transformation matrix is unit 1, 。 6.The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 1, wherein, The kinematics calculation in the running stage comprises: For revolute joints, the joint angle is calculated as: , : time instant first angle of the first revolute joint : initial time joint angle at the initial time, obtained from the URDF joint initial state or the previous frame state; : user set reference angular velocity (rad / s) : current time (seconds); : Initial time (sec); For prismatic joints: , : time first displacement of the first prismatic joint (meters); : initial time instant joint displacement; Joint limit processing formula: , = , , : angle limit of the ith revolute joint, set from the joint element in the URDF file; , : Displacement limit of the ith prismatic joint, set from the joint element in the URDF file.

7. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 1, characterized in that, The visual effect update in the interaction stage comprises at least one of the following: For transparency interaction, three different levels of transparency interaction control modes are provided, obtained from the following formula; corresponding to different use scenarios and adjustment requirements; the first is mouse hover transparency automatic adjustment, the second is user-defined transparency adjustment, and the third is component hiding function: , In the formula: is the updated transparency, is the initial transparency, , , are the hidden mode, the mouse-over mode, and the user-adjusted mode, respectively. Dynamic specular effect: based on time modulation specular intensity, I_s_specular = I_s_base × (1 + A ×sin(2π × f × t)); I_s_base: basic specular intensity, obtained from the URDF file, if not, 0.5; A: amplitude coefficient, controls the change amplitude of the dynamic highlight effect, can be adjusted by the user GUI slider, range in [0-1], default value is 0.3; f: frequency, controls the change speed of the dynamic highlight effect, can be adjusted by the user GUI slider, range in [0.05-15], default value is 1; t: system running time; Color smooth transition: color transition realizes smooth change of material color, avoids color jump, and improves visual comfort; Exponential smoothing transition is adopted to make color performance more natural: C_current = C_previous + (C_target - C_previous) × (1 - e^(-k×Δt)); Component calculation: R_current = R_previous + (R_target - R_previous) × (1 - e^(-k×Δt)); G_current = G_previous + (G_target - G_previous) ×(1 - e^(-k×Δt)); B_current = B_previous + (B_target - B_previous) × (1 - e^(-k×Δt)); A_current = A_previous + (A_target - A_previous) × (1 - e^(-k×Δt)); C_previous: store the material color state of the previous frame; C_target: user selection: get RGB value from color selector; k: fast transition: k = 8-10; medium transition: k = 3-5; slow transition: k = 1-2.

8. The WebGL and URDF-based mechanism animation model self-building and sharing method according to claim 1, characterized in that, It also includes performance optimization steps: Set dirty flags for each node in the scene graph to compare the joint change state of the current frame and the previous frame, and each node uses a Boolean flag to determine: dirty( ) = , dirty( ): dirty flag of a node ​ : parent reference; Transformation matrix incremental update: T_world( ) = 。 9. A WebGL and URDF-based mechanism animation model self-building and sharing system, characterized in that, It includes: A preprocessing module for obtaining and optimizing an institution model created by a user in a three-dimensional modeling software, and exporting the model into a URDF format file; A loading module for parsing the URDF format file in a browser environment, and constructing a WebGL scene graph according to the parsing result; A running module for receiving institution motion parameters input by the user, performing kinematics calculation, updating the scene graph transformation matrix, and performing three-dimensional rendering through WebGL; An interaction module for updating the motion calculation result and visual effect in response to real-time parameter adjustment of the user.

10. An electronic device, comprising: A processor, a memory, and a computer program stored on the memory and executable on the processor, wherein the processor implements the method of any one of claims 1-8 when executing the computer program.