Рабочий процесс
В этом разделе мы рассмотрим рабочий процесс, который принят в компании «Софт Эйт Софт» и который пользуется успехом у наших пользователей. В частности, он был использован при создании демо-приложений: «Скутер», «Подогреватель чайников», «Промышленный робот», «Ювелирный конфигуратор» и др.
- Моделирование и запекание
- Выбор системы материалов
- Форматы и рекомендованное разрешение изображений
- Карта окружения
- ХДР-рендеринг
- Анимация
- Верстка и интерфейс
- Постпроцессинг
- Аудио
- Компрессия ассетов
- Публикация
Для создания интерактивного 3Д веб-контента вы можете использовать любую сборку «Вердж3Д» с одинаковым результатом, будь-то «Вердж3Д для Блендера», «Вердж3Д для 3дс Макса» или «Вердж3Д для Майи».
Моделирование и запекание
В нашей команде мы практикуем следующий подход к моделированию. Сначала создаются высокополигональные версии объектов. Затем удаляется модификатор Subsurf или выполняется ретопология для получения низкополигональных моделей. Рекомендуем использовать не более 100 тысяч треугольников на один объект.
Для низкополигональных моделей создается текстурная развертка, а сама геометрия триангулируется. Это не требование «Вердж3Д». В дальнейшем такие модели будет проще запекать или импортировать в сторонние редакторы, например «Сабстанс Пейнтер» (англ. Substance Painter).
Если необходимо использовать карту нормалей или карту затенения (англ. occlusion), то они запекаются путем совмещения высокополигональных и триангулированных низкополигональных объектов.
Выбор системы материалов
В большинстве случаев, ваш рабочий процесс будет основываться на «родной» системе материалов, используемой в выбранном 3Д-редакторе:
- «Блендер» — шейдерные ноды с рендером Eevee.
- «3дс Макс» — физический с рендером Arnold.
- «Майя» — Standard Surface с Viewport 2.0 в качестве референсного рендера.
Если, по каким-либо причинам, ваш контент должен быть совместим со стандартом ГЛТФ 2.0 (англ. glTF 2.0), то следует использовать специальные материалы (см. настройки для «Блендера», «3дс Макса» и «Майи»).
Вы также можете посмотреть видео, в которых объясняется, как использовать материалы в приложениях «Вердж3Д»: «Блендер», «3дс Макс», «Майя».
Форматы и рекомендованное разрешение изображений
PNG или JPEG
Для максимальной эффективности мы рекомендуем использовать для текстур форматы: PNG с максимальным сжатием без потерь или JPEG с некоторыми потерями («Вердж3Д» также поддерживает WebP, GIF, BMP, TIFF). Если вам не нужна прозрачность в текстуре (альфа-канал), отдайте предпочтение JPEG, а не PNG.
Карты нормалей
Карты нормалей следует сохранять в формате PNG, поскольку текстуры в формате JPEG часто имеют видимые артефакты. Учтите, что PNG-изображения могут иметь большой размер файлов, поэтому используйте карты нормалей только тогда, когда это действительно необходимо.
Разрешение
Старайтесь не использовать слишком детализированные текстуры. Большие изображения плохо влияют на производительность, занимают много видеопамяти (особенно это касается мобильных устройств, на которых исчерпание доступной памяти часто вызывает сбой приложений) и значительно замедляют загрузку по сети. Разрешение большинства текстур лучше удерживать в пределах 1024 пикселей или даже еще меньше.
Остерегайтесь NPOT
Разрешение текстур должно равняться степени двойки (англ. POT, power of two). Значения 256, 512, 1024 подходят, а 1000 нет. Учтите, что движок автоматически масштабирует NPOT-текстуры. Вы можете добиться большей эффективности в загрузке сцены, если заранее приведете свои текстуры в соответствии с правилом POT.
Соотношение сторон
Текстуры могут быть квадратными или прямоугольными, например, 1024x512 пикселей.
Повторное использование
Всегда старайтесь повторно использовать файлы изображений в своих материалах, а не подгружать их копии.
Не стоит повторно использовать большие текстуры в виде элементов пользовательского интерфейса. Их следует заранее масштабировать и сохранить в виде новых файлов, пусть даже это несколько увеличит время загрузки.
Пакуйте черно-белые текстуры в RGBA
Если у вас есть несколько черно-белых изображений (карты AO, лайтмапы, карты прозрачности, цветные маски и т.д.), постарайтесь упаковать их в каналы RGBA одной текстуры.
Загружайте по необходимости
Если вы разрабатываете приложение со множеством вариаций и цветовых решений, то лучшим вариантом будет загружать сначала стартовый набор текстур. Затем подгружать необходимые текстуры с помощью пазла replace texture или частей сцены с помощью пазла append scene.
Карта окружения
Карта окружения (environment map, также употребялют термин image-based lighting) предназначена для создания фона сцены и реалистичных отражений на материалах. Мы рекомендуем использовать изображения (equirectangular) в формате ХДР (.hdr). Из соображений производительности, размер карты окружения не должен превышать 2048x1024 пикселей.
Кроме того, ХДР-текстуры можно использовать для имитации сложных условий освещения. Например, если источников света слишком много, чтобы их можно было представить традиционными лампами.
Стандартные шаблоны проектов «Вердж3Д» уже включают универсальную текстуру ХДР (файл называется environment.hdr). Вы можете использовать ее в своих проектах.
Посмотрите обучающее видео по настройке ХДР-окружения в сцене: «Блендер», «3дс Макс», «Майя».
ХДР-рендеринг
ХДР-рендеринг (HDR, high dynamic range) можно включить с помощью опции в окне настроек экспорта Verge3D («3дс Макс» и «Майя»). В «Блендере» эта опция находится на панели Render в настройках Verge3D. В этом режиме используются текстуры повышенной точности для более выразительного рендеринга при контрастном освещении, что особенно важно для корректной визуализации постпроцессинговог эффекта bloom.
Анимация
Анимационные клипы создаются для необходимых частей модели. Можно использовать скелетную и объектную анимации, морфинг и анимацию материалов (подробнее смотрите в руководстве по анимации «Блендер», «3дс Макс» или «Майя»).
Давайте понятные названия анимированным объектам, что поможет легко их искать в редакторе пазлов.
Посмотрите следующие видео по работе с анимацией: «Блендер», «3дс Макс», «Майя».
Верстка и интерфейс
В нашем рабочем процессе интерфейс создается на базе ХТМЛ (англ. HTML) с использованием стороннего программного обеспечения для веб-дизайна. Вы можете брать любой редактор ВИЗИВИГ (англ. WYSIWYG) способный экспортировать файлы ХТМЛ, ЦСС и ЯваСкрит. Неплохим инструментом является Вебфлоу (англ. Webflow), который мы использовали для создания большинства демо-приложений «Вердж3Д», таких как «Скутер», «Приключение фермера», «Промышленный робот» и др. Конечно, вы можете создать ХТМЛ-интерфейс вручную с помощью кода или найти другие инструменты.
Элементы интерфейса (меню, кнопки, информационные поля...) создаются как часть отдельной веб-страницы, в которую встроено приложение «Вердж3Д». Изучите подробное руководство по разработке графического интерфейса на основе ХТМЛ.
Постпроцессинг
Эмбиент окклюжн (англ. Ambient Occlusion, GTAO) включается в настройках пакета моделирования: «Блендер» / «Макс» / «Майя».
Остальные эффекты постпроцессинга включаются с помощью специльных пазлов: bloom (лучше использовать с активной опцией ХДР), brightness-contrast, grayscale, depth of field, afterimage (motion blur), screen-space reflection, и screen-space refraction. Параметры для этих эффектов могут быть изменены во время выполнения или анимированы с высокой производительностью, благодаря внутреннему кешированию. Существует также пазл для отключения эффектов постпроцессинга.
Аудио
Фоновая музыка, звуки событий могут быть добавлены с помощью звуковых пазлов. При этом необходимо использовать формат .mp3 для аудиофайлов, так как он поддерживается во всех веб-браузерах.
Существует ограничение для использования звуков: воспроизведение может быть начато только через прямое взаимодействие с веб-страницей. Например, блок ниже будет работать везде, в том числе на устройствах Эпл:
Однако если звук не был инициирован пользователем напрямую, воспроизведения не будет:
Для решения проблемы вы можете использовать пазл on event / touchstart. В блоке ниже выполняется проигрывание и установка паузы для всех звуков при первом клике пользователя по экрану:
Эту заготовку вы можете найти в библиотеке пазлов с названием Sound iOS Workaround.
Компрессия ассетов
После завершения работы над приложением, вы можете оптимизировать загрузку файлов, прочитав соответствующее руководство.
Вы также можете посмотреть видео, где демонстрируется работа со сжатыми ассетами: «Блендер», «3дс Макс», «Майя».
Публикация
Изучите руководство по менеджеру приложений, чтобы узнать подробнее о публикации проектов.
Остались вопросы?
Не стесняйтесь спрашивать на нашем форуме!