SDF šriftų vadovo rašymas

Kodėl šrifto atvaizdavimas vis dar svarbesnis, nei manote

Kiekvienas ekrano taškas pasakoja istoriją, ir niekur tai nėra taip akivaizdu, kaip teksto atvaizdavimas įvairiuose įrenginiuose, skiriamosios gebos ir mastelio keitimo lygiuose. Tradiciniai bitmap šriftai mums puikiai pasitarnavo fiksuotos skiriamosios gebos monitorių eroje, tačiau didelio DPI ekranų, reaguojančių sąsajų ir realaus laiko 3D programų sprogimas atskleidė esminius jų apribojimus. Įveskite „Signed Distance Field“ (SDF) šriftus – atvaizdavimo techniką, kuri tyliai pakeitė tai, kaip šiuolaikinės programos rodo aiškų, keičiamo dydžio tekstą, nepadidinant atminties ir neprarandant našumo.

Nesvarbu, ar kuriate žaidimo vartotojo sąsają, duomenų prietaisų skydelį ar klientui skirtą platformą, kuri turi atrodyti aštriai nuo išmaniojo laikrodžio iki 4K monitoriaus, SDF šriftų supratimas suteikia rimtų techninių pranašumų. Šiame vadove koncepcija suskaidoma nuo pirmųjų principų, pateikiamas generavimo procesas ir pateikiama praktinių patarimų, kaip integruoti SDF šriftus į savo projektus.

Kas tiksliai yra atstumo laukas su ženklu?

Pažymėtas atstumo laukas yra dvimatė tekstūra, kurioje kiekvienas pikselis saugo atstumą nuo to taško iki artimiausio glifo kontūro krašto. „Pažymėta“ dalis yra labai svarbi: pikseliai, esantys glifo ribos viduje, saugo teigiamas reikšmes, o pikseliai už ribų saugo neigiamas reikšmes (arba atvirkščiai, atsižvelgiant į susitarimą). Pati riba yra ties nuline perėja. Šis paprastas matematinis vaizdas užkoduoja nepaprastai daug informacijos apie formą į kompaktišką pilkos spalvos vaizdą.

Šią techniką išpopuliarino 2007 m. Valve SIGGRAPH dokumentas, kuriame Chrisas Greenas pademonstravo, kad net 64 x 64 pikselių SDF tekstūros gali sukurti tekstą, kuris išliks ryškus esant dideliam padidinimui – tai norint pasiekti tradicinį rastravimą, reikia 4096 x 4096 taškinės diagramos. Pagrindinė įžvalga yra ta, kad GPU integruota bilinijinė interpoliacija, kuri sukuria neryškius įprastų bitmap šriftų rezultatus, iš tikrųjų sukuria sklandžią ir tikslią atstumo interpoliaciją SDF tekstūrose.

Praktiškai viename SDF šriftų atlase – paprastai 512 x 512 arba 1024 x 1024 pikselių – gali būti visas simbolių rinkinys, kuris aiškiai atvaizduojamas praktiškai bet kokio dydžio. Palyginkite tai su bitmap šrifto metodais, kuriems reikalingi atskiri tekstūros atlasai kiekvienam šrifto dydžiui (16 piks., 24 piks., 32 piks., 48 piks. ir t. t.), o tai greitai sunaudoja megabaitus tekstūros atminties vienam šriftui.

Kaip generuojami SDF šriftų atlasai

Generavimo procesas prasideda vektorinio šrifto failu (TTF arba OTF) ir sukuria tekstūros atlasą bei metaduomenų failą, kuriame aprašoma kiekvieno glifo padėtis, dydis ir metrika. Šį procesą atlieka keli atvirojo kodo įrankiai, iš kurių plačiausiai naudojami msdf-atlas-gen, Hiero (libGDX dalis) ir msdfgen. Procesas apima kiekvieno glifo rastravimą didele raiška, atstumo lauko apskaičiavimą naudojant tokius algoritmus kaip 8 taškų nuoseklioji Euklido atstumo transformacija (8SSEDT), o tada rezultatai sujungiami į vieną tekstūrą.

Yra trys pagrindiniai SDF variantai, kuriuos turėtumėte suprasti:

• Standartinis SDF (vieno kanalo): išsaugo vieną atstumo reikšmę viename pikselyje. Sukuria lygias kreives, bet kovoja su aštriais kampais, kurie linkę suapvalėti esant mažesnei skyrai. Geriausiai tinka pagrindiniam tekstui ir tais atvejais, kai galimas nedidelis kampų sušvelninimas.
• Kelių kanalų SDF (MSDF): naudoja tris spalvų kanalus (RGB), kad užkoduotų atstumo informaciją iš skirtingų kraštų segmentų. Taip išsaugomi aštrūs kampai ir smulkios detalės daug geriau nei vieno kanalo SDF, todėl tai yra tinkamiausias pasirinkimas daugeliui šiuolaikinių programų. Viktoro Chlumský sukurtas MSDF tapo de facto standartu.
• Kelių kanalų + tikrasis SDF (MTSDF): šalia trijų MSDF kanalų pridedamas ketvirtasis alfa kanalas, kuriame yra tikrojo atstumo laukas. Tai suteikia geriausius iš abiejų pasaulių – aštrius kampus iš MSDF ir tikslią atstumo informaciją efektams iš tikrojo SDF – šiek tiek didesnių tekstūrų kaina.

Įprasta generavimo komanda naudojant msdf-atlas-gen gali nurodyti 42 pikselių šrifto dydį, 4 pikselių atstumo diapazoną ir 1024 x 1024 tekstūros dydį. Atstumo diapazono parametras valdo, kiek toli nuo glifo krašto tęsiasi atstumo informacija, o tai tiesiogiai veikia maksimalią kontūrų, šešėlių ir švytėjimo efektų, kuriuos galite taikyti vykdymo metu, kokybę.

Fragmentų šešėliuotojas: kur vyksta magija

SDF šriftų atvaizdavimo pusė yra elegantiškai paprasta. Fragmentų šešėliuotoje atrenkate SDF tekstūrą, lyginate atstumo reikšmę su slenksčiu (paprastai 0,5 glifo briaunoje) ir naudojate išlyginimo funkciją, kad pakeistumėte perėjimą. Pagrindinė GLSL logika atrodo maždaug taip: paimkite trijų MSDF kanalų medianą, apskaičiuokite ekrano erdvės atstumo gradientą, kad būtų galima tinkamai panaikinti slapyvardį, tada pritaikykite funkciją smoothstep, kad gautumėte galutinę alfa reikšmę.

Tikroji SDF šriftų galia slypi ne tik raiškos nepriklausomybėje, bet ir nereikšmingoje efektų pridėjimo kainoje. Kontūrus, šešėlius, vidinį švytėjimą ir net 3D kampus galima apskaičiuoti tame pačiame šešėlyje, tiesiog išbandant skirtingus atstumo slenksčius – jokių papildomų tekstūrų, jokių papildomų piešimo skambučių, jokių iš anksto paruoštų efektų sluoksnių.

Norėdami gauti pagrindinį kontūro efektą, patikrinkite du slenksčius: vieną išoriniam kontūro kraštui ir kitą vidiniam užpildymui. Pikseliai, patenkantys tarp šių slenksčių, įgauna kontūro spalvą; pikseliai viduje įgauna užpildymo spalvą. Nuleidžiami šešėliai veikia panašiai – prieš imdami mėginius pakeiskite tekstūros koordinates, taikykite platesnį išlyginimo diapazoną ir sukomponuokite šešėlį už pagrindinio glifo. Šios operacijos prideda nereikšmingas GPU sąnaudas, nes tai yra grynai aritmetinės operacijos su jau atrinkta atstumo verte.

Ekrano erdvės panaikinimas nusipelno ypatingo dėmesio. Naiviam įgyvendinimui naudojamas fiksuotas išlyginimo plotis, todėl tekstas atrodo puikiai vieno dydžio, bet per daug neryškus arba per daug neryškus. Tinkamas metodas apskaičiuoja išlyginimo plotį iš atstumo lauko ekrano erdvės išvestinių (naudojant fwidth() GLSL arba ddx/ddy HLSL). Tai automatiškai pritaiko antialias prie esamo atvaizdavimo dydžio ir sukuria nuosekliai aiškius kraštus, nepaisant priartinimo lygio ar žiūrėjimo atstumo.

Dažniausios spąstai ir kaip jų išvengti

Nepaisant savo elegancijos, SDF šriftuose yra dėmių, kurios gali suklupti net patyrusius kūrėjus. Dažniausia problema yra nepakankamas atstumo diapazonas generuojant atlasą. Jei atstumo diapazonas per siauras, užkoduoto diapazono pakraštyje staigiai nutrūks tokie efektai kaip stori kontūrai ar dideli šešėliai. Gera nykščio taisyklė – nustatyti atstumo diapazoną bent du kartus už didžiausią planuojamą naudoti efekto spindulį, matuojant atlaso taškais.

Kita dažna problema yra tekstūros filtravimas. SDF tekstūroms privaloma naudoti dvilinijinį filtravimą – artimiausio kaimyno filtravimas sunaikina interpoliaciją, dėl kurios technika veikia ir sukuriamas blokuotas tekstas su slapyvardžiu. Tačiau turėtumėte išjungti SDF atlasų mipmapping, nes mipmapping atstumo laukai pateikia neteisingus rezultatus esant žemesniam mip lygiui, kai tolimi glifo kraštai gali susilieti vienas į kitą.

