Benchmark WebGL performance using different JavaScript rendering/game engines, such as Pixi and Phaser
https://themoonrat.github.io/webgl-benchmark/
There are 2 common questions when developing contents using WebGL
- Which library should I choose?
- What is the most efficient way to construct a scene to be rendered?
Question number 1 is impossible to answer, as there are many questions and considerations outside of pure rendering performance. But this project does allow you to make a like-for-like performance comparison across scenes that are set up to be as similar as possible.
Question number 2 can be helped with this project by comparing scenes within the same engine, and discovering what is most efficient.
Libraries currently covered are Pixi, Phaser 2 and Phaser 3.
Scenes covered range from testing raw sprite rendering performance, to testing graphics & shapes rendering performance.
You can find the latest build at https://themoonrat.github.io/webgl-benchmark/
You can also clone this repo and run npm run start for a development build, or npm run build for a production build.
There are 4 options you can change
- Library: Switch between different rendering libraries. This will refresh the browser, as it cannot be changed on the fly.
- Version: Switch between different versions of the currently selected rendering library. This too will refresh the browser.
- Scene: Switch between different 'scenes' on the fly. Each scene stress tests a different aspect of the rendering library and the ability of the hardware you are running.
- ObjectCount: Change how many objects are currently being rendered at once. Some libraries are quicker at adding / removing objects than others, so be patient, especially at the very high end.
MIT