Напісанне кіраўніцтва па шрыфтах SDF

Чаму візуалізацыя шрыфтоў усё яшчэ мае большае значэнне, чым вы думаеце

Кожны піксель на вашым экране распавядае сваю гісторыю, і нідзе гэта не так відавочна, як у тым, як тэкст адлюстроўваецца на розных прыладах, разрозняльнасці і ўзроўнях маштабавання. Традыцыйныя растравыя шрыфты добра служылі нам у эпоху манітораў з фіксаваным разрозненнем, але выбух дысплеяў з высокім DPI, спагадных інтэрфейсаў і 3D-праграм у рэжыме рэальнага часу выявіў іх асноўныя абмежаванні. Увядзіце шрыфты Signed Distance Field (SDF) — тэхніку рэндэрынгу, якая зрабіла рэвалюцыю ў тым, як сучасныя прыкладанні адлюстроўваюць выразны тэкст з магчымасцю маштабавання, не нагружаючы памяць і не ахвяруючы прадукцыйнасцю.

Незалежна ад таго, ствараеце вы гульнявы інтэрфейс, прыборную панэль даных або арыентаваную на кліента платформу, якая павінна выглядаць як брытва на ўсім: ад разумнага гадзінніка да манітора 4K, разуменне шрыфтоў SDF дасць вам сур'ёзную тэхнічную перавагу. Гэта кіраўніцтва разбівае канцэпцыю ад першых прынцыпаў, праходзіць праз канвеер генерацыі і прапануе практычныя парады па інтэграцыі шрыфтоў SDF у вашы ўласныя праекты.

Што такое поле адлегласці са знакам?

Поле адлегласці са знакам - гэта двухмерная тэкстура, дзе кожны піксель захоўвае адлегласць ад гэтай кропкі да бліжэйшага краю контуру гліфа. «Падпісаная» частка мае вырашальнае значэнне: пікселі ўнутры мяжы гліфа захоўваюць дадатныя значэнні, а пікселі звонку захоўваюць адмоўныя значэнні (ці наадварот, у залежнасці ад пагаднення). Сама мяжа знаходзіцца на нулявым перасячэнні. Гэта простае матэматычнае прадстаўленне кадуе незвычайную колькасць інфармацыі аб форме ў кампактны малюнак у адценнях шэрага.

Метад быў папулярызаваны ў артыкуле Valve SIGGRAPH 2007 г., у якім Крыс Грын прадэманстраваў, што тэкстуры SDF памерам усяго 64x64 пікселяў могуць ствараць тэкст, які застаецца рэзкім пры экстрэмальных павелічэннях — вынікі, для дасягнення якіх пры традыцыйнай растрызацыі спатрэбіцца растравы малюнак памерам 4096x4096. Галоўнае разуменне заключаецца ў тым, што ўбудаваная білінейная інтэрпаляцыя графічнага працэсара, якая стварае размытыя вынікі на звычайных растравых шрыфтах, на самай справе стварае гладкую і дакладную інтэрпаляцыю адлегласці на тэкстурах SDF.

Практычна кажучы, адзін атлас шрыфтоў SDF — звычайна 512x512 або 1024x1024 пікселяў — можа ўтрымліваць увесь набор сімвалаў, які дакладна адлюстроўваецца практычна любога памеру. Параўнайце гэта з падыходамі растравых шрыфтоў, якія патрабуюць асобных атласаў тэкстур для кожнага памеру шрыфта (16 пікселяў, 24 пікселяў, 32 пікселяў, 48 пікселяў і г.д.), што хутка спажывае мегабайты тэкстурнай памяці для аднаго шрыфта.

Як ствараюцца атласы шрыфтоў SDF

Канвеер генерацыі пачынаецца з вектарнага файла шрыфта (TTF або OTF) і стварае атлас тэкстуры плюс файл метададзеных, які апісвае становішча, памер і паказчыкі кожнага гліфа. Некалькі інструментаў з адкрытым зыходным кодам апрацоўваюць гэты працэс, найбольш шырока выкарыстоўваюцца msdf-atlas-gen, Hiero (частка libGDX) і msdfgen. Працэс уключае ў сябе растрызацыю кожнага гліфа з высокай раздзяляльнасцю, вылічэнне поля адлегласці з выкарыстаннем такіх алгарытмаў, як 8-кропкавае паслядоўнае пераўтварэнне эўклідава адлегласці (8SSEDT), а затым упакоўку вынікаў у адну тэкстуру.

