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

Abstract

The embodiment of the application discloses a kind of WebGL-based particle special effect implementation method, system, equipment and storage medium, the embodiment of the application is dynamically streamed frame level accurate control, particle loading algorithm based on frame time budget feedback, dynamic measurement means and safe elasticity coefficient of single particle initialization time consumption respond to the performance fluctuation of browser, through multilevel avalanche protection strategy, 2D spirit is kept original space coordinates, seamless visual transition is realized, using double buffering recycling pool avoids memory fragmentation.The dynamic flow particle loading based on frame level in the embodiment of the application is compared with the loading of traditional particle structure, and the memory occupation is reduced by 50%-75%, and the server cost is saved.And for the emergency plan of the spread of mass particles, it can be easily coped with, and it can also be compatible with low memory device and high memory device with high memory, with certain adaptability.

Description

Technical Field

[0001] This invention relates to the field of Web development technology, specifically to a method, system, device, and storage medium for implementing particle effects based on WebGL. Background Technology

[0002] In web development, particle effects are widely used in animation, games, and interactive interfaces to enhance visual appeal and user experience. However, existing methods for implementing particle effects have some limitations. For example, the interactions between particles are not fluid and natural enough, and the loading and unloading processes for particles are not flexible and efficient enough, leading to performance bottlenecks and resource waste in large-scale particle systems.

[0003] To enhance user experience and enrich visual effects, particle effects are being used more and more widely. However, traditional methods of implementing particle effects often suffer from performance bottlenecks. In browser environments, the execution efficiency of JavaScript itself and the limitations of browser graphics processing capabilities make it difficult to run complex particle effects smoothly. For example, in some 3D visualizations, when there are many particle effects and the effects are complex, the page is prone to lag or even crashes, severely impacting the user experience. Furthermore, traditional methods also fall short in terms of the realism and customizability of effects, making it difficult to meet developers' needs for high-quality, personalized effects and the rendering of large amounts of data. Summary of the Invention

[0004] To address these issues, this invention provides a method, system, device, and storage medium for implementing particle effects based on WebGL, thereby solving the technical problems in the prior art where the particle loading and unloading process is not flexible and efficient enough, and where the page is prone to lag and crashes and excessive memory usage when there are many and complex particle effects.

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

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

[0007] S1. Obtain the remaining rendering time and preset particle initialization time data of the current frame, and use the remaining rendering time and preset particle initialization time data to dynamically determine the maximum number of loadable particles in the next frame.

[0008] S2. Detect whether a batch loading request has occurred. If no batch loading request has occurred, 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, load the particles in order, and monitor the GPU memory usage 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, then the flow limiting mode is entered, and priority is assigned to the particles to be loaded, with core area particles being loaded first.

[0010] S4. When the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered, and corresponding operations are performed based on the current GPU memory usage.

[0011] Furthermore, the remaining rendering time and preset particle initialization time data of the current frame are obtained, and the maximum number of loadable particles in the next frame is dynamically determined using the remaining rendering time and preset particle initialization time data, including:

[0012] The expression for calculating the maximum loadable number of particles is:

[0013]

[0014] Where NL is the maximum number of loadable particles, TR is the remaining rendering time, TIPP is the preset particle initialization time data, and SF∈(0.5,1.0) is the safety factor used to avoid frame rate fluctuations.

[0015] Furthermore, the particles to be loaded in the particle queue are sorted in the following order: ascending order within the visible area, descending order based on user interaction correlation degree, and descending order based on particle type weight.

[0016] Furthermore, core region particles are loaded preferentially, including:

[0017] A preset number of core area particles are given a highlighted state, while the outer particles are downgraded to a low-precision model.

[0018] The preset quantity is 500.

[0019] Furthermore, when GPU memory usage exceeds a preset GPU memory usage threshold, a multi-level protection strategy is triggered, performing corresponding operations based on the current GPU memory usage, including:

[0020] When the CPU memory usage is greater than 70% but less than 85%, the system enters warning mode and triggers primary protection.

[0021] The primary protection includes: reducing the mass of Tier 2 particles, pausing the physical calculations of distant particles, and recording the IDs of degraded particles.

[0022] Furthermore, when GPU memory usage exceeds a preset GPU memory usage threshold, a multi-level protection strategy is triggered, performing corresponding operations based on the current GPU memory usage. This also includes:

[0023] When CPU memory usage exceeds 85%, the system enters a dangerous mode and triggers avalanche protection.

[0024] Detect whether the currently loaded particle is a key particle; if it is, preserve its 3D shape.

[0025] If it is not a key particle, the currently loaded particle is replaced with a 2D sprite, generating a 2D alternative using a simplified SpriteMaterial and inheriting the original particle's position and / or color.

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

[0027] Trigger a forced garbage collection (GC) process and compact the particle memory pool, then check if the GPU memory utilization is less than or equal to 75%.

[0028] If the GPU memory usage is less than or equal to 75% at this time, the recovery process will be started and the 3D shape and physical properties of each particle will be restored according to priority.

[0029] During the recovery process, interactive particles are recovered first, and the maximum number of particles that can be recovered per frame is 50.

[0030] According to a second aspect of the present invention, a WebGL-based particle effects implementation system is provided, the system comprising:

[0031] The resource budget calculation module is used to obtain the remaining rendering time and preset particle initialization time data of the current frame, and dynamically determine the maximum number of loadable particles in the next frame using the remaining rendering time and preset particle initialization time data.

[0032] The batch loading request monitoring module is used to detect whether a batch loading request has occurred. If no batch loading request has occurred, it obtains the particle queue to be loaded and the number of particles to be loaded in the queue, sorts the particles to be loaded in the particle queue, loads the particles in the order, and monitors the GPU memory usage in real time.

[0033] The rate limiting module is used to enter rate limiting mode if there are batch loading requests and the number of particles to be loaded is greater than the maximum number of particles that can be loaded. It assigns priority to the particles to be loaded and prioritizes loading particles in the core area.

[0034] The multi-level protection module is used to trigger a multi-level protection strategy and perform corresponding operations based on the current GPU memory usage when the GPU memory usage exceeds the preset GPU memory usage threshold.

[0035] According to a third aspect of the present invention, a device for implementing particle effects based on WebGL is provided, the device comprising: a processor and a memory;

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

[0037] The processor is configured to run one or more program instructions to perform the steps of a WebGL-based particle effects implementation method as described in any of the preceding claims.

[0038] According to a fourth aspect of the present invention, a computer-readable storage medium is provided, wherein a computer program is stored on the computer-readable storage medium, and the computer program, when executed by a processor, implements the steps of the WebGL-based particle effects implementation method as described in any of the preceding claims.

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

[0040] This invention addresses browser performance fluctuations through frame-level precise control of dynamic streaming loading, a particle loading algorithm based on frame time budget feedback, dynamic measurement of single-particle initialization time, and a safety elasticity coefficient. A multi-level avalanche protection strategy preserves the original spatial coordinates of 2D sprites, achieving seamless visual transitions, and a dual-buffered garbage collection pool avoids memory fragmentation. Compared to traditional particle structure loading, the frame-level dynamic streaming particle loading in this invention reduces memory usage by 50%-75%, saving server costs. Furthermore, it can handle contingency plans for deploying massive numbers of particles effectively and is compatible with both low-memory and high-RAM / VRAM devices, demonstrating a degree of adaptability. Attached Figure Description

[0041] To more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are merely exemplary, and those skilled in the art can derive other embodiments based on the provided drawings without creative effort.

[0042] The structures, proportions, sizes, etc. illustrated in this specification are only for the purpose of assisting those skilled in the art in understanding and reading the content disclosed herein, and are not intended to limit the conditions under which the present invention can be implemented. Therefore, they have no substantial technical significance. Any modifications to the structure, changes in the proportions, or adjustments to the size, without affecting the effects and objectives that the present invention can produce, should still fall within the scope of the technical content disclosed in the present invention.

[0043] Figure 1 A schematic diagram of the logical structure of a WebGL-based particle effects implementation system provided in an embodiment of the present invention;

[0044] Figure 2 A flowchart illustrating a method for implementing particle effects based on WebGL, provided in an embodiment of the present invention;

[0045] Figure 3 A schematic diagram of frame processing in a WebGL-based particle effects implementation method provided in an embodiment of the present invention;

[0046] Figure 4 A schematic diagram of the frame timeline in a WebGL-based particle effects implementation method provided in an embodiment of the present invention;

[0047] Figure 5 A schematic diagram illustrating the dynamic adjustment process in a WebGL-based particle effects implementation method provided in an embodiment of the present invention;

[0048] Figure 6 This is a schematic diagram illustrating the detection of batch loading requests in a WebGL-based particle effects implementation method according to an embodiment of the present invention.

[0049] Figure 7a and Figure 7b This is a schematic diagram of a multi-level avalanche protection strategy in a WebGL-based particle effects implementation method provided in an embodiment of the present invention. Detailed Implementation

[0050] The following specific embodiments illustrate the implementation 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 only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0051] To enhance user experience and enrich visual effects, particle effects are being used more and more widely. However, traditional methods of implementing particle effects often suffer from performance bottlenecks. In browser environments, the execution efficiency of JavaScript itself and the limitations of browser graphics processing capabilities make it difficult to run complex particle effects smoothly. For example, in some 3D visualizations, when there are many particle effects and the effects are complex, the page is prone to lag or even crashes, severely impacting the user experience. Furthermore, traditional methods also fall short in terms of the realism and customizability of effects, making it difficult to meet developers' needs for high-quality, personalized effects and the rendering of large amounts of data.

[0052] Currently, loading particle effects using Cesium is a common practice. When using Cesium services, authentication is required, and an access token is the authentication credential. By setting `Cesium.Ion.defaultAccessToken` to the specific value "YOUR_ACCESS_TOKEN", subsequent Cesium operations can use this token to access related resources. You need to replace "YOUR_ACCESS_TOKEN" with the actual access token obtained on the Cesium Ion platform to use Cesium's functions correctly, such as loading map data.

[0053] Creating a viewer and binding it to an element: A Cesium viewer object named `viewer` is created using `new Cesium.Viewer('cesiumContainer')`. `'cesiumContainer'` is the ID of an element in the HTML page, and this viewer will be bound to the element with that ID. In the HTML, a corresponding...<divid="cesiumContainer"> This element will display the Cesium viewer at the location of the element, allowing users to interact with the geographic information scene provided by Cesium.

[0054] Creating a particle system:

[0055] 1. Model Matrix Settings

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

[0057] 2. Transmitter Settings

[0058] A circular emitter with a radius of 0.5 is created using `new Cesium.CircleEmitter(0.5)`. This emitter determines where the particles are emitted from; a circular emitter means that particles will be emitted from a circular area, and the radius of 0.5 controls the size of this circular area.

[0059] 3. Particle Image Settings

[0060] The image `'https: / / cesium.com / downloads / cesiumjs / releases / 1.91 / Build / Cesium / Assets / Textures / fire.png'` specifies the image used for the particles. A remotely linked image is used here, and when the particles are emitted, they will be displayed in the style of this image. In this example, it's an image of a flame, so the particles will look like flames.

[0061] 4. Color Settings

[0062] The starting color, `startColor: Cesium.Color.RED.withAlpha(0.7)`, indicates that the particle is initially emitted as red with an opacity of 0.7. An opacity of 0.7 means the particle has a semi-transparent effect.

[0063] End Color: `endColor: Cesium.Color.YELLOW.withAlpha(0.3)` indicates that the particle's color is yellow at the end of its lifecycle, with an opacity of 0.3. As the particle's lifecycle progresses, its color gradually transitions from the initial color to the ending color.

[0064] 5. Scaling settings

[0065] The initial scaling factor (startScale: 0.1) indicates that the scaling factor is 0.1 when the particle is first emitted, meaning the particle is initially quite small.

