Учебно-методические материалы для студентов кафедры АСОИУ

Веб-графика: перспективы и тренды

Рассмотрены перспективы развития графических технологий, ориентированных на использование в среде World Wide Web. Анализ проведен с использованием инструментария Google Trends, все выводы субъективны.

Цель этого небольшого исследования — в попытке дать ответ на вопросы студентов-АСУшников о выборе графических технологий для реализации учебных проектов по дисциплине «Веб-программирование». Исследование проводилось с использованием статистики по запросам из поисковой системы Google и инструментария Google Trends. Для анализа были использованы искусственные запросы соответствующей тематики (умозрительно, интерес к этим запросам могли проявлять профессиональные веб-разработчики).

Графические технологии WWW

Начнем с выяснения интересов к графическим веб-технологиям в целом. Для анализа были выбраны Flash, SilverLight и HTML5. Поскольку запрос по ключевому слову «flash» явно избыточный (обычные пользователи все еще ищут flash-приложения), то он был был заменен на «actionscript». Результат выборки приведен на рис. 1.

Рис. 1. Сравнение популярности технологий Flash, SilverLight и HTML5

Рассматриваемые технологии представляют сопоставимые возможности, поэтому отметим принципиальные отличия:

Среди причин снижения интереса к технологии Flash — нарекания к ее безопасности и заявления ведущих разработчиков об отказе в ее поддержке на мобильных устройствах.

Вопреки желаниям Microsoft, за последние годы наблюдается увеличение количества пользователей не-Windows систем, что, похоже, также влияет на снижение популярности SilverLight.

В свою очередь, все основные браузеры портированы на основные платформы (MS IE как бы тоже, через wine) и поддерживают HTML5 (а также JavaScript, CSS и технологии на основе XML).

Игровая индустрия и пользователи онлайновых игр, похоже, проявляют наибольший интерес к графическим средствам HTML5. Чтобы убедиться в этом, попробуйте самостоятельно сравнить в Google Trends динамику популярности запросов «html5 games» и «html5 apps».

2D-графика

Если основные вопросы встраивания готовых изображений в веб-страницу были решены еще на заре WWW, то возможности рисования графических примитивов прямо в веб-странице появились только в HTML5. Итак, SVG и HTML5 Canvas:

Оба решения выполняют одну задачу, но существенно отличаются. SVG добавляет множество узлов в объектную модель документа (DOM), что может привести к серьезным затруднениям при ее обработке. HTML5 Canvas добавляет в DOM только один узел и это большой плюс с точки зрения эффективности. К каждому примитиву SVG можно привязать обработку событий (onClick, onMove и т.п.), в случае же с Canvas это представляет серьезные трудности, решаемые, как правило, с помощью специальных библиотек (KineticJS, EaselJS, Paper.js и т.п.). Внешний файл SVG можно внедрить в веб-документ с помощью тега object, с Canvas этого не получится. Тем не менее, график на рис. 2 говорит о том, что больший интерес сообщество проявляет именно к HTML5 Canvas. Возможная причина — 3D-контекст, поддерживаемый Canvas и позволяющий отрисовывать трехмерные сцены в окне браузера.

Рис. 2. Распределение интересов: SVG vs HTML5 Canvas

3D-графика

HTML5 Canvas поддерживает два различных контекстах: 2D и WebGL (3D). Контекст WebGL позволяет создавать интерактивные 3D-приложения на JavaScript и выполнять их в современных браузерах без использования плагинов. За счёт использования низкоуровневых API OpenGL, часть кода WebGL может выполняться непосредственно на видеокартах. График на рис. 3 показывает, что несмотря на сообщения о проблемах с безопасностью этой технологии, выявленных весной 2011 года, она, тем не менее, вызывает довольно высокий интерес у сообщества.

Рис. 3. 3D-графика в веб: WebGL

Учитывая, что реальной альтернативы пока нет (Flash и SilverLight уже рассматривали ранее), разработчикам трехмерных веб-приложений остается осваивать API WebGL и/или использовать специализированные библиотеки (CubicVR.js, C3DL, Tree.js и подобные).

Резюме

Технология Flash утрачивает былую популярность. SilverLight, помимо плагина, требует .NET Framework и толком не работает нигде, кроме Windows. На момент написания этой заметки HTML5 является стандартом «де-факто» и представляет средства разработки как 2D-, так и 3D-приложений. Следовательно, при разработке браузерных приложений, предполагающих программную отрисовку графики, имеет смысл использовать именно HTML5 и его возможности.

CC-BY-SA Анатольев А.Г., 17.01.2014