melonjs / melonJS

a fresh, modern & lightweight HTML5 game engine
https://melonjs.org
MIT License
5.77k stars 641 forks source link

Cache or optimize triangulation data used for drawing with fill operation #1179

Open obiot opened 1 year ago

obiot commented 1 year ago

the current Path2d triangulatePath() method : https://github.com/melonjs/melonJS/blob/bb2c02026eac131c74495b27349621e5fa3fb2fa/src/geometries/path2d.js#L55-L78 does not cache the generated data, forcing melonJS to recalculate every thing when using directly method like fillRect() and friends, and create a huge performance bottleneck.

For reference here below is an extract from a benchmark on fill operation for both rectangle and circle:

melonJS 15.0.0 (M1 Max) Fill (rect) Fill (circle)
500 op/s 60 fps 60 fps
1000 op/s 60 fps 32 fps
2500 op/s 35 fps 12 fps
5000 op/s 16 fps 6 fps
10000 op/s 6 fps 4 fps
15000 op/s 4 fps 3 fps

which shows performances dropping when drawing more than 1'000 shapes per frame.