WebGL-based particle effect implementation method, system and device and storage medium

Abstract

The embodiment of the invention discloses a WebGL-based particle effect implementation method, system and device and a storage medium. According to the embodiment of the invention, the performance fluctuation of the browser is coped with through the frame-level accurate control of dynamic streaming loading, the particle loading algorithm based on frame time budget feedback, the dynamic measurement means of single-particle initialization time consumption and the safety elastic coefficient, the original space coordinates of the 2D elf are reserved through the multi-level avalanche protection strategy, seamless visual transition is realized, and the performance of the browser is improved. And memory fragments are avoided by using a double-buffer recovery pool. Compared with loading of a traditional particle structure, loading of the dynamic flow particles based on the frame level in the embodiment of the invention has the advantages that the memory occupation is reduced by 50%-75%, and the server cost is saved. And an emergency scheme for spreading massive particles can be freely handled, low-memory equipment and high-video-memory and high-memory equipment can be compatible at the same time, and certain self-adaptability is achieved.

Description

Technical Field

[0001] The embodiments of the present invention relate to the technical field of Web development, and in particular, to a method, system, device, and storage medium for implementing particle special effects based on WebGL. Background Art

[0002] In Web development, particle special effects are widely used in animations, games, and interactive interfaces to enhance visual effects and user experience. However, existing methods for implementing particle special effects have some limitations. For example, the interaction effects between particles are not flexible and natural enough, and the loading and unloading processes of particles are not flexible and efficient enough, resulting in performance bottlenecks and resource waste problems in large-scale particle systems.

[0003] In order to improve the user experience and enrich the visual effects, the application of special effects such as particles is becoming more and more extensive. Traditional ways of implementing particle special effects often have performance bottlenecks. In the browser environment, due to the execution efficiency of the JavaScript language itself and the limitations of the browser's graphics processing capabilities, it has become a difficult problem to run complex particle special effects smoothly. For example, in some three-dimensional visualizations, when the number of particle special effects is large and the effects are complex, the page is prone to freezing or even crashing, seriously affecting the user experience. Moreover, traditional methods also have deficiencies in the realism and customizability of special effects, and it is difficult to meet the needs of developers for high-quality, personalized special effects and rendering of a large amount of data. Summary of the Invention

[0004] To this end, the embodiments of the present invention provide a method, system, device, and storage medium for implementing particle special effects based on WebGL to solve the technical problems in the prior art that the loading and unloading processes of particles are not flexible and efficient enough, and the page is prone to freezing, crashing, and excessive memory occupation when there are many particle special effects and complex effects.

[0005] To achieve the above object, the embodiments of the present invention provide the following technical solutions:

[0006] According to the first aspect of the embodiments of the present invention, a method for implementing particle special effects based on WebGL is provided, and the method includes:

[0007] S1. Obtain the remaining rendering time of the current frame and the preset particle initialization time-consuming data, and dynamically confirm the maximum number of particles that can be loaded in the next frame by using the remaining rendering time and the preset particle initialization time-consuming data;

[0008] S2. Detect whether a batch loading request appears. If no batch loading request appears, obtain the particle queue to be loaded and the number of particles to be loaded in the queue, sort the particles to be loaded in the particle queue to be loaded, and load the particles according to the order and monitor the GPU memory usage rate in real time;

[0009] S3. If a batch loading request occurs and the number of particles to be loaded is greater than the preset threshold, enter the flow limiting mode, assign priorities to the particles to be loaded, and give priority to loading the particles in the core area;

[0010] S4. When the GPU memory usage rate exceeds the preset GPU memory usage threshold, trigger a multi-level protection strategy and perform corresponding operations according to the current GPU memory usage rate.

[0011] Further, obtain the remaining rendering time of the current frame and the preset particle initialization time-consuming data, and dynamically confirm the maximum number of particles that can be loaded in the next frame by using the remaining rendering time and the preset particle initialization time-consuming data, including:

[0012] The calculation expression for the maximum number of particles that can be loaded is:

