Performant Particles is a demo that was written to handle a comparatively large amount of particles without slowing down to the same degree as existing solutions. Since it was intended as a proof of concept rather than a ready to use solution, it cannot be imported as a package, but it should still be easy to use. All of the customization options are listed at the top of perParticles.js file and are self-explanatory.
You can view the live demo here. It is set to the same particle amount and maximum line distance as the tests described below.
The tests were performed on a system with an AMD Ryzen 7 5800X CPU and 32Gb of DDR4 3600 RAM. The monitor used had a native resolution of 5120x1440 and a maximum refresh rate of 240Hz.
Microsoft Edge version 93.0.961.52 (64-bit) on Windows 10 version 10.0.19043 (Build 19043).
Stats.js was used to measure FPS.
| Software | FPS | Resoution | Particles | Max Line Distance |
|---|---|---|---|---|
| perParticles | 75-95 | 1920x1080 | 1000 | 150px |
| Particles.js | 23-25 | 1920x1080 | 1000 | 150px |
| tsParticles | 13-15 | 1920x1080 | 1000 | 150px |
| Software | FPS | Resoution | Particles | Max Line Distance |
|---|---|---|---|---|
| perParticles | 175-195 | 5120x1440 | 1000 | 150px |
| Particles.js | 63-66 | 5120x1440 | 1000 | 150px |
| tsParticles | 29-32 | 5120x1440 | 1000 | 150px |
The FPS results were consistent across multiple measurements on the same computer. Naturally these results are specific to the hardware and software used. Testing on your own device may yield different results. Somewhat lower performance would be expected on CPUs with 8 or fewer cores, unfortunately I didn't have any on hand to test with. For what it's worth, according to people who ran some impromptu tests for me on their phones and computers, perParticles still visibly outperforms other solutions.