HTML / Canvas - производительность drawImage с другим холстом

Question

Я работаю над игрой и испытываю некоторые проблемы с производительностью при рисовании одного холста на другом с помощью drawImage. Согласно Chrome Profiler, я трачу 60% своего времени только на один вызов drawImage и 10% на clearRect над ним ...

Исходный холст на данный момент составляет около 3000x3000 (что довольно мало, я бы сказал), а целевой холст - 1024x768.

Я понял, что вместо рисования всех плиток; стены и так далее и так далее в каждом цикле (что дает мне около 15 кадров в секунду), что, вероятно, будет быстрее нарисовать их все один раз на экранном холсте, а затем нарисовать это на моем основном холсте, затем нарисовать объекты и т. д. сверху , Это дает мне ~ 30 кадров в секунду, но ... это лучшее, что я получу с программным рендерингом?

Мой цикл рендеринга в основном:

ctx.clearRect(0, 0, 1024, 768);

ctx.beginPath();
ctx.drawImage(map, cam.position.i, cam.position.j, 1024, 768, 0, 0, 1024, 768);
ctx.closePath();

ctx.save();
ctx.translate(-cam.position.i, -cam.position.j);
// draw entities, etc.
ctx.restore();

Я действительно не могу думать, что делать, кроме как начать использовать WebGL (чтобы воспользоваться преимуществами его аппаратного ускорения) или ждать, пока поставщики реализуют аппаратное ускорение для 2D-контекста. Я бы предпочел не делать ни одного из них, поэтому любой вклад будет принят.

Answer 1

Ух ты, это большой закадровый холст.Объем памяти только для буфера составляет около 36 МБ.

Я бы соблазнился использовать меньшие неэкранные плитки, например 1024x124, и нарисовать видимые на главном холсте.Чтобы сэкономить память, вы могли только сначала создать видимые плитки, а затем создавать другие, когда они становятся видимыми.(И вы можете утилизировать или даже лучше утилизировать те, которые больше не видны).

Я не верю, что ответ, предполагающий, что вы используете putImageData, даст лучшую производительность, как показывает опыт опрашивающего: почему так медленно? 1006 *

Answer 2

Возможно, будет быстрее использовать getImageData для каждого из ваших «спрайтов» и сохранять ссылки на массивы imageData в вашем Javascript и использовать putImageData для визуализации на целевом холсте.

Вы все равно можете визуализировать свои спрайты, используя невидимый исходный холст и getImageData для каждой плитки / спрайтов. Он будет использовать больше памяти, но может быть быстрее, чем drawImage с исходным и целевым холстом.