Рендеринг текста

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

1. HTML/CSS и аннотации

HTML/CSS — это наиболее органичный способ отображения информации в веб-приложениях.

Интерфейс основанный на HTML в приложении «Ювелирный конфигуратор» demo.

Ниже указаны возможные способы визуализации текста с использованием HTML:

Использование стороннего конструктора сайтов, например «Вебфлоу».
Ручное редактирование HTML/CSS-файлов проекта.
Использование HTML-пазлов.
Использование аннотаций «Вердж3Д».

Просмотрите раздел интерфейс на основе HTML, чтобы получить больше информации об использовании HTML, а также примеры пазлов add annotation и HTML.

Преимущества

Подход, распространенный в веб-разработке.
Хорошее качество визуализации текста
Возможность использования расширенных стилей текста, таких как пользовательские шрифты и 3Д-преобразования.

Минусы

Нет простой интеграции с визуализированной сценой. В большинстве ситуаций вы просто рендерите HTML-текст поверх 3Д-контента.
Нет простого способа использовать HTML-текст в режиме виртуальной реальности.
Медленный рендеринг, если в вашем приложении слишком много динамических текстовых элементов (например, аннотаций).

2. Динамическая текстовая геометрия

Вы можете использовать текстовые объекты из вашего 3Д пакета для создания текстовой геометрии, аналогичной обычным объектам. "Динамический" означает, что «Вердж3Д» не хранит текстовую геометрию в экспортируемом ресурсе glTF, а воссоздает ее при загрузке сцены (используя данные шрифта). Это также означает, что вы можете редактировать текст во время его запуска, используя пазл update text object или с помощью «Ява Скрипта».

Чтобы сделать ваши текстовые объекты динамическими, убедитесь что опция Bake Text в настройках экспорта неактивна:

Блендер

3дс Макс

Майя

Динамические текстовые объекты также могут быть созданы на лету с использованием пазла create text object.

Вам также необходимо задать параметр Font Converter (включенный по умолчанию) при создании приложения, чтобы иметь возможность использовать динамическую геометрию текста. Эта опция активирует модуль opentype.js в вашем приложении, который необходим для загрузки и обработки данных шрифта.

Если вы забыли включить параметр Font Converter, просто скопируйте файл opentype.js из папки build установочной папки «Вердж3Д» (например C:\Program Files\Verge3D_for_Blender\build) в папку с приложением.

Преимущества

Текстовые объекты — это полнофункциональные 3Д-меши, которые можно перемещать, анимировать, назначать пользовательские материалы, как и при работе с любыми другими 3Д-мешами в вашей сцене.
Динамический текст, отображаемый во время запуска, как таковой, не потребляет пропускную способность для загрузки геометрии по сети.
Кроме содержания вы также можете менять шрифт, глубину и фаски.

Минусы

Требуется некоторое время для генерации текста во время загрузки сцены.
Требуется загрузка ассетов шрифта (TTF или WOFF) и использование дополнительного модуля конвертера шрифтов.
Не все параметры текста поддерживаются в «Вердж3Д».

3. Статическая текстовая геометрия

Статическая текстовая геометрия очень похожа на динамическую, за исключением того, что она использует запеченный текстовый меш, который хранится в экспортированном ресурсе glTF. Такие меши нельзя редактировать во время запуска, например изменять их содержимое или шрифт. Однако вы можете назначать материалы или перемещать текст, как и другие геометрические объекты.

Чтобы экспортируемый текст использовал статическую геометрию, активируйте в настройках экспорта параметр Bake Text:

Блендер

3дс Макс

Майя

Преимущества

Текст выглядит точно так же, как вы видите его в 3Д-пакете.
Не требует дополнительных шрифтовых ассетов или затрат времени при загрузке сцены для генерации символов.

Минусы

Длинные тексты увеличивают размер загружаемого glTF-ассета. Поэтому загрузка сцены может занять много времени, особенно при медленном соединении.
Вы не можете редактировать текст во время работы приложения.

4. Текстовые текстуры

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

Гравировка в приложении «Ювелирный конфигуратор».

Посмотрите пазл texture from text для получения дополнительной информации о том, как использовать текстуры с пользовательским текстом.

Преимущества

Хорошая производительность рендеринга и умеренное потребление памяти GPU.
Вы можете добавить различные текстовые эффекты с помощью нод материалов (например, создать текстуру с бамп-маппингом текста).

Минусы

Может работать медленно, если вы часто меняете текст (например, каждый кадр).
Вы не можете использовать комплексное выравнивание текста.
Текст только в 2Д, без эффектов экструзии/фаски.
Качество несколько снижается, особенно для небольших изображений (менее 1K).

5. Канвас-текстуры

Этот метод является дополнением к предыдущему методу и позволяет выполнять более сложные задачи с помощью языка программирования «Ява Скрипт» и HTML-элемента <canvas> (холст).

Для получения дополнительной информации ознакомьтесь с пазлом create canvas elem.

Преимущества

Вы можете выполнять любые настройки текста с помощью «Ява Скрипта».
Можно рисовать фигуры и изображения вместе с текстом.
Хорошая скорость рендеринга и умеренное потребление памяти GPU.
Вы можете добавить различные текстовые эффекты с помощью нод материалов (например, создать текстуру с бамп-маппингом текста).

Минусы

Требуются хорошие навыки программирования на «Ява Скрипте».
Текст только в 2Д, без эффектов экструзии/фаски.
Качество несколько снижается, особенно для небольших изображений (менее 1К).

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

Задавайте их на нашем форуме!