Увеличение производительности в режиме реального времени на эффектах холста
Я пытаюсь использовать следующий эффект в игре 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 работают очень медленно. Есть ли что-нибудь еще, что я могу попробовать? Должен ли я просто отказаться от этих браузеров?