Kurningas ir teksto išdėstymas taip pat yra sritys, kuriose kūrėjai dažnai aplenkia kampus. SDF atlasas tvarko atvaizdavimą, tačiau norint tinkamai formuoti tekstą – tarpai tarp simbolių, tarpų poros, eilutės aukštis ir dvikryptis tekstas – vis tiek reikalauja išdėstymo variklio. Tokios bibliotekos kaip HarfBuzz arba FreeType tai tvarko tinkamai. Tinkamo teksto formavimo praleidimas ir paprastas fiksuoto pločio tarpas yra greičiausias būdas padaryti teksto atvaizdavimą mėgėjišką, nepaisant to, koks švarus yra jūsų SDF diegimas.

1. Generuokite didele skiriamąja geba. Nors SDF šriftų mastelis gražiai mažinamas, atlase pradedant nuo bent 32–48 pikselių glifo dydžio, išsaugomos smulkios sudėtingų glifų detalės, pvz., CJK simboliai ar dekoratyviniai raštai.
2. Naudokite MSDF, o ne vieno kanalo SDF, nebent turite konkrečios priežasties to nedaryti. Kampų tikslumas labai pagerėjo, o pridėtinės išlaidos yra nereikšmingos.
3. Išbandykite ypač didelius dydžius. Kurdami tekstą pateikite 8 ir 200 piks. Problemos, kurios nematomos esant normaliam dydžiui, išryškėja kraštutiniais atvejais.
4. Profilio tekstūros atmintis. Vienas 1024 x 1024 MSDF atlasas (RGB, 8 bitų) sunaudoja 3 MB GPU atminties. Paprastai tai yra mažiau nei du bitmap šrifto dydžiai esant lygiavertei kokybei.
5. Iš anksto apskaičiuokite procesoriaus glifų keturkampius. Viršūnių buferis, kuriame yra išdėstyti glifo keturkampiai, keičiasi tik pasikeitus teksto turiniui, o ne kiekvienam kadrui. Agresyviai saugokite jį talpykloje.

Gaminami SDF šriftai: realaus pasaulio programos

Žaidimų varikliai paskatino naudoti SDF šriftus, tačiau ši technika išplito ne tik žaidimuose. Google Maps naudoja SDF pateiktas etiketes savo žemėlapių perdangoms, todėl vietų pavadinimai išliks įskaitomi nuo gatvės lygio iki žemyno lygio mastelio keitimo be pakartotinio rastravimo. Mapbox GL savo WebGL pateikiamuose žemėlapiuose visiškai remiasi SDF glifais ir teikia iš anksto sugeneruotas SDF atlaso plyteles iš savo CDN. Abiem atvejais SDF šriftų raiškos nepriklausomumas pašalina visą mastelio keitimo lygio atvaizdavimo klaidų klasę.

Verslo programos naudingos vienodai. Bet kuri platforma, kuri pateikia dinaminį tekstą drobėje arba WebGL kontekste – mąstymo prietaisų skydeliai, duomenų vizualizacijos, interaktyvios ataskaitos ar skaitmeniniai ženklai – įgyja tiesioginių SDF atvaizdavimo pranašumų. „Mewayz“, kur įmonės valdo viską nuo sąskaitų faktūrų išrašymo iki analizės 207 integruotuose moduliuose, nuoseklus ir efektyvus teksto atvaizdavimas visuose įrenginiuose nėra prabanga – tai reikalavimas. Kai restorano savininkas tikrina savo užsakymo informacijos suvestinę telefonu, o buhalteris tuos pačius duomenis peržiūri 32 colių monitoriuje, tekstas turi būti vienodai įskaitomas, nepristatant atskirų šriftų išteklių kiekvienam ekrano tankiui.

Dėl WebGL ekosistemos SDF šriftai tapo vis labiau prieinami žiniatinklio kūrėjams. Bibliotekos, pvz., three-mesh-ui ir troika-three-text, teikia MSDF teksto atvaizdavimą Three.js scenoms, o žemesnio lygio kūrėjai gali įdiegti tinkintą SDF atvaizdavimą naudodami mažiau nei 100 šešėlio kodo eilučių. Ši technika taip pat rado kelią į vietinį mobiliųjų įrenginių kūrimą, naudojant tokias sistemas kaip „Flutter“, kurios tinkintam teksto varikliui naudoja SDF pagrįstą atvaizdavimą.

Už teksto ribų: kur krypsta SDF metodai

