Method, device and equipment for displaying high-frequency dynamic data in browser and storage medium

Abstract

The invention provides a method, device and equipment for displaying high-frequency dynamic data in a browser and a storage medium, and belongs to the technical field of animation emulation.The method comprises the steps that a scene, a camera and a renderer are created based on Three.js, and the scene and the camera are rendered to a screen of the browser based on the renderer; creating a plane geometric body and a material ShaderMaterial, and adding the geometric body and the material ShaderMaterial into the scene; and obtaining high-frequency dynamic data, and updating the high-frequency dynamic data to the ShaderMaterial in real time, so as to complete the display of the high-frequency dynamic data. According to the method, the display of the high-frequency dynamic data is realized based on Three.js, efficient data calculation and rendering are realized, and the display efficiency, the application range and the interaction performance of the high-frequency dynamic data are improved.

Description

Technical Field

[0001] The present invention relates to the field of animation simulation technology, and in particular to a method, device, equipment and storage medium for displaying high-frequency dynamic data in a browser. Background Art

[0002] In modern engineering and scientific research, the visualization of high-frequency dynamic data such as stress and strain is becoming increasingly important.

[0003] Traditionally, when users want to view the visualization of these high-frequency dynamic data, they usually have only two options: 1. Use professional data analysis client software such as ANSYS. 2. View recorded animation videos. However, the above two solutions have their own disadvantages. First, professional software such as ANSYS is often large in size (several GB) and requires professional knowledge to operate, which basically eliminates the possibility of large-scale dissemination. Second, although the video can display dynamic data, its picture is fixed, and it is impossible for the viewer to view the details of the visualization effect at will.

[0004] Therefore, there is an urgent need to provide a method, device, equipment and storage medium for displaying high-frequency dynamic data in a browser to replace the traditional bulky client and non-interactive video mode, and provide a data display method that can display and analyze these data anytime and anywhere. Summary of the invention

[0005] In view of this, it is necessary to provide a method, device, equipment and storage medium for displaying high-frequency dynamic data in a browser to solve the technical problems existing in the prior art that require professional knowledge, result in low applicability and lack of interaction.

[0006] On the one hand, in order to solve the above technical problems, the present invention provides a method for displaying high-frequency dynamic data in a browser, comprising: Creating a scene, a camera, and a renderer based on Three.js, and rendering the scene and the camera onto a screen of a browser based on the renderer; Create a plane geometry and a material ShaderMaterial, and add the geometry and the material ShaderMaterial to the scene; Acquire high-frequency dynamic data, and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of the high-frequency dynamic data.

[0007] In a possible implementation, updating the high-frequency dynamic data to the material ShaderMaterial in real time includes: Acquire data coordinates of the high-frequency dynamic data and data values ​​corresponding to the data coordinates one by one; Acquire the screen coordinates of the screen, and convert the data values ​​into the screen based on a preset interpolation algorithm to obtain a plurality of screen data values ​​corresponding to the screen coordinates one by one; The multiple screen data values ​​are updated to the ShaderMaterial in real time.

[0008] In a possible implementation, updating the multiple screen data values ​​to the ShaderMaterial in real time includes: Acquire a plurality of preset colors and color boundaries of the plurality of colors; Performing linear interpolation on the plurality of colors based on the screen data value and the color boundary to obtain an interpolated color corresponding to the screen data value; The screen data value is displayed in real time based on the interpolated color.

[0009] In one possible implementation, the interpolation algorithm is:

[0010] In the formula, is the screen data value of point P; is the screen coordinate of point P; Q 11 The screen data value of the point; Q 12 The screen data value of the point; Q 21 The screen data value of the point; Q 22 The screen data value of the point; Q 11 The screen coordinates of the point; Q 12 The screen coordinates of the point; Q 21 The screen coordinates of the point; Q 22 The screen coordinates of the point.

[0011] In a possible implementation, the method further includes: The requestAnimationFrame method is used to render the scene in a loop, so that the high-frequency dynamic data is played in a loop.

[0012] In a possible implementation, the method further includes: Get new high-frequency dynamic data based on AJAX requests; The new high-frequency dynamic data is updated in real time to the material ShaderMaterial to complete the display of the new high-frequency dynamic data.

[0013] In a possible implementation, updating the new high-frequency dynamic data to the material ShaderMaterial in real time includes: Determine difference data in the new high-frequency dynamic data that is different from the high-frequency dynamic data; The difference data is updated in real time to the material ShaderMaterial.