[0066] End scaling: endScale: 1.0 indicates that the scaling of the particle at the end of its life cycle is 1.0, meaning that the particle will gradually grow larger during its life cycle.

[0067] 6. Lifecycle Settings

[0068] Minimum Lifetime: 1.0 second specifies that the minimum lifespan of a particle is 1 second. That is, each particle will exist for at least 1 second.

[0069] Maximum Lifetime: 3.0 seconds specifies that the maximum survival time of a particle is 3 seconds. The survival time of each particle is randomly determined between 1 second and 3 seconds.

[0070] 7. Speed ​​Settings

[0071] Minimum Speed: minimumSpeed: 1.0 indicates that the minimum speed at which the particle is emitted is 1.0.

[0072] Maximum Speed: maximumSpeed: 5.0 indicates that the maximum speed at which the particles are emitted is 5.0. The emission speed of each particle will be randomly determined between 1.0 and 5.0.

[0073] 8. Transmission rate setting

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

[0075] 9. Overall Lifecycle Settings

[0076] lifetime: 16.0 seconds means that the total lifetime of the entire particle system is 16 seconds. Within these 16 seconds, particles will continuously be emitted and disappear.

[0077] 10. Loop Mode Settings

[0078] `loop: true` enables loop mode, meaning that when the total lifespan of the particle system ends, it will start emitting particles again and continue to loop.

[0079] After the particle system is created, add it to the scene using `viewer.scene.primitives.add(particleSystem)`. This will add the created particle system to the viewer's list of scene primitives. The particle system will then be displayed in the geographic scene shown by the Cesium viewer, allowing users to see the effects of particle emission, movement, and disappearance.

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

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

[0082] 2) Cesium loads the entire particle scene into memory before rendering the image. When there are many particles and they are not copies of the same particle image, the screen will stutter for a significant amount of time. Furthermore, during the particle loading process, the browser may crash and become unusable due to insufficient memory.

[0083] 3) Cesium does not remove particles from memory when they are shown or hidden. Instead, it keeps them mounted in memory. This results in persistent memory usage, and while this memory leak issue may be forgotten as particle-based applications are developed, it can become a problem when subsequent development demands extreme performance. These useless particles will still be occupying memory, preventing the full utilization of memory resources.

[0084] To address the technical problems of inflexible and inefficient particle loading and unloading processes, page lag and crashes, and excessive memory consumption when there are many and complex particle effects, the purpose of this invention is to design a method for dynamically interacting between particles, streaming particle loading, and handling large amounts of particle loading.

[0085] refer to Figure 1 This invention discloses a particle effects implementation system based on WebGL, which includes: a resource budget calculation module 1; a batch loading request monitoring module 2; a rate limiting module 3; and a multi-level protection module 4.

[0086] Corresponding to the aforementioned WebGL-based particle effects implementation system, this invention also discloses a WebGL-based particle effects implementation method. The following details a WebGL-based particle effects implementation method disclosed in this invention, in conjunction with the aforementioned WebGL-based particle effects implementation system.

[0087] refer to Figure 2 This invention discloses a method for implementing particle effects based on WebGL, the method comprising:

[0088] S1. Obtain the remaining rendering time and preset particle initialization time data of the current frame, and use the remaining rendering time and preset particle initialization time data to dynamically determine the maximum number of loadable particles in the next frame.

[0089] S2. Detect whether a batch loading request has occurred. If no batch loading request has occurred, 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, load the particles in order, and monitor the GPU memory usage in real time.

[0090] S3. If a batch loading request occurs and the number of particles to be loaded is greater than the preset threshold, then the flow limiting mode is entered, and priority is assigned to the particles to be loaded, with core area particles being loaded first.

[0091] S4. When the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered, and corresponding operations are performed based on the current GPU memory usage.

[0092] Further, refer to Figure 3 and Figure 4 The remaining rendering time and preset particle initialization time of the current frame are obtained. The maximum number of loadable particles for the next frame is dynamically determined using the remaining rendering time and preset particle initialization time, including: the calculation expression for the maximum number of loadable particles is:

