A webGL-based three-dimensional model action rapid configuration method
By simplifying the production of 3D model animations using a WebGL-based approach, the problem of complex animation configuration in existing technologies is solved, enabling rapid configuration and multiple playback modes, thereby improving the efficiency and flexibility of animation production.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- SHENYANG INST OF AUTOMATION - CHINESE ACAD OF SCI
- Filing Date
- 2022-05-27
- Publication Date
- 2026-05-29
AI Technical Summary
The existing 3D animation production process is cumbersome, makes it difficult to quickly configure motion, and cannot meet various playback requirements.
By employing a WebGL-based approach, we can acquire 3D scene objects by listening for mouse clicks, generate animation sequence index values, configure time scales and animation attributes, and achieve rapid configuration and playback of 3D model actions.
It simplifies the 3D model animation production process and supports single-step playback, pause, resume playback, and loop playback, improving the efficiency and flexibility of animation production.
Smart Images
Figure CN117173289B_ABST
Abstract
Description
Technical Field
[0001] This invention relates to a method for configuring 3D model animation, belonging to the field of 3D model processing technology. Background Technology
[0002] 3D animation involves creating a virtual world in a computer and producing the animation through a series of processes including modeling, materials, texturing, lighting, animation, camera control, and rendering. Modeling involves creating models of the objects, characters, and scenes according to their shapes and sizes. After creating the models, specific materials are applied to give them lifelike surface characteristics, such as color, transparency, reflectivity, reflectivity intensity, self-illumination, and roughness. Texturing involves applying two-dimensional images to the 3D model using software calculations to create surface details and structure. Lighting aims to simulate natural and artificial light types as closely as possible. The movement paths of the models, camera, and other animation parameters are then set according to requirements. Changes in movement and image quality are achieved through keyframes, with the main frames of the animation defined as keyframes, and transitions between keyframes handled by the computer. Rendering involves the program drawing a complete image or animation based on the scene settings, the applied materials and textures, and the lighting.
[0003] 3D animation is an emerging technology that is rapidly developing. With the advancement of production software and media technologies, 3D animation has gone from being unknown to being ubiquitous. It has entered our lives and is widely used in the production of special effects in advertising, film and television, and games. It has now expanded to fields such as industrial machinery animation (mechanical parts animation, engine animation), product production process animation (product production flow), industrial product animation (car animation, airplane animation), and electronic product animation (mobile phone animation, monitoring instrument animation). 3D animation plays an important role in various fields, making the virtual three-dimensional world look more realistic. Summary of the Invention
[0004] The main technical problem solved by this invention is to provide a method for quickly configuring 3D model animations based on WebGL. This method for creating 3D model animations simplifies the cumbersome steps in the 3D model animation production process, has a wide range of applications, and can simultaneously meet various animation playback needs, including: single-step playback, pause, resume playback, loop playback, and adjusting the timeline pointer on the time scale to start playback.
[0005] The technical solution of this invention is as follows: A method for rapid configuration of actions for a 3D model based on WebGL, comprising the following steps:
[0006] S1: By listening to mouse click events on the screen, obtain the two-dimensional coordinates of the click location on the screen, and extend a ray along the direction of the camera view based on the two-dimensional coordinates and the line connecting the camera to form a ray so that the ray intersects with objects in the three-dimensional scene; receive all objects that intersect with the ray to form an object array, sort them according to the distance between the objects and the camera, and take the first intersecting object as the target object of the mouse click.
[0007] S2: Generate a unique index value for the animation sequence based on the target object specified by the user;
[0008] S3: Listen for animation events, record the state and data of the animation events, add a unique index value to the target object to form an animation sequence, and add it to the collection of animation listeners;
[0009] S4: Invoke the animation panel to build a time scale;
[0010] S5: Add time nodes to the time scale and set breakpoints to record data: By listening to mouse move and mouse lift events, trigger the pointer on the time scale, and set the leftward offset of the pointer by dragging it; when the distance the pointer slides is equal to the maximum scale mark of the time scale, set it to the maximum boundary value; when the distance slides is equal to the minimum scale mark of the time scale, set it to the minimum boundary value; receive the time node selected by the user and send the status of whether the animation for that time node has been created to the collection of monitored animations;
[0011] S6: Configure target object animation: Adjust the animation properties of the target object for this time node, and determine whether the current time node has been saved; if the time node is not monotonically sorted, rearrange the order in ascending order, and finally store the animation properties contained in this time node in a temporary animation activity queue, and send the motion data of the target object to the listening animation collection.
[0012] S7: Repeat steps 5 to 6 until the animation properties of all time nodes are configured, then fill in the animation name and save it to the database.
[0013] In step S4, the process of calling the animation panel and constructing a time scale is as follows: the number of scale segments is obtained based on the step size and canvas width, scale lines are marked at each scale segment, and scale values are added.
[0014] In step S6, the animation attributes are used to configure the target object's motion mode, total motion duration, motion time interval, and motion amplitude; including: modifying the horizontal, vertical, and top-view coordinates of the control object's position; modifying the horizontal, vertical, and top-view coordinates of the control object's rotation; and modifying the horizontal, vertical, and top-view coordinates of the control object's scale.
[0015] In step S6, if a deletion event is executed, an animation deletion status is sent to the listening animation collection. The user confirms whether the animation should be completely deleted. After the delete event is completed, the animation segment is removed from the temporary animation activity queue.
[0016] A method for quickly configuring 3D model animations based on WebGL, including a method for playing 3D model animation sequences, comprising the following steps:
[0017] S11: Upon receiving the instruction to trigger playback, the system searches the database for the target object corresponding to the index value based on the unique identifier of the animation sequence.
[0018] S12: Read the animation properties of each time interval in chronological order;
[0019] S13: Based on the read content, iterate through the motion data of each time period in the animation sequence, execute the playback event, and disable the mouse to trigger the pointer command on the time ruler.
[0020] S14: Start the animation timer, calculate the time scale displacement, playback duration, and model motion mode;
[0021] S15: Finally, calculate the relationship between the time scale displacement, playback time length, and target object movement speed according to the timer's specified period, and input the target object name, movement direction, start position, end position, and movement time to restore the target object's movement process in sequence.
[0022] In step S13, the motion data from the starting time point and the motion data from the next ending time point are calculated by linear interpolation to perform numerical estimation on the two nearest data points to the interpolation point to achieve weight averaging.
[0023] Step S14 is as follows:
[0024] First, calculate the displacement of the time scale, calculate the total length of the starting and ending pointer positions, calculate the total time to obtain the average movement speed, and make the pointer follow the target object on the scale.
[0025] Next, the motion of the target object is calculated, the total time is calculated, and the direction and mode of motion of the target object are determined.
[0026] The motion data includes the offset of the target object's position (Position), the rotation difference of the target object's rotation (Rotation), and the scaling factor of the target object's scale (Scale).
[0027] A WebGL-based device for rapid configuration of 3D model animations includes a memory and a processor; the memory is used to store a computer program; the processor is used to implement the WebGL-based method for rapid configuration of 3D model animations when the computer program is executed.
[0028] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the WebGL-based method for rapid configuration of 3D model actions.
[0029] The beneficial effects and advantages of this invention are as follows:
[0030] Once a 3D animation is created, it can be reused in subsequent animations and can be fine-tuned according to specific needs without having to be remade, thus saving a lot of costs and time for project development.
[0031] 2. This invention provides a method for quickly configuring 3D model animations based on WebGL. This method simplifies the cumbersome steps in the 3D model animation production process, has a wide range of applications, and can simultaneously meet various animation playback needs, including: single-step playback, pause, resume playback, loop playback, and adjusting the timeline pointer on the time scale to start playback.
[0032] 3. It allows users to present their vision to the company clearly and creatively in a visual way, and attracts more viewers to watch the product or service. In three-dimensional space, the product can be rotated, separated and displayed from any view. This level of detail is difficult to achieve in 2D. It is more professional and beautiful than real-time motion demonstration. Attached Figure Description
[0033] Figure 1 This is the overall flowchart for configuring actions on a 3D model;
[0034] Figure 2 It is a flowchart for creating 3D model animations;
[0035] Figure 3 This is an operation diagram for implementing the method of playing a sequence of 3D model animations. Detailed Implementation
[0036] To make the objectives, technical solutions, and advantages of this invention clearer, practical examples are given here and further explanation is provided with reference to the accompanying drawings.
[0037] This invention is a method for rapidly configuring animations for 3D models based on WebGL. First, the completed 3D model is imported into the scene. Data information associated with the selected model is picked up by clicking with the mouse and added to the animation queue. Then, operations such as displacement, scaling, and rotation of the model data can be performed in different dimensions. Multiple sets of model animation parameters with different time intervals are set to form an animation sequence. This animation simultaneously satisfies conditions such as single-step playback, pause, resume playback, loop playback, and starting playback by adjusting the timeline pointer on the time scale. This invention can be widely applied to various 3D scenes, is simple to operate, highly versatile, and flexible.
[0038] A method for rapid configuration of animations for 3D models based on WebGL includes the following steps, such as... Figure 1 As shown:
[0039] S1: Import the completed 3D model
[0040] 3D models are typically generated using specialized software such as 3D modeling tools (3DMAX, AutoCAD, MAYA, etc.). A standard, completed 3D model consists of a mesh and textures. The mesh is composed of numerous point clouds of an object, forming the 3D model mesh. Textures include both the surface texture of an object in the conventional sense, such as the uneven grooves on the object's surface, and also colored patterns on the smooth surface of an object, also known as texture mapping.
[0041] S2: Mouse picks up model data information
[0042] Raycasting is a method that uses geometric intersection calculations. It emits a ray from the mouse click point along the view direction and determines whether an object is picked up based on the geometric intersection of the ray and the 3D model. This method can pick up objects at all depths, so by default it only detects objects at the current level, ignoring child objects. It sequentially picks up the model's world coordinates, rotation angle, scaling factor, name, material texture, parent model, and child model information.
[0043] S3: Add model name to animation queue
[0044] In this method, the user selects an object, adds the model object name to the animation list panel, establishes a temporary animation activity queue, and determines a unique index value to identify and distinguish different model animations.
[0045] S4: Configure 3D model animation data
[0046] This feature primarily configures the motion mode, total motion duration, motion intervals, and motion amplitude of the model selected by the mouse, among other 3D animation data. The animation configuration panel allows users to drag the pointer on the time scale left and right to view the corresponding time values. Dragging to a specific time point adds a new time point, setting the motion data for the target object at that moment. This process is repeated n times. Once all configurations are complete, the time and motion data are added to a temporary animation activity queue. The motion time data for each time segment of the target animation is arranged chronologically, and each time segment's data corresponds to the model's motion data. This facilitates understanding the animation's motion status.
[0047] S5: Save animation
[0048] For a configured temporary animation sequence, the user sets the name to save the animation and then stores it in the database. After successful saving, the user can retrieve the animation data and reconstruct the model's motion process using a unique index value.
[0049] S6: Play Animation List
[0050] After the configured animation list executes a playback event, an animation segment plays at a constant speed from the start time. The timeline pointer on the time scale moves accordingly, and the current playback time and total time are displayed above the timeline. The animation continues until the last control point is reached, at which point the animation ends, the model stops moving, and the timeline pointer also stops moving. Besides playing complete animations, this invention can also execute pause events, resume playback events, loop playback events, and adjust the timeline on the time scale to start playback. It can also play the animation step-by-step from one time control point to the next, allowing for easy viewing of the specific effects of each step.
[0051] A method for quickly configuring animations for 3D models based on WebGL, the production process includes the following steps:
[0052] First, create a flowchart for the 3D model animation, such as... Figure 2 As shown: This demonstrates the implementation ideas for creating model animations.
[0053] S1: By listening for mouse click events, the 2D coordinates of the screen are obtained. WebGL provides the raycasting model, which connects the 2D coordinates to the camera and extends a ray in the direction of the camera's viewpoint. This ray intersects with objects in the 3D scene. All these intersecting objects are collected into an object array, sorted by distance. The first object is closest to the camera, and the last object is farthest. Generally, the first intersecting object is used as the target object for mouse clicks.
[0054] S2: Generate a unique index value for the animation sequence for the target object specified by the user.
[0055] S3: Create a collection of animation listeners, record various states and animation data of animation events, add the unique index value of the target object, and initialize the animation collection.
[0056] S4: Call the animation panel, use the canvas drawing function to draw a time scale, set the total duration in seconds (s), calculate the width / step scale segment number based on the step size of 10 and the canvas width, draw scale lines at each scale segment number, and add scale values.
[0057] S5: Add time nodes to the time scale and set breakpoints to record data: Listen for mousemove and mouseup events to trigger the drag-and-drop pointer functionality. Drag the pointer left and right on the time scale, setting the left offset. When the sliding distance equals the maximum scale mark, set it to the maximum boundary value; when the sliding distance equals the minimum scale mark, set it to the minimum boundary value. Once the user determines the time node, send the animation creation status to the animation listener collection and execute the configured animation functions as described below.
[0058] S6: Configure Target Object Animation: Execute the `set` method to adjust the animation properties of the target object at this time node. These animation properties configure the target object's movement mode, total movement duration, movement time interval, movement amplitude, and other 3D animation data. This includes: modifying the x (horizontal coordinate), y (vertical coordinate), and z (top-view coordinate) values of the control object's position (Position) to increase or decrease the offset; modifying the x (horizontal coordinate), y (vertical coordinate), and z (top-view coordinate) values of the control object's rotation (Rotation) to change the rotation angle; and modifying the x (horizontal coordinate), y (vertical coordinate), and z (top-view coordinate) values of the control object's scale (Scale). The system uses coordinates to control the size of objects and averages weights using linear interpolation to achieve smooth transitions between multiple animations. It then checks if the current time node has been saved to prevent duplicate data additions. If the time nodes are out of order, they are rearranged in ascending order. Finally, the animation attributes contained within that time node are stored in a temporary animation activity queue. The system sends the target object's motion data to the listening animation collection. If a deletion event is executed, the system sends the animation deletion status to the listening animation collection. The user confirms whether to completely delete the animation. After the deletion event is actually executed, the animation segment is removed from the temporary animation activity queue.
[0059] S7: Repeat steps 5 and 6 until the animation properties of all time nodes are configured. Then, fill in the animation name and save it to the database. This process is the process of recording a complete animation effect.
[0060] Next, we will introduce the operation diagram for implementing the method of playing a 3D model animation sequence, such as... Figure 3 The diagram illustrates the implementation approach for animation playback.
[0061] S1: Upon receiving the instruction to trigger playback, the system searches the database for the target object corresponding to the index value based on the unique identifier of the animation sequence.
[0062] S2: Read the movement pattern, total movement duration, movement time interval, and movement amplitude for each time period in chronological order.
[0063] S3: Based on the read content, iterate through the motion data of each time segment in the animation sequence, execute the playback event, and simultaneously disable mouse-triggered pointer commands on the time scale. Using linear interpolation, calculate the values of the two nearest data points to the left and right of the interpolation points to achieve weighted averaging, thereby achieving a smooth animation effect.
[0064] S4: Start the animation timer (setInterval) to calculate the time scale displacement, playback duration, and target object movement. Taking the time from the start point to the second time point as an example, the calculation method is explained in detail:
[0065] First, calculate the displacement of the time scale, calculate the total length of the starting and ending pointer positions, calculate the total time, and obtain the average motion rate according to the calculation formula, so that the pointer follows the target object on the scale in a smooth manner.
[0066] Next, the motion of the target object is calculated. The total time is calculated in the same way as the above steps. The direction and mode of motion of the target object are determined. Taking the displacement Position as an example, the X, Y, Z coordinates of the starting position and the X, Y, Z coordinates of the ending position are read. The total offset of each dimension is calculated in three dimensions. The value between the two points is estimated by linear interpolation. The set method is called to set the displacement data of the target object.
[0067] Finally, based on the timer's specified period (in milliseconds), the relationship between the time scale displacement, playback duration, and target object movement speed is calculated. The tweenMove method is then called, passing in parameters such as the target object name, the direction of movement, the start position, the end position, and the movement time, to reconstruct the target object's movement process.
[0068] After all animations have finished playing, clear the timer and proceed to determine whether to reinitialize. If yes, reinitialize the playback operation; otherwise, return to the initial point and wait for the next operation command. For loop playback, skip the judgment step, reinitialize directly, start the timer, and continue playback.
[0069] Based on the playback operation, some other operations have been derived, including: pausing animation, resuming playback, single-step playback, and adjusting the pointer on the time scale to start playback. The following sections will explain how to operate and implement these operations.
[0070] 1. Pause animation: After triggering the pause animation command, stop the timer, pause the model set method and pointer translation method, and record the value of the target object's movement at this moment.
[0071] 2. Continue playback: Trigger the continue playback command, take the current time point as the start time point and the current target object position as the start position, execute the above-mentioned start animation timer setInterval playback method, and continue playing along the timeline until the end time point.
[0072] IV. Single-step playback: Triggering a single-step playback command is similar to starting the animation timer using `setInterval`, except that after playing from the current time point to the next time point, the animation timer stops, pausing the target object's `set` method and pointer translation method. At this point, the target object's displacement, rotation, and scaling values no longer change. If another single-step playback command is received, the target object's value at the current time point will be used as the starting value, and the value at the next time point will be used as the ending value. This time interval is used as the motion time to calculate the target object's motion process.
[0073] 5. Adjust the pointer on the time scale to start playback. Trigger the drag-and-drop function as needed. Drag the pointer on the time scale left and right to set the left offset of the pointer. Stop at a certain time point. The animation value of the target object will be calculated according to this time value. Then, the animation timer setInterval playback method will be used to continue playing the complete animation.
[0074] The above provides a detailed explanation of the implementation of this method, demonstrating the process of quickly configuring 3D model animations based on WebGL. This method can be applied to simulating human walking movements or to simulating robotic arm production in factories, providing a more intuitive visual experience and allowing users to clearly view the animation effects, thus attracting viewers to the product or service. This method primarily focuses on the versatility of 3D model animation, detailing the specific configuration methods from importing 3D models and adding control objects to playing the animation list. This fully demonstrates the invention's strong versatility and ease of operation.
Claims
1. A method for rapid configuration of actions for 3D models based on WebGL, characterized in that, Includes the following steps: S1: By listening to mouse click events on the screen, the two-dimensional coordinates of the click location on the screen are obtained. A ray is formed by extending the two-dimensional coordinates and the line connecting the camera in the direction of the camera's view, so that the ray intersects with objects in the three-dimensional scene. Receive all objects that intersect with the ray to form an object array, sort the objects according to their distance from the camera, and use the first intersecting object as the target object for mouse click; S2: Generate a unique index value for the animation sequence based on the target object specified by the user; S3: Listen for animation events, record the state and data of the animation events, add a unique index value to the target object to form an animation sequence, and add it to the collection of animation listeners; S4: Invoke the animation panel to build a time scale; S5: Add time nodes to the time scale and set breakpoints to record data: By listening to mouse move and mouse lift events, trigger the pointer on the time scale, and set the leftward offset of the pointer by dragging it; when the distance the pointer slides is equal to the maximum scale mark of the time scale, set it to the maximum boundary value; when the distance slides is equal to the minimum scale mark of the time scale, set it to the minimum boundary value; receive the time node selected by the user and send the status of whether the animation for that time node has been created to the collection of monitored animations; S6: Configure target object animation: Adjust the animation properties of the target object for this time node, and determine whether the current time node has been saved; if the time node is not monotonically sorted, rearrange the order in ascending order, and finally store the animation properties contained in this time node in a temporary animation activity queue, and send the motion data of the target object to the listening animation collection. S7: Repeat steps 5 to 6 until the animation properties of all time nodes are configured, then fill in the animation name and save it to the database.
2. The method for rapid configuration of actions for a 3D model based on WebGL according to claim 1, characterized in that, In step S4, the process of calling the animation panel and constructing a time scale is as follows: the number of scale segments is obtained based on the step size and canvas width, scale lines are marked at each scale segment, and scale values are added.
3. The method for rapid configuration of 3D model actions based on WebGL according to claim 1, characterized in that, In step S6, the animation attributes are used to configure the target object's motion mode, total motion duration, motion time interval, and motion amplitude; including: modifying the horizontal, vertical, and top-view coordinates of the control object's position; modifying the horizontal, vertical, and top-view coordinates of the control object's rotation; and modifying the horizontal, vertical, and top-view coordinates of the control object's scale.
4. The method for rapid configuration of 3D model actions based on WebGL according to claim 1, characterized in that, In step S6, if a deletion event is executed, an animation deletion status is sent to the listening animation collection. The user confirms whether the animation should be completely deleted. After the delete event is completed, the animation segment is removed from the temporary animation activity queue.
5. The method for rapid configuration of actions for a 3D model based on WebGL according to claim 1, characterized in that, It also includes a method for playing 3D model animation sequences, comprising the following steps: S11: Upon receiving the instruction to trigger playback, the system searches the database for the target object corresponding to the index value based on the unique identifier of the animation sequence. S12: Read the animation properties of each time interval in chronological order; S13: Based on the read content, iterate through the motion data of each time period in the animation sequence, execute the playback event, and disable the mouse to trigger the pointer command on the time ruler. S14: Start the animation timer, calculate the time scale displacement, playback duration, and model motion mode; S15: Finally, calculate the relationship between the time scale displacement, playback time length, and target object movement speed according to the timer's specified period, and input the target object name, movement direction, start position, end position, and movement time to restore the target object's movement process in sequence.
6. The method for rapid configuration of 3D model actions based on WebGL according to claim 5, characterized in that, In step S13, the motion data from the starting time point and the motion data from the next ending time point are calculated by linear interpolation to perform numerical estimation on the two nearest data points to the interpolation point to achieve weight averaging.
7. The method for rapid configuration of 3D model actions based on WebGL according to claim 5, characterized in that, Step S14 is as follows: First, calculate the displacement of the time scale, calculate the total length of the starting and ending pointer positions, calculate the total time to obtain the average movement speed, and make the pointer follow the target object on the scale. Next, the motion of the target object is calculated, the total time is calculated, and the direction and mode of motion of the target object are determined.
8. A method for rapid configuration of actions for a 3D model based on WebGL according to claim 1 or 5, characterized in that, The motion data includes the offset of the target object's position (Position), the rotation difference of the target object's rotation (Rotation), and the scaling factor of the target object's scale (Scale).
9. A WebGL-based device for rapid configuration of motion in 3D models, characterized in that, It includes a memory and a processor; the memory is used to store a computer program; the processor is used to implement, when executing the computer program, a method for rapid configuration of WebGL-based 3D model actions as described in any one of claims 1-8.
10. A computer-readable storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements a method for rapid configuration of WebGL-based 3D model actions as described in any one of claims 1-8.