Ёсць тры асноўныя варыянты SDF, якія вы павінны разумець:

• Стандартны SDF (аднаканальны): захоўвае адно значэнне адлегласці на піксель. Вырабляе плыўныя крывыя, але змагаецца з вострымі вугламі, якія, як правіла, закругляюцца пры больш нізкіх раздзяленнях. Лепш за ўсё падыходзіць для асноўнага тэксту і сітуацый, калі невялікае змякчэнне вуглоў прымальна.
• Шматканальны SDF (MSDF): выкарыстоўвае тры каляровыя каналы (RGB) для кадавання інфармацыі аб адлегласці ад розных сегментаў краю. Гэта захоўвае вострыя куты і дробныя дэталі значна лепш, чым аднаканальны SDF, што робіць яго пераважным выбарам для большасці сучасных прыкладанняў. MSDF, распрацаваны Віктарам Хлумскім, стаў стандартам дэ-факта.
• Шматканальны + сапраўдны SDF (MTSDF): дадае чацвёрты альфа-канал, які змяшчае поле сапраўднай адлегласці побач з трыма каналамі MSDF. Гэта забяспечвае лепшае з абодвух светаў — вострыя вуглы ад MSDF і дакладную інфармацыю аб адлегласці для эфектаў ад сапраўднага SDF — за кошт трохі большых тэкстур.

Тыповая каманда генерацыі з выкарыстаннем msdf-atlas-gen можа вызначаць памер шрыфта 42 пікселі, дыяпазон адлегласці 4 пікселі і памер тэкстуры 1024x1024. Параметр дыяпазону адлегласці кантралюе, наколькі далёка ад краю гліфа распаўсюджваецца інфармацыя аб адлегласці, што непасрэдна ўплывае на максімальную якасць контураў, ценяў і эфектаў святлення, якія вы можаце прымяніць падчас выканання.

Фрагментны шэйдар: Дзе адбываецца магія

Бок адлюстравання шрыфтоў SDF элегантна просты. У вашым фрагментным шэйдары вы выбіраеце тэкстуру SDF, параўноўваеце значэнне адлегласці з парогам (звычайна 0,5 для краю гліфа) і выкарыстоўваеце функцыю згладжвання для згладжвання пераходу. Асноўная логіка ў GLSL выглядае прыкладна так: выбарка медыяны трох каналаў MSDF, вылічэнне градыенту адлегласці паміж экранам і прасторай для належнага згладжвання, затым прымяненне функцыі smoothstep для атрымання канчатковага значэння альфа.

Сапраўдная сіла шрыфтоў SDF заключаецца не толькі ў незалежнасці ад дазволу, але і ў банальнай цане дадання эфектаў. Абрысы, цені, унутранае свячэнне і нават 3D-скасы можна вылічыць за адзін і той жа праход шэйдара, проста выпрабоўваючы розныя парогавыя значэнні адлегласці — без дадатковых тэкстур, без дадатковых выклікаў малявання, без слаёў з папярэдне запечанымі эфектамі.

Для асноўнага эфекту контуру вы правяраеце два парогі: адзін для вонкавага краю контуру і другі для ўнутранага запаўнення. Пікселі, якія знаходзяцца паміж гэтымі парогамі, атрымліваюць колер контуру; пікселі ўнутры атрымліваюць колер залівання. Цені працуюць аналагічна - зрушваюць каардынаты тэкстуры перад выбаркай, ужываюць больш шырокі дыяпазон згладжвання і складаюць цень за асноўным гліфам. Гэтыя аперацыі дадаюць нязначныя выдаткі на графічны працэсар, таму што яны з'яўляюцца чыста арыфметычнымі аперацыямі над ужо ўзятым значэннем адлегласці.

