Привет! Меня зовут Алексей Нибо, я дизайн-директор в диджитал-агентстве Атвинта. В вебе я часто берусь за 3D и работаю в нескольких направлениях: архитектурные проекты, живые персонажи и промышленное оборудование. Про первые два уже рассказывал, а вот про оборудование ещё нет, хотя именно с него когда-то начиналась большая часть моей практики в Blender.
Расскажу про два кейса — сайты поставщиков метеорологического оборудования и опалубки. В обоих случаях я моделировал с нуля, но для разных задач. На первом — приборы собирались из отдельных деталей в короткой анимации, на втором была готовая конструкция, которую пользователь мог покрутить и рассмотреть со всех сторон.
Откуда брать технические 3D-модели метеорологического оборудования, если их не достать
Клиент в первые же дни прислал фотографии самых ходовых позиций — с разных ракурсов, чтобы можно было разглядеть форму и фактуру с каждой стороны. Какие-то снимки были для каталога на белом фоне, а другие прямо с натуры — приборы на метеоплощадке в горах.
Для общих очертаний прибора этого хватало, но для детальной проработки одних фотографий было уже мало.
Для общих очертаний прибора этого хватало, но для детальной проработки одних фотографий было уже мало.
Логично было бы идти к производителю: у него есть подробные инженерные модели, по которым собирают приборы. Но в открытый доступ их не выкладывают — это рабочие документы. Заказчик сам оборудование не выпускает, а закупает и перепродаёт, поэтому подобных материалов у него тоже нет. В интернете мы нашли частичные технические чертежи оборудования, которые использовали в своей работе.
Там, где не было схем, пропорции прикидывали по фотографиям на глаз. Точность размеров нам была не критична: в слайдере двухметровая метеостанция и маленький датчик с антеннами занимают один и тот же квадрат на экране.
Затем мы собрали всё в Blender. На чертеже есть три проекции: сверху, сбоку и прямо. Каждую из них загружали как референс, обводили по ним контуры и получали объёмный прибор. Я старался выдержать максимальную детализацию — например, резьба на болтах и наклейки производителя в нужных местах.
На упрощённой модели прибор читается как схема, а мне нужно было, чтобы он выглядел реалистичным.
11 сборных моделей оборудования и исключения
На главной собрали слайдер с одиннадцатью видеороликами — по одному на каждую категорию оборудования. Логика у всех была общая: мы закладываем движение от малого к большому. У нас есть кучка разрозненных запчастей, которые плавно собираются в готовое устройство. Приём рабочий, потому что каждый элемент естественным образом занимает своё место.
Девять сборок уместились в эту схему без проблем, а с двумя пришлось придумывать новые подходы
Сначала из общей схемы выбился метеорологический зонд — он стоит на седьмом месте в моей раскадровке. Это шар из лёгкой плёнки с блоком электроники под ним. Его запускают с метеостанций в атмосферу, чтобы измерять температуру, влажность и давление на разных высотах. У зонда всего две крупные части — оболочка и коробка с датчиками. Собирать там, по сути, нечего, а нам нужно было сохранить общую логику слайдера.
Решение мне подсказал сам прибор. При заправке газом оболочка плавно расправляется в купол, а затем аппарат поднимается в воздух — получается то же движение от малого к большому, только вместо сборки запчастей мы показали надувание шара.
Технически я сделал это без физической симуляции заполнения воздухом. Просчитывать, как плёнка раздувается и заполняется газом, было бы слишком долго ради анимации в доли секунды. Поэтому я уменьшил шар в масштабе до маленького комочка, а потом вернул к полному размеру. Ещё добавил микродвижения — как у настоящего воздушного шарика: его уже надули до максимума, но он продолжает чуть-чуть подрагивать от давления.
Второй раз схема сломалась на слайде с ноутбуком. Через него мы показываем софт, который идёт с приборами в комплекте. Разбирать такую штуку на винтики смысла нет: возни на пару дней, а выхлопа на крошечной картинке никакого. Но движение надо было сохранить, поэтому мы сделали так: сначала корпус закрыт, а потом крышка медленно поднимается и на экране включается 2D-анимация интерфейса. Раскрытие из компактного состояния в развёрнутое — тот же принцип.
Правило трёх секунд и движок, который считает свет понарошку
На вёрстку мы отдавали два файла под каждый слайд: MP4 и PNG. Пользователь переключает оборудование в слайдере и смотрит анимацию со сборкой, а когда она заканчивается, на её место встаёт статичное изображение. Можно было оставить последний кадр видео, но тогда картинка получалась бы мыльной. Чтобы уменьшить вес файла, кодеки сжимают изображение — на стоп-кадре это сразу видно.
Вес ролика зависит от его продолжительности, поэтому я выбрал себе ориентир — около трёх секунд на анимацию. Такое ограничение полезно, потому что без него легко уйти в творческий порыв и сделать красивую развёрнутую сборку, от которой потом будет тормозить вся страница. Отсюда появились правила для отдельных элементов: болтик закручивается за секунду, крупные запчасти чуть дольше, а мелкие быстрее. Одинаковые детали на разных приборах должны двигаться в одном темпе — иначе глаз цепляется и видит сбой.
А дальше встал вопрос, чем всё это рендерить. В Blender есть два встроенных движка:
-
Cycles просчитывает физику освещения — под каким углом луч падает на поверхность и куда отражается. Картинка получается близкой к фотореалистичному изображению.
-
EEVEE не просчитывает физику света, а имитирует её, как бы понарошку. Результат выходит менее точным, зато рендер идёт в разы быстрее.
На EEVEE кадр рендерится буквально за секунду — это меня и подкупило. Я рассуждал так: если клиент придёт и скажет «болтик неправильно завёрнут», на Cycles одно видео будет рендериться часа три, а на EEVEE я быстро поправлю и сразу покажу результат.
Экономия на рендере показывает другие проблемы — например, в работе с материалами. В EEVEE металл по умолчанию выглядит ненатурально, поэтому свойства приходится докручивать вручную, чтобы он смотрелся живее.
Ещё EEVEE не очень справляется с тенями, поэтому я прогонял приборы и слои через рендер по отдельности, а потом сводил в общий ролик: где-то тень нужно было сделать ярче, а где-то приглушить. История повторилась с матовым стеклом и отражениями. Их я делал уже на Cycles, а всё вместе собирал в одно видео с прозрачным фоном.
Во втором проекте я уже работал только на Cycles. Движок к тому времени стал заметно быстрее, а у меня появилось мощное железо. Да и сроки позволяли не торопясь выполнять работу. Cycles просчитывал физику света, поэтому все поверхности вставали на свои места.
Второй проект: модели, которые можно посмотреть поближе
Клиент увидел, что мы сделали на первом проекте, и пришёл с похожим запросом. Он занимается опалубкой — это конструкции, которые строители используют при заливке бетона: щиты с креплениями, леса для монтажа и каркасы. Всё это нам нужно было смоделировать для сайта. Процесс мы к тому моменту обкатали целиком — от сбора исходников до рендера, включая специфику сложной промышленной техники.
Основная часть работы была такой же, как и на первом проекте: собирали, красили и анимировали модели для главной. Но к этому добавилась ещё одна просьба — клиенту хотелось, чтобы в каталоге пользователь мог сам покрутить оборудование, приблизить его и рассмотреть с разных сторон.
С чертежами на этот раз повезло, так как заказчик сам собирает продукцию — у нас сразу была вся документация.
Для каталога нам не нужно было делать отдельную работу. 3D-модели к тому моменту были готовы, оставалось только загрузить их на Sketchfab. Это сервис, куда можно залить свои наработки и встроить интерактивное окошко на любой сайт. У Sketchfab свои ограничения по количеству полигонов, поэтому у нас не всё в эти рамки вписывалось — для некоторых позиций пришлось упрощать геометрию: убирать часть деталей и пересобирать поверхности.
Посмотреть и покрутить модели в Sketchfab
Шесть оттенков синего
Клиент переживал за свой фирменный цвет ещё с самой первой встречи. Для меня это был сигнал, что нужно быть внимательным.
В 3D цвет работает не как в брендбуке. Берёшь HEX-код краски, говоришь программе «пусть будет такой синий», а потом на модель начинают действовать источники освещения: основной свет, отражения от соседних поверхностей и тени. Один и тот же код на разных ракурсах выглядит как разные оттенки синего.
Плюс Blender немного меняет гамму — внутри у него свои настройки цветовых профилей. Сделано это для того, чтобы на постобработке можно было докрутить тон под задачу. Но когда тебе нужно попасть в конкретный фирменный цвет, такая свобода действий уже мешает.
Я всё это знал заранее и понимал, что клиент точно зацепится. Поэтому перед покраской моделей сделал несколько вариантов синего, отрендерил каждый и отправил заказчику на согласование.
Сборка лесов и правдоподобные анимации
Сначала мы сделали слишком подробную сборку строительных лесов: каждый винт закручивается, каждая доска ложится на своё место. Клиент посмотрел и сказал, что так не бывает — на объект конструкция приезжает крупными блоками, а монтажник работает с уже готовыми секциями. Часть этапов, которые мы анимировали, на стройке вообще не происходит.
В итоге мы несколько раз переделывали анимации. В какой-то момент он нашёл и скинул видео, как бригада собирает опалубку на площадке. С этого же ролика мы подсмотрели фактуру: какого цвета доски и как краска выглядит на солнце.
В анимации главное было держать баланс. Художественные приёмы тут не помогут — человек, который в своей жизни закрутил тысячу болтиков, сразу заметит фальшь.
Покажу на примере того же болтика. Вроде бы элементарно: он висит в пространстве, подлетает к поверхности и закручивается. Но если болтик просто летит и резко останавливается — это выглядит ненатурально. Поэтому у нас он летит с одной скоростью, а у поверхности притормаживает. Потом добавляем момент усилия, как будто его продавливают, а в самом конце он встаёт на место. Мы показываем вращение только в крупных планах — на маленьком слайде его и так не разглядишь.
Детали одного размера идут в одном темпе, а крупные — медленнее, потому что и анимация у них длиннее. Когда все эти мелочи учтены, сборка выглядит убедительно — хотя ни один болт по воздуху в жизни, конечно, летать и не думал.
За две этих работы я усвоил одно правило: если перед стартом выстроить у себя в голове весь путь проекта, заранее видишь, где клиент зацепится. В случае с опалубкой это был цвет — я предвидел подобное, подготовился и сэкономил команде кучу нервов. Ну, и себе тоже, конечно.
ссылка на оригинал статьи https://habr.com/ru/articles/1026920/