От битмапа к MSDF: как менялась технология экранного текста в играх

Если надпись в игровом интерфейсе становится размытой при увеличении, а на резком повороте камеры теряет угол, проблема может быть не в исходном шрифте. Дело в том, как контуры букв хранятся и восстанавливаются на экране. Разберём путь от bitmap-атласов к SDF и MSDF, их ограничения и способ выбрать режим под конкретную сцену.

Файл шрифта описывает контуры глифов и данные для набора. Игровой движок обычно не выводит эти контуры на экран как печатная программа: ему нужно многократно рисовать текст в кадрах, менять масштаб, поворачивать объект и размещать надпись в 2D-интерфейсе или 3D-мире. Поэтому движок подготавливает изображение символов и хранит его в текстуре-атласе. Геометрия и очередность букв остаются задачей системы набора, а атлас отвечает за пиксели, из которых шейдер строит видимый штрих.

В раннем и по-прежнему полезном подходе атлас содержит bitmap-глифы: пиксельную маску каждого символа. Она хорошо работает, если экранный размер близок к размеру, для которого маску подготовили. Но когда тот же квадрат с буквой растягивают, интерполяция не может восстановить детали, которых в нём не было: контур смягчается или распадается на заметные ступеньки. Можно держать несколько размеров, однако это усложняет выбор ресурса и увеличивает число вариантов для хранения.

Следующий шаг — записывать в атлас не только «закрашен пиксель или нет», а расстояние от точки до границы контура. Такой signed distance field, или SDF, хранит значение по одну сторону очертания и по другую; границе соответствует переход через пороговое значение. При выводе шейдер сравнивает выборку с порогом и восстанавливает край уже в экранном разрешении. Благодаря этому один компактный атлас допускает более широкий диапазон масштабов и поворотов, чем обычная растровая маска.

В 2007 году Крис Грин из Valve описал практический способ кодировать distance field в текстуре низкого разрешения, чтобы лучше увеличивать векторные изображения и получать специальные эффекты. Это важная веха именно рендеринга: атлас всё ещё растровый, но его значения позволяют шейдеру заново оценить форму края на целевом экране. В статье Valve метод показывается на векторной графике и обсуждается как лёгкий приём для современного тогда GPU.

Для текста это открыло удобный компромисс. Контур буквы не нужно превращать в полноценную геометрию для каждого кадра, а один заранее созданный атлас может обслуживать разные размеры надписей. Шейдер способен показать тонкую обводку, мягкую тень или расширение штриха, используя запас расстояния вокруг границы. Но SDF не отменяет подготовку символов, кернинг, переносы, форму сложных письменностей и подстановки глифов. Это слой отрисовки готовых глифов, а не универсальный движок набора.

У одноцветного SDF есть характерная слабость. Одно значение расстояния описывает границу локально, но при малом разрешении и крутых углах информации может не хватить, чтобы точно восстановить острый угол. В результате углы буквы выглядят округлёнными, скошенными или «съеденными», особенно когда текст сильно увеличивают. Это не означает, что поле расстояний бесполезно: для округлых форм, небольшого масштаба и умеренных эффектов оно может быть вполне удачным. Однако сам принцип требует проверять именно те формы, где угол определяет характер шрифта: «А», «М», «К», «Ж», «У».

Многоцветное поле расстояний, MSDF, использует несколько каналов текстуры для представления информации о разных краях контура. Вместо попытки уместить всю форму в один скалярный сигнал, генератор распределяет рёбра по каналам; при восстановлении шейдер берёт медиану цветовых значений. Такой подход лучше сохраняет острые углы букв, потому что угловые границы представлены раздельно. Работа Виктора Хлумского, защищённая в Чешском техническом университете в 2015 году, посвящена именно построению multi-channel distance fields для векторных форм, включая глифы, и рендерингу с повышенной точностью.

На практике MSDF особенно полезен для заголовков и игровых вывесок, которые должны оставаться чёткими при увеличении, перспективе или вращении. Он не обещает безупречный текст при любом масштабе и любом шейдере: у результата есть конечный диапазон расстояний и дискретное разрешение атласа. Если приблизить текст сильнее, чем позволяет исходное поле, появятся артефакты. Неправильная интерпретация каналов, недостаточный отступ между ячейками или настройка порога также меняют вид края.

Отличать MSDF от RGB-раскрашенной буквы просто: цветовые каналы — это данные о геометрии, а не цвет символа. Документация `msdfgen` требует интерпретировать эти каналы в линейном пространстве и при восстановлении брать медиану трёх каналов. Она также описывает режимы SDF, MSDF и MTSDF: последний хранит многоканальную форму в RGB и истинное поле расстояний в альфа-канале. Поэтому при импорте текстуры нельзя автоматически применять к ней обычные цветовые преобразования, не проверив требования конкретного шейдера.

Сценарий: Пиксельная графика или надпись строго одного размера — Что попробовать первым: Bitmap — Почему и что проверить: Сохраняет намеренную пиксельную форму; проверьте фильтрацию и кратность увеличения.

Сценарий: Маленькие статичные подписи интерфейса — Что попробовать первым: Bitmap или SDF — Почему и что проверить: Сравните резкость на целевом разрешении; SDF может быть избыточен.

Сценарий: Надпись часто меняет масштаб и поворачивается — Что попробовать первым: SDF — Почему и что проверить: Хорошо подходит для плавных преобразований; проверьте предел увеличения и тонкие штрихи.

Сценарий: Крупный заголовок с заметными острыми углами — Что попробовать первым: MSDF — Почему и что проверить: Сильная сторона — сохранение углов; тестируйте формы букв и материал.

