Particle engine extension

[Ravetracer]

This discussion is meant to be the continuation of the thread in the Google Groups (https://groups.google.com/forum/#!topic/melonjs/DjW-aYKIVjk):

 

As of now, I've tested my implementation and it renders more and more inperformant when I add more emitters.
1 to 3 emitters are working in an example without any sound, map loading or something else. When I try to add 5 emitters, the performance drops tremendously!
Maybe there's a trick which I don't know currently and also I'm not so deep in developing Canvas engines.

If you want to see, what I've changed, here's the commit to my forked repository:
https://github.com/Ravetracer/melonJS/commit/32461498a9443991f4612a08a88367c243d3be9c

Regards,
Christian

[Parasyte]

The last time I profiled the particle emitters, performance was very good; 2,500 particles on a 4-year-old MBP running at 50 fps (canvas) and 60 fps (WebGL). It was almost a year ago, though. Also, I haven't tried the emitter with particles that inherit from me.Sprite, so that might have something to do with it. The profiler built into your browser is probably going to be the best source of information about what's causing slowdown. It might be the case that the observable vectors are consuming far more time than they should, or such. That's why we have special-case classes for particles and emitters right now; they are optimized for speed, but have a less powerful API then the standard container and sprite classes.

[obiot]

it's actually surprising, as your changes are somehow light... all you do is to calculate a new offset for the spritesheet, nothing more fancy than that.... but for sure, i mean if you sum-up this calculation for 10.000 particles (spread over 5 emitters) it can start making a difference.... maybe some caching would be useful ?

Now this said, what kind of usage do you have though for 5 emitters ? and how many particles do they generate totally ? my point is to know either or not this is still a realistic and acceptable use case (if you see what I mean)

[Ravetracer]

I've created 5 emitters to see, how far I could go ?. I don't know, if there's a useful real life situation for this.

Also I've uploaded my test project here: http://ravetracer.de/melontest

I've created a quick'n'dirty "setEmitter" function which adds an emitter with most values preconfigured:
 

function setEmitter(x, y, image, settings) {
    this.emitter = new me.ParticleEmitter(x, y);
    this.emitter.totalParticles = 180;
    this.emitter.minLife = 8000;
    this.emitter.maxLife = 12000;
    this.emitter.floating = false;
    this.emitter.z = 50;
    this.emitter.width = 2;
    this.emitter.gravity = 0;
    this.emitter.angle = 90 * (Math.PI / 180);
    this.emitter.angleVariation = 0.1;
    this.emitter.image = me.loader.getImage(image);
    this.emitter.numFrames = 13;
    this.emitter.frameWidth = 41;
    this.emitter.speed = 2.5;
    this.emitter.speedVariation = 1;
    this.emitter.wind = 0.07;

    me.game.world.addChild(this.emitter);
    me.game.world.addChild(this.emitter.container);

    this.emitter.streamParticles();
}

To test it, you simply can add new emitters by entering this in the developer console:

new setEmitter(350,450,'explosion_02_strip13');

 

[Parasyte]

Quick profile shows that QuadTree (collision detection!) is responsible for the slowdown. (See attachment.)

Here's a patch for that:

me.QuadTree.prototype.insertContainer = function (container) {
    for (var i = container.children.length, child; i--, (child = container.children[i]);) {
        if (child instanceof me.Container && !(child instanceof me.ParticleContainer)) {
            if (child.name !== "rootContainer") {
                this.insert(child);
            }
            // recursivly insert all childs
            this.insertContainer(child);
        } else {
            // only insert object with a bounding box
            if (typeof (child.getBounds) === "function") {
                this.insert(child);
            }
        }
    }
};

With this (you can just paste it into the dev console) I am able to add 11 emitters before it starts to affect frame rate. And this is with the canvas renderer! With WebGL, I can get 16 emitters going at 60fps.

Beyond these limits, the update time on me.ParticleContainer and me.Particle together go over the 16.7ms frame budget.

[obiot]

Wow, that was a huge regression, very very good catch !!!

[obiot]

this also give us some glimpse in terms of performances if we were having physic enabled particles as they would have to go through the quadtree (and on top of that the actual collision solving of course), 

[Parasyte]

That's one reason I like the spacial hash more than QuadTree. It's very easy to rehash objects as they move around a scene.

[Ravetracer]

This is absolutely awesome how the performance increases after overwriting the method.

[Parasyte]

Glad we were able to help out! Olivier identified the issue was actually a regression introduced in version 3.0.0. The stress testing I ran was on 2.1.0!

I committed the workaround to the master branch, and we now have a feature request ticket to opt-out of collision detections on a per-object basis, instead of a hard-coded inheritance check.