search

slaylines / canvas-engines-comparison

Performance comparison of different canvas rendering engines.
https://benchmarks.slaylines.io
MIT License
786 stars 84 forks source link

feat (WebGL): initial implementation #56

Closed kostyfisik closed 1 year ago

kostyfisik commented 1 year ago

At my laptop (with 6 y.o. integrated Intel GPU) it beats the previous best performer by about a factor of ten (pixi.js@16k - 30FPS, WebGL@128k - 38FPS). Because of WebGL I had to increase the number of rects to 256k to see the limits of the technology.

kostyfisik commented 1 year ago

First optimization round. Now it shows 50+ FPS @512k rects on my laptop...

kostyfisik commented 1 year ago

I think I am done with it now. Note, that the current solution lacks good anti-aliasing, so the comparison with other libs is not 100% fair. Switching the build-in one ON drops the FPS just by 10 (from 50 to 40 FPS @512k) and doesn't effect @256k at all, so it should be critical for performance. However, I am not interested in becoming WebGL guru, this code is just my first try to play with WebGL to get answers for my questions about rendering libs... It looks better for me without antialiasing at 100% browser scale, anyone is welcome to add nice anti-aliasing (see link in fragment shader code) and support of HighDPI screens.

gnykka commented 1 year ago

Thank you, I'll merge and deploy it now! Honestly I'm not an expert in WebGL myself but it will be interesting to take a look when I'll have some time and explore the solution.