WebGL как современное искусство

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

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

WebGL (Web Graphics Library, или библиотека веб-графики) — это программный интерфейс для создания интерактивной веб-графики. Простыми словами, WebGL работает как средство растеризации. Оно отображает точки, линии и треугольники на основе написанного кода в виде привлекательного 2D или 3D-изображения. Это позволяет нам видеть трехмерный контент прямо в браузере.

Все началось с момента появления стандарта HTML5 в 2014 году, который был призван улучшить уровень поддержки мультимедиа-технологий. HTML5, помимо прочего, привнес такие элементы, как video, audio и canvas (в переводе с английского «холст‎»). С помощью canvas появилась возможность рисовать различные элементы на странице: текст, линии, фигуры, изображения.

WebGL, подобно искусному художнику, легким взмахом кисти мгновенно переносит 3D-модель на холст. Что именно будет холстом, зависит от контекста проекта. В нашем случае им является элемент HTML5 — Canvas. В роли кистей и красок выступают языки программирования JavaScript и GLSL.

Чтобы понять основы WebGL, полезно знать базовую теорию 3D-графики и процесс рендеринга. В 3D-сцене каждая точка представляет собой вершину, идентифицируемую своими координатами x, y, z. Затем вершины соединяются, чтобы сформировать группу треугольных форм (примитивов). Далее применяется источник света для создания теней и глубины изображения. Затем примитивы преобразуются для создания трехмерной векторной графики в виде проекции двухмерного пикселя, который при помощи иллюзии заставляет мозг видеть трехмерный объект на двухмерном экране компьютера.

В коде WebGL есть два типа функций:

•

вершинные шейдеры,

•

фрагментные шейдеры.

Они применяются, чтобы сообщить компьютеру, как рисовать пиксели на экране. Хотя основной программный код написан на JavaScript, шейдеры используют язык шейдеров GL.

Вершинный шейдер вычисляет координаты вершин, а фрагментный шейдер отвечает за вычисление цветов пикселей. Процесс затенения требует от компьютера множество вычислений для плавного рендеринга изображений, что часто приводит к слишком большой нагрузке на центральный процессор. По этой причине WebGL использует графические процессоры (GPU). В отличие от центрального процессора устройства, имеющего несколько ядер, которые заточены на последовательную обработку, графический процессор (GPU) имеет тысячи меньших ядер, выполняющих более простые операции, но при этом параллельно. GPU может одновременно выполнять миллионы вычислений и фокусируется на одной единственной цели — молниеносно отрисовать графику.

В итоге WebGL генерирует изображение из 3D-модели с помощью графического процессора, производя так называемый аппаратный рендеринг. Что же с этим делать на практике? Конечно, наслаждаться свободой для творчества и создания графики на сайте.

К счастью, сегодня нет необходимости писать программы с нуля, чтобы начать добавлять 3D-графику на свой сайт. Вы можете использовать такие ресурсы, как three. js, Pixi JS и другие подобные библиотеки для быстрого проектирования 3D-приложений без глубоких знаний о WebGL.

Большинство разработчиков выбирают инструмент three.js, и этому есть несколько причин:

•

предоставляет разработчику понятный интерфейс для работы с WebGL, позволяя вести разработку 3D-графики при помощи определенных сущностей — сцены, источника света, теней, материалов и текстур;

•

выполняет всю низкоуровневую работу с WebGL, не отвлекая разработчика от самого важного. Создание чего-либо стоящего на чистом WebGL без привлечения инструментов, подобных three. js, потребует немало кода;

•

предоставляет удобную подробную документацию по работе с библиотекой.

С теорией разобрались, теперь пора увидеть технологию «вживую‎» и посмотреть примеры из практики крутых команд. Мы сделали подборку графики, созданной при помощи WebGL.

На сайте магазина портативной аудиотехники используется привлекательная визуализация фона и плавная 3D-графика товаров. Пользователь легко может «‎залипнуть» на подобном контенте, что буквально заставит его посмотреть все продукты.

Еще один пример наполнения сайта при помощи WebGL. Здесь используется эффект искажения фото при скролле. Вот что получилось в итоге: хочется непрерывно листать сайт и позволить глазу отдохнуть, смотря на плавные переходы.

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

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

WebGL стремительно набирает обороты и все чаще встречается в различных сферах. Начиная с автомобильной тематики (интерьера, экстерьера авто), заканчивая промо-сайтами с анимацией и спецэффектами.

Чем эта технология привлекательна для бизнес-сайтов? Использование 3D-графики увеличивает время нахождения пользователей на странице. WebGL привносит на сайты элементы геймификации, которые побуждают человека «залипнуть» на контенте. Конечно, это не гарантирует вам резкого скачка конверсий и бум заказов. Но увеличение заинтересованности и рост лояльности будет обеспечен.
Вот главные плюсы, которые выделяют WebGL среди подобных инструментов:

Производительность

01

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

Интерактивность

02

Если вам важно, чтобы пользователь мог «‎пощупать» товар, даже сидя дома перед монитором, то WebGL послужит отличным помощником. С его помощью можно максимально детально отрисовать товар в 3D-формате при помощи света, теней и текстур. Это гарантирует вам, что клиент полностью погрузится в продукт и сможет оценить все его достоинства.

На видео мы привели хороший пример использования технологии WebGL для сайтов автобрендов: это один из случаев, когда такой подход точно зайдёт. Сегодня продажи все больше переходят в онлайн, и даже такая крупная интернет-покупка, как автомобиль, больше не кажется нереальной. Если грамотно подойти к разделу «‎Конфигуратор», то можно настроить очень наглядный инструмент, который позволит клиентам увидеть машину со всех сторон в любом цвете. Такой интерактив вероятнее приведет к покупке, чем просто фотографии автомобилей из салона.

Привлечение внимания

03

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

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

Однажды виртуальная и дополненная реальность станут стандартными компонентами любого сайта. Если вы хотите быть впереди, попробуйте применить WebGL: это хорошо работает, если ваш продукт транслирует новизну и технологичность. А наши специалисты помогут разработать контент, который решит задачи вашего бизнеса.