Canvas vs webGL

Canvas или WebGL — описание, преимущества, особенности. Что лучше?

WebGL и Canvas — эти два элемента объединяют HTML5 и JavaScript. У них есть свои преимущества и недостатки, особенности и тонкости в использовании. Но, оба инструмента направлены на создание и демонстрацию графических составляющих HTML5. Это могут быть растровые изображения, фоны сайтов, анимированная графика, динамические заставки, а также браузерные 2D и 3D игры.

У каждого 'движка' есть свои особенности. А поэтому, что-то будет лучше работать на Canvas, что-то — на WebGL, а что-то и вовсе не будет работать нигде. Именно поэтому, при внедрении графических составляющих в HTML5 через JavaScript необходимо учитывать абсолютно все особенности элементов, которые вы планируете использовать.

Всё что нужно знать о Canvas, и даже чуть больше

Начнём с холста или как ещё его называют 'канва'. Да-да, речь пойдёт о Canvas, а 'холст' и 'канва' — это, так называемые 'народные' прозвища этого элемента.

Итак, что из себя представляет Canvas? Это HTML5 элемент, с помощью которого вы можете добавлять растровую графику в ваш код через JavaScript. Чаще всего канвой рисуют графики, а также некоторые анимационные составляющие браузерных игр. Иногда можно встретить видео, встроенное при помощи Canvas, или даже полноценные браузерные видеоплееры.

Интересный факт: Canvas может весьма озадачить роботов, распознающих капчу. Всё дело в том, что используя канву для капчи, с сервера будет загружаться не готовое изображение, а алгоритм, по которому выстроится набор точек и тем самым воссоздаст картинку капчи. Для человека все эти танцы с бубном незаметны. А вот робот вряд ли решит подобный ребус.

Впервые, холст для HTML5 представили Apple для использования в своих браузерах Safari и Dashboard. В Internet Explorer Canvas не поддерживался бы и по сей день, если бы не Google. Они создали расширение для браузера, после установления которого, IE можно считать каким никаким, но браузером. На данный момент к Canvas обращаются при необходимости разработки графиков, добавления анимации или для основы графических элементов в веб-приложениях.

Компания Mozilla работает над собственным проектом для Canvas. Его целью является внедрение графических ускорителей, с помощью которых можно будет отображать 3D контент. Официально, задумка имеет название Canvas 3D. Не то чтобы велосипед изобрели до того, как спохватились разработчики Mozilla, но уже давно есть альтернатива — библиотеки. В том числе, для реализации трехмерной графики существует Three. Возможно, Canvas 3D будет лучше, чем обычная канва со всякими там библиотеками. Судить наперёд, как минимум, глупо. Но, так или иначе, работать с 3D в Canvas можно уже сейчас, и что нового принесёт проект Mozilla — непонятно.

Минимальные требования для отображения Canvas в HTML5 в браузерах и платформах:

1. Internet Explorer 9
2. Chrome 3
3. Safari 3
4. Firefox 3
5. Opera 10
6. iOS 3
7. Android 1

Как видно, найти устройство или браузер, который не поддерживает Canvas в современном мире довольно сложно. Это только плюс к его использованию в HTML5, ведь контент, за отображение которого будет отвечать канва, будет увиден пользователем с гарантией 99,9%.

К тонкостям использования холста, можно отнести не только возможность самостоятельной настройки графических элементов, но и использования дополнительных средств визуальной составляющей. Этими средствами являются градиенты, контуры, тени, а также ширина кистей, стиль соединения линий.

Из особенностей, которые вы должны учитывать перед работой с Canvas стоит выделить следующее:

1. Будьте осторожны с размерами холста. Изменив значения ширины и высоты он создастся заново, а всё содержимое прежнего элемента уйдёт в небытие вместе с его настройками.
2. По умолчанию, стартовая точка находится не по центру, а в левом верхнем углу. Хорошо, что есть возможность сдвигать её.
3. Официально, 3D контент Canvas не поддерживается. Но, как мы уже говорили, есть специальные библиотеки, которые открывают неизведанный трехмерный мир.
4. Кодировка цвета и размера шрифта аналогична, как и в CSS.

Преимущества и недостатки Canvas — довольно спорный момент. Для кого-то некоторые вещи критичны, а кто-то их даже не замечает. Мы выделили основные плюсы и минусы использования Canvas в HTML5. К достоинствам можно отнести:

• Наличие аппаратного ускорения
• Возможность точечного попиксельного редактирования за счёт растрового формата
• Возможность использования фильтров для ретуши изображений
• Наличие богатого ассортимента поддерживаемых библиотек
• Удобство работы с большим количеством элементов

Из недостатков мы выделили:

• Отсутствие возможности очистки памяти, из-за чего сильно потребляются ресурсы процессора и ОЗУ
• При использовании высоких разрешений растровых форматов — низкая производительность
• Необходимость вручную прорисоввывать каждый элемент по отдельности
• Возможность внедрения специальных элементов-маячков для слежки за онлайн-активностью пользователей

Исходя из полученной информации, вы можете сделать свои собственные выводы по поводу использования Canvas в HTML5. Существенных преград в разработке графического контента на данном движке нет. И даже официальное отсутствие 3D, не мешает энтузиастам создавать браузерные игры с трехмерной графикой.