[0013]

[0014] where NL is the maximum number of particles that can be loaded, TR is the remaining rendering time, TIPP is the preset particle initialization time-consuming data, and SF∈(0.5, 1.0) is a safety factor used to avoid frame rate fluctuations.

[0015] Further, sort the particles to be loaded in the particle queue to be loaded, and the sorting order is: ascending order within the visible area, descending order according to the degree of user interaction association, and descending order for the particle type weights.

[0016] Further, give priority to loading the particles in the core area, including:

[0017] Assign a highlighted state to a preset number of particles in the core area, and demote the peripheral particles to make the peripheral particles degrade to a low-precision model;

[0018] where the preset number is 500.

[0019] Further, when the GPU memory usage rate exceeds the preset GPU memory usage threshold, trigger a multi-level protection strategy and perform corresponding operations according to the current GPU memory usage rate, including:

[0020] When the CPU memory usage rate is greater than 70% and less than 85%, enter the warning mode at this time and trigger the primary protection;

[0021] The primary protection includes: reducing the particle quality of Tier2, pausing the physical calculation of the distant view particles, and recording the degraded particle IDs.

[0022] Further, when the GPU memory usage rate exceeds the preset GPU memory usage threshold, trigger a multi-level protection strategy and perform corresponding operations according to the current GPU memory usage rate, and further include:

[0023] When the CPU memory usage rate is greater than 85%, it enters the danger mode and triggers the avalanche protection;

[0024] Detect whether the currently loaded particle is a critical particle. If it is a critical particle, retain the 3D form;

[0025] If it is not a critical particle, replace the currently loaded particle with a 2D sprite, generate a 2D substitute, use a simplified SpriteMaterial, and inherit the position and / or color of the original particle.

[0026] Furthermore, entering the danger mode and triggering the avalanche protection also includes:

[0027] Trigger the forced recovery GC process and compress the particle memory pool, and detect whether the GPU memory usage rate is less than or equal to 75% at this time;

[0028] If the GPU memory usage rate is less than or equal to 75% at this time, start the recovery program and restore the 3D form and physical properties of each particle according to the priority;

[0029] Among them, during the recovery process, interactive particles are restored first, and the maximum number of particles that can be restored per frame is 50.

[0030] According to the second aspect of the embodiments of the present invention, there is provided a particle special effect implementation system based on WebGL, and the system includes:

[0031] A resource budget calculation module, configured to obtain the remaining rendering time of the current frame and the preset particle initialization time-consuming data, and dynamically confirm the maximum number of particles that can be loaded in the next frame by using the remaining rendering time and the preset particle initialization time-consuming data;

[0032] A batch loading request monitoring module, configured to detect whether a batch loading request appears. If no batch loading request appears, obtain the particle queue to be loaded and the number of particles to be loaded in the queue, sort the particles to be loaded in the particle queue to be loaded, and load the particles according to the order and monitor the GPU memory usage rate in real time;

[0033] A current limiting module, configured to enter the current limiting mode if a batch loading request appears and the number of particles to be loaded is greater than the maximum number of particles that can be loaded, assign priorities to the particles to be loaded, and give priority to loading the particles in the core area;

[0034] A multi-level protection module, configured to trigger a multi-level protection strategy when the GPU memory usage rate exceeds the preset GPU memory usage threshold, and perform corresponding operations according to the current GPU memory usage rate.

[0035] According to the third aspect of the embodiments of the present invention, there is provided a particle special effect implementation device based on WebGL, and the device includes: a processor and a memory;

[0036] The memory is used to store one or more program instructions;

[0037] The processor is used to run one or more program instructions to execute the steps of a WebGL-based particle special effect implementation method described in any one of the above.

[0038] According to a fourth aspect of an embodiment of the present invention, there is provided a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the steps of a WebGL-based particle special effect implementation method described in any one of the above are implemented.

[0039] The embodiments of the present invention have the following advantages:

