Рабочий процесс Вердж3Д для пользователей Блендера, 3дс Макса и Майи — Софт Эйт Софт
Description: Здесь мы рассматриваем рабочий процесс, который оказался оптимальным для создания интерактивных 3Д-веб-приложений с использованием Блендера, 3дс Макса или Майи.

# Рабочий процесс

В этом разделе мы рассмотрим типовой рабочий процесс, принятый в компании «Софт Эйт Софт», который также успешно применяется пользователями «Вердж3Д». В частности, он был использован при создании демо-приложений: «Скутер», «Подогреватель чайников», «Промышленный робот», «Ювелирный конфигуратор» и др.

Демо-приложение «Подогреватель чайников».

- Моделирование и запекание
- Выбор системы материалов
- Форматы и размер изображений
- Карта окружения
- HDR-рендеринг
- Анимация
- Верстка и интерфейс
- Постпроцессинг
- Аудио
- Компрессия ассетов
- Публикация

Для создания качественного интерактивного 3Д-контента не имеет значения, какой вариант «Вердж3Д» использовать. Вы можете получить примерно одинаковый результат в «Блендере», «3дс Максе» или «Майе».

#

## Моделирование и запекание

В нашей команде мы практикуем следующий подход к моделированию. Сначала создаются высокополигональные версии объектов. Затем удаляется subsurf-модификатор или выполняется ретопология для получения низкополигональных моделей. Рекомендуем использовать не более 100 тысяч треугольников на один объект.

Для низкополигональных моделей создается текстурная развертка, а сама геометрия триангулируется. Это не требование «Вердж3Д». В дальнейшем такие модели будет проще запекать и импортировать в сторонние редакторы, например в «Сабстанс Пейнтер» для последующего текстурирования.

Если необходимо использовать карту нормалей или карту затенения (англ. occlusion), они запекаются путем совмещения высокополигональных и триангулированных низкополигональных мешей.

#

## Выбор системы материалов

В большинстве случаев, ваш рабочий процесс будет основываться на «родной» системе материалов, используемой в выбранном 3Д-редакторе:

- «Блендер» — шейдерные ноды с рендером «Иви».
- «3дс Макс» — физический с рендером «Арнольд».
- «Майя» — Standard Surface с рендером «Вьюпорт» 2.0 в качестве референсного.

Также посмотрите видео-уроки, в которых объясняется, как использовать материалы в приложениях «Вердж3Д»: «Блендер», «3дс Макс», «Майя».

#

## Форматы и размер изображений

### PNG или JPEG

Для максимальной эффективности мы рекомендуем использовать для текстур форматы: PNG с максимальным сжатием без потерь или JPEG с некоторыми потерями. Если вам не нужна прозрачность в текстуре (альфа-канал), отдайте предпочтение JPEG, а не PNG.

Пользователям «Блендера» мы рекомендуем использовать более эффективный формат WebP. Этот формат обеспечивает как сжатие с потерями (аналогичное JPEG), так и без потерь (аналогичное PNG). В обоих режимах он обеспечивает более качественное сжатие данных, что значительно уменьшает размер (и время загрузки) ваших приложений. Еще одно преимущество WebP заключается в том, что вы можете использовать альфа-канал как в режиме сжатия с потерями, так и в режиме без потерь.

Приведенная ниже информация о формате PNG актуальна и для WebP без потерь, а информация о формате JPEG — для WebP с потерями.

### Карты нормалей

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

### Разрешение

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

### Используйте степень двойки

Разрешение текстуры должно равняться степени двойки. В частности, значения 256, 512, 1024 подходят, а 1000 нет. Несмотря на то, что движок автоматически масштабирует нестандартные разрешения, вы можете добиться большей эффективности в загрузке сцены, если заранее приведете свои текстуры в соответствии с вышеуказанным правилом.

### Соотношение сторон

Текстуры могут быть квадратными или прямоугольными, например, 1024x512 пикселей.

### Повторное использование

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

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

### Пакуйте черно-белые текстуры в каналы цветности

Если у вас есть несколько черно-белых изображений (карты AO, лайтмапы, карты прозрачности, цветные маски и т.д.), постарайтесь упаковать их в каналы цветности (красный, зелёный, синий, альфа) одной текстуры.

### Загружайте по необходимости

Если вы разрабатываете приложение со множеством вариаций и цветовых решений, то лучшим вариантом будет загружать сначала стартовый набор текстур. Затем подгружать необходимые текстуры с помощью пазла replace texture или частей сцены с помощью пазла append scene.

#

## Карта окружения

Карта окружения (также используют термин «освещение на основе текстуры») предназначена для создания фона сцены и реалистичных отражений на материалах. Мы рекомендуем использовать изображения в формате HDR (.hdr), развёрнутые в виде равнопромежуточной (картографической) проекции. Из соображений производительности, размер карты окружения не должен превышать 2048x1024 пикселей.

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

Стандартные шаблоны «Вердж3Д»-приложений уже включают универсальную текстуру в формате HDR (файл называется environment.hdr). Вы можете использовать ее в своих собственных проектах.

Посмотрите обучающее видео по настройке HDR-окружения в сцене: «Блендер», «3дс Макс», «Майя».

#

## HDR-рендеринг

HDR-рендеринг можно включить с помощью опции в окне настроек экспорта Verge3D («3дс Макс» и «Майя»). В «Блендере» эта опция находится на панели Render в настройках Verge3D. В этом режиме используются текстуры повышенной точности для более выразительного рендеринга при контрастном освещении, что особенно важно для корректной визуализации эффекта постобработки блум.

«Скутер» — приложение использующее возможности HDR.

#

## Анимация

Анимационные клипы создаются для необходимых частей модели. Можно использовать скелетную и объектную анимации, морфинг и анимацию материалов (подробнее смотрите в руководстве по анимации для «Блендера», «3дс Макса» или «Майи»).

Всегда давайте понятные названия анимированным объектам, что существенно упростит их поиск в редакторе пазлов.

Также посмотрите следующие видео по работе с анимацией: «Блендер», «3дс Макс», «Майя».

#

## Верстка и интерфейс

Для художников незнакомых с веб-программированием мы предлагаем три различных метода создания пользовательских интерфейсов. Первый, наиболее простой — сделать элементы пользовательского интерфейса прямо в пакете моделирования, а затем использовать привязку к камере и настройку fit to camera edge, чтобы расположить их на экране (см. руководство для «Блендера», «3дс Макса» и «Майи»). Кроме того, поскольку этот метод не основан на HTML-элементах, он хорошо работает для приложений виртуальной и дополненной реальности.

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

Другой подход – вёрстка с помощью HTML-пазлов. С его помощью вы сможете создавать достаточно сложные интерфейсы без необходимости писать код на HTML/CSS.

«Приключение фермера» — браузерная игра, использующая интерфейс, выполненный на пазлах.

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

Третьим подходом к разработке интерфейсов является использование стороннего программного обеспечения для веб-дизайна. Вы можете брать любой редактор ВИЗИВИГ (англ. WYSIWYG), способный экспортировать файлы HTML и CSS. Неплохим инструментом является Вебфлоу (англ. Webflow), который мы использовали для создания ряда демо-приложений, таких как «Скутер», «Промышленный робот», «Кресло» и др. Вы также можете создавать HTML-вёрстку вручную или воспользоваться любым другим инструментом.

Данный подход предполагает, что элементы интерфейса (меню, кнопки, информационные поля...) создаются как часть отдельной веб-страницы, в которую встраивается «Вердж3Д»-приложение. Узнать подробности вы можете в руководстве по HTML-разработке.

#

## Постпроцессинг

Эмбиент окклюжн (англ. Ambient Occlusion, GTAO) включается в настройках пакета моделирования: «Блендера» / «Макса» / «Майи».

Остальные эффекты постобработки включаются с помощью специальных пазлов: bloom (лучше использовать с активной опцией HDR), brightness-contrast, grayscale, depth of field, afterimage, screen-space reflection, и screen-space refraction. Параметры для этих эффектов могут быть изменены во время выполнения или анимированы с высокой производительностью, благодаря внутреннему кешированию. Существует также пазл для отключения эффектов постобработки.

#

## Аудио

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

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

Однако если звук не был инициирован пользователем напрямую, воспроизведения не произойдет:

Для решения проблемы вы можете использовать пазл on event / touchstart. В блоке ниже выполняется проигрывание и установка паузы для всех звуков при первом клике пользователя по экрану:

Эту заготовку вы можете найти в библиотеке пазлов с названием Sound iOS Workaround.

#

## Компрессия ассетов

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

Вы также можете посмотреть видео, где демонстрируется работа со сжатыми ассетами: «Блендер», «3дс Макс», «Майя».

#

## Публикация

Изучите руководство по диспетчеру приложений, чтобы узнать подробнее о публикации проектов.

## Остались вопросы?

Не стесняйтесь спрашивать на нашем форуме!