[0014] On the other hand, the present invention also provides a device for displaying high-frequency dynamic data in a browser, comprising: A basic creation unit, used for creating a scene, a camera and a renderer based on Three.js, and rendering the scene and the camera onto a screen of a browser based on the renderer; A geometry and material adding unit, used for creating a plane geometry and a material ShaderMaterial, and adding the geometry and the material ShaderMaterial to the scene; The high-frequency dynamic data display unit is used to obtain high-frequency dynamic data and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of the high-frequency dynamic data.

[0015] On the other hand, the present invention also provides a data display device, including a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps of the method for displaying high-frequency dynamic data in a browser described in any one of the possible implementations above.

[0016] On the other hand, the present invention also provides a computer-readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, the steps of the method for displaying high-frequency dynamic data in a browser described in any possible implementation method mentioned above are implemented.

[0017] The beneficial effects of the present invention are as follows: the method for displaying high-frequency dynamic data in a browser provided by the present invention realizes the display of high-frequency dynamic data through scenes, cameras, renderer plane geometry and material ShaderMaterial created based on Three.js, that is, the display of high-frequency dynamic data is realized based on Three.js. Since Three.js relies on WebGL at the bottom layer and also supports the latest WebGPU specification, by using Three.js, developers can easily utilize the powerful functions of WebGPU to realize efficient data calculation and rendering, thereby improving the display efficiency, application scope and interactive performance of high-frequency dynamic data. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present invention, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0019] Figure 1 A schematic diagram of a flow chart of an embodiment of a method for displaying high-frequency dynamic data in a browser provided by the present invention; Figure 2 A schematic diagram of an embodiment of the stress data matrix provided by the present invention; Figure 3 A schematic diagram of an embodiment of the screen coordinate matrix provided by the present invention; Figure 4 For the present invention Figure 1 A schematic flow chart of an embodiment of step S103; Figure 5 For the present invention Figure 4 A schematic flow chart of an embodiment of step S403; Figure 6 A schematic diagram of an embodiment of the present invention for updating new high-frequency dynamic data to a material ShaderMaterial in real time; Figure 7 A schematic diagram of the structure of an embodiment of a high-frequency dynamic data display device in a browser provided by the present invention; Figure 8 A schematic diagram of the structure of an embodiment of the data display device provided by the present invention. DETAILED DESCRIPTION

[0020] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present invention.

[0021] It should be understood that the schematic drawings are not drawn to scale. The flowchart used in the present invention shows the operations implemented according to some embodiments of the present invention. It should be understood that the operations of the flowchart can be implemented out of order, and the steps without logical context can be reversed in order or implemented simultaneously. In addition, those skilled in the art, under the guidance of the content of the present invention, can add one or more other operations to the flowchart, and can also remove one or more operations from the flowchart. Some of the block diagrams shown in the accompanying drawings are functional entities, which do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor systems and / or microcontroller systems.

[0022] Reference to an "embodiment" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiment may be included in at least one embodiment of the present invention. The appearance of the phrase in various places in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0023] The present invention provides a method, device, equipment and storage medium for displaying high-frequency dynamic data in a browser, which are described below respectively.

[0024] Figure 1 A flowchart of an embodiment of the method for displaying high-frequency dynamic data in a browser provided by the present invention is shown as follows Figure 1 As shown, the high-frequency dynamic data display methods in the browser include: S101. Create a scene, camera and renderer based on Three.js, and render the scene and camera to the browser screen based on the renderer; S102. Create a plane geometry and a material ShaderMaterial, and add the geometry and the material ShaderMaterial to the scene; S103, obtaining high-frequency dynamic data, and updating the high-frequency dynamic data to the material ShaderMaterial in real time, completing the display of the high-frequency dynamic data.

[0025] The scene in step S101 is a container for all 3D objects, and the camera determines the viewing angle of the scene.

[0026] Among them, Three.js is a JavaScript library based on WebGL, which simplifies the process of creating and displaying 3D graphics in the browser. It provides a rich API, supports various geometries, materials, light sources, cameras, etc., which greatly facilitates developers to develop 3D visualization. WebGL enables browsers to call GPUs, making large-scale parallel computing possible in browsers.

[0027] It should be noted that high-frequency dynamic data includes but is not limited to stress-strain data.

[0028] Compared with the prior art, the method for displaying high-frequency dynamic data in a browser provided by an embodiment of the present invention realizes the display of high-frequency dynamic data through scenes, cameras, renderer plane geometry and material ShaderMaterial created based on Three.js, that is, the display of high-frequency dynamic data is realized based on Three.js. Since Three.js relies on WebGL at the bottom layer and also supports the latest WebGPU specification, by using Three.js, developers can easily use the powerful functions of WebGPU to realize efficient data calculation and rendering, thereby improving the display efficiency, application scope and interactive performance of high-frequency dynamic data.

[0029] In a specific embodiment of the present invention, Figure 2 As shown in the figure, the high-frequency dynamic data is stress data, which is expressed in the form of a matrix, with the horizontal axis representing the mileage and the vertical axis representing the lane. The coordinate matrix on the screen is as follows: Figure 3 As shown, that is, the number of rows and columns of the coordinate matrix in the screen is inconsistent with that of the stress data matrix. At this time, in order to ensure the rendering effect and performance, in some embodiments of the present invention, Figure 4 As shown, step S103 includes: S401, obtaining data coordinates of high-frequency dynamic data and data values ​​corresponding to the data coordinates; S402, obtaining the screen coordinates of the screen, and converting the data values ​​to the screen based on a preset interpolation algorithm to obtain a plurality of screen data values ​​corresponding to the screen coordinates one by one; S403, updating multiple screen data values ​​to ShaderMaterial in real time.

[0030] The embodiment of the present invention converts data values ​​to the screen based on a preset interpolation algorithm to obtain multiple screen data values ​​corresponding to the screen coordinates, thereby solving the technical problem of inconsistency between screen coordinates and data coordinates and ensuring rendering effect and performance.

[0031] Specifically, when the high-frequency dynamic data is strain data, the data value and the screen data value are both deformation percentages of the strain, and the value range is 0~1.

[0032] In order to improve the intuitiveness and aesthetics of the rendering effect, in some embodiments of the present invention, Figure 5 As shown, step S403 includes: S501, obtaining a plurality of preset colors and color boundaries of the plurality of colors; S502, performing linear interpolation on multiple colors based on screen data values ​​and color boundaries to obtain interpolated colors corresponding to the screen data values; S503: Display the screen data value in real time based on the interpolated color.

[0033] The embodiment of the present invention determines the interpolation color corresponding to the screen data value, and displays the screen data value in real time based on the interpolation color. The display is performed by color instead of actual data, thereby improving the intuitiveness and aesthetics of the display result.

[0034] The multiple colors in step S501 may be blue, green, yellow, orange and red.

[0035] When the high-frequency dynamic data is strain data, the color boundaries of blue, green, yellow, orange, and red are 0.0, 0.2, 0.4, 0.6, 0.8, and 1.0.

[0036] In a specific embodiment of the present invention, Figure 6 As shown, Q in the screen coordinate system 11 , Q 21 , Q 12 , Q 22 The values ​​of are known, and the coordinates of the unknown point P are:

[0037] In the formula, is the screen data value of point P; is the screen coordinate of point P; Q 11 The screen data value of the point; Q 12 The screen data value of the point; Q 21 The screen data value of the point; Q 22 The screen data value of the point; Q 11 The screen coordinates of the point; Q 12 The screen coordinates of the point; Q 21The screen coordinates of the point; Q 22 The screen coordinates of the point.

[0038] To achieve cyclic display of high-frequency dynamic data, in some embodiments of the present invention, the high-frequency dynamic data display method further includes: Through the requestAnimationFrame method, the scene is rendered in a loop to make high-frequency dynamic data play in a loop.

[0039] It should be noted that when high-frequency dynamic data is played in a loop, the mouse can be used to drag, zoom, and flip the animation to improve the display interactivity of the high-frequency dynamic data.

[0040] When high-frequency dynamic data is played in a loop, the frame rate can be automatically adjusted according to the refresh rate of the display. In some practical application scenarios, the data source of high-frequency dynamic data may be a file, a database or a real-time sensor. When the file or database is updated, or the real-time database obtains new high-frequency dynamic data, in order to realize the real-time performance of the high-frequency dynamic data displayed in the browser, in some embodiments of the present invention, the high-frequency dynamic data display method further includes: Based on AJAX request, new high-frequency dynamic data is obtained, and the new high-frequency dynamic data is updated to the material ShaderMaterial in real time to complete the display of the new high-frequency dynamic data.

[0041] Among them, AJAX is a technology used to create fast dynamic web pages. By exchanging a small amount of data with the server in the background, AJAX can enable web pages to be updated asynchronously.

[0042] The embodiment of the present invention can obtain the latest high-frequency dynamic data by acquiring new high-frequency dynamic data based on AJAX request, and realize real-time update and display of high-frequency dynamic data.

[0043] To improve the display efficiency of new high-frequency dynamic data, in some embodiments of the present invention, Figure 6 As shown, the new high-frequency dynamic data is updated to the material ShaderMaterial in real time, including: S601, determining difference data in the new high-frequency dynamic data that is different from the high-frequency dynamic data; S602, updating the difference data to the material ShaderMaterial in real time.