[0040] In the embodiments of the present invention, through frame-level precise control of dynamic streaming loading, a particle loading algorithm based on frame time budget feedback, a dynamic measurement method for the initialization time of a single particle, and a safety elasticity coefficient to cope with the performance fluctuations of the browser, through a multi-level avalanche protection strategy, the 2D sprites retain the original spatial coordinates to achieve seamless visual transition, and a double-buffer recycling pool is used to avoid memory fragmentation. The loading of dynamic flow particles based on the frame level in the embodiments of the present invention reduces the memory occupancy by 50%-75% compared with the loading of traditional particle structures, saving server costs. And the emergency plan for spreading a large number of particles can be handled with ease, and it can also be compatible with low-memory devices and high-video-memory and high-memory devices at the same time, having a certain degree of self-adaptability. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the drawings in the following description are only exemplary, and for those of ordinary skill in the art, without creative efforts, other implementation drawings can also be obtained according to the provided drawings.

[0042] The structures, ratios, sizes, etc. illustrated in this specification are only used to cooperate with the content disclosed in the specification for those familiar with this technology to understand and read, and are not used to limit the limited conditions under which the present invention can be implemented. Therefore, they do not have technical essence. Any modification of the structure, change of the proportional relationship, or adjustment of the size should still fall within the scope that can be covered by the technical content disclosed in the present invention without affecting the effects that the present invention can produce and the purposes that can be achieved.

[0043] Figure 1 It is a schematic logical structure diagram of a WebGL-based particle special effect implementation system provided by an embodiment of the present invention;

[0044] Figure 2 Schematic flowchart of a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention;

[0045] Figure 3 Schematic flowchart of frame processing in a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention;

[0046] Figure 4 Schematic diagram of a frame timeline in a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention;

[0047] Figure 5 Schematic diagram of a dynamic adjustment process in a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention;

[0048] Figure 6 Schematic diagram of detecting a batch loading request in a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention;

[0049] Figure 7a and Figure 7b Schematic diagram of a multi - level avalanche protection strategy in a method for implementing particle special effects based on WebGL provided by an embodiment of the present invention. Detailed implementation manners

[0050] The following specific embodiments illustrate the implementation manners of the present invention. Those skilled in the art can easily understand other advantages and effects of the present invention from the content disclosed in this specification. Obviously, the described embodiments are part of the embodiments of the present invention, rather than all of them. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts fall within the scope of protection of the present invention.

[0051] In order to enhance the user experience and enrich the visual effects, the application of special effects such as particles is becoming more and more widespread. The traditional ways of implementing particle special effects often have performance bottlenecks. In the browser environment, due to the execution efficiency of the JavaScript language itself and the limitations of the browser's graphics processing capabilities, it has become a difficult problem to smoothly run complex particle special effects. For example, in some 3D visualizations, when the number of particle special effects is large and the effects are complex, the page is prone to jamming or even crashing, seriously affecting the user experience. Moreover, the traditional methods also have deficiencies in the realism and customizability of special effects, and it is difficult to meet the needs of developers for high - quality, personalized special effects and rendering of a large amount of data.

[0052] Currently, it is relatively common to load particle effects based on Cesium. When using the Cesium service, authentication is required, and the access token is the credential for verification. By setting Cesium.Ion.defaultAccessToken to a specific value "YOUR_ACCESS_TOKEN", subsequent Cesium operations can use this token to access relevant resources. You need to replace "YOUR_ACCESS_TOKEN" with the actual access token obtained on the Cesium Ion platform so that you can use the functions of Cesium normally, such as loading map data, etc.

[0053] Create a viewer and bind it to an element: Use new Cesium.Viewer('cesiumContainer') to create a Cesium viewer object named viewer. 'cesiumContainer' is the ID of an element in the HTML page, and this viewer will be bound to the element with this ID. In HTML, there needs to be a corresponding element, so that the Cesium viewer will be displayed at the location of this element, and users can interact with the geographic information scene provided by Cesium through this viewer.

