WebGL рулит! Автопром в 3D

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

В этот раз разговор пойдет о 3D конфигураторах. Причем самой консервативной и массивной части индустрии — автопрома.

Предисловие

«WebGL рулит!» — это цикл статей, в которых рассказывается об интересных, актуальных и любопытных веб-ресурсах, так или иначе связанных с одноименной технологией. С первым материалом вы можете ознакомиться здесь.

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

Практически же оказалось, что многие ресурсы автомобильной тематики отстают от времени. Иногда попадались сайты, которые требовали установить Flash Player для просмотра презентации, что малость неактуально на сегодняшний день. Любопытно, что в списке таких ресурсов, были сайты некоторых известных брендов. Также очень часто используются технологии «псевдо 3D», где посетителю предлагают поскучать длительное время, пока загружаются весьма массивные панорамные фотографии. Конечно, ни о какой зрелищности, а тем более интерактивности, здесь и речи нет.

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

Это не сайт конкретного производителя и нет никакой связи с автомобильной индустрией. Это одно из самых ранних приложений WebGL, предлагающее простые функции конфигурирования. Здесь можно поменять цвет авто или колес, рассмотреть машину со всех сторон, попутно слушая музыку. И все…

Приложение, созданное на Three.js в далеком 2012 году, тем не менее, привлекает внимание. В первую очередь, визуальной стороной. Сочные материалы, отражение окружающего мира на поверхности авто, качественно сделанные модели. Конечно, ни о какой фотореалистичности здесь нет и речи. Просто хорошая работа для тех времен. Однако уже в этой сцене есть зачатки интерактивности, что гораздо выгоднее смотрится на фоне обычного 2D.

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

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

3D-конфигуратор не выглядит чужеродным объектом в этом интернет-магазине, а органично вписывается в экосистему. Хотя имеются некоторые недоработки в визуальном ряде. Здесь нет какой-либо помпезной фотореалистичности, да и навигация в приложении подкачала. Зато, опять-таки повторюсь, конфигуратор великолепно справляется со своей главной задачей — предоставить возможность клиенту визуально собрать авто нужной модификации и оценить затраты.

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

Оригинальная промо-презентация автомобиля Nissan, опубликованная на официальном сайте производителя. Это не конфигуратор в буквальном смысле слова, хотя и интерактивное приложение. Разработчик постарался добиться «вау» эффекта, а не предоставить возможность чего-либо изменять. Помимо качественно сделанной модели, здесь присутствует и творческая составляющая.

Всё начинается с необычной загрузки, когда машина собирается буквально как пазл. Затем предлагается фантасмагория с цветами, смысл которой в том, что раскраска авто меняется движением мыши. Очень быстро, очень ярко. Можно также открыть дверцу и заглянуть в салон. Но это, как побочная опция. Презентация выглядит, как игрушка: забавная и радужная. Не зря её девизом служит слоган «Play it your way».

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

Constellium — мировой производитель алюминиевых полуфабрикатов со штаб-квартирой в Нидерландах. Так, по крайне мере, гласит сайт Википедии. На его официальном веб-ресурсе есть замечательная презентация.

Не секрет, что в авто используется большое количество алюминия. Причем не только в радиаторе, как может показаться несведущим. Производители от Constellium решили визуально продемонстрировать наличие алюминия в машине, путем ее разбора.

Да, да. Презентация позволяет разобрать автомобиль по винтикам, показать все алюминиевые детали и почитать контекстную справку по ним. В принципе, это всё на что способна программа. Зато выглядит наглядно, поучительно и информативно.

К сожалению, приложение не лишено проблем. Странно настроено вращение камеры. Например, мне случайно удалось перевернуть автомобиль верх дном, хотя он стоит на поверхности. Но самое забавное получится, если вызвать консоль браузера (клавиша F12). В этом случае, модель сплющит.

Технически презентация создана с помощью Unity.

Арабские Эмираты, горячее солнце и богатые, очень богатые шейхи. Таким подавай роскошные, дорогие авто и в максимальной комплектации. Собственно, следующая презентация именно на это и рассчитана. Автодилер General Motors в ОАЭ любит своих богатых клиентов и периодически балует их интересными 3D-презентациями.

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

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

Этот 3D-конфигуратор был сделан с помощью Blend4Web.

Послесловие

WebGL позволяет создавать по-настоящему интересные, красочные и реалистичные презентации. Показанная пятерка работ, конечно же, не единственные представители славного племени 3D конфигураторов. К сожалению, их мало, несмотря на те перспективы, которые открываются с их применением. Но я верю, что всё еще впереди…

P.S. Названия подзаголовков кликабельные и ведут на страницы с приложениями.

Автор: Prand

Источник