[0093]

[0094] Where NL is the maximum number of loadable particles, TR is the remaining rendering time, TIPP is the preset particle initialization time data, and SF∈(0.5,1.0) is the safety factor used to avoid frame rate fluctuations.

[0095] The maximum number of loadable particles for the next frame is dynamically determined based on 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] The safety factor (safety_factor) (0.5, 1.0) is used to avoid frame rate fluctuations, and floor represents rounding down.

[0099] Schematic diagram of the frame time axis (see reference) Figure 4 The key parameters are explained below:

[0100] Parameter name Example value illustrate Frame budget 16.6ms Time per frame at 60 FPS t_init_per_particle 0.5ms Actual measurement of initialization time for a single particle safety_factor 0.7 Reserve 30% of your time to deal with volatility 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 number of loads 3 Load according to the actual number when the queue is insufficient.

[0101] refer to Figure 5 During the dynamic adjustment process, when the system is idle in the current frame, it can be determined from the N_load data that 28 particles can be loaded. When the system is busy in the current frame, it can be determined from the N_load data that the actual number of loaded particles should be adjusted to 3 to avoid system lag. In the next frame, an adaptive adjustment is made using a safety factor. If the t_remain data of 3 consecutive frames is less than 2ms, then the safety factor needs to be adjusted to reduce the number of particles to better load particles.

[0102] Frame-level precise control of dynamic streaming loading is proposed, based on a particle loading algorithm with frame time budget feedback. A dynamic measurement method for t_init_per_particle (single particle initialization time) is also proposed, and a safety_factor elasticity coefficient is introduced to cope with browser performance fluctuations.

[0103] Furthermore, the particles to be loaded in the particle queue are sorted in the following order: ascending order within the visible area, descending order based on user interaction correlation degree, and descending order based on particle type weight.

[0104] For example, user interaction relevance is sorted in descending order with UI labeled particles taking precedence, and particle type weight is sorted in descending order with flame particles being sorted above dust particles.

[0105] refer to Figure 6 When a sudden surge in particle loading is required (e.g., for explosion or cosmic effects), a rate-limiting mode should be implemented. First, load the 500 highlighted particles from the core area, downgrading the remaining particles to lower-resolution models. When GPU memory is nearing exhaustion, pause loading of all unnecessary particles and replace particles located far from the viewpoint with 2D icon textures.

[0106] Further, refer to Figure 6 Prioritize loading particles in the core area, including: assigning a preset number of core area particles a highlighted state, and downgrading the outer particles to a low-precision model.

[0107] The preset quantity is 500.

[0108] Further, refer to Figure 7a and Figure 7b When the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered, and corresponding operations 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 warning mode and triggers primary protection.

[0109] The primary protection includes: reducing the mass of Tier 2 particles, pausing the physical calculations of distant particles, and recording the IDs of degraded particles.

[0110] Furthermore, when the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered, and corresponding operations are performed according to the current GPU memory usage. This also includes: when the CPU memory usage is greater than 85%, entering a dangerous mode and triggering avalanche protection; detecting whether the currently loaded particle is a critical particle, and if it is a critical particle, retaining its 3D form; if it is not a critical particle, replacing the currently loaded particle with a 2D sprite, generating a 2D substitute, using a simplified SpriteMaterial and inheriting the original particle's position and / or color.

[0111] Furthermore, entering dangerous mode and triggering avalanche protection also includes: triggering a forced garbage collection process and compressing the particle memory pool, and detecting 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 process is started and the 3D shape and physical properties of each particle are restored according to priority; among them, interactive particles are restored first during the recovery process, and the maximum number of particles that can be restored per frame is 50.

[0112] The multi-level avalanche protection strategy is divided into three levels: primary, emergency, and catastrophic. The primary level is defined as GPU memory usage exceeding 70%, at which point LOD downgrading and physics simplification are performed. The emergency level is defined as GPU memory usage exceeding 85%, at which point 3D is downgraded to 2D and sprites are replaced. The catastrophic level is defined as GPU memory usage exceeding 95%, at which point forced memory reclamation is required.

[0113] The multi-level avalanche protection strategy preserves the original spatial coordinates of 2D sprites, enabling seamless visual transitions, and employs a dual-buffered recycling pool to avoid memory fragmentation.

[0114] In addition, embodiments of the present invention also provide a WebGL-based particle effects implementation device, the device comprising: a processor and a memory; the memory for storing one or more program instructions; the processor for running one or more program instructions to perform the steps of a WebGL-based particle effects implementation method as described in any of the preceding embodiments.

[0115] In addition, embodiments of the present invention also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, implements the steps of a WebGL-based particle effects implementation method as described in any of the preceding embodiments.

[0116] In this embodiment of the invention, the processor can be an integrated circuit chip with signal processing capabilities. The processor can 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] The various methods, steps, and logic diagrams disclosed in the embodiments of this invention can be implemented or executed. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in the embodiments of this invention can be directly implemented by a hardware decoding processor, or implemented by a combination of hardware and software modules in the decoding processor. The software modules can reside in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. The processor reads information from the storage medium and, in conjunction with its hardware, completes the steps of the above methods.

[0118] The storage medium can be memory, such as volatile memory or non-volatile memory, or may include both volatile and non-volatile memory.

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

[0120] Volatile memory can be random access memory (RAM), which is used as an external cache. By way of example, but not limitation, many forms of RAM are available, such as static random access memory (SRAM), dynamic random access memory (DRAM), synchronous dynamic random access memory (SDRAM), double data rate synchronous dynamic random access memory (DDRSDRAM), enhanced synchronous dynamic random access memory (ESDRAM), synchronous linked dynamic random access memory (Synchlink DRAM, SLDRAM), and direct memory bus RAM (DRRAM).

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

[0122] Those skilled in the art will recognize that, in one or more of the examples above, the functions described in this invention can be implemented using a combination of hardware and software. When applied as software, the corresponding functions can be stored in a computer-readable medium or transmitted as one or more instructions or code on a computer-readable medium. Computer-readable media include computer storage media and communication media, wherein communication media include any medium that facilitates the transmission of computer programs from one place to another. Storage media can be any available medium that can be accessed 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, modifications or improvements can be made to it, which will be obvious to those skilled in the art. Therefore, all such modifications or improvements made without departing from the spirit of the present invention fall within the scope of protection claimed by the present invention.

Claims

1. A method for implementing particle effects based on WebGL, characterized in that, The method includes: S1. Obtain the remaining rendering time and preset particle initialization time data of the current frame, and use the remaining rendering time and preset particle initialization time data to dynamically determine the maximum number of loadable particles in the next frame. S2. Detect whether a batch loading request has occurred. If no batch loading request has occurred, 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, load the particles in order, and monitor 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, then enter the rate limiting mode, assign priority to the particles to be loaded, and prioritize loading particles in the core area. S4. When the GPU memory usage exceeds the preset GPU memory usage threshold, a multi-level protection strategy is triggered, and corresponding operations are performed based on the current GPU memory usage. In the avalanche protection of the multi-level protection strategy, the GC process is forcibly reclaimed and the particle memory pool is compressed. The compressed particle memory pool adopts a double buffer reclamation mechanism, including a first buffer pool storing active particles and a second buffer pool storing particles to be reclaimed. The two pools work alternately. Obtain the remaining rendering time and preset particle initialization time data for the current frame, and dynamically determine the maximum number of loadable particles for the next frame using the remaining rendering time and preset particle initialization time data, including: The expression for calculating the maximum loadable number of particles is: ， Where NL is the maximum number of loadable particles, TR is the remaining rendering time, TIPP is the preset particle initialization time data, and SF∈(0.5,1.0) is a safety factor used to avoid frame rate fluctuations. The particles to be loaded in the particle queue are sorted in multiple levels, including first sorting in ascending order by visible area position, then sorting in descending order by user interaction correlation degree, and finally sorting in descending order by particle type weight. Prioritize loading core region particles, including: A preset number of core area particles are given a highlighted state, while the outer particles are downgraded to a low-precision model. The preset quantity is 500.

