Recently, Michael Chaize implemented the same particle system using technologies such as HTML 5 and Flash, and conducted an evaluation of its performance in different browsers, different operating systems, and different platforms (desktop and mobile devices). It can be seen that when the number of particles reaches 4000, the performance of Flash is already three times that of HTML 5. However, this review did not use HTML 5's latest WebGL Canvas. Therefore, a new test function based on WebGL was added based on the original test program.
For the sake of fairness, the calculation of the particle system is implemented using the original JavaScript and is not calculated in the GPU shader.
The test webpage address is here.
The results are shown below
When using HTML and 2D Canvas, the bottleneck of this particle system test is entirely in the drawing of graphics, but after using WebGL, the bottleneck shifts to the calculation of the particle system in JavaScript. The above tests are based on Chrome 5 Dev version, and the WebGL function is enabled by adding the -enable-webgl startup parameter. At the same time, the Firefox Dev version was used for comparison. There is a big gap with Chrome, and there is not even a gap with Chrome's ordinary graphics drawing method.
It's unknown whether Flash had GPU acceleration enabled for this test. In the future, when browsers use GPU acceleration technology, they can accelerate the drawing of HTML and 2D Canvas, thereby achieving faster drawing speeds without using complex WebGL.