Увеличение производительности в режиме реального времени на эффектах холста

Я пытаюсь использовать следующий эффект в игре HTML5:http://somethinghitme.com/projects/metaballs/

Но так как это игра (в отличие от графической демонстрации), у меня более жесткие требования к FPS, мне нужно время, чтобы вычислить физику и некоторые другие вещи, и мое самое большое узкое место - это код для метаболов.

Следующий код - это то, что я получил после вскрытия исходного кода для повышения производительности, он не такой красивый, нодостаточно для моих целей:

ParticleSpawner.prototype.metabilize = function(ctx) {
    var imageData = this._tempCtx.getImageData(0,0,900,675),
    pix = imageData.data;
    this._tempCtx.putImageData(imageData,0,0);

    for (var i = 0, n = pix.length; i  0);
    }

    do {
        this.process(i++);
        this.process(i++);
        this.process(i++);
        this.process(i++);
        this.process(i++);
        this.process(i++);
        this.process(i++);
        this.process(i++);
    } while(--iterations > 0);

    this.metabilize(ctx);

}

и метод процесса:

ParticleSpawner.prototype.process = function(i) {
    if(!this._particles.getChildAt(i)) return;
    var bx = this._particles.getChildAt(i).x;
    var by = this._particles.getChildAt(i).y;

    if(bx > 910 || bx < -10 || by > 685) {
        this._particles.getChildAt(i).destroy();
        return;
    }

    //this._tempCtx.drawImage(this._level._queue.getResult("particleGradient"),bx-20,by-20);

    var grad = this._tempCtx.createRadialGradient(bx,by,1,bx,by,20);
    this._tempCtx.beginPath();

    var color = this._particles.getChildAt(i).color;
    var c = "rgba("+color.r+","+color.g+","+color.b+",";

    grad.addColorStop(0, c+'1.0)');
    grad.addColorStop(0.6, c+'0.5)');
    grad.addColorStop(1, c+'0)');

    this._tempCtx.fillStyle = grad;
    this._tempCtx.arc(bx, by, 20, 0, Math.PI*2);
    this._tempCtx.fill();

};

Как видно, я пытался использовать изображения вместо градиентных фигур, но производительность была хуже, я также пытался использовать ctx.drawImage вместо putImageData, но он теряет альфу и не быстрее. Я могу'Придумайте альтернативу для достижения желаемого эффекта. Текущий код отлично работает в Google Chrome, но Safari и Firefox работают очень медленно. Есть ли что-нибудь еще, что я могу попробовать? Должен ли я просто отказаться от этих браузеров?

Ответы на вопрос(4)

Ваш ответ на вопрос