3D-моделирование для промышленных сайтов: виртуальное оборудование, которое можно пощупать

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

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

Где найти технические 3D-модели метеорологического оборудования: решение проблемы отсутствия материалов

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

Эти фотографии были полезны для общего понимания внешнего вида приборов, но для детальной проработки было недостаточно одного лишь визуального материала.

Облачный радар на метеоплощадке

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

Так выглядит метеорологическая станция

Логично было обратиться к производителю, так как у него есть доступ к точно обработанным инженерным моделям, по которым собираются приборы. Однако такие документы не выкладываются в открытый доступ, так как являются рабочими материалами. Заказчик не производит оборудование, а лишь закупает и перепродаёт его, поэтому соответствующих материалов у него тоже не было. В интернете удалось найти частичные технические чертежи оборудования, которыми мы воспользовались.

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

Чертежи метеорологического оборудования, по которым собирали модели

В дальнейшем мы собрали весь материал в Blender. На чертеже были три проекции: сверху, сбоку и спереди. Каждую из них мы загружали как референс, обводили контуры и получали объемную модель. Я старался достичь максимальной детализации — например, рельеф резьбы на болтах и наклейки производителя в нужных местах.

Упрощённая модель отображалась как схема, но я стремился к тому, чтобы сделать её максимально реалистичной.

3D-модели метеостанции, датчика и облачного радара

11 сборных моделей оборудования и уникальные исключения в анимации

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

Все девять сборок идеально вписались в эту концепцию, однако для двух моделей потребовалось выработать новые подходы.

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

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

Я осуществил это без физической симуляции заполнения воздухом. Рассчитывать, как пленка раздувается и заполняется газом, заняло бы слишком много времени для анимации, которая длится доли секунды. Поэтому я уменьшил шар до маленького комочка, а затем вернул его в полный размер. Кроме того, я добавил микродвижения — как у настоящего воздушного шарика: он уже надули до максимума, но продолжает немного дергаться от давления.

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

Правило трёх секунд в анимации и оптимизация с помощью движка, имитирующего освещение

Для верстки мы предоставляли два файла под каждый слайд: MP4 и PNG. Пользователь переключает оборудование в слайдере и видит анимацию сборки, а как только она заканчивается, на её место встаёт статичное изображение. Можно было оставить последний кадр видео, но тогда изображение теряет четкость. Поскольку вес ролику зависит от его длительности, я установил для себя ориентир — около трёх секунд на анимацию. Это ограничение оказалось полезным, так как без него легко увлечься и создать красивый развёрнутый процесс сборки, от которого затем будет тормозить вся страница. Поэтому я установил правила для различных элементов: болтик закручивается за секунду, более крупные запчасти занимают чуть больше времени, а мелкие — быстрее. Одинаковые детали на разных приборах должны двигаться в одном темпе — иначе взгляд цепляется и замечает сбой.

Следующий шаг заключался в выборе движка для рендеринга. В Blender доступны два встроенных движка:

• Cycles просчитывает физику освещения — под каким углом луч света падает на поверхность и куда он отражается. Изображение получается близким к фотореалистичному.

• EEVEE не просчитывает физику света, а имитирует её, как бы в искусственной среде. Результат получается менее точным, но рендер происходит в разы быстрее.

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

EEVEE также не справляется с тенями, поэтому я рендерил приборы и их слои по отдельности, а затем собирал итоговое видео: где-то тень пришлось усиливать, а в каких-то случаях смягчать. Аналогично была ситуация с матовым стеклом и отражениями. Их я делал уже на Cycles, а позже собирал всё вместе в одно видео с прозрачным фоном.

Во втором проекте я работал исключительно на Cycles. Движок на тот момент заметно ускорился, а у меня появилось мощное оборудование. И сроки проекта позволяли мне больше времени уделять деталям. Cycles точно просчитывал освещение, благодаря чему все поверхности выглядели естественно.

Второй проект: создание 3D-моделей, которые можно изучить вблизи

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

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

На этот раз нам повезло с техническими чертежами, так как заказчик сам собирает продукцию — у нас была вся необходимая документация.

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

Шесть оттенков синего: как добиться точности цвета в 3D

Клиент проявил беспокойство по поводу своего фирменного цвета ещё с первой встречи. Для меня это послужило сигналом, что необходимо уделить этому вопросу особое внимание.

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

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

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

Шесть оттенков синего

Технические особенности сборки лесов и реалистичные анимации в 3D

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

В конечном итоге нам пришлось несколько раз переделывать анимации. В какой-то момент клиент нашёл и поделился видео, на котором бригада собирает опалубку на площадке. С этого ролика мы позаимствовали текстуру: каков цвет досок и как краска выглядит при солнечном свете.

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

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

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

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