[0054] Create a particle system:

[0055] 1. Model matrix setting

[0056] The model matrix is used to determine the position and orientation of the particle system in three-dimensional space. The code Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883)) converts the specified longitude and latitude (-75.59777, 40.03883) into a local coordinate system matrix with the east - north - zenith as the coordinate axes. Simply put, it places the particle system at the position corresponding to the longitude and latitude on the earth and displays it in a specific orientation.

[0057] 2. Emitter setting

[0058] Use new Cesium.CircleEmitter(0.5) to create a circular emitter with a radius of 0.5. This emitter determines where the particles are emitted. A circular emitter means that the particles will be emitted from within a circular area, and a radius of 0.5 controls the size of this circular area.

[0059] 3. Particle Image Settings

[0060] image: 'https: / / cesium.com / downloads / cesiumjs / releases / 1.91 / Build / Cesium / Assets / Textures / fire.png' specifies the image used by the particles. Here, a remotely linked image is used. When the particles are emitted, they will be displayed in the style of this image, which is a picture of a flame in this example, so the particles look like flames.

[0061] 4. Color Settings

[0062] Starting Color: startColor: Cesium.Color.RED.withAlpha(0.7) means that the color of the particles when they are first emitted is red, and the transparency is 0.7. A transparency of 0.7 means that the particles have a certain semi - transparent effect.

[0063] Ending Color: endColor: Cesium.Color.YELLOW.withAlpha(0.3) means that the color of the particles at the end of their life cycle is yellow, and the transparency is 0.3. As the life cycle of the particles progresses, their color will gradually transition from the starting color to the ending color.

[0064] 5. Scaling Ratio Settings

[0065] Starting Scaling Ratio: startScale: 0.1 means that the scaling ratio of the particles when they are first emitted is 0.1, that is, the particles are relatively small at the beginning.

[0066] Ending Scaling Ratio: endScale: 1.0 means that the scaling ratio of the particles at the end of their life cycle is 1.0, which means the particles will gradually grow larger during their life cycle.

[0067] 6. Life Cycle Settings

[0068] Minimum Life Cycle: minimumLife: 1.0 second specifies that the shortest survival time of the particles is 1 second. That is to say, each particle will exist for at least 1 second.

[0069] Maximum Life Cycle: maximumLife: 3.0 seconds specifies that the longest survival time of the particles is 3 seconds. The survival time of each particle will be randomly determined between 1 second and 3 seconds.

[0070] 7. Speed Settings

[0071] Minimum speed: minimumSpeed: 1.0 means the minimum speed of particle emission is 1.0.

[0072] Maximum Speed: maximumSpeed: 5.0 means the maximum speed of particle emission is 5.0. The emission speed of each particle will be randomly determined between 1.0 and 5.0.

[0073] 8. Transmit rate setting

[0074] emissionRate: 10.0 means 10 particles are emitted per second. This parameter controls the frequency of particle emission. The larger the value, the more particles are emitted per unit time.

[0075] 9. Total life cycle settings

[0076] Lifetime: 16.0 seconds means the total life cycle of the entire particle system is 16 seconds. During these 16 seconds, particles will continue to emit and disappear.

[0077] 10. Cycle mode setting

[0078] loop: true turns on the loop mode, which means that when the total life cycle of the particle system ends, it will start emitting particles again and again in a continuous cycle.

[0079] After the particle system is created, add the particle system to the scene and use viewer.scene.primitives.add(particleSystem) to add the created particleSystem particle system to the viewer's scene primitive list. In this way, the particle system will be displayed in the geographic information scene displayed by the Cesium viewer, and users can see the effects of particle emission, movement, and disappearance in the scene.

[0080] The above is the general logic for loading particle effects based on Cesium. This logic has the following disadvantages:

[0081] 1) The particle effects are implemented based on image textures. When the particle effects need to move and interact with other introduced particles, they will become inoperable.

[0082] 2) Cesium renders the screen after loading the particle scene completely into memory. When there are a lot of particles and the particles are not copies of the same particle image, the screen will freeze for a long time, and it is possible that the browser will crash and become unusable due to insufficient memory while the particles are entering the memory.

[0083] 3) When cesium shows or hides particles, it does not remove the particles from memory. Instead, the particles remain mounted in memory, resulting in continued memory usage. As a series of business developments based on particle effects progress, this memory leak problem may gradually be forgotten. However, when subsequent development requires extreme performance one day, these useless particles still occupy memory, preventing full use of the memory performance.

[0084] To solve the technical problems of the inflexible and inefficient loading and unloading process of the above particles, page lags and crashes easily, and excessive memory usage when there are many particle effects and complex effects, the purpose of the embodiments of the present invention is to design an implementation method for flexible interaction between particles, streaming loading of particles, and handling of large amounts of particle loading.

[0085] Reference Figure 1 , the embodiments of the present invention disclose a WebGL-based particle effect implementation system, which includes: a resource budget calculation module 1; a batch loading request monitoring module 2; a flow limiting module 3; a multi-level protection module 4.

[0086] Corresponding to the above-disclosed WebGL-based particle effect implementation system, the embodiments of the present invention also disclose a WebGL-based particle effect implementation method. The following details a WebGL-based particle effect implementation method disclosed in the embodiments of the present invention in combination with the above-described WebGL-based particle effect implementation system.

[0087] Reference Figure 2 , the present invention discloses a WebGL-based particle effect implementation method, the method comprising:

[0088] S1. Obtain the remaining rendering time of the current frame and preset particle initialization time-consuming data, and dynamically confirm the maximum number of particles that can be loaded in the next frame using the remaining rendering time and the preset particle initialization time-consuming data;

[0089] S2. Detect whether a batch loading request occurs. If no batch loading request occurs, obtain the particle queue to be loaded and the number of particles to be loaded in the queue, sort the particles to be loaded in the particle queue to be loaded, and load the particles according to the order and monitor the GPU memory usage rate in real time;

[0090] S3. If a batch loading request occurs and the number of particles to be loaded is greater than a preset threshold, enter the flow limiting mode, assign priorities to the particles to be loaded, and preferentially load the particles in the core area;

[0091] S4. When the GPU memory usage rate exceeds the preset GPU memory usage threshold, trigger a multi-level protection policy and perform corresponding operations according to the current GPU memory usage rate.

[0092] Further, referring to Figure 3 and Figure 4 , obtain the remaining rendering time of the current frame and the preset particle initialization time-consuming data, and dynamically confirm the maximum number of particles that can be loaded in the next frame by using the remaining rendering time and the preset particle initialization time-consuming data, including: The calculation expression for the maximum number of particles that can be loaded is:

[0093]

[0094] where NL is the maximum number of particles that can be loaded, TR is the remaining rendering time, TIPP is the preset particle initialization time-consuming data, and SF∈(0.5, 1.0) is a safety factor used to avoid frame rate fluctuations.

[0095] Dynamically confirm the maximum number of particles that can be loaded in the next frame according to the remaining rendering time (t_remain) of the current frame and the preset particle initialization time (t_init_per_particle).

[0096] The pseudocode is as follows:

[0097] N_load = floor(t_remain / (t_init_per_particle × safety_factor))

[0098] where the safety factor safety_factor∈(0.5, 1.0) is used to avoid frame rate fluctuations, and floor means rounding down.

[0099] For the schematic diagram of the frame timeline, refer to Figure 4 , and the explanations of the key parameters are as follows:

[0100] Parameter Name Example Value Description Frame Budget 16.6ms Time per Frame at 60FPS t_init_per_particle 0.5ms Measured Initialization Time for a Single Particle safety_factor 0.7 Reserve 30% of the Time to Handle Fluctuations Actual t_remain 2.0ms Remaining Time after Deducting Other Tasks Theoretical N_load 5 2.0 / (0.5×0.7)=5.7 → Round Down Actual Loading Number 3 Load According to the Actual Quantity When the Loading Queue is Insufficient

[0101] Referring to Figure 5 , during the dynamic adjustment process, when the current frame is when the system is idle, according to the N_load data at this time, it can be obtained that 28 can be loaded at this time. When the current frame is when the system is busy, according to the N_load data at this time, it can be obtained that the actual number of particles loaded at this time is adjusted to 3, so as to avoid system jamming. In the next frame, adaptive adjustment is performed through the safety factor. If the t_remain data of three consecutive frames are all less than 2ms, then at this time, it is necessary to adjust and reduce the safety factor to better perform particle loading.

[0102] Precise frame-level control for dynamic streaming loading, a particle loading algorithm based on frame time budget feedback, and a dynamic measurement method for t_init_per_particle (the time-consuming for single-particle initialization) are proposed, and a safety_factor elastic coefficient is introduced to cope with browser performance fluctuations.

[0103] Further, sort the particles to be loaded in the queue of particles to be loaded, and the sorting order is: ascending sort within the visible area, descending sort according to the degree of user interaction association, and descending sort for the particle type weights.

[0104] For example, the descending order of user interaction association means that UI-annotated particles are given priority, and the descending sort for particle type weights means that flame particles are sorted above dust particles.

[0105] Reference Figure 6 , when there is a sudden need to load a large number of particles (such as explosion special effects and cosmic special effects), it is necessary to enter the flow-limiting mode at this time. First, load 500 highlighted particles in the core area, and the remaining particles are degraded to low-precision models. When the GPU memory is on the verge of exhaustion. Pause the loading of all non-essential particles and replace the particles far from the perspective with 2D icon textures for display.

[0106] Further, reference Figure 6 , give priority to loading particles in the core area, including: endowing a preset number of particles in the core area with a highlighted state, and degrading the peripheral particles to make the peripheral particles degrade to low-precision models.

[0107] Among them, the preset number is 500.

[0108] Further, reference Figure 7a and Figure 7b , when the GPU memory usage rate exceeds the preset GPU memory usage threshold, trigger a multi-level protection strategy and perform corresponding operations according to the current GPU memory usage rate, including: when the CPU memory usage rate is greater than 70% and less than 85%, enter the warning mode at this time and trigger the primary protection;

[0109] The primary protection includes: reducing the quality of Tier2 particles, pausing the physical calculation of distant-view particles, and recording the IDs of degraded particles.

[0110] Further, when the GPU memory usage rate exceeds the preset GPU memory usage threshold, a multi-level protection policy is triggered, and corresponding operations are performed according to the current GPU memory usage rate. It also includes: when the CPU memory usage rate is greater than 85%, it enters the danger mode at this time, and the avalanche protection is triggered; it is detected whether the currently loaded particle is a critical particle. If it is a critical particle, the 3D form is retained; if it is not a critical particle, the currently loaded particle is replaced with a 2D sprite to generate a 2D substitute, using a simplified SpriteMaterial and inheriting the position and / or color of the original particle.

[0111] Further, when entering the danger mode and triggering the avalanche protection, it also includes: triggering the forced garbage collection (GC) process and compressing the particle memory pool, and detecting whether the GPU memory usage rate is less than or equal to 75% at this time; if the GPU memory usage rate is less than or equal to 75% at this time, the recovery program is started and the 3D forms and physical properties of each particle are restored according to the priority; among them, the interactive particles are preferentially restored during the recovery process, and the maximum number of particles that can be restored per frame is 50.

[0112] Among them, the multi-level avalanche protection policy is divided into three levels: primary, emergency, and disaster. The primary standard is that the GPU memory is greater than 70%, and at this time, LOD downgrading and physical simplification are performed; the emergency standard is that the GPU memory is greater than 85%, and at this time, 3D is downgraded to 2D for sprite replacement; the disaster standard is that the GPU memory is greater than 95%, and at this time, forced memory recycling is required.

[0113] The multi-level avalanche protection policy can achieve seamless visual transition by retaining the original spatial coordinates of the 2D sprites, and uses a double-buffered recycling pool to avoid memory fragmentation.

[0114] In addition, an embodiment of the present invention also provides a particle special effect implementation device based on WebGL. The device includes: a processor and a memory; the memory is used to store one or more program instructions; the processor is used to run one or more program instructions to execute the steps of a particle special effect implementation method based on WebGL as described in any one of the above.

[0115] In addition, an embodiment of the present invention also provides a computer-readable storage medium. A computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, it implements the steps of a particle special effect implementation method based on WebGL as described in any one of the above.

[0116] In an embodiment of the present invention, the processor may be an integrated circuit chip with signal processing capabilities. The processor may be a general-purpose processor, a digital signal processor (DSP), an application specific integrated circuit (ASIC), a field programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components.

[0117] It can implement or execute the various methods, steps, and logic block diagrams disclosed in the embodiments of the present invention. The general-purpose processor may be a microprocessor, or the processor may also be any conventional processor, etc. The steps of the method disclosed in combination with the embodiments of the present invention can be directly embodied as being executed and completed by a hardware decoding processor, or by a combination of hardware and software modules in the decoding processor. The software module may be located in a mature storage medium in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The processor reads the information in the storage medium and combines its hardware to complete the steps of the above method.

[0118] The storage medium may be a memory, for example, it may be a volatile memory or a non-volatile memory, or may include both volatile and non-volatile memories.

[0119] Among them, the non-volatile memory may be a read-only memory (ROM), a programmable read-only memory (PROM), an erasable programmable read-only memory (EPROM), an electrically erasable programmable read-only memory (EEPROM), or a flash memory.

[0120] The volatile memory may be a Random Access Memory (RAM) which serves as an external cache. By way of example but not limitation, many forms of RAM are available, such as Static RAM (SRAM), Dynamic RAM (DRAM), Synchronous DRAM (SDRAM), Double Data Rate SDRAM (DDR SDRAM), Enhanced SDRAM (ESDRAM), Synchlink DRAM (SLDRAM), and Direct Rambus RAM (DRRAM).

[0121] The storage media described in embodiments of the present invention are intended to include, but not be limited to, these and any other suitable types of memory.

[0122] Those skilled in the art should be aware that, in one or more of the above examples, the functions described in the present invention can be implemented by a combination of hardware and software. When applying software, the corresponding functions can be stored in a computer-readable medium or transmitted as one or more instructions or codes on a computer-readable medium. The computer-readable medium includes computer storage media and communication media, where the communication media includes any medium that facilitates the transfer of a computer program from one place to another. The storage media can be any available medium accessible by a general-purpose or special-purpose computer.

[0123] Although the present invention has been described in detail above with general descriptions and specific embodiments, on the basis of the present invention, some modifications or improvements can be made, which are obvious to those skilled in the art. Therefore, these modifications or improvements made without departing from the spirit of the present invention all fall within the scope of the present invention claimed.

Claims

1. A method for realizing particle special effects based on WebGL, characterized in that: The method comprises: S1, obtaining the remaining rendering time of the current frame and the preset particle initialization time-consuming data, and dynamically determining the maximum number of particles that can be loaded in the next frame using the remaining rendering time and the preset particle initialization time-consuming data; S2, detecting whether a batch loading request occurs, if no batch loading request occurs, obtaining a queue of particles to be loaded and the number of particles to be loaded in the queue, sorting the particles to be loaded in the queue of particles to be loaded, loading particles according to the order and monitoring the GPU memory usage in real time; S3. If a batch loading request occurs and the number of particles to be loaded is greater than the preset threshold, the current limiting mode is entered, and the particles to be loaded are given priority, and the core area particles are loaded first; S4. When the GPU memory usage exceeds the preset GPU memory usage threshold, the multi-level protection strategy is triggered and corresponding operations are performed according to the current GPU memory usage.

2. A particle special effect realization method based on WebGL as claimed in claim 1, characterized in that: Obtaining the remaining rendering time of the current frame and the preset particle initialization time data, and dynamically determining the maximum number of particles that can be loaded in the next frame using the remaining rendering time and the preset particle initialization time data, including: The calculation expression of the maximum number of particles that can be loaded is: ； Among them, NL is the maximum number of particles that can be loaded, TR is the remaining rendering time, TIPP is the preset particle initialization time consumption data, and SF∈(0.5,1.0) is the safety factor used to avoid frame rate fluctuations.

3. A particle special effect realization method based on WebGL as claimed in claim 2, characterized in that: The particles to be loaded in the particle queue to be loaded are sorted, and the sorting order is: ascending sorting in the visible area, descending sorting according to the user interaction association degree, and descending sorting according to the particle type weight.

4. A particle special effect realization method based on WebGL as claimed in claim 3, characterized in that: Prioritize loading core area particles, including: Give a preset number of core area particles a highlighted state, and downgrade the peripheral particles to low-precision models; Among them, the preset number is 500.

5. A particle special effect realization method based on WebGL as claimed in claim 4, characterized in that: When the GPU memory usage exceeds the preset GPU memory usage threshold, the multi-level protection strategy is triggered and corresponding actions are performed according to the current GPU memory usage, including: When the CPU memory usage is greater than 70% and less than 85%, the system enters the warning mode and triggers the primary protection. The primary protection includes: reducing the quality of Tier 2 particles, suspending the physical calculation of distant particles, and recording the downgraded particle ID.

6. A particle special effect realization method based on WebGL as claimed in claim 5, characterized in that: When the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered to perform corresponding operations based on the current GPU memory usage, including: When the CPU memory usage is greater than 85%, it enters dangerous mode and triggers avalanche protection; Check whether the currently loaded particle is a key particle. If it is a key particle, keep the 3D shape; If it is not a key particle, replace the currently loaded particle with a 2D sprite, generate a 2D substitute, use a simplified SpriteMaterial and inherit the position and / or color of the original particle.

7. A particle special effect realization method based on WebGL as claimed in claim 6, characterized in that: Entering danger mode, triggering avalanche protection, also includes: Trigger the forced recycling GC process and compress the particle memory pool, and check whether the GPU memory usage is less than or equal to 75% at this time; If the GPU memory usage is less than or equal to 75% at this time, the recovery program is started and the 3D shape and physical properties of each particle are restored according to priority; Among them, in the recovery process, interactive particles are restored first, and the maximum number of particles that can be restored per frame is 50.

8. A particle special effects implementation system based on WebGL, characterized in that: The system comprises: A resource budget calculation module is used to obtain the remaining rendering time of the current frame and the preset particle initialization time consumption data, and dynamically determine the maximum number of particles that can be loaded in the next frame using the remaining rendering time and the preset particle initialization time consumption data; A batch loading request monitoring module is used to detect whether a batch loading request occurs. If no batch loading request occurs, the to-be-loaded particle queue and the number of to-be-loaded particles in the queue are obtained, the to-be-loaded particles in the to-be-loaded particle queue are sorted, particles are loaded in sequence, and GPU memory usage is monitored in real time. The current limiting module is used to enter the current limiting mode if a batch loading request occurs and the number of particles to be loaded is greater than the maximum number of particles that can be loaded, assign priorities to the particles to be loaded, and give priority to loading the core area particles; The multi-level protection module is used to trigger the multi-level protection strategy when the GPU memory usage exceeds the preset GPU memory usage threshold, and perform corresponding operations according to the current GPU memory usage.

9. A particle special effect realization device based on WebGL, characterized in that: The device comprises: a processor and a memory; The memory is used to store one or more program instructions; The processor is used to run one or more program instructions to execute the steps of a method for realizing particle special effects based on WebGL 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 computer program, and when the computer program is executed by a processor, the steps of a method for realizing particle special effects based on WebGL as claimed in any one of claims 1 to 7 are implemented.

Images