Atstumo lauko koncepcija apima ne tik šrifto atvaizdavimą. UI dizaineriai naudoja SDF metodus, kad sukurtų nuo skiriamosios gebos nepriklausomas piktogramas, keičiamo dydžio vektorines formas ir net procedūrinius vartotojo sąsajos elementus, pvz., suapvalintus stačiakampius su puikiais pikselių kampais. Tas pats atlasu pagrįstas metodas, dėl kurio SDF šriftai taupo atmintį, vienodai taikomas ir piktogramų rinkiniams – viename 512 x 512 SDF atlase gali būti šimtai piktogramų, kurios puikiai atvaizduojamos bet kokio dydžio.

Tyrimo srityje atsiranda neuroniniais tinklais pagrįstų metodų, kurie mokosi generuoti atstumo laukus tiesiai iš vektorių kontūrų ir gali duoti aukštesnės kokybės rezultatus nei tradiciniai algoritminiai metodai. Tuo tarpu kintamo pločio brūkšnių atvaizdavimas naudojant SDF tekstūras atveria naujas kaligrafinio ir ranka rašyto teksto efektų galimybes, kurios anksčiau buvo nepraktiškos realiojo laiko programose.

Kūrėjams, kuriantiems modernias, kelių platformų programas, SDF šriftai yra vienas iš tų retų metodų, kai investicijos į mokymąsi atsiperka praktiškai kiekviename projekte. Atvaizdavimo kokybė konkuruoja su vietiniais teksto varikliais, atminties plotas yra tik dalis bitmap alternatyvų, o šešėlių pagrindu sukurta efektų sistema suteikia kūrybinio lankstumo, kuriam iš anksto paruošti metodai tiesiog negali prilygti. Nesvarbu, ar atvaizduojate etiketes 3D gaublyje, ar užtikrinate, kad verslui svarbūs duomenys būtų tinkamai rodomi kiekviename naudotojų gyvenimo ekrane, SDF šriftai yra įrankis, kurį verta įvaldyti.

Dažniausiai užduodami klausimai

Kas yra SDF šriftai ir kodėl kūrėjai turėtų jais rūpintis?

Signed Distance Field šriftai išsaugo atstumo reikšmes nuo kiekvieno pikselio iki artimiausio glifo krašto, todėl įgalinamas nuo skiriamosios gebos nepriklausantis teksto atvaizdavimas. Skirtingai nuo tradicinių bitmap šriftų, kurių mastelis tampa neryškus, SDF šriftai išlieka ryškūs bet kokio dydžio ar mastelio keitimo lygiu. Dėl to jie būtini šiuolaikinėms interaktyvioms sąsajoms, žaidimų vartotojo sąsajai ir bet kuriai programai, kuri taikoma įvairiems ekranams – nuo mobiliųjų įrenginių iki 4K monitorių ir ne tik.

Kaip SDF šriftai skiriasi nuo tradicinių bitmap ir vektorinių šriftų atvaizdavimo?

Bitmap šriftams kiekvienam dydžiui reikalingos atskiros tekstūros, sunaudojama daug atminties, o keičiant mastelį susidaro artefaktai. Vektoriniai šriftai siūlo nepriekaištingą kokybę, tačiau juos skaičiuojant brangu rastrizuoti realiuoju laiku. SDF šriftai užtikrina idealų balansą – viena kompaktiška tekstūra gražiai atvaizduojama praktiškai bet kokiu mastu su minimaliu GPU apkrovimu, todėl jie yra tinkamiausias pasirinkimas realaus laiko programoms, pvz., žaidimams ir interaktyvioms prietaisų skydelėms.

Kokie įrankiai ir bibliotekos galimi SDF šriftams generuoti?

Populiarios parinktys apima msdfgen, skirtą kelių kanalų SDF generavimui, Hiero bitmap šriftų paketui su SDF palaikymu ir įvairias atvirojo kodo komandų eilutės priemones. Daugumoje žaidimų variklių, tokių kaip „Unity“ ir „Godot“, yra įmontuotas SDF teksto palaikymas. Įmonėms, kuriančios pasirinktines programas, tokios platformos kaip Mewayz su 207 modulių verslo OS, pradedant nuo 19 USD per mėnesį, gali integruoti šiuos atvaizdavimo būdus į prekės ženklo skaitmeninę patirtį.

Ar SDF šriftai gali apdoroti specialiuosius efektus, pvz., kontūrus, šešėlius ir švytintį tekstą?

Absoliučiai – tai vienas didžiausių SDF šriftų privalumų. Kadangi atstumo lauko duomenys pasiekiami šešėliuotoje, galite pridėti kontūrų, šešėlių, švelnaus švytėjimo ir net animacinių efektų tiesiog koreguodami slenksčio reikšmes. Šie efektai beveik nieko nekainuoja, nes jiems nereikia papildomos geometrijos ar tekstūros, todėl dizaineriams suteikiama nepaprasta kūrybinė laisvė neprarandant kadrų dažnio.