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\$
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\$
  • \$\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\$ – MegaAppBear Jan 3 '17 at 10:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.