Что нужно знать о WebGL и с чем его едят

Вдоволь наговорившись о Canvas и обсудив все его стороны и грани, можно наконец перейти к WebGL. Это элемент, разработанный Khronos Group, который позволяет создавать и показывать графические 3D компоненты через Canvas в HTML5. Если проще, благодаря WebGL вы можете добавить на свой сайт любой 3D элемент, который не просто будет крутиться как бриллианты в ювелирке, а с которым можно будет взаимодействовать.

Существует несколько версий этой библиотеки:

• WebGL 1 выполнен на Open GL 2.0
• WebGL 2 выполнен на Open GL 3.0

Принцип работы WebGL заключается в следующем. Вся 2D и 3D графика выстраивается благодаря коду, который выполняется JavaScript. Некоторые элементы могут осуществляться при помощи установленной видеокарты. Благодаря этому, реализована поддержка аппаратного ускорения графики, а разработчики могут писать коды не выходя из среды веб-языков JavaScript, CSS и HTML.

Разработка 2D и 3D контента, предполагает расчёт целевой аудитории. Писать для пользователей с продуктами Radeon или Intel, а может Nvidia? Оптимизировать приложение для Core i5 или i3? Отдавать преимущество разработке под iOS или Android? Всё это никакой стороной не касается разработки на WebGL. Ведь, главное, чтобы актуальная версия браузера поддерживала библиотеки WebGL. Ваш контент будет доступен любым пользователям — Windows, Android, Blackberry, iOS или Mac OS. Всех их объединит одно — браузер, через который они будут просматривать контент.

Поддержка WebGL реализована в следующих браузерах на следующих платформах:

• Mozilla 4
• Chrome 9
• Safari beta 5, public 8
• Opera 12
• Internet Explorer 11
• iOS
• Android
• Firefox mobile
• Chrome Android

WebGL увидел свет благодаря программисту из США, который всячески экспериментировал с Canvas. Позднее, Opera и Mozilla подхватили актуальный тренд и начали разработку своего модернизированного проекта. После этого, к ним подключились такие мировые гиганты как Apple и Google. Из этих компаний был сформирован штат разработчиков, которые весной 2011 года показали миру первую версию библиотеки WebGL.

Интересный факт: отсутствие поддержки WebGL в браузерах Internet Explorer ниже 11 версии обусловлено инцидентом компании Microsoft в 2011 году. Так, организация высказала своё недовольство относительно WebGL, ссылаясь на слишком большой список разрешений, необходимых для работы библиотек. Ответа долго ждать не пришлось, и компания Mozilla заявила обеспокоенным ребятам из Microsoft, что их продукт Silverlight требует не меньшего доступа к системе нежели WebGL. Однако, Microsoft считают его совершенно безопасным. Прошло немного времени, и Internet Explorer всё же получил поддержку WebGL благодаря тому, что Microsoft переосмыслили всю суть проблемы и пришли к объективным выводам.

В финале, хотелось бы выделить основные преимущества WebGL:

• Кроссплатформенность. Ваш контент увидят пользователи любых платформ. При просмотре их объединит браузер, который является главной фигурой на этой шахматной доске.
• Разработка на JavaScript — довольно популярном и актуальном языке
• Возможность очистки памяти от 'мусора'. Благодаря этому, удаётся добиться максимальной плавности и оптимизации
• Так как WebGL использует встроенный процессор и видеокарту для обработки графического контента, ему присуще потребление значительных ресурсов, что можно сравнить с некоторыми дескоптными приложениями

Заключение и ответ на вопрос 'Что лучше?'

С приходом HTML начали появляться возможности создания веб-контента. Если поначалу предполагался лишь статический контент, то с появлением JavaScript открылся доступ к более сложному — динамическому. Возможности современного HTML5 дали нам попробовать 2D с помощью Canvas. Позднее, появились библиотеки, которые реализовали в Canvas использование 3D. Более обширно и точно использовать трехмерный контент позволило внедрение WebGL. Теперь разработчикам есть где разгуляться в плане графических возможностей. Тут тебе и растровые изображения высокого качества, и различные анимации и эффекты, также всевозможные варианты обработки графики и её внедрения в веб-приложения. Уже нет тех подводных камней, с которыми можно было столкнуться ранее. С помощью JavaScript в HTML5 можно творить, словно художник на холсте.

Дать однозначный и точный ответ, что лучше — Canvas или WebGL, попросту невозможно. Всё зависит от ваших планов на веб-контент и его реализацию. Недостатки и преимущества есть везде. Вопрос в другом — значительно ли они заметны для вас, с выполнением конкретной задачи? Если недостаток никаким образом не сказывается на вашем замысле, можно его опустить. В любом случае, для успешного результата вы должны взвесить все 'за' и 'против' для принятия окончательного решения. Для реализации своего проекта вы можете пользоваться массой различных библиотек и фреймворков. Некоторые же, напротив, будут писать весь код вручную. Всё зависит только от вас. Творите на холсте и создавайте шедевры веб-пространства!

В студии AppFox можно подать заявку на программирование, создание игр или заказать разработку приложений https://appfox.ru/ и получить бесплатную консультацию по ценам и услугам.