Асобнай увагі заслугоўвае згладжванне экраннай прасторы. Наіўная рэалізацыя выкарыстоўвае фіксаваную шырыню згладжвання, што стварае тэкст, які выдатна выглядае ў адным памеры, але занадта размыты або занадта няроўны ў іншых. Правільны падыход вылічвае шырыню згладжвання з вытворных экраннай прасторы поля адлегласці (з дапамогай fwidth() у GLSL або ddx/ddy у HLSL). Гэта аўтаматычна адаптуе згладжванне да бягучага памеру візуалізацыі, ствараючы паслядоўна выразныя краю незалежна ад узроўню маштабавання або адлегласці прагляду.

Агульныя падводныя камяні і як іх пазбегнуць

Нягледзячы на сваю элегантнасць, шрыфты SDF маюць недахопы, якія могуць збіць з панталыку нават вопытных распрацоўшчыкаў. Самая распаўсюджаная праблема - недастатковая адлегласць падчас стварэння атласа. Калі дыяпазон адлегласцяў занадта вузкі, такія эфекты, як тоўстыя контуры або вялікія цені, будуць рэзка абрэзацца на краі закадаванага дыяпазону. Добрае эмпірычнае правіла - усталяваць дыяпазон адлегласці як мінімум удвая большы за максімальны радыус эфекту, які вы плануеце выкарыстоўваць, вымераны ў пікселях атласа.

Яшчэ адной частай праблемай з'яўляецца фільтраванне тэкстур. Тэкстуры SDF павінны выкарыстоўваць білінейную фільтрацыю — фільтрацыя бліжэйшых суседзяў знішчае інтэрпаляцыю, якая прымушае тэхніку працаваць, ствараючы блокавы тэкст з псеўданімамі. Тым не менш, вы павінны адключыць mipmapping для атласаў SDF, так як mipmapped палі адлегласці даюць няправільныя вынікі на больш нізкіх узроўнях mip, дзе аддаленыя краю гліфа могуць перацякаць адзін у аднаго.

Кернінг і кампаноўка тэксту таксама з'яўляюцца сферамі, дзе распрацоўшчыкі часта абыходзяцца. Атлас SDF апрацоўвае візуалізацыю, але правільнае фарміраванне тэксту - інтэрвал паміж сімваламі, пары кернінгу, вышыня радкоў і двухнакіраваны тэкст - усё яшчэ патрабуе механізму макета. Такія бібліятэкі, як HarfBuzz або FreeType спраўляюцца з гэтым правільна. Адмова ад правільнага фармавання тэксту на карысць простага інтэрвалу фіксаванай шырыні - адзіны самы хуткі спосаб зрабіць так, каб ваш тэкст выглядаў дылетанцкім, незалежна ад таго, наколькі чыстая ваша рэалізацыя SDF.

1. Стварайце з высокай раздзяляльнасцю. Хоць шрыфты SDF прыгожа памяншаюцца, пачынаючы з памеру гліфа не менш за 32-48 пікселяў у атласе, захоўваюцца дробныя дэталі ў складаных гліфах, такіх як сімвалы CJK або дэкаратыўныя надпісы.
2. Выкарыстоўвайце MSDF замест аднаканальнага SDF, калі ў вас няма канкрэтнай прычыны гэтага не рабіць. Паляпшэнне дакладнасці вугла рэзкае з нязначнымі накладнымі выдаткамі.
3. Праверце на экстрэмальных памерах. Рэндэрыруйце тэкст у 8 і 200 пікселяў падчас распрацоўкі. Праблемы, нябачныя пры нармальных памерах, становяцца відавочнымі ў крайніх выпадках.
4. Памяць тэкстуры профілю. Адзін атлас MSDF 1024x1024 (RGB, 8 біт) спажывае 3 МБ памяці GPU. Звычайна гэта менш за два памеры растравага шрыфта пры эквівалентнай якасці.
5. Папярэдняе вылічэнне чатырохкутнікаў гліфаў на працэсары. Буфер вяршыняў, які змяшчае размешчаныя чатырохкутнікі гліфаў, змяняецца толькі пры змене тэкставага змесціва, а не пры кожным кадры. Кэшуйце гэта агрэсіўна.

