Идеи использования трехмерной графики в веб-разработке

От редактора

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

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

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

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

Это замечание некорректно по отношению к 3d-графике, которая честно решала поставленные задачи и в промышленных программах, и в компьютерных играх. Однако с ее реализацией всегда возникали трудности: начиная от проблем с устаревшей flash-технологией, заканчивая необходимостью пользователям постоянно устанавливать дополнительные компоненты.

В интернет-сегменте путевкой в жизнь для 3d-графики стали спецификации HTLM5 (Canvas в частности) и библиотека WebGL. С их помощью графику стало возможным просматривать сразу в браузере, минуя рутинный этап обновления flash-плеера. Данные возможности сегодня кросс-браузерны (то есть их поддерживает большинство современных браузеров) и кросс-платформенны (графику можно смотреть на десктопах, ноутбуках и мобильных устройствах).

При снятых технологических ограничениях и в эпоху, когда людям недостаточно текстов, изображений и традиционного видео, 3d-графика должна стать панацеей для веб-разработчиков. Однако она по-прежнему используется избирательно. И причины тому три:

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

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

Вот первый пример такой пробы — визуализация направлений работы «Текарт» на главной странице сайта. Здесь компания представлена в форме механизма, направления — это определенные детали, для каждого доступно по клику краткое описание и ссылка на сайт.

Визуализация направлений работы группы Текарт, www.techart.ru

Для простоты, подобная интерактивная 3d-графика может быть выполнена двумя способами: на основе видео и изображений или с использованием трехмерных моделей.

 

3d-графика на основе видео и изображений

В этом подходе в основе 3d-графики лежат изображения и медиафайлы, которые получаются в результате работы с трехмерными моделями объектов. Далее средствами HTML5 и CSS3 задается нужный интерактив, то есть фиксированная реакция на фиксированные действия пользователя.

 Фото создание 3d-графики на основе видео и изображений

Рисунок 1. Принцип создания 3d-графики на основе видео и изображений

Пример этого подхода — сайт, сделанный «Текарт» для Индустриального парка «ОКА». Индустриальный парк здесь показан в двух стилистиках: это реалистичный вид с инфраструктурой, дорогами и деревьями, и схематичный для отображения подробной информации о зданиях которые находятся на территории.

Схема индустриального парка, www.ip-oka.ru

Еще один пример построения интерактива с использованием медиафайлов — промо-сайт PricewaterhouseCoopers. В его основе лежит 3d-ролик на который «навешены» интерактивные элементы. Взаимодействие с этими элементами дает пользователю ощущение, что именно он управляет происходящим на экране.

extraordinary.pwc.com

 

3d-графика на основе трехмерных моделей

Второй способ отличается от первого тем, что в веб-решении используются не производные (изображение, видео), а сама 3d-модель. В область web-разработки в таком случае попадают не только сами модели, но и их физические свойства, текстуры, материалы, источники света. Это дает большие возможности для интерактива: обзор 360, масштабирование, анимация, переключение камер и т.д.

Такая подробная детализация позволяет не ограничивать пользователя узким сценарием, а намного его расширить или убрать в принципе, предоставив полную свободу для взаимодействия и бесконечные возможности для интерактива.

Made by Evan, madebyevan.com/webgl-water/

 

WebGL

Работа с 3d-моделями в браузере стала возможной благодаря библиотеке WebGL, первая версия которой была выпущена в 2011 году. В состав рабочей группы входят, среди других, четыре ведущих браузера (Chrome, Safari, Firefox, Opera) и производители «железа» (AMD и Nvidia).

Технология уже зрелая и доступная: по данным WebGL Stats, на конец 2015 года более 80% мобильных устройств и 90% персональных компьютеров в том или ином виде имеют поддержку WebGL. Тем не менее тот же источник дает оценку, что только порядка 10% всех устройств обеспечивают абсолютно стабильные показы графики.

Вероятность проблем на 9 устройствах из 10 — одна из очевидных причин, по которой WebGL не получила должного распространения. Тем не менее в ряде случаев проблемы со стабильностью пользователь даже может не заметить, что делает технологию вполне коммерческим инструментом.

 

Идея применения 3d-графики

Ниже приведены наиболее распространенные на сегодняшний день направления использования 3d в веб-разработке.

 

1. Презентация продукта

Lacoste, lacostewinter.seeourwork.cn/en/experience

 

2. Описание устройства продукта

FairPhone, www.fairphone.com/phone/

 

3. Геолокация и ландшафты

Axeon, www.axeoncycling.com

 

4. Визуализация данных

Histography, histography.io

 

5. Онлайн-конструкторы

Bugaboo, bugaboo.com/RU/en_RU/strollers/create

 

6. Объекты недвижимости

АО СК «Горстрой», www.status-irkutsk.ru

 

7. Уникальный пользовательский опыт

The Molitor, themes.themolitor.com/vysual-video

 

Больше вдохновляющих примеров в презентации к докладу, сделанному на клиентском семинаре в декабре 2015 года.

Об авторе:

Павел — один из ведущих дизайнеров компании, курирует направление видеопроектов. Интересуется всем, что связано с типографикой, пользовательскими интерфейсами, инфографикой. Работает с такими брендами и компаниями, как Toshiba, FixPrice, «Провенто», «Единая Европа Холдинг». Свободное время посвящает семье и путешествиям.

ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ
    ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ

    блога «Практика интегрированного маркетинга»


    Читайте два раза в месяц полезные посты про маркетинговые стратегии и их реализацию прямо в почте