Kikọ Itọsọna kan si Awọn Fonts SDF

Kí nìdí Font Rendering Si tun pataki Die e sii ju O Ro

Gbogbo piksẹli loju iboju rẹ sọ itan kan, ko si si ibi ti o han diẹ sii ju ninu bi ọrọ ṣe n ṣe kaakiri awọn ẹrọ, awọn ipinnu, ati awọn ipele sun-un. Awọn nkọwe bitmap ti aṣa ṣe iranṣẹ fun wa daradara ni akoko ti awọn diigi ipinnu ipinnu, ṣugbọn bugbamu ti awọn ifihan DPI giga, awọn atọkun idahun, ati awọn ohun elo 3D gidi-akoko ti ṣafihan awọn idiwọn ipilẹ wọn. Tẹ Awọn Fonti Ibuwọlu Aaye Ijinna (SDF) — ilana imupadabọ ti o ti yipada ni idakẹjẹ bawo ni awọn ohun elo ode oni ṣe n ṣe afihan agaran, ọrọ ti iwọn laisi iranti gbigbo tabi iṣẹ ṣiṣe rubọ.

Boya o n kọ UI ere kan, dasibodu data kan, tabi pẹpẹ ti nkọju si alabara ti o nilo lati wo felefele-didasilẹ lori ohun gbogbo lati smartwatch kan si atẹle 4K kan, oye awọn nkọwe SDF yoo fun ọ ni eti imọ-ẹrọ to ṣe pataki. Itọsọna yii fọ ero naa lati awọn ipilẹ akọkọ, rin nipasẹ opo gigun ti iran, o si funni ni imọran ti o wulo fun sisọpọ awọn nkọwe SDF sinu awọn iṣẹ akanṣe tirẹ.

Kini Gangan Jẹ Aaye Ijinna Ibuwọlu?

Aaye Ijinna Ibuwọlu jẹ ifojuri onisẹpo meji nibiti piksẹli kọọkan tọju ijinna lati aaye yẹn si eti to sunmọ ti ilana ilana glyph kan. Apakan “fọwọsi” ṣe pataki: awọn piksẹli inu aala glyph tọju awọn iye rere, lakoko ti awọn piksẹli ita tọju awọn iye odi (tabi idakeji, da lori apejọpọ). Ààlà fúnra rẹ joko ni odo Líla. Aṣoju mathematiki ti o rọrun yii ṣe koodu koodu iyalẹnu ti alaye apẹrẹ sinu aworan iwapọ grẹy.

Ilana naa jẹ olokiki nipasẹ iwe Valve's 2007 SIGGRAPH, nibiti Chris Green ṣe afihan pe awọn awoara SDF ti o kere bi awọn piksẹli 64 × 64 le ṣe agbejade ọrọ ti o duro didasilẹ ni awọn iwọn nla - awọn abajade ti yoo nilo 4096x4096 bitmap lati ṣaṣeyọri pẹlu rasterization ibile. Imọye bọtini ni pe interpolation bilinear ti GPU ti a ṣe sinu, eyiti o ṣe awọn abajade blurry lori awọn nkọwe bitmap deede, nitootọ ṣe agbejade didan ati ibaramu ijinna deede lori awọn awoara SDF.

Ni awọn ọrọ iṣe, atlas fonti SDF kan ṣoṣo — deede 512x512 tabi 1024x1024 awọn piksẹli — le ni gbogbo ohun kikọ silẹ ninu eyiti o ṣe mimọ ni iwọn eyikeyi. Ṣe afiwe iyẹn si awọn isunmọ fonti bitmap, eyiti o nilo awọn atlases sojurigindin lọtọ fun iwọn fonti kọọkan (16px, 24px, 32px, 48px, ati bẹbẹ lọ), ni kiakia n gba awọn megabyte ti iranti sojurigindin fun oriṣi oriṣi ẹyọkan.

Bawo ni SDF Font Atlases Ṣe ipilẹṣẹ

Opo gigun ti iran bẹrẹ pẹlu faili fonti vector (TTF tabi OTF) ati ṣe agbejade atlas awoara kan pẹlu faili metadata ti n ṣapejuwe ipo, iwọn, ati awọn metiriki ti glyph kọọkan. Orisirisi awọn irinṣẹ orisun-ìmọ mu ilana yii ṣiṣẹ, pẹlumsdf-atlas-gen,Hiero(apakan libGDX), atimsdfgenjẹ eyiti a lo julọ. Ilana naa pẹlu rasterizing glyph kọọkan ni ipinnu giga, ṣiṣe iṣiro aaye ijinna nipa lilo awọn algoridimu bii 8-point lesese Euclidean ijinna iyipada (8SSEDT), ati lẹhinna iṣakojọpọ awọn abajade sinu awoara kan.

Awọn iyatọ SDF akọkọ mẹta lo wa ti o yẹ ki o loye:

• SDF Standard (ikanni-ikanni):O tọju iye ijinna kan fun piksẹli. Ṣe agbejade awọn igun didan ṣugbọn tiraka pẹlu awọn igun didan, eyiti o ṣọ lati yika ni awọn ipinnu kekere. Dara julọ fun ọrọ ara ati awọn ipo nibiti rirọ igun diẹ jẹ itẹwọgba.
• SDF ikanni-pupọ (MSDF): Nlo awọn ikanni awọ mẹta (RGB) lati ṣe koodu alaye ijinna lati oriṣiriṣi awọn apa eti. Eyi ṣe itọju awọn igun didasilẹ ati awọn alaye itanran dara julọ ju SDF ikanni ẹyọkan lọ, ṣiṣe ni yiyan ti o fẹ julọ fun awọn ohun elo ode oni. Ni idagbasoke nipasẹ Viktor Chlumský, MSDF ti di boṣewa de facto.
• Ọpọlọpọ ikanni + SDF otitọ (MTSDF): Ṣafikun ikanni alpha kẹrin ti o ni aaye ijinna otitọ kan lẹgbẹẹ awọn ikanni MSDF mẹta. Eyi n pese ohun ti o dara julọ ti awọn agbaye mejeeji - awọn igun didan lati MSDF ati alaye ijinna deede fun awọn ipa lati SDF otitọ - ni idiyele ti awọn awoara ti o tobi diẹ.

Aṣẹ iran aṣoju nipa lilo msdf-atlas-gen le ṣe pato iwọn fonti ti awọn piksẹli 42, iwọn ijinna ti awọn piksẹli 4, ati iwọn sojurigindin ti 1024x1024. Ilana iwọn ijinna n ṣakoso bi o ṣe jinna si eti glyph alaye ijinna naa gbooro, eyiti o kan taara didara ti o pọju ti awọn ilana, awọn ojiji, ati awọn ipa didan ti o le lo ni akoko asiko.

The Fragment Shader: Ibi ti awọn Magic Ṣẹlẹ

Ẹgbẹ ti n ṣe ti awọn nkọwe SDF jẹ ohun ti o rọrun. Ninu iboji ajẹkù rẹ, o ṣe ayẹwo awoara SDF, ṣe afiwe iye ijinna si iloro kan (ni deede 0.5 fun eti glyph), ati lo iṣẹ didan si antialias iyipada. Imọye pataki ni GLSL dabi nkan bii eyi: ṣapejuwe agbedemeji ti awọn ikanni MSDF mẹta, ṣe iṣiro iwọn iwọn iboju-aaye aaye iboju fun antialiasing to dara, lẹhinna lo iṣẹ didan lati gbejade iye alpha ikẹhin.

Agbara gidi ti awọn nkọwe SDF kii ṣe ni ominira ipinnu nikan, ṣugbọn ni idiyele bintin ti fifi awọn ipa kun. Awọn itọka, awọn ojiji ju silẹ, awọn didan inu, ati paapaa awọn bevels 3D ni gbogbo wọn le ṣe iṣiro ni iwe-iwọle shader kanna nipasẹ ṣiṣe idanwo nirọrun si awọn iloro jijin ti o yatọ - ko si awọn awoara afikun, ko si awọn ipe iyaworan afikun, ko si awọn ipele ipa ti a ti yan tẹlẹ.

Fun ipa ila ipilẹ kan, o ṣe idanwo awọn iloro meji: ọkan fun eti ita ti ilana ati ọkan fun kikun inu. Awọn piksẹli ti o ṣubu laarin awọn iloro wọnyi gba awọ ila; awọn piksẹli inu gba awọ kikun. Awọn ojiji ju silẹ ṣiṣẹ bakanna - aiṣedeede awọn ipoidojuko sojurigindin ṣaaju ṣiṣe iṣapẹẹrẹ, lo iwọn didin jakejado, ati akojọpọ ojiji lẹhin glyph akọkọ. Awọn iṣẹ ṣiṣe wọnyi ṣafikun iye owo GPU aifiyesi nitori wọn jẹ awọn iṣẹ ṣiṣe iṣiro daada lori iye ijinna ti a ti ṣe ayẹwo tẹlẹ.

Iboju-aaye antialiasing yẹ akiyesi pataki. Imuse aiṣedeede nlo iwọn didin ti o wa titi, eyiti o ṣe agbejade ọrọ ti o dabi nla ni iwọn kan ṣugbọn boya blurry tabi jaggy pupọ si awọn miiran. Ọna ti o tọ ṣe iṣiro iwọn fifẹ lati awọn itọsẹ-iboju-aaye ti aaye ijinna (lilofwidth ()ni GLSL tabi ddx/ddyni HLSL). Eyi ṣe adaṣe adaṣe adaṣe laifọwọyi si iwọn imupada lọwọlọwọ, ṣiṣe awọn egbegbe agaran nigbagbogbo laibikita ipele sun-un tabi ijinna wiwo.

💡 DID YOU KNOW?

Mewayz replaces 8+ business tools in one platform

CRM · Invoicing · HR · Projects · Booking · eCommerce · POS · Analytics. Free forever plan available.

Start Free →

Awọn ọfin ti o wọpọ ati Bi o ṣe le Yẹra fun Wọn

Pelu bi o ti wuyi, awọn akọwe SDF wa pẹlu gotchas ti o le fa soke paapaa awọn olupilẹṣẹ ti o ni iriri. Ọrọ ti o wọpọ julọ jẹ iwọn ijinna ti ko to lakoko iran atlas. Ti sakani ijinna ba dín ju, awọn ipa bii awọn itọka ti o nipọn tabi awọn ojiji nla yoo ge gige ni airotẹlẹ ni eti sakani koodu. Ofin ti o dara ti atanpako ni lati ṣeto iwọn ijinna si o kere ju lẹmeji radius ipa ti o pọju ti o gbero lati lo, tiwọn ni awọn piksẹli atlas.

Iṣoro loorekoore miiran jẹ sisẹ awoara. Awọn awoara SDFgbọdọlo lilo sisẹ bilinear - sisẹ-itọpa aladugbo ti o sunmọ n ba interpolation ti o jẹ ki ilana naa ṣiṣẹ, ti n ṣe agbejade blocky, ọrọ aliased. Sibẹsibẹ, o yẹ ki o mu mipmapping kuro fun awọn atlases SDF, bi awọn aaye ijinna mipmapped ṣe awọn abajade ti ko tọ ni awọn ipele mip isalẹ nibiti awọn egbegbe glyph ti o jinna le jẹ ẹjẹ si ara wọn.

Kerning ati iṣeto ọrọ tun jẹ awọn agbegbe nibiti awọn olupilẹṣẹ nigbagbogbo ge awọn igun. SDF atlas n ṣe imupadabọ, ṣugbọn titọ ọrọ kikọ to dara — aye ti ohun kikọ silẹ, awọn orisii kerning, iga laini, ati ọrọ bidirectional - ṣi nilo ẹrọ akọkọ kan. Awọn ile-ikawe biiHarfBuzztabiFreeType mu eyi tọ. Foju ṣiṣapẹrẹ ọrọ ti o tọ ni ojurere ti aye ti o rọrun ti o wa titi jẹ ọna ti o yara ju lati jẹ ki ṣiṣe ọrọ rẹ dabi amateurish, laibikita bawo imuse SDF rẹ ṣe mọ.

1. Ṣiṣẹda ni ipinnu oninurere. Lakoko ti awọn nkọwe SDF ṣe iwọn si isalẹ ni ẹwa, bẹrẹ pẹlu iwọn glyph ti o kere ju awọn piksẹli 32-48 ninu atlas ṣe itọju awọn alaye to dara ni awọn glyphs eka bi awọn kikọ CJK tabi awọn iwe afọwọkọ ohun ọṣọ.
2. Lo MSDF lori SDF ikanni ẹyọkan ayafi ti o ba ni idi kan pato lati ma ṣe. Imudara išedede igun jẹ iyalẹnu pẹlu aibikita lori oke.
3. Idanwo ni awọn iwọn to gaju. Ṣe atunṣe ọrọ rẹ ni 8px ati 200px lakoko idagbasoke. Awọn ọran ti a ko rii ni awọn iwọn deede yoo han gbangba ni awọn iwọn.
4. Memory sojurigindin Profaili. Aworan atlas 1024x1024 MSDF kan (RGB, 8-bit) n gba 3 MB ti iranti GPU. Iyẹn deede kere ju awọn iwọn fonti bitmap meji ni didara deede.
5. Ṣaaju-iṣiro glyph quads lori Sipiyu. Ifipamọ fatesi ti o ni ipo glyph quads yipada nikan nigbati akoonu ọrọ ba yipada, kii ṣe gbogbo fireemu. Kaṣe rẹ ni ibinu.

