5
\$\begingroup\$

I'm (physics n00b) developing a small animation (gamification) in a mobile HTML5 app (PhysicsJS, HTML5, Cordova, Ionic, JavaScript).

This animation is derived from Basket of verlet constraints. This basket has to carry a lot more bodies (circles).

I'm experiencing performance problems, even on decent hardware (iOS and Android, the latter is worse). The bodies move like if they were in an aquarium. If I remove the basket, the performance is way better, but not yet satisfactory.

How can this be optimized in a sense that users don't have the feeling of watching a film in slow-motion?

Are there any tweaks to control the engine to do less calculation?

Am I using the appropriate physics engine or are there alternatives with significant better performance?

Remark: on my MacBook in Chrome, there is absolutely no performance problem and all movements are very smooth -> no aquarium.

\$\endgroup\$

2 Answers 2

1
\$\begingroup\$

Theres the parameter maxIPF given to the Physics constructor, set that lower for a faster but less precise simulation. But this may be a question more of whole program optimization, do some profiling.

\$\endgroup\$
0
\$\begingroup\$

I've found following tweaks to gain performance on mobile devices:

  • removed basket (too many bodies to calculate)
  • don't render on each step (see code below)
  • use world.warp() to scale time increments
  • use a changed gravity factor
  • call world.pause() and world.unpause() whenever appropriate (e.g. when canvas gets invisible due to a dialog covering it)

With following options the tweaks are set:

var options = {
    gravityFactor: 1,
    warp: 1,
    renderSteps: 1
};
if (ionic.Platform.isWebView()) {
    options = {
        gravityFactor: 2,
        warp: 5,
        renderSteps: 2
    };
}

Don't render on each step

// render on each step
var stepNo = 0;
world.on('step', function () {
    ++stepNo;
    if (stepNo % options.renderSteps === 0) {
        world.render();
    }
});

use world.warp() to scale time increments

world.warp(options.warp);

use a changed gravity factor

var GRAVITY = 0.0004; // standard gravity for PhysicsJS

var acceleration = Physics.behavior('constant-acceleration')
      .setAcceleration({x: 0, y: GRAVITY * options.gravityFactor});

world.add([acceleration]);

Please don't hesitate, share your experience and provide the solutions which work best for you!

\$\endgroup\$
1
  • \$\begingroup\$ Thanks for those tips. I have tried that but I am not seeing any performance improvements. Wondering if you have found anything else that might be helpful? Also using Cordova. Performance degrades as I add more bodies to the world. I am using a PIXI renderer. \$\endgroup\$ Jan 3, 2017 at 10:52

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .