Nivîsandina Rêbernameyek ji Fontên SDF re

Çima Renderkirina Font Hîn Ji Hûn Difikirî Zêdetir Girîng e

Her pîxelek li ser dîmendera we çîrokek vedibêje, û li tu deran ew ji awayê ku nivîs di nav cîhazan, çareserî û astên mezinbûnê de diyar dibe ne diyar e. Fontên bitmap-a kevneşopî di serdema çavdêrên bi çareseriya sabît de ji me re baş xizmet kir, lê teqîna dîmenên bilind-DPI, navbeynkarên bersivdar, û sepanên 3D-ya rast-demê sînorên wan ên bingehîn eşkere kiriye. Fontên Qada Dûrbûna Îmzekirî (SDF) binivîsin - teknîkeke renderkirinê ya ku bi bêdengî şoreşek li ser çawaniya sepanên nûjen nivîsek hişk û berbelav nîşan dide bêyî ku bîranînê bitewîne an performansê bike qurban.

Ku hûn UI-ya lîstikê, dashboardek daneyê, an platformek rûbirûyê xerîdar ava dikin ku hewce dike ku li ser her tiştî ji demjimêrek biaqil bigire heya çavdêrek 4K-ya tîj xuya bike, têgihîştina tîpên SDF rêgezek teknîkî ya cidî dide we. Ev rêber têgehê ji prensîbên yekem vediqetîne, di xeta nifşê de dimeşe, û ji bo entegrekirina tîpên SDF di projeyên xwe de şîretên pratîkî pêşkêşî dike.

Qada Dûrbûna Îmzekirî Çi ye?

Qada Dûrbûna Îmzekirî tevnvîseke du-alî ye ku her pîxel dûrahiya ji wê nuqteyê heya kêleka herî nêz a xêzeke glyph digire. Beşa "îmzakirî" krîtîk e: pixelên di hundurê sînorê glyph de nirxên erênî diparêzin, dema ku pixelên li derveyî nirxên neyînî diparêzin (an berevajî, li gorî peymanê). Sînor bi xwe li deriyê sifirê rûniştiye. Ev temsîla matematîkî ya hêsan hejmareke awarte ya agahdariya şekil di nav wêneyek hûrgelê ya gewr de kod dike.

Teknîkî ji hêla kaxeza SIGGRAPH ya Valve ya 2007-an ve hate populer kirin, li wir Chris Green destnîşan kir ku tevnvîsên SDF yên bi qasî 64x64 pixel dikarin metnek ku di mezinkirinên tund de tûj bimîne hilberînin - encamên ku hewce dike ku bitmapek 4096x4096 hewce bike ku bi rasterîzekirina kevneşopî were bidestxistin. Têgihîştina sereke ev e ku navbeynkariya dulinear a çêkirî ya GPU-yê, ya ku li ser tîpên bitmap-ê yên birêkûpêk encamên nezelal çêdike, bi rastî li ser tevnûrên SDF-ê navberkirina dûrbûna nerm û rast çêdike.

Di warê pratîkî de, atlasek tîpên SDF-ya yekane - bi gelemperî 512x512 an 1024x1024 pixel - dikare tevhevek karakterek ku hema hema hema hema bi her mezinahiyê bi rengek paqij vedibêje. Wê bi nêzîkatiyên tîpên bitmap re bidin ber hev, ku ji bo her tîpek (16px, 24px, 32px, 48px, û hwd.) atlasên tevnvîsê yên cihê lazim in.

Atlasên tîpên SDF çawa têne çêkirin

Xeta hilberandinê bi pelek tîpên vektorê (TTF an OTF) dest pê dike û atlasek tevnvîsê û pelê metadata ku pozîsyon, mezinahî û metrîkên her glyphê vedibêje çêdike. Gelek amûrên çavkaniya vekirî vê pêvajoyê birêve dibin, bimsdf-atlas-gen, Hiero (beşek ji libGDX), û msdfgen yên ku herî zêde têne bikar anîn. Pêvajo bi rasterîzekirina her lîfê bi rezîliyek bilind ve, hesabkirina qada dûrbûnê bi karanîna algorîtmayên mîna veguheztina dûrbûna Euclidean a rêzdar a 8-xal (8SSEDT), û dûv re berhevkirina encaman di nav tevnek yekane de.

Sê guhertoyên sereke yên SDF hene ku divê hûn fam bikin:

• SDF-ya standard (yek-kanal): Her pîxelek nirxek dûrbûnê hildide. Kûçikên xweş çêdike lê bi quncikên tûj re têkoşîn dike, yên ku meyldar in ku di çareseriyên kêmtir de werin dorpêç kirin. Ji bo nivîsa laş û rewşên ku nermbûna hûrgelê tê qebûl kirin çêtirîn.
• SDF-ya pir-kanal (MSDF): Sê kanalên rengîn (RGB) bikar tîne da ku agahdariya dûrbûnê ji beşên cûda yên qiraxa kod bike. Ev quncikên tûj û hûrguliyên xweşik ji SDF-ya yek-kanal pir çêtir diparêze, û ew ji bo piraniya serîlêdanên nûjen bijareya bijarte dike. MSDF ji hêla Viktor Chlumský ve hatî pêşve xistin, bûye standardek de facto.
• Pir-kanal + SDF Rast (MTSDF): Kanalek alfa ya çaremîn ku li kêleka sê kanalên MSDF qadeke dûrbûna rastîn vedihewîne, zêde dike. Ev yek ji her du cîhanan çêtirîn peyda dike - quncikên tûj ên MSDF û agahdariya dûrbûna rast ji bo bandorên ji SDF-ya rastîn - bi bihayê tevnvîsên hinekî mezintir.

Fermana nifşê ya normal ku msdf-atlas-gen bikar tîne dibe ku mezinahiya tîpan 42 pixel, dûrahiya 4 pixel, û mezinahiya tevnvîsê 1024x1024 diyar bike. Parametreya rêza dûrbûnê kontrol dike ku agahdariya dûrbûnê çiqas ji keviya glyphê dûr dikeve, ku rasterast bandorê li kalîteya herî zêde ya xêzkirin, siya û bandorên şewqê yên ku hûn dikarin di dema xebitandinê de bicîh bikin.

Fragment Shader: Cihê ku Magic Diqewime

Aliyê vegotinê yê tîpên SDF bi xweşikî hêsan e. Di şadera xweya perçeyê de, hûn tevna SDF-ê nimûne dikin, nirxa dûrbûnê li hember bendek (bi gelemperî 0,5 ji bo keviya glyphê) didin ber hev, û fonksiyonek nermkirinê bikar tînin da ku li dijî veguheztinê binav bikin. Mantiqa bingehîn di GLSL de weha xuya dike: navîniya sê kanalên MSDF-ê nimûne bikin, gradienta dûrbûna cîhê dîmenderê ji bo antîalîzkirina rast hesab bikin, dûv re fonksiyonek gavê bişoxilînin da ku nirxa alfa ya dawî hilberîne.

Hêza rast a tîpên SDF ne tenê di serxwebûna çareseriyê de ye, lê di lêçûna kêm a zêdekirina bandoran de ye. Rêzkirin, siyên dakêşan, şewqên hundurîn, û tewra çîpên 3D, hemî dikarin bi ceribandina li hember tixûbên dûrbûnê yên cihêreng di heman derbasbûna şaderê de bêne hesibandin - bê tevnvîsên zêde, ne bangên xêzkirinê yên zêde, ne tebeqeyên bandora pêş-pijkirî.

Ji bo bandorek xêzkirina bingehîn, hûn du bendan diceribînin: yek ji bo keviya derve ya nexşeyê û yek jî ji bo dagirtina hundurîn. Pixelên ku di navbera van bendavan de dikevin rengê xêzkirinê digirin; pixelên hundur rengê tije digirin. Siya dakêşan bi heman rengî dixebitin - berî nimûnekirinê koordînatên tevneyê ji hev derxînin, rêzek nermkirinê ya berfirehtir bicîh bikin, û siya li pişt lîfa sereke pêk bînin. Van kiryaran lêçûnek GPU-ya neguhdar zêde dikin ji ber ku ew bi tenê operasyonên arîtmetîk in li ser nirxa dûrbûna jixwe-nimûnekirî.

Antîalîskirina cîhê ekranê bala taybetî heq dike. Pêkanînek nefsbiçûk firehiyek nermkirina sabît bikar tîne, ku metnek ku di yek mezinahiyê de pir xweş xuya dike, lê li yên din jî pir nezelal an jî pir zirav çêdike. Nêzîkatiya rast firehiya nermkirinê ji derûvên cîhê ekranê yên qada dûrbûnê hesab dike (bikaranîna fwidth() di GLSL an ddx/ddy di HLSL de). Ev bixweber antîaliasingê li gorî mezinahiya renderê ya heyî adapte dike, bêyî ku asta zoomê an dûrahiya dîtinê hebe, kêliyên bi domdarî zelal çêdike.

Kêmasiyên Hevbeş û Meriv Çawa Xwe Ji Wan Dike

Tevî zerafeta xwe, tîpên SDF bi gotçayên ku dikarin pêşdebirên xwedî ezmûn jî bişopînin têne. Pirsgirêka herî gelemperî di dema nifşkirina atlasê de dûrbûna ne bes e. Ger dûrahiya dûr pir teng be, bandorên mîna xêzên stûr an siyên mezin dê ji nişka ve li keviya rêza kodkirî bikevin. Rêgezek baş ev e ku hûn rêjeya dûrbûnê bi kêmî du caran ji tîrêjê bandora herî zêde ya ku hûn plan dikin ku bikar bînin, bi pîxelên atlasê tê pîvandin destnîşan bikin.

Pirsgirêkek din a pir caran fîlterkirina tevnê ye. Têkûzên SDF divê fîlterkirina dulinear bikar bînin - Parzûnkirina cîranê herî nêzîk navberkirina ku teknîkê dixebitîne hilweşîne, metnek bloke û binavkirî hildiberîne. Lêbelê, divê hûn mipmapping ji bo atlasên SDF-ê neçalak bikin, ji ber ku zeviyên dûrbûna mipmapkirî encamên nerast di astên mîp-ya jêrîn de derdixin, li cihê ku keviyên glyphê yên dûr dikarin di nav hev de xwîn bibin.

Kerning û sêwirana nivîsê jî ew deverên ku pêşdebiran bi gelemperî quncikên xwe jê dikin. Atlasa SDF bi renderkirinê ve mijûl dibe, lê birêkûpêkkirina nivîsê ya rast - cihêrengiya karakteran, cotên kerning, bilindahiya rêzê, û nivîsa dualî - hîn jî motorek sêwiranê hewce dike. Pirtûkxaneyên mîna HarfBuzz an FreeType vê yekê rast digirin. Dûrketina şekildana nivîsê ya rast di berjewendiya valahiya sade ya sabît-firehiya sabît de, yekane riya herî bilez e ku hûn pêşkêşkirina nivîsa we amatorî xuya bike, bêyî ku pêkanîna SDF-ya we çiqas paqij e.

1. Bi vebirrînek dilşewat biafirînin. Dema ku tîpên SDF bi rengek xweşik kêm dibin, di atlasê de bi mezinahiya lîfên herî kêm 32-48 pixel dest pê dike, hûrguliyên xweşik di glyphên tevlihev ên mîna tîpên CJK an nivîsarên xemilandî de diparêze.
2. MSDF-ê li ser SDF-ya yek-kanal bikar bînin heya ku sedemek we ya taybetî hebe. Pêşkeftina rastbûna quncikê bi sermayek neguhêz dramatîk e.
3. Di mezinahiyên giran de biceribîne. Di dema pêşdebirinê de nivîsa xwe bi 8px û 200px pêşkêş bike. Pirsgirêkên ku di mezinahiyên normal de nayên dîtin, di piran de diyar dibin.
4. Hafizeya tevna profîlê. Yek Atlasek 1024x1024 MSDF (RGB, 8-bit) 3 MB bîra GPU dixwe. Ew bi gelemperî ji du mezinahiyên tîpên bitmap bi kalîteya wekhev kêmtir e.
5. Li ser CPU-ê çarçikên glyph-ê berî-hejmartin. Tampona vertexê ya ku çarçikên glyph-ê yên bi cîh dihewîne tenê dema ku naveroka nivîsê diguhezîne diguhere, ne her çarçove. Bi tundî cache bike.

Fontên SDF di Hilberînê de: Serlêdanên Cîhanê yên Rastîn

Motorên lîstikê rê li ber pejirandina tîpên SDF vekir, lê teknîk ji lîstikê wêdetir belav bûye. Nexşeya Google ji bo xêzkirina nexşeyên xwe etîketên ku ji hêla SDF-ê ve hatî pêşkêş kirin bikar tîne, rê dide ku navên cihan ji zoom-a asta kolanan bigire heya mezinkirina asta parzemînê bêyî ku ji nû ve rastirandin were xwendin. Mapbox GL ji bo nexşeyên xwe yên ku ji hêla WebGL ve hatî pêşkêş kirin, bi tevahî xwe dispêre glîfên SDF-ê, ku ji CDN-ya xwe pêlên atlas ên SDF-ê yên pêş-hilberandî pêşkêşî dike. Di her du rewşan de, serbixwebûna çareserkirinê ya tîpên SDF tevahî çînek xeletiyên vekêşana asta zoomê ji holê radike.

Serlêdanên karsaziyê wekhev sûd werdigirin. Her platformek ku nivîsa dînamîkî di nav kanavek an çarçoveyek WebGL de dide - tabloyên bifikire, dîmenên daneyê, raporên înteraktîf, an nîşana dîjîtal - tavilê ji vegotina SDF sûd werdigire. Li Mewayz, ku karsazî ji fatûreyê bigire heya analîtîkê di nav 207 modulên yekbûyî de her tiştî birêve dibin, vegotina nivîsê ya domdar û bikêrhatî li seranserê cîhazan ne luks e - ew hewcedariyek e. Gava ku xwedan xwaringehek tabloya veqetandinê li ser têlefonê kontrol dike û hesabgirê wî heman daneyan li ser monitorek 32 înç dinihêre, pêdivî ye ku nivîs bi heman rengî bê şandina malikên tîpan ên cihêreng ji bo her tîrêjiya ekranê were xwendin.

Ekosîstema WebGL tîpên SDF her ku diçe ji pêşdebirên webê re bigihînin. Pirtûkxaneyên mîna three-mesh-uiû troika-three-text ji bo dîmenên Three.js danasîna nivîsê ya MSDF-ê dakêşan peyda dikin, dema ku pêşdebirên asta jêrîn dikarin pêşkêşkirina SDF-ya xwerû bi kêmtirî 100 rêzikên koda shader bicîh bikin. Teknîkî di heman demê de bi navgîniya çarçoveyên mîna Flutter, ku ji bo motora xweya nivîsê ya xwerû ravekirina SDF-ê bikar tîne, riya xwe di pêşkeftina mobîl a xwemalî de jî dîtiye.

Beyon Text: Teknîkên SDF ber bi ku ve diçin

Konsepta qada dûrbûnê ji vegotina tîpan wêdetir dirêj dibe. Sêwiranên UI teknîkên SDF-ê bikar tînin da ku îkonên serbixwe-çareseriyê, şeklên vektorê yên berbelavkirî, û tewra hêmanên UI-yê yên prosedurî ​​yên mîna rektangên dorpêçkirî yên bi quncikên pixel-bêkêmasî biafirînin. Heman nêzîkatiya bingehîn a atlasê ya ku tîpên SDF-ê fonên SDF-ê bikêrhatî dike, ji bo komek îkonan jî bi heman rengî derbas dibe - Atlasek SDF-ya 512x512 dikare bi sedan îkonên ku di her mezinahî de bi rengek bêkêmasî têne xuyang kirin bihewîne.

Li ser sînorê lêkolînê, nêzîkatiyên li ser bingeha tora neuralî derdikevin holê ku fêr dibin ku zeviyên dûr rasterast ji xêzên vektorê biafirînin, potansiyel ji rêbazên algorîtmîkî yên kevneşopî encamên kalîteya bilindtir çêdikin. Di vê navberê de, danasîna lêdana bi firehî-guhêrbar bi karanîna tevnvîsên SDF îmkanên nû vedike ji bo bandorên nivîsê yên kaligrafîk û destnivîsî yên ku berê di sepanên di dema rast de nepratîk bûn.

Ji bo pêşdebiran ku sepanên nûjen û pir-platformê ava dikin, tîpên SDF yek ji wan teknîkên hindik temsîl dikin ku veberhênana fêrbûnê di hema hema her projeyê de berdêl dide. Qalîteya pêşkêşkirinê dijberî motorên nivîsê yên xwecihî ye, şopa bîranînê perçeyek alternatîfên bitmap-ê ye, û pergala bandor-based shader nermbûnek afirîner peyda dike ku nêzîkatiyên pêş-pijkirî bi hêsanî nikarin hevûdu bikin. Ger hûn etîketan li ser cîhanek 3D-yê çêdikin an jî piştrast dikin ku daneyên krîtîk ên karsaziyê li ser her ekranek di jiyana bikarhênerên we de rast têne xuyang kirin, tîpên SDF amûrek hêja ye ku meriv jêhatî bibe.

Pirsên Pir Pir tên Pirsîn

Fontên SDF çi ne û çima divê pêşdebiran bala wan bikişîne?

Fernivîsên Qada Dûrbûna îmzekirî nirxên dûrbûnê ji her pîxelê heya kêleka lîfê ya herî nêz diparêze, û veguheztina nivîsê ya serbixwe-çareseriyê çalak dike. Berevajî tîpên bitmap-ê yên kevneşopî yên ku dema ku têne pîvandin şeng dibin, tîpên SDF di her mezinahî an astek mezinbûnê de zelal dimînin. Ev yek wan ji bo navbeynkên bersivdar ên nûjen, UI-ya lîstikê, û her serîlêdana ku pir dendikên ekranê dike armanc - ji cîhazên mobîl bigire heya çavdêrên 4K û pê ve, pêdivî ye.

Tîpên SDF-ê çawa bi bitmap-ya kevneşopî û ravekirina tîpên vektorî didin ber hev?

Fernivîsên bitmap ji bo her mezinahiyê xêzên cuda hewce dike, bîranîna girîng dixwe û di heman demê de dema ku tê pîvandin hê jî huneran hildiberîne. Tîpên vektorî qalîteya bêkêmasî pêşkêşî dikin lê ji hêla hesabkirinê ve biha ne ku di wextê rast de raster bikin. Tîpên SDF hevsengiyek îdeal çêdike - tevnek hevgirtî hema hema di her pîvanê de bi serkêşiya GPU ya hindiktirîn bi xweşikî vedibêje, û wan dike bijareya bijarte ji bo sepanên rast-demê mîna lîstik û tabloyên înteraktîf.

Ji bo çêkirina tîpên SDF çi alav û pirtûkxane hene?

Vebijarkên populer msdfgen ji bo hilberîna SDF-ya pir-kanal, Hiero ji bo pakkirina tîpên bitmap bi piştgirîya SDF-ê, û cûrbecûr karûbarên rêzika fermanê-çavkaniya vekirî hene. Piraniya motorên lîstikê yên wekî Unity û Godot piştgirîya nivîsê ya SDF-ya çêkirî vedigirin. Ji bo karsaziyên ku serîlêdanên xwerû ava dikin, platformên mîna Mewayz bi OS-ya karsaziya xweya 207-module ya ku ji 19 $/mehê dest pê dike, dikarin van teknîkên renderkirinê di ezmûnên dîjîtal ên binavkirî de yek bikin.

Gelo tîpên SDF dikarin bandorên taybetî yên mîna xêzkirin, siya, û nivîsa ronî bikin?

Bêguman - ev yek ji hêza herî mezin a tîpên SDF ye. Ji ber ku daneyên zeviya dûrbûnê di şaderê de peyda dibin, hûn dikarin bi tenê verastkirina nirxên tixûbê xêzkirin, siyên dakêşan, şewqên nerm, û tewra bandorên anîmasyonî lê zêde bikin. Van bandoran di performansê de hema hema tiştek nahayê wan tune, ji ber ku ew hewceyê geometrî an derbasbûnên tevnvîsê yên zêde nînin, bêyî ku qurbankirina rêjeyên çarçoveyê bidin sêwiraner azadiya afirîner a berbiçav.