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

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

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

Для создания качественного интерактивного 3D-контента не имеет значения, какой вариант Verge3D использовать. Вы можете получить примерно одинаковый результат в Blender, 3ds Max или Maya.

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

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

Для низкополигональных моделей создается текстурная развертка, а сама геометрия триангулируется. Это не требование Verge3D. В дальнейшем такие модели будет проще запекать и импортировать в сторонние редакторы, например в Substance Painter для последующего текстурирования.

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

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

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

Blender — шейдерные ноды с рендером Eevee.
3ds Max — физический с рендером Arnold.
Maya — Standard Surface с рендером Viewport 2.0 в качестве референсного.

Также посмотрите видео-уроки, в которых объясняется, как использовать материалы в приложениях Verge3D: Blender, 3ds Max, Maya.

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

PNG или JPEG

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

Пользователям Blender мы рекомендуем использовать более эффективный формат 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-текстуры можно использовать для имитации сложных условий освещения. Например, если ламп слишком много, либо если они не могут быть аппроксимированы точечными или квадратными источниками.

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

Посмотрите обучающее видео по настройке HDR-окружения в сцене: Blender, 3ds Max, Maya.

HDR-рендеринг

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

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

Анимация

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

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

Также посмотрите следующие видео по работе с анимацией: Blender, 3ds Max, Maya.

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

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

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

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

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

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

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

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

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

Ambient Occlusion (GTAO) включается в настройках пакета моделирования: Blender / 3ds Max / Maya.

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

Аудио

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

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

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

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

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

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

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

Вы также можете посмотреть видео, где демонстрируется работа со сжатыми ассетами: Blender, 3ds Max, Maya.

Публикация

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

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

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