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

Здесь мы рассмотрим рабочий процесс, который используется разработчиками Soft8Soft и пользователями Verge3D (на примерах Scooter Configurator, Teapot Heater, Industrial Robot​, Jewelry Configurator и других приложений).

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

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

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

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

Если необходимы карты Normal Map или Occlusion Map, то последние запекаются путем совмещения высокополигональных и триангулированных низкополигональных Mesh-объектов.

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

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

Если, по каким-либо причинам, ваш контент должен быть совместим со стандартом gLTF 2.0, то следует использовать специальные материалы (см. настройки для Blender, 3ds Max или Maya).

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

Форматы изображений, разрешение и рекомендации

PNG или JPEG

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

Normal Map

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

Разрешение

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

Остерегайтесь NPOT

Разрешение текстур должно соответствовать правилу POT (power of two), т.е. быть кратным 2. Таким образом значения 256, 512, 1024 выглядят отличными, а вот, скажем, 1000 - уже плохо. Учтите, что движок автоматически масштабирует NPOT-текстуры. Вы можете добиться большей эффективности в загрузке сцены, если заранее приведете свои текстуры в соответствии с правилом POT.

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

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

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

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

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

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

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

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

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

Environment Map (Image-Based Lighting)

Environment Map предназначена для создания фона сцены и генерации отражений на материалах объектов. Мы рекомендуем художникам использовать изображения (equirectangular) в формате HDR или JPEG. Из соображений производительности размер карты окружения не должен превышать 2048x1024 пикселей.

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

Проекты по умолчанию для Blender, 3ds Max или Maya уже включают текстуру HDR (файл называется environment.hdr). Вы можете использовать ее в своих проектах.

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

HDR рендеринг

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

Анимация

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

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

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

Верстка и UI

В нашем рабочем процессе интерфейс создается на базе HTML с использованием стороннего программного обеспечения для веб-дизайна. Вы можете брать любой редактор WYSIWYG способный экспортировать файлы HTML, CSS и JS. Неплохим инструментом является Webflow, который мы использовали для создания большинства демонстраций Verge3D, таких как Scooter, Farmer's Journey или Industrial Robot. Конечно, вы можете создать HTML-интерфейс вручную с помощью кода или найти другие инструменты.

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

Постобработка

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

Звук

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

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

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

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

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

Сжатие ассетов

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

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

Публикация

Вы можете опубликовать свой проект, изучив руководство по App Manager (менеджер проектов).

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

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