Графика в интернете: прошлое, настоящее, будущее

В последнее время разработчики много работают над поддержкой аппаратного ускорения в Chromium. Это значит, что разработчики смогут воспользоваться всеми преимуществами новых графических стандартов, таких как 3D CSS и WebGL в Chrome. Чтобы получить больше отзывов об этих новых стандартах, разработчики ввели аппаратное ускорение, 3D CSS transforms и WebGL в Chromium. Эти новые возможности являются основными дополнениями для веб-платформы, поэтому вводятся они постепенно. Далее представим вам некоторую справочную информацию и рассмотрим как эти новые возможности вписываются в интернет будущего.

SVG and canvas: dynamic 2D

До недавнего времени было невозможно создавать динамическую графику на сайтах без использования внешних плагинов. Начиная с 2005 года, браузеры стали поддерживать Scalable Vector Graphics (SVG) и HTML 2D canvas. И SVG и 2D canvas позволяют создавать 2D изображения и манипулировать ими для достижения эффектов анимации.

Mozilla's SVG butterfly Michael Deal’s canvas “Breathing Galaxies”

Изображения выше, были созданы с помощью SVG и canvas. SVG позволяет обеспечить разметку, в то время как canvas позволяет сделать набор последовательных шагов, которые направляют изображения на обработку в JavaScript. Изменяя только параметр в изображении достаточно, чтобы заставить браузер перерисовать изображение. Разработчик должен чётко представлять, что он должен получить в итоге и точно рассчитать все шаги.

Сегодня все современные браузеры, включая Firefox, Safari, Opera и Google Chrome поддерживает создание 2D-графики с применением этих технологий, а Internet Explorer добавит поддержку в предстоящей 9-ой версии.

CSS Transforms: 2D и 3D эффекты

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

CSS transforms и animations, появившиеся в WebKit в 2007 году, позволяют разработчикам легко реализовать часто используемые эффекты. В 2009 году в WebKit добавили 3D CSS transforms, с помощью которого можно создавать объёмные объекты на веб-странице.

Apple’s Cube Transition demo running in Chromium

Как вы можете видеть из этого примера, CSS 3D transforms и animations позволяют легко добавлять 3D эффекты для ваших приложений. Теперь, когда разработчики добились поддержки аппаратной обработки в хроме, стало просто выполнять эти преобразования на GPU и отображать его на экране быстро. В настоящее время эта функция доступна только в Safari и Google Chrome.

WebGL: Низкоуровневый динамический 3D

Хотя 3D CSS позволяет легко отображать контент, чтобы он выглядел как в 3D пространстве, он не предназначен для написания истинных 3D-приложений или современных игр. WebGL обеспечивает доступ ко всей функциональности OpenGL ES 2.0 и предназначен именно для создания 3D.

SpiderGL Spherical Harmonics Pool game using WebGL implementation of O3D

Вы можете перемещаться в 3D среде, вращаться вокруг объектов, добавить реалистичного освещения, а также тени и отражения. Создание этого просто не представляется возможным в режиме реального времени с 3D CSS, не говоря уже о 2D canvas или SVG. Для достижения этих эффектов, необходим прямой доступ к графическому процессору - именно то, что WebGL и делает.

Хорошая новость заключается в том, что поскольку WebGL основан на OpenGL ES 2.0, то знакомые с графикой люди, имеющие опыт программирования, смогут легко его освоить. Библиотеки JavaScript для WebGL так же легко доступны. Приведенные выше примеры используют две структуры: SpiderGL и WebGL.

Mozilla, Apple, Opera и Google работают над последними штрихами для поддержки WebGL

Спасибо за чтение до конца, мы надеемся, что это поможет объяснить текущее состояние графики в интернете!

За перевод спасибо Invisible Dream