Шрыфты SDF у вытворчасці: прыкладанні ў рэальным свеце

Гульнявыя рухавікі прывялі да прыняцця шрыфтоў SDF, але гэтая тэхніка распаўсюдзілася далёка за межы гульняў. Google Maps выкарыстоўвае візуалізаваныя SDF цэтлікі для сваіх накладанняў на карты, дазваляючы назвы мясцін заставацца чытэльнымі ад маштабавання на ўзроўні вуліц да маштабавання на ўзроўні кантынента без паўторнай растэрызацыі. Mapbox GL цалкам абапіраецца на гліфы SDF для візуалізаваных карт WebGL, абслугоўваючы папярэдне згенераваныя пліткі атласа SDF са свайго CDN. У абодвух выпадках незалежнасць ад раздзялення шрыфтоў SDF ліквідуе цэлы клас памылак візуалізацыі на ўзроўні маштабавання.

Бізнес-праграмы аднолькава выйграюць. Любая платформа, якая адлюстроўвае дынамічны тэкст у кантэксце Canvas або WebGL — панэлі кіравання, візуалізацыя даных, інтэрактыўныя справаздачы або лічбавыя шыльды — атрымлівае неадкладныя перавагі ад візуалізацыі SDF. У Mewayz, дзе прадпрыемствы кіруюць усім: ад выстаўлення рахункаў да аналітыкі праз 207 інтэграваных модуляў, узгодненае і эфектыўнае адлюстраванне тэксту на розных прыладах не з'яўляецца раскошай - гэта патрабаванне. Калі ўладальнік рэстарана правярае сваю панэль браніравання па тэлефоне, а яго бухгалтар праглядае тыя ж дадзеныя на 32-цалевым маніторы, тэкст павінен быць аднолькава разборлівым без адпраўкі асобных шрыфтоў для кожнай шчыльнасці экрана.

Экасістэма WebGL зрабіла шрыфты SDF усё больш даступнымі для вэб-распрацоўшчыкаў. Бібліятэкі накшталт three-mesh-ui і troika-three-text забяспечваюць устаўны рэндэрынг тэксту MSDF для сцэн Three.js, у той час як распрацоўшчыкі ніжэйшага ўзроўню могуць рэалізаваць карыстацкі рэндэрынг SDF з менш чым 100 радкамі кода шэйдара. Тэхніка таксама знайшла свой шлях да ўласнай распрацоўкі мабільных прылад праз такія фрэймворкі, як Flutter, які выкарыстоўвае рэндэрынг на аснове SDF для карыстальніцкага тэкставага механізму.

За межамі тэксту: куды ідуць метады SDF

Канцэпцыя дыстанцыйнага поля выходзіць далёка за рамкі адлюстравання шрыфтоў. Дызайнеры карыстальніцкага інтэрфейсу выкарыстоўваюць метады SDF для стварэння незалежных ад дазволу значкоў, маштабаваных вектарных фігур і нават працэдурных элементаў карыстальніцкага інтэрфейсу, такіх як закругленыя прамавугольнікі з ідэальнымі кутамі пікселяў. Той жа падыход, заснаваны на атласе, які робіць шрыфты SDF эфектыўнымі для памяці, аднолькава прымяняецца і да набораў значкоў — адзін атлас SDF памерам 512x512 можа ўтрымліваць сотні значкоў, якія ідэальна адлюстроўваюцца ў любым памеры.

На мяжы даследаванняў з'яўляюцца падыходы, заснаваныя на нейронных сетках, якія вучацца генераваць палі адлегласці непасрэдна з вектарных абрысаў, патэнцыйна даючы вынікі больш высокай якасці, чым традыцыйныя алгарытмічныя метады. Між тым візуалізацыя штрыхоў з пераменнай шырынёй з выкарыстаннем тэкстур SDF адкрывае новыя магчымасці для эфектаў каліграфічнага і рукапіснага тэксту, якія раней былі непрактычныя ў праграмах рэальнага часу.

