Improve performance by replacing planck.js under the hood?

[quinton-ashley]

I originally picked planck.js because it's a pure JS port of Box2D's physics simulation and the results it produces are objectively superior to matter.js (used by Phaser) and rapier.

Later I found out about box2d-wasm, a much more performant and direct port of Box2D v2.4.1 from C++ to wasm via emscripten. I figured that for v4 of p5play I should use box2d-wasm. https://github.com/Birch-san/box2d-wasm

But planck.js v1 was recently released and it performs significantly better than the alpha versions. JavaScript has also gotten really quick at doing math nowadays. Try this head to head test with emscripten compiled C code running in wasm, the results are basically the same! https://jtiscione.github.io/webassembly-wave/

I upgraded this benchmark that compares the latest version of planck with other box2d web ports. box2d.js is basically the older version of box2d-wasm. https://quinton-ashley.github.io/box2d_benchmarks/

Here are the results for different devices:

MacBook Air 2020 with M1 chip

iPhone 13 Pro

iPhone 6S

On more powerful devices like my sister's iPhone 13 Pro, the performance difference is negligible. But on my iPhone 6S, planck can only get 48fps. Perhaps the tests are simply not rigorous enough to parse out performance differences on modern devices.

But let's keep in mind that these an artificial performance benchmarks just for the physics simulation and p5play aims to be a general purpose game development framework. I'm not sure how much using box2d-wasm would actually improve p5play's overall performance, especially on older devices, since graphics performance can be the bottleneck.

On good hardware, p5.play (v1) maxed out at less than 100 sprites. p5play v3 can have up to 500 sprites, which is plenty for most games. But several users have expressed interest in pushing beyond those limits. Also if all sprites are contacting at once there can be significant peak simulation demand performance degradation to a handful of fps, then back to 60.

One other advantage of replacing planck with box2d-wasm would be that it's a port of v2.4.1 of Box2D and supports the liquidfun extension.

[ShiMeiWo]

My PC's result:

Browser: Chrome 123	Name	avg ms/frame	5th %ile	95th %ile	Ratio
box2d.js	5.84	6	4.600000001490116	1.00
box2d-web	15.77	15.399999998509884	13.300000000745058	2.70
planck.js	22.50	23.799999997019768	22.399999998509884	3.85
@box2d/core	23.14	33.399999998509884	14.399999998509884	3.96
box2d-html5	25.84	25.300000000745058	23.399999998509884	4.42
@flyover/box2d	43.65	63.400000002235174	34.900000002235174	7.47

[quinton-ashley]

@ShiMeiWo wow! Big difference there. Could you include details about your PC's CPU, GPU, and memory?

[ShiMeiWo]

@quinton-ashley

wow! Big difference there. Could you include details about your PC's CPU, GPU, and memory?

Please take a look below:

Item	Detail
OS	Windows 10 Home 64-bit 22H2
RAM	8.00GB
CPU	Intel(R) Core(TM) i5-3230M CPU @ 2.60GHz x64
GPU	GeForce GT 650M

[quinton-ashley]

On August 12, 2024 Erin Catto released v3 of Box2D, it's a big improvement over v2 and I'd love for p5play users to be able to use it.

I've decided to wait on starting p5play v4's development until there is a port of it to JS or WASM. For now, I'm too busy working on q5's webgpu renderer anyway. https://q5js.org

[games]

Is it possible to add matter.js?

Browser: Chrome 130	Name	avg ms/frame	5th %ile	95th %ile	Ratio
box2d.js	2.71	2.7999999970197678	2.7999999970197678	1.00
box2d-web	3.14	3.5	3.2000000029802322	1.16
planck.js	4.29	5.100000001490116	3.7000000029802322	1.58
@box2d/core	4.76	4.200000002980232	4.299999997019768	1.76
box2d-html5	5.74	5.799999997019768	5.600000001490116	2.11
@flyover/box2d	8.50	11.5	8.399999998509884	3.13

MacBook Pro M1 Max Memory 64GB macOS Sequoia 15.1

[quinton-ashley]

@games Nope, matter.js is a totally different physics engine and it's only faster because the quality of the simulation is worse.