Сценарий: Текст в перспективе или в 3D-сцене — Что попробовать первым: SDF или MSDF — Почему и что проверить: Сравните ближний, дальний и косой ракурс, а не один экранный размер.

Это не рейтинг форматов и не универсальная настройка движка. Например, документация Unity для TextMesh Pro различает distance-field атлас, сглаженный bitmap и несглаженный растровый атлас: сглаженная маска эффективна, когда размер текстуры близок к размеру на экране, а преобразование может размыть её. Документация Unreal перечисляет bitmap, SDF и MSDF режимы, отмечая, что у одноцветного SDF возможны округлённые или повреждённые углы. Движки развивают эту идею по-разному, поэтому настройки конкретного проекта важнее общего совета «всегда выбирайте SDF».

Представьте игровой HUD с постоянным мелким текстом и название локации, которое камера показывает крупным планом. Для HUD можно начать с bitmap или сглаженной маски: она предсказуема, если текст почти не масштабируется. Для названия локации логичнее сравнить MSDF с обычным SDF на том шрифте, который действительно будет в игре. Разумно хранить эти роли как разные профили, а не заставлять один атлас идеально решать задачи с разными требованиями.

Создайте небольшой тестовый набор: круглые «О» и «С», диагональные «А» и «К», острые «М» и «Ж», узкие «И» и «Ш», а также самые тонкие знаки выбранного шрифта. Для кириллицы не ограничивайтесь латинским алфавитом: другой набор глифов может иначе заполнить атлас или обнаружить ошибку fallback. Добавьте точку, двоеточие и тонкие элементы, если они важны для HUD.

Затем прогоните каждую технологию в трёх режимах: фактический размер, заметное увеличение и уменьшение с поворотом или перспективой. Сравнивайте одну и ту же строку при одинаковом цвете, толщине, материале и масштабе. Иначе можно принять разницу шейдеров за отличие SDF от MSDF. Сначала смотрите на форму контура, затем добавляйте обводку и тень: крупные эффекты расходуют доступный диапазон и могут замаскировать исходную проблему.

Для атласа проверьте три настройки. **Разрешение** определяет, насколько подробно записан градиент поля. **Диапазон** показывает, на каком расстоянии от края ещё закодированы значения, которые может использовать шейдер. **Отступ** не даёт соседним ячейкам смешиваться и оставляет пространство для обводки или тени. В руководстве Unity для TextMesh Pro отдельно поясняется роль padding: он нужен как для градиента SDF, так и для расстояния между символами; слишком агрессивные эффекты могут привести к протечке данных из соседнего символа. При этом конкретные подходящие значения зависят от генератора и материала.

Если в выбранной игре текст динамический, проверьте, что набор символов включает реальные данные локализации. Большой набор может не поместиться в один атлас; в TextMesh Pro для этого предусмотрены дополнительные font assets и fallback-наборы. Сначала определите требуемые языки и пунктуацию, затем выбирайте размер текстуры и стратегию подгрузки. Иначе визуально отличный атлас окажется неполным ресурсом.

Не пытайтесь лечить все проблемы увеличением разрешения. Оно может улучшить градиент поля, но не исправит неверный shader-порог, недостаточную область padding, ошибку выбора глифа или неподходящий алгоритм набора. Найдите первый слой, на котором результат расходится: исходный шрифт, сгенерированный атлас, материал или экранный вывод.

Нет. SDF обычно является способом представить подготовленные глифы в текстурном атласе для рендеринга. Исходный TTF или OTF остаётся источником контуров и метрик, если движок создаёт атлас из шрифтового файла. Для правильного текста отдельно нужны кодировка, выбор глифов, раскладка строки и поддержка нужных языков.

В атласе записан конечный диапазон расстояний и ограниченное число пикселей. Когда надпись увеличена сверх этого диапазона, шейдеру не хватает исходной информации о форме и запасе вокруг границы. Попробуйте другой размер или диапазон атласа и сравните MSDF для шрифта с резкими углами.

Обычный SDF хранит signed distance в одном канале, а MSDF разделяет информацию о краях контура между несколькими каналами. При восстановлении используют медиану этих каналов. Это позволяет лучше удерживать углы, хотя результат всё равно зависит от качества генерации, интерпретации текстуры и шейдера.

Можно, но это не всегда даёт желаемый вид. Пиксельный шрифт может быть спроектирован для намеренно жёсткого пиксельного края и конкретного шага сетки. Сравните bitmap с фильтрацией без сглаживания и SDF на реальном масштабе: если точность пиксельного рисунка важнее свободной трансформации, bitmap может подойти лучше.

Каналы RGB содержат данные о расстоянии до границ, а не обычный цвет изображения. В `msdfgen` указано, что их следует интерпретировать линейно; обычная sRGB-коррекция меняет значения и может исказить восстановленный контур. Следуйте спецификации генератора и материалу вашего движка.

Откройте ту же букву в исходном векторном шрифте и в атласе при исходном масштабе, затем сравните рендер при увеличении. Если контур уже неверен в файле, исправлять нужно исходный глиф. Если он меняется только после атласа или эффекта, проверяйте метод генерации, padding, диапазон и шейдер.

Переход от bitmap к SDF, а затем к MSDF дал разработчикам больше свободы при масштабировании экранного текста: от точной маски фиксированного размера до восстановления контура шейдером при движении камеры. Выбирайте метод по сцене, а не по моде, и тестируйте самые сложные буквы в собранном проекте. Если вы хотите подготовить собственную гарнитуру, создайте её в Fontgenerator, затем проверьте итоговый файл в вашем движке и атласном пайплайне.