melonJS Performance Benchmark

1

Using the new sprite-based performance test at GitHub - Shirajuki/js-game-rendering-benchmark: Performance comparison of Javascript rendering/game engines: Three.js, Pixi.js, Phaser, Babylon.js, Two.js, Hilo, melonJS, Kaboom, Kontra, Canvas API and DOM!, I spent some time comparing the latest 14.5 version of melonJS with the previous one to understand how much improvements we managed to pack into that version.

Globally the 14.5 version brings an average 20% performance improvements for both Sprite and Primitive rendering (running on a M1 Max laptop), bringing melonJS on par (at 60fps while drawing 10’000 sprites, knowing we are capped at 60fps) with other framework like Phaser or Pixi for sprite rendering.

For primitive drawing, especially with circles, we are still “a bit” behind when drawing more than 500 circles per frame, but that should be fixed with this ticket : fix batch drawing for primitive shapes · Issue #1172 · melonjs/melonJS · GitHub

14.4.0 14.5.0
Stroke 500 op/s 60 fps 60 fps
1000 op/s 60 fps 60 fps
2500 op/s 31 fps 48 fps
5000 op/s 14 fps 22 fps
10000 op/s 8 fps 10 fps
Fill 500 op/s 45 fps 60 fps
1000 op/s 21 fps 30 fps
2500 op/s 9 fps 12 fps
5000 op/s 4 fps 6 fps
10000 op/s 3 fps 4 fps
Sprite 500 op/s 60 fps 60 fps
1000 op/s 60 fps 60 fps
2500 op/s 60 fps 60 fps
5000 op/s 60 fps 60 fps
10000 op/s 50 fps 60 fps
Perf Inc
Stroke 10000 op/s n/a 25%
Fill 10000 op/s n/a 25%
Sprite 10000 op/s n/a 17%

(Note: at the time of this writing, the online version used by the benchmarking tool has not been updated yet with melonJS 14.5).

I’ll keep this topic pinned as a place to keep track of progress and improvements in terms of performances.

2
3

Following the 15.0.0 release, here is some updated benchmark.

The focus on this last release was on properly enabling batch drawing for primitives shapes, which allows us here to gain up 81% performances improvements for rectangle and polygon based shapes (circle and friends are still a very different animal when it comes to rendering in WebGL).

Anyway, over the last 2 versions, huge improvements across the board !

(M1 Max) 14.4.0 14.5.0 15.0.0
Stroke (circle) 500 op/s 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps
2500 op/s 31 fps 48 fps 60 fps
5000 op/s 14 fps 22 fps 32 fps
10000 op/s 8 fps 10 fps 16 fps
15000 op/s 5 fps 7 fps 10 fps
Stroke (rect) 500 op/s 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps
2500 op/s 60 fps 60 fps 60 fps
5000 op/s 37 fps 40 fps 60 fps
10000 op/s 15 fps 18 fps 60 fps
15000 op/s 10 fps 10 fps 60 fps
Fill (circle) 500 op/s 45 fps 60 fps 60 fps
1000 op/s 21 fps 30 fps 32 fps
2500 op/s 9 fps 12 fps 12 fps
5000 op/s 4 fps 6 fps 6 fps
10000 op/s 3 fps 4 fps 4 fps
15000 op/s 2 fps 2 fps 3 fps
Fill (rect) 500 op/s 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps
2500 op/s 33 fps 35 fps 60 fps
5000 op/s 15 fps 16 fps 60 fps
10000 op/s 6 fps 6 fps 32 fps
15000 op/s 4 fps 4 fps 21 fps
Sprite 500 op/s 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps
2500 op/s 60 fps 60 fps 60 fps
5000 op/s 60 fps 60 fps 60 fps
10000 op/s 50 fps 60 fps 60 fps
15000 op/s 30 fps 37 fps 37 fps
Perf Inc
Stroke (circle) 10000 op/s n/a 25% 38%
Stroke (rect) 10000 op/s n/a 15% 71%
Fill (circle) 10000 op/s n/a 25% 0%
Fill (rect) 10000 op/s n/a 3% 81%
Sprite 10000 op/s n/a 17% 0%
Sprite 15000 op/s n/a 19% 0%
4

with the last 15.3.0 version, we are now able to render 15’000 sprites at 60 fps, which is now at least double the performance compared to the 14.4 version few months ago :

(M1 Max / Chrome) 14.4.0 14.5.0 15.0.0 15.3.0
Stroke (circle) 500 op/s 60 fps 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps 60 fps
2500 op/s 31 fps 48 fps 60 fps 60 fps
5000 op/s 14 fps 22 fps 32 fps 37 fps
10000 op/s 8 fps 10 fps 16 fps 16 fps
15000 op/s 5 fps 7 fps 10 fps 11 fps
Stroke (rect) 500 op/s 60 fps 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps 60 fps
2500 op/s 60 fps 60 fps 60 fps 60 fps
5000 op/s 37 fps 40 fps 60 fps 60 fps
10000 op/s 15 fps 18 fps 60 fps 60 fps
15000 op/s 10 fps 10 fps 60 fps 60 fps
Fill (circle) 500 op/s 45 fps 60 fps 60 fps 60 fps
1000 op/s 21 fps 30 fps 32 fps 32 fps
2500 op/s 9 fps 12 fps 12 fps 12 fps
5000 op/s 4 fps 6 fps 6 fps 6 fps
10000 op/s 3 fps 4 fps 4 fps 4 fps
15000 op/s 2 fps 2 fps 3 fps 3 fps
Fill (rect) 500 op/s 60 fps 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps 60 fps
2500 op/s 33 fps 35 fps 60 fps 60 fps
5000 op/s 15 fps 16 fps 60 fps 60 fps
10000 op/s 6 fps 6 fps 32 fps 32 fps
15000 op/s 4 fps 4 fps 21 fps 21 fps
Sprite 500 op/s 60 fps 60 fps 60 fps 60 fps
1000 op/s 60 fps 60 fps 60 fps 60 fps
2500 op/s 60 fps 60 fps 60 fps 60 fps
5000 op/s 60 fps 60 fps 60 fps 60 fps
10000 op/s 50 fps 60 fps 60 fps 60 fps
15000 op/s 30 fps 37 fps 37 fps 60 fps
Perf Inc
Stroke (circle) 10000 op/s n/a 25% 53% 39%
Stroke (rect) 10000 op/s n/a 15% 75% 71%
Fill (circle) 10000 op/s n/a 25% 25% 0%
Fill (rect) 10000 op/s n/a 3% 81% 81%
Sprite 10000 op/s n/a 17% 17% 0%
Sprite 15000 op/s n/a 19% 19% 38%