Рендеринг текста в Вердж3Д — Софт Эйт Софт
Description: Как создавать текстовые объекты в Вердж3Д.

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

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

- 1. HTML/CSS и аннотации
- 2. Динамическая текстовая геометрия
- 3. Статическая текстовая геометрия
- 4. Текстовые текстуры
- 5. Канвас-текстуры

#

## 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К).

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

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