Друзья, всем привет! Наконец нашлось немного времени для обзорной статьи про одну из моих любимых технологий: Java Script + Canvas. В своём детстве, в конце 90-х, я мог только мечтать о чём-то подобном. Ведь тогда так не хватало простого инструмента для создания быстрой компьютерной графики при разработке игр, что только не пришлось перепробовать чтобы научиться “быстрому” рендеру в игровых приложениях под Windows 98 написанных в среде Borland C++ Builder. Благо, темные времена уже позади и теперь любой школьник за 30 минут сможет написать абсолютно стабильное, без лагов и мерцаний, графическое приложение даже для веб-браузера. Школьники всей планеты за такую невероятную возможность обязаны элементу HTML canvas.
История canvas
Всё началось более 10 лет назад, когда в 2004 в браузерном движке рендера веб страниц WebKit от компании Apple появился элемент canvas. Буквально спустя год, в 2005 canvas уже стал поддерживаться движком Gecko (браузер Firefox). А еще спустя год, в 2006 элемент стал поддерживаться и браузерами Opera а также вошел в новые спецификации будущих веб-технологий группы развития сети Интернет – Web Hypertext Application Technology Working Group (WHATWG). Но, по настоящему о canvas узнали только в 2011, после того, как на его базе появилась полноценная 3D графика с аппаратным ускорением на GPU, речь, конечно же, о технологии WebGL спецификации версии 1.0, которая вышла в марте 2011. Помню удивление людей в 2011 году в рекламных агентствах и везде где мы демонстрировали наши (ART OF WEB) наработки браузерной 3D графики, которые показывали прямо в браузере клиентов без установки каких-либо плагинов.
С лёгкостью отображались даже сложные большие модели. Например, модель в 52523 полигона отображалась без проблем вращаясь выдавая 60 FPS.
Просмотрщик 3D моделей до си пор доступен на официальном веб-сайте компании ART OF WEB.
Должен признать, что летом 2011 лучше всего с WebGL работали браузеры Chrome и Filrefox.
Canvas
Возвращаясь к обзору чистого canvas, нужно отметить не только его преимущества, но и недостатки имеющиеся на сегодняшний день. Отвечу на критику, собранную в Wikipedia.
Критика
- Нагружает процессор и оперативную память – true, ведь Java Script исполняется в RAM и использует CPU.
- Из-за ограничения сборщика мусора, нет возможности очистить память – true, это ведь Java Script исполняемый в браузере с рядом своих технологических ограничений.
- Необходимо самому обрабатывать события с объектами – true, ведь работа идёт с контекстом и нет ничего удивительного в том, что нужно ловить положение мыши и обрабатывать его. Всё то же самое как и при работе с обычным OpenGL.
- Приходится вырисовывать отдельно каждый элемент – true, опять же, работа с контекстом даёт скорость за прямой доступ к инструментам рисования, но и накладывает ограничения в виде необходимости полного управления процессом отрисовки.
- Плохая производительность при большом разрешении – зависит от мощности компьютера, не уверен что проблема сейчас актуальна. Именно сомнение в производительности и послужило поводом для написания данной статьи и проведения замеров.
Преимущества
- В отличие от SVG гораздо удобнее иметь дело с большим числом элементов – соглашусь, но только для следующих случаев:
- при условии когда нужно определять по какому из элементов попадает мышь, на SVG с мышью работать удобнее
- при условии наличия большого количества слоёв сложной формы с SVG проще
Но если речь идёт о сложных анимациях или количестве объектов больше 100, то единственный инструмент это конечно же canvas;
- Имеет аппаратное ускорение – true
- Можно манипулировать каждым пикселем – true
- Можно применять фильтры обработки изображений – true
- Есть много библиотек – это безусловный плюс, но это многообразие библиотек граничит с тем, что многие библиотеки сделаны любителями и не всегда документированы и удобны, а многие из них уже даже не поддерживаются, в любом случае, перед выбором библиотеки нужно провести тщательный анализ. При разработке проекта Growing Crystals летом 2014 я не менее двух недель посвятил изучению фреймворков работы с cavas и очень рекомендую ознакомиться с результатами, прежде чем двигаться дальше.
Обращаю ваше внимание на то, чтобы работать с canvas, необходимо достаточно уверенное знание Java Script. Подборка собранная мной на тему Java Script + Canvas остаётся актуальной и по сей день.
Немного о логике canvas
Приведу простейший пример, взятый мной из википедии, и слегка переделанный под мой любимый “use strict” с замыканиями (всегда пишу JavaScript в Strict Mode)
Не буду перегружать статью инструкциями и пояснениями как программировать canvas. Дам лишь ссылку на исходный код примера с подробнейшими комментариями. Скачать pifagors-tree.js.
Подробнее о логике программирования canvas можете ознакомиться на моём опыте в статьях Growing Crystals vol 4. картинка на клиенте и запросы к серверу и Growing Crystals vol 10. Быстрая анимация в игре на Canvas, requestAnimationFrame.
Тестирование производительности Growing Crystals
Изначально, когда я брался за разработку 2D игры у меня было много сомнений относительно технологии и её производительности, но, как выяснилось впоследствии, canvas более чем идеален для реализации браузерных игр.
В качестве демонстрации приведу фрагмент сцены из разарабатываемой нами с братом в 2014 году игры Growing Crystals.
Проводите тестирование в HTML5 совместимых браузерах: Chrome | FireFox | Safari | Opera | IE9/10.
Результаты
Что означают результаты
Без сомнения, тест должен выдать более 1000 очков и всю сцену держать стабильные 60 FPS, хотя тут и частицы(дым) и достаточное количество движущихся анимированных объектов. Но если у вас по какой-то причине получилось меньше, буду признателен за то, что напишете в комментариях сколько получилось, какая у вас версия браузера и характеристики вашего компьютера.
Для определения пределов возможностей, необходимо провести более функционально полное тестирование.
Тестирование производительности от Kevin Roast
Изучив большое количество тестов на не очень мощном PC: Intel Core i5-2400, DDR3 8Gb, ATI Radeon HD 4850, буквально был удивлен скоростью и предельным возможностям технологии – технология содержит огромный потенциал.
Представляю вам наиболее функциональный тест на проивзодительность для canvas, разработанный Kevin Roast.
Тестирование производительности рендера HTML5 <canvas> на широко используемых игровых графических эффектах: спрайты на битовых картах, рисование в canvas, альфа-канал, перекрытие полигонов, тени и текстовые функции.
Важное замечание для пользователей Windows + Chrome. Для получения лучших результатов, нужно отключить VSync. Если вы увидите что FPS внезапно упал с 60 до 30, значит что работает ограничение Chrome на requestAnimationFrame().
Результаты
Устройство теста
Каждый тест постепенно увеличивает нагрузку пока FPS не упадёт до 30. Нагрузка увеличивается за счёт добавляемых в сцену объектов. Очки считаются по времени пока браузер справляется с нагрузкой (держит выше 30 FPS) и отдельно учитывают сложность каждого отдельного теста.
Что означают результаты
Тест выдаёт суммарные очки, являющиеся комбинированным показателем комплексной производительности компьютера. Для лучших результатов рекомендуется отключить другие процессы, нагружающие CPU и GPU. Также тесты позволяют сравнить работу canvas в разных браузерах.
Benchmark version 1.1 [25-03-2013]
Итоговые результаты для копирования в комментарии
Буду рад обсудить получившиеся результаты в комментариях.
CPU: укажите самостоятельно
RAM: укажите самостоятельно
GPU: укажите самостоятельно