Как оптимизировать анимацию на canvas?

Question

[pavelkolodin]

В игрушке fintank.ru экран (canvas) перерисовывается на 20 fps. Каждый кадр рисуется несколькими вызовами putImageData(), которые подобно гугло-картам составляют картинку из квадратных фрагментов. Фрагменты преобразованы в ImageData и лежат в кеше. Каждый фрагмент может быть иногда изменён сервером (положили/убрали игровой объект). Изменённый фрагмент рендерится в ImageData и замещает в кеше старый вариант.

Как эта архитектура может быть изменена, чтобы было достижимо 60fps и ЦП адски не грелся? Забыть про эти танцы с бубном putImageData() и переезжать на WebGL?

Comments

[Аскар Мухаметшин]

Вы вручную пытались ограничить частоту кадров?

[Аскар Мухаметшин]

Под "вручную", подразумеваю программно. Делать задержку перед созданием следующего фрейма.

[pavelkolodin]

Аскар Мухаметшин: цель - 60 fps

[Аскар Мухаметшин]

pavelkolodin: понял вас прекрасно из описания к вопросу. Так понял, что не ограничивали. Попробуйте ограничить сначала до 60 fps, если не тянет, то до 30. Если на 30 работает нормально, стоит повозиться с оптимизацией. Если и на 30 не тянет, есть смысл смотреть в сторону webGL. К сожалению не смогу объяснить почему ограничение может помочь, мы пришли к такому решению методом тыка и из 15 fps, добились 45.

[Аскар Мухаметшин]

pavelkolodin: есть подозрение что отрисовка фрейма и вычисления js происходят в одном потоке, во что я слабо верю, но по другому подобное ускорение я не могу себе объяснить.

[pavelkolodin]

Аскар Мухаметшин: Там же написано, что 20 fps. Скорее всего и на 40 будет тянуть, вопрос про оптимальность архитектуры вообще.

[Аскар Мухаметшин]

pavelkolodin: Я о том, что если не ограничивать, то fps падает.

[yesworld]

pavelkolodin А вы движок какой нибудь использовали?

[pavelkolodin]

yesworld: нет, голый JS, там ничего такого чтобы тащить целый движок нет...

[yesworld]

pavelkolodin: LibCanvas не уже ли такой большой? Я хочу сказать, может до вас решили уже подобные задачи в либах.. А так у вас интересная задумка, хотелось бы увидеть окончательное решение. Удачи вам! ;)

[pavelkolodin]

yesworld: я люблю точно понимать что делает код, а это лучше всего с собственным кодом, тем более его немного.

Answer 1

[SnowElephant]

putImageData заменить на drawImage