Для распрацоўшчыкаў, якія ствараюць сучасныя мультыплатформенныя прыкладанні, шрыфты SDF прадстаўляюць адзін з тых рэдкіх метадаў, дзе інвестыцыі ў навучанне прыносяць дывідэнды практычна ў кожным праекце. Якасць рэндэрынгу канкуруе з натыўнымі тэкставымі механізмамі, аб'ём памяці - гэта доля альтэрнатыў растравых малюнкаў, а сістэма эфектаў на аснове шэйдараў забяспечвае творчую гібкасць, з якой проста не могуць параўнацца загадзя падрыхтаваныя падыходы. Шрыфты SDF з'яўляюцца інструментам, якім варта авалодаць, незалежна ад таго, рэндэрыруеце вы цэтлікі на 3D-глобусе або забяспечваеце правільнае адлюстраванне важных для бізнесу даных на кожным экране ў жыцці вашых карыстальнікаў.

Часта задаюць пытанні

Што такое шрыфты SDF і чаму распрацоўшчыкі павінны клапаціцца пра іх?

Шрыфты Signed Distance Field захоўваюць значэнні адлегласці ад кожнага пікселя да бліжэйшага краю гліфа, дазваляючы незалежнае ад раздзялення адлюстраванне тэксту. У адрозненне ад традыцыйных растравых шрыфтоў, якія становяцца размытымі пры маштабаванні, шрыфты SDF застаюцца выразнымі пры любых памерах і маштабах. Гэта робіць іх важнымі для сучасных хутка рэагуючых інтэрфейсаў, гульнявога карыстацкага інтэрфейсу і любых прыкладанняў, арыентаваных на розныя шчыльнасці экрана — ад мабільных прылад да манітораў 4K і не толькі.

Як шрыфты SDF параўноўваюцца з традыцыйным адлюстраваннем растравых і вектарных шрыфтоў?

Растравыя шрыфты патрабуюць асобных тэкстур для кожнага памеру, спажываючы значную колькасць памяці, у той жа час ствараючы артэфакты пры маштабаванні. Вектарныя шрыфты забяспечваюць выдатную якасць, але растрызацыя ў рэжыме рэальнага часу каштуе шмат вылічэнняў. Шрыфты SDF забяспечваюць ідэальны баланс — адна кампактная тэкстура цудоўна адлюстроўваецца практычна ў любым маштабе з мінімальнымі нагрузкамі на графічны працэсар, што робіць іх пераважным выбарам для прыкладанняў у рэжыме рэальнага часу, такіх як гульні і інтэрактыўныя панэлі.

Якія інструменты і бібліятэкі даступныя для генерацыі шрыфтоў SDF?

Папулярныя варыянты ўключаюць msdfgen для шматканальнай генерацыі SDF, Hiero для ўпакоўкі растравых шрыфтоў з падтрымкай SDF і розныя ўтыліты каманднага радка з адкрытым зыходным кодам. Большасць гульнявых рухавікоў, такіх як Unity і Godot, уключаюць убудаваную падтрымку тэксту SDF. Для кампаній, якія ствараюць індывідуальныя прыкладанні, такія платформы, як Mewayz з 207-модульнай бізнес-АС ад 19 долараў у месяц, могуць інтэграваць гэтыя метады рэндэрынгу ў брэндавыя лічбавыя праграмы.

Ці могуць шрыфты SDF апрацоўваць спецыяльныя эфекты, такія як контуры, цені і свеціцца тэкст?

Безумоўна — гэта адзін з самых моцных бакоў шрыфтоў SDF. Паколькі дадзеныя поля адлегласці даступныя ў шэйдары, вы можаце дадаваць контуры, цені, мяккае ззянне і нават аніміраваныя эфекты, проста наладжваючы парогавыя значэнні. Гэтыя эфекты амаль нічога не каштуюць з пункту гледжання прадукцыйнасці, паколькі не патрабуюць дадатковай геаметрыі або тэкстуры, што дае дызайнерам выдатную творчую свабоду без шкоды для частаты кадраў.