[0044] The embodiment of the present invention first determines the difference data in the new high-frequency dynamic data that is different from the high-frequency dynamic data, and only updates the difference data to the material ShaderMaterial in real time. There is no need to update all the new high-frequency dynamic data to the material ShaderMaterial in real time, thereby reducing the amount of updated data and improving the rendering and display efficiency of the new high-frequency dynamic data.

[0045] In order to better implement the method for displaying high-frequency dynamic data in a browser in an embodiment of the present invention, based on the method for displaying high-frequency dynamic data in a browser, the embodiment of the present invention also provides a device for displaying high-frequency dynamic data in a browser, such as Figure 7 As shown, the high-frequency dynamic data display device 700 in the browser includes: A basic creation unit 701 is used to create a scene, a camera and a renderer based on Three.js, and render the scene and the camera onto the browser screen based on the renderer; The geometry and material adding unit 702 is used to create a plane geometry and a material ShaderMaterial, and add the geometry and the material ShaderMaterial to the scene; The high-frequency dynamic data display unit 703 is used to obtain high-frequency dynamic data and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of the high-frequency dynamic data.

[0046] The high-frequency dynamic data display device 700 in the browser provided in the above embodiment can implement the technical solution described in the above-mentioned high-frequency dynamic data display method embodiment in the browser. The specific implementation principles of the above-mentioned modules or units can refer to the corresponding contents in the above-mentioned high-frequency dynamic data display method embodiment in the browser, and will not be repeated here.

[0047] like Figure 8 As shown, the present invention also provides a data display device 800. The data display device 800 includes a processor 801, a memory 802 and a display 803. Figure 8 Only some components of the data presentation device 800 are shown, but it should be understood that it is not required to implement all of the components shown, and more or fewer components may be implemented instead.

[0048] In some embodiments, the processor 801 may be a central processing unit (CPU), a microprocessor or other data processing chip, used to run program codes stored in the memory 802 or process data, such as the high-frequency dynamic data display method in the browser of the present invention.

[0049] In some embodiments, the processor 801 may be a single server or a server group. The server group may be centralized or distributed. In some embodiments, the processor 801 may be local or remote. In some embodiments, the processor 801 may be implemented in a cloud platform. In one embodiment, the cloud platform may include a private cloud, a public cloud, a hybrid cloud, a community cloud, a distributed cloud, an internal cloud, a multi-cloud, etc., or any combination thereof.

[0050] In some embodiments, the memory 802 may be an internal storage unit of the data display device 800, such as a hard disk or memory of the data display device 800. In other embodiments, the memory 802 may also be an external storage device of the data display device 800, such as a plug-in hard disk, a smart media card (SMC), a secure digital (SD) card, a flash card, etc., equipped on the data display device 800.

[0051] Furthermore, the memory 802 may include both an internal storage unit of the data display device 800 and an external storage device. The memory 802 is used to store application software installed in the data display device 800 and various data.

[0052] In some embodiments, the display 803 may be an LED display, a liquid crystal display, a touch-sensitive liquid crystal display, an OLED (Organic Light-Emitting Diode) touch device, etc. The display 803 is used to display information of the data display device 800 and to display a visual user interface. The components 801-803 of the data display device 800 communicate with each other via a system bus.

[0053] In some embodiments of the present invention, when the processor 801 executes the high-frequency dynamic data display program in the browser in the memory 802, the following steps may be implemented: Create scenes, cameras, and renderers based on Three.js, and render scenes and cameras to the browser screen based on the renderer; Create plane geometry and material ShaderMaterial, and add the geometry and material ShaderMaterial to the scene; Obtain high-frequency dynamic data and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of high-frequency dynamic data.

[0054] It should be understood that: when the processor 801 executes the high-frequency dynamic data display program in the browser in the memory 802, in addition to the above functions, other functions can also be implemented. For details, please refer to the description of the corresponding method embodiment above.

[0055] Furthermore, the embodiment of the present invention does not specifically limit the type of the data display device 800 mentioned. The data display device 800 may be a portable data display device such as a mobile phone, a tablet computer, a personal digital assistant (PDA), a wearable device, a laptop computer, etc. Exemplary embodiments of portable data display devices include but are not limited to portable data display devices equipped with IOS, Android, Microsoft or other operating systems. The above-mentioned portable data display device may also be other portable data display devices. It should also be understood that in some other embodiments of the present invention, the data display device 800 may not be a portable data display device, but a desktop computer with a touch-sensitive surface (such as a touch panel).

