На пути к третьему измерению: веб-разработка с 3D, тонкости и инструментарий для креативов

Более 5 лет мы занимаемся созданием интерактивных продуктов для продвижения бизнеса в различных сегментах. Работая в кросс-функциональной команде, рано или поздно обнаруживаешь «слабые места», которые пускают реализацию пайплайна по пути наибольшего сопротивления. Сегодня поговорим как раз про одну из таких проблем.

Браузер – это изначально не среда для 3D-контента, он догоняет новые фичи трехмерной графики и будет всегда, вероятнее всего, это делать. Для мобильных приложений, например, изначально существовали движки, заточенные под 3D. С развитием 3D-моделирования вне отраслей архитектуры, инженерии и военного дела возникла необходимость выводить этот вид контента в вебе. Появилась система программ (шейдеров) для отображения трехмерной графики в приложениях различного толка (OpenGL)– на ее основе делается браузерное api WebGL.

WebGL служит для отображения 3D-графики в браузерной среде, и во все современные версии браузеров он интегрирован. Можно было бы писать приложения на чистом WebGL, но у нас в этом нет необходимости – мы пользуемся готовой библиотекой для ускорения выполнения наших задач. Называется она Three.js.

Эта библиотека позволяет писать проекты на WebGL проще: один и тот же результат, написанный на чистом WebGL и на Three.js, требует разного количества строк кода. Нам для реализации коммерческих проектов со сжатыми сроками и работой «на поток» важна такого рода оптимизация – для нас как раз отчасти она и была сделана.

Без знания 3D невозможно разработать ни один наш продукт, это обязательный скилл для всех специалистов производства в той или иной мере. Например, наш флагман это – AR, нельзя работать в AR и VR, не зная 3D. Мало того, что про AR-VR до сих пор мало кто знает, так и сам формат 3D тоже не то, чтобы сильно распространен в веб-среде. Мы сегодня заходим в интернет на любой популярный сайт и попадаем в пространство плоскости.

Зачем вообще сайту как программному продукту быть объемным? Аудитории нужно постоянно что-то новое, новый визуальный опыт. А бизнесу постоянно нужны «дрова» перформанса в топку пользовательского опыта.

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

Весь пайплайн нашей работы над типовыми проектами мы разбирать не будем, остановимся на одном из самых интересных этапов где и кроется корень проблемы – генерации креативов. Наши дизайнеры работают на этом этапе в Procreate, Adobe Illustrator | Photoshop, Figma, программисты работают глобально в Tree.js, моделлеры – в Blender | Cinema 4D.

Мы работаем в трех разных инструментах. Если бы появилось что-то единое, единая среда, то работа велась бы намного проще.

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

UI/UX дизайнер может нарисовать интерфейс в Figma, 3D-дизайнер может создать объемное пространство в Blender или Cinema 4d. Но как только речь заходит о том, чтобы превратить это пространство в веб-страницу, с которой можно взаимодействовать, всплывает проблема отсутствия инструмента, где программисты и дизайнеры могли бы понимать друг друга и синхронно работать. Начинается игра в ассоциации.

UI/UX-дизайнеру не нужно быть программистом, а программисту не нужно ничего «дизайнить» – это вроде бы база. Но получается, что не получается: роли сотрудников смешиваются из-за того, что инструментарий недостаточен.

Естественно, на выходе мы получаем креатив, всегда, но он рождается путем кругов «отдал-загрузил-посмотрел-вернул» или получается не таким, какова была изначальная задумка. Бывают случаи, когда вопрос внешнего вида того или иного элемента полностью ложиться в область фантазии программиста.

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

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

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

В Blender, например, нельзя создать сцену для веба – это две совершенно разные среды. При создании 3D в редакторе программист получает «кота в мешке»: мы не можем предугадать, как модель себя поведет в веб-среде, потому что там рендеринг идет по-другому.

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

Любая программа для 3D-моделирования – это уже адаптация кода под того, кто код не знает. Любая 3D-модель или сцена – это код: все координаты точек, все цвета плоскостей и все текстуры материалов. Так если есть адаптация кода под инструментарий 3D-художника, то почему не может быть упрощенной единой среды для дизайнера, моделлера и программиста? Где они трое видят картину изменений в режиме реального времени в веб-среде.

Будет ли этот инструмент сложным поначалу? Да. Будет ли он ограниченным? Да. Но он позволит смотреть по-новому на дизайн 3D-среды в вебе, а это немало.

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

Для AR/VR мы создали собственную веб-платформу со встроенным вьюером, где каждый сотрудник, не зная кода, может сделать сцену в веб-среде с 3D. Для остальных проектов мы используем комбинацию Figma + Blender + Three.js

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

Spline – вне нашего фокуса внимания, потому что для нас дизайн и кастомизация под клиента – это то, что стоит во главе работы. У Spline есть ограничения по кастомизации моделей, да и проблему с «дизайнерами не у дел» это сочетание не решает.

Потребность в создании единой среды для работы ощущаем не только мы, но и наши коллеги по всему миру. Инструменты постепенно разрабатываются:

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