SDF Fonts ni Gbóògì: Real-World Awọn ohun elo

Awọn ẹrọ ere ṣe itọsọna isọdọmọ ti awọn nkọwe SDF, ṣugbọn ilana naa ti tan kaakiri ere. Google Mapsnlo awọn aami ti a ṣe SDF fun awọn agbekọja maapu rẹ, gbigba awọn orukọ ibi laaye lati wa leti lati sun-un ipele opopona si sun-un ipele-continent lai tun-rasterizing. Mapbox GL gbarale awọn glyphs SDF patapata fun awọn maapu oju-iwe ayelujara ti a ṣe, ti n sin awọn alẹmọ atlas SDF ti a ti ṣe ipilẹṣẹ tẹlẹ lati CDN rẹ. Ni awọn ọran mejeeji, ominira ipinnu ti awọn nkọwe SDF yọkuro gbogbo kilasi ti awọn idun ṣiṣe ipele-sisun.

Awọn ohun elo iṣowo ni anfani dọgbadọgba. Eyikeyi iru ẹrọ ti o ṣe afihan ọrọ ti o ni agbara ni kanfasi kan tabi aaye WebGL - ronu awọn dashboards, awọn iwoye data, awọn ijabọ ibaraenisepo, tabi ami oni nọmba - jere awọn anfani lẹsẹkẹsẹ lati ṣiṣe SDF. Ni Mewayz, nibiti awọn iṣowo n ṣakoso ohun gbogbo lati risiti si awọn atupale kọja awọn modulu iṣọpọ 207, ni ibamu ati imuṣiṣẹ ọrọ ṣiṣe kọja awọn ẹrọ kii ṣe igbadun - o jẹ ibeere kan. Nigbati oniwun ile ounjẹ kan ba ṣayẹwo dasibodu ifiṣura wọn lori foonu kan ati pe oniṣiro wọn ṣe atunwo data kanna lori atẹle 32-inch, ọrọ naa nilo lati jẹ leti bakanna laisi gbigbe awọn ohun-ini fonti lọtọ fun gbogbo iwuwo iboju.

Eto ilolupo WebGL ti jẹ ki awọn akọwe SDF ni iraye si siwaju sii si awọn oludasilẹ wẹẹbu. Awọn ile-ikawe biimẹta-mesh-uiatitroika-mẹta-ọrọn pese ifasilẹ ọrọ MSDF fun awọn iwoye Three.js, lakoko ti awọn olupilẹṣẹ ipele kekere le ṣe imuse SDF aṣa pẹlu awọn laini to kere ju 100 ti koodu shader. Ilana naa tun ti rii ọna rẹ sinu idagbasoke alagbeka abinibi nipasẹ awọn ilana bii Flutter, eyiti o nlo ṣiṣe orisun SDF fun ẹrọ ọrọ aṣa rẹ.

Ni ikọja Ọrọ: Nibo Awọn Ilana SDF Ti Nlọ

Agbekale aaye aaye jijin gbooro daradara ju titusilẹ fonti. Awọn apẹẹrẹ UI n lo awọn imọ-ẹrọ SDF lati ṣẹda awọn aami ominira-ipinnu, awọn apẹrẹ fekito ti iwọn, ati paapaa awọn eroja UI ilana bii awọn igun onigun yika pẹlu awọn igun pipe-pipe. Ọna ti o da lori atlas kanna ti o jẹ ki awọn iwe iranti SDF ni agbara-daradara kan deede si awọn apẹrẹ aami - ẹyọkan 512x512 SDF atlas le ni awọn ọgọọgọrun awọn aami ti o ṣe ni pipe ni iwọn eyikeyi.

Lori aala iwadii, awọn isunmọ ti o da lori nẹtiwọọki ti n yọ jade ti o kọ ẹkọ lati ṣe ipilẹṣẹ awọn aaye ijinna taara lati awọn lakaye vector, ti o le mu awọn abajade didara ga ju awọn ọna algorithmic ibile lọ. Nibayi, iyipada-iwọn ilọ-iwọn nipa lilo awọn awoara SDF n ṣii awọn aye tuntun fun calligraphic ati awọn ipa ọrọ ti a fi ọwọ kọ ti o jẹ alaiṣe tẹlẹ ni awọn ohun elo akoko gidi.

Fun awọn olupilẹṣẹ ti n ṣe agbero igbalode, awọn ohun elo Syeed pupọ, awọn akọwe SDF ṣe aṣoju ọkan ninu awọn imọ-ẹrọ to ṣọwọn nibiti idoko-owo ikẹkọ n san awọn ipin kaakiri fere gbogbo iṣẹ akanṣe. Didara ti n ṣe awọn abanidije abinibi awọn ẹrọ ọrọ abinibi, ifẹsẹtẹ iranti jẹ ida kan ti awọn omiiran bitmap, ati eto ipa ti o da lori shader n pese irọrun ẹda ti awọn isunmọ ti a ti yan tẹlẹ lasan ko le baramu. Boya o n ṣe awọn aami lori globe 3D tabi ni idaniloju pe data pataki-iṣowo ṣe afihan ni deede ni gbogbo iboju ni igbesi aye awọn olumulo rẹ, awọn akọwe SDF jẹ ohun elo ti o tọ si iṣakoso.

Awọn ibeere Nigbagbogbo

Kini awọn nkọwe SDF ati kilode ti awọn olupilẹṣẹ yẹ ki o bikita nipa wọn?

Fọọmu Aaye Ijinna Ibuwọlu tọju awọn iye ijinna lati piksẹli kọọkan si eti glyph ti o sunmọ, ti n muu ṣe iyipada-ominira ọrọ ṣiṣe. Ko dabi awọn nkọwe bitmap ibile ti o di blurry nigba ti iwọn, awọn nkọwe SDF wa agaran ni iwọn eyikeyi tabi ipele sun-un. Eyi jẹ ki wọn ṣe pataki fun awọn atọkun idahun ti ode oni, UI ere, ati ohun elo eyikeyi ti o fojusi awọn iwuwo iboju pupọ - lati awọn ẹrọ alagbeka si awọn diigi 4K ati kọja.

Bawo ni awọn nkọwe SDF ṣe afiwe si bitmap ibile ati iṣẹda fonti fekito?

Awọn akọwe Bitmap nilo awọn awoara lọtọ fun iwọn kọọkan, n gba iranti pataki lakoko ti o n ṣe awọn ohun-ọṣọ nigba ti iwọn. Awọn nkọwe Vector nfunni ni didara pipe ṣugbọn jẹ gbowolori ni iṣiro lati rasterize ni akoko gidi. Awọn akọwe SDF kọlu iwọntunwọnsi pipe - iwapọ iwapọ kan n ṣe ẹwa ni iwọn eyikeyi pẹlu iwọn GPU ti o kere ju, ṣiṣe wọn ni yiyan ti o fẹ fun awọn ohun elo akoko gidi bii awọn ere ati awọn dasibodu ibaraenisepo.

Awọn irinṣẹ ati awọn ile-ikawe wo ni o wa fun ṣiṣẹda awọn nkọwe SDF?

Awọn aṣayan olokiki pẹlu msdfgen fun iran SDF oni-ikanni pupọ, Hiero fun iṣakojọpọ fonti bitmap pẹlu atilẹyin SDF, ati ọpọlọpọ awọn ohun elo laini aṣẹ-ìmọ. Pupọ awọn ẹrọ ere bii Isokan ati Godot pẹlu atilẹyin ọrọ SDF ti a ṣe sinu. Fun awọn iṣowo ti n kọ awọn ohun elo aṣa, awọn iru ẹrọ bii Mewayz pẹlu 207-module OS iṣowo rẹ ti o bẹrẹ ni $19/mo le ṣepọ awọn ilana imupadabọ sinu awọn iriri oni-nọmba iyasọtọ.

Ṣé awọn nkọwe SDF le mu awọn ipa pataki bi awọn ilana, awọn ojiji, ati ọrọ didan bi?

Nitootọ — eyi jẹ ọkan ninu awọn agbara nla ti awọn nkọwe SDF. Nitori data aaye ijinna wa ninu iboji, o le ṣafikun awọn ilana, awọn ojiji ju silẹ, awọn didan rirọ, ati paapaa awọn ipa ere idaraya nipa ṣiṣatunṣe awọn iye ala nirọrun. Awọn ipa wọnyi ko fẹrẹ jẹ ohunkohun ni iṣẹ nitori wọn ko nilo afikun jiometirika tabi awọn igbasilẹ sojurigindin, fifun awọn apẹẹrẹ ominira ominira ẹda laisi irubọ awọn oṣuwọn fireemu.