[0056] Correspondingly, an embodiment of the present invention also provides a computer-readable storage medium, which is used to store computer-readable programs or instructions. When the program or instructions are executed by a processor, it can implement the steps or functions of the high-frequency dynamic data display method in the browser provided by the above-mentioned method embodiments.

[0057] Those skilled in the art will appreciate that all or part of the processes of the above-mentioned embodiments can be implemented by instructing related hardware (such as a processor, a controller, etc.) through a computer program, and the computer program can be stored in a computer-readable storage medium, wherein the computer-readable storage medium is a disk, an optical disk, a read-only storage memory, or a random access memory, etc.

[0058] The above is a detailed introduction to the method, device, equipment and storage medium for displaying high-frequency dynamic data in a browser provided by the present invention. Specific examples are used in this article to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only used to help understand the method of the present invention and its core idea. At the same time, for those skilled in the art, according to the idea of ​​the present invention, there will be changes in the specific implementation method and application scope. In summary, the content of this specification should not be understood as a limitation on the present invention.

Claims

1. A method for displaying high-frequency dynamic data in a browser, characterized in that: include: Creating a scene, a camera, and a renderer based on Three.js, and rendering the scene and the camera onto a screen of a browser based on the renderer; Create a plane geometry and a material ShaderMaterial, and add the geometry and the material ShaderMaterial to the scene; Acquire high-frequency dynamic data, and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of the high-frequency dynamic data.

2. The method for displaying high-frequency dynamic data in a browser according to claim 1, characterized in that: The updating of the high-frequency dynamic data to the material ShaderMaterial in real time includes: Acquire data coordinates of the high-frequency dynamic data and data values ​​corresponding to the data coordinates one by one; Acquire the screen coordinates of the screen, and convert the data values ​​into the screen based on a preset interpolation algorithm to obtain a plurality of screen data values ​​corresponding to the screen coordinates one by one; The multiple screen data values ​​are updated to the ShaderMaterial in real time.

3. The method for displaying high-frequency dynamic data in a browser according to claim 2, characterized in that: The updating of the plurality of screen data values ​​to the ShaderMaterial in real time includes: Acquire a plurality of preset colors and color boundaries of the plurality of colors; Performing linear interpolation on the plurality of colors based on the screen data value and the color boundary to obtain an interpolated color corresponding to the screen data value; The screen data value is displayed in real time based on the interpolated color.

4. The method for displaying high-frequency dynamic data in a browser according to claim 2, characterized in that: The interpolation algorithm is: In the formula, is the screen data value of point P; is the screen coordinate of point P; Q 11 The screen data value of the point; Q 12 The screen data value of the point; Q 21 The screen data value of the point; Q 22 The screen data value of the point; Q 11 The screen coordinates of the point; Q 12 The screen coordinates of the point; Q 21 The screen coordinates of the point; Q 22 The screen coordinates of the point.

5. The method for displaying high-frequency dynamic data in a browser according to claim 1, characterized in that: The method further comprises: The requestAnimationFrame method is used to render the scene in a loop, so that the high-frequency dynamic data is played in a loop.

6. The method for displaying high-frequency dynamic data in a browser according to claim 1, characterized in that: The method further comprises: New high-frequency dynamic data is obtained based on AJAX request, and the new high-frequency dynamic data is updated to the material ShaderMaterial in real time to complete the display of the new high-frequency dynamic data.

7. The method for displaying high-frequency dynamic data in a browser according to claim 6, characterized in that: The updating of the new high-frequency dynamic data to the material ShaderMaterial in real time includes: Determine difference data in the new high-frequency dynamic data that is different from the high-frequency dynamic data; The difference data is updated in real time to the material ShaderMaterial.

8. A device for displaying high-frequency dynamic data in a browser, characterized in that: include: A basic creation unit, used for creating a scene, a camera and a renderer based on Three.js, and rendering the scene and the camera onto a screen of a browser based on the renderer; A geometry and material adding unit, used for creating a plane geometry and a material ShaderMaterial, and adding the geometry and the material ShaderMaterial to the scene; The high-frequency dynamic data display unit is used to obtain high-frequency dynamic data and update the high-frequency dynamic data to the material ShaderMaterial in real time to complete the display of the high-frequency dynamic data.

9. A data display device, characterized in that: comprising a memory and a processor, wherein: The memory is used to store programs; The processor is coupled to the memory and is used to execute the program stored in the memory to implement the steps in the method for displaying high-frequency dynamic data in a browser as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a program or instruction, and when the program or instruction is executed by the processor, the steps of the method for displaying high-frequency dynamic data in a browser described in any one of claims 1 to 7 are implemented.

Images