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

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

ВебГЛ-визуализация подогревателя чайников в стиле стимпанк — Демо-приложение «Подогреватель чайников».

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

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

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

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

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

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

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

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

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

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

PNG или JPEG

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

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

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

Разрешение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ХДР-рендеринг

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

Scooter, a 3D visualization which uses HDR rendering capabilities — «Скутер» — приложение использующее возможности ХДР.

Анимация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Аудио

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

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

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

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

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

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

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

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

Публикация

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

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

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