2. The method for implementing particle effects based on WebGL as described in claim 1, characterized in that, When GPU memory usage exceeds a preset GPU memory usage threshold, a multi-level protection strategy is triggered, performing corresponding operations based on the current GPU memory usage, including: When the CPU memory usage is greater than 70% but less than 85%, the system enters warning mode and triggers primary protection. The primary protection includes: reducing the mass of Tier 2 particles, pausing the physical calculations of distant particles, and recording the IDs of degraded particles.

3. The method for implementing particle effects based on WebGL as described in claim 2, characterized in that, When GPU memory usage exceeds a preset GPU memory usage threshold, a multi-level protection strategy is triggered, performing corresponding operations based on the current GPU memory usage. This includes: When CPU memory usage exceeds 85%, the system enters a dangerous mode and triggers avalanche protection. Detect whether the currently loaded particle is a key particle; if it is, preserve its 3D shape. If it is not a key particle, the currently loaded particle is replaced with a 2D sprite, generating a 2D alternative using a simplified SpriteMaterial and inheriting the original particle's position and / or color.

4. The method for implementing particle effects based on WebGL as described in claim 3, characterized in that, Entering danger mode triggers avalanche protection, which also includes: After triggering the forced garbage collection (GC) process and compacting the particle memory pool, check whether the GPU memory utilization 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 process will be started and the 3D shape and physical properties of each particle will be restored according to priority. During the recovery process, interactive particles are recovered first, and the maximum number of particles that can be recovered per frame is 50.

5. A particle effects implementation system based on WebGL, characterized in that, The system includes: The resource budget calculation module is used to obtain the remaining rendering time and preset particle initialization time data of the current frame, and dynamically determine the maximum number of loadable particles in the next frame using the remaining rendering time and preset particle initialization time data. The batch loading request monitoring module is used to detect whether a batch loading request has occurred. If no batch loading request has occurred, it obtains the particle queue to be loaded and the number of particles to be loaded in the queue, sorts the particles to be loaded in the particle queue, loads the particles in the order, and monitors the GPU memory usage in real time. The rate limiting module is used to enter rate limiting mode if there are batch loading requests and the number of particles to be loaded is greater than the maximum number of particles that can be loaded. It assigns priority to the particles to be loaded and prioritizes loading particles in the core area. The multi-level protection module is used to trigger a multi-level protection strategy and perform corresponding operations based on the current GPU memory usage when the GPU memory usage exceeds the preset GPU memory usage threshold. In the avalanche protection of the multi-level protection strategy, the GC process is forcibly reclaimed and the particle memory pool is compressed. The compressed particle memory pool adopts a double buffer reclamation mechanism, including a first buffer pool storing active particles and a second buffer pool storing particles to be reclaimed. The two pools work alternately. Obtain the remaining rendering time and preset particle initialization time data for the current frame, and dynamically determine the maximum number of loadable particles for the next frame using the remaining rendering time and preset particle initialization time data, including: The expression for calculating the maximum loadable number of particles is: ， Where NL is the maximum number of loadable particles, TR is the remaining rendering time, TIPP is the preset particle initialization time data, and SF∈(0.5,1.0) is a safety factor used to avoid frame rate fluctuations. The particles to be loaded in the particle queue are sorted in multiple levels, including first sorting in ascending order by visible area position, then sorting in descending order by user interaction correlation degree, and finally sorting in descending order by particle type weight. Prioritize loading core region particles, including: A preset number of core area particles are given a highlighted state, while the outer particles are downgraded to a low-precision model. The preset quantity is 500.

6. A device for implementing particle effects based on WebGL, characterized in that, The device includes: a processor and a memory; The memory is used to store one or more program instructions; The processor is configured to run one or more program instructions to perform the steps of a WebGL-based particle effects implementation method as described in any one of claims 1 to 4.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, implements the steps of the WebGL-based particle effects implementation method as described in any one of claims 1 to 4.

Images