Manoratra Torolalana ho an'ny SDF Fonts

Fa maninona no mbola manan-danja kokoa noho ny eritreretinao ny famandrihana endritsoratra

Ny piksel tsirairay eo amin'ny efijery dia mitantara tantara, ary tsy misy na aiza na aiza miharihary kokoa noho ny fomba famadihana lahatsoratra amin'ny fitaovana, fanapahan-kevitra ary haavon'ny zoom. Ny endri-tsoratra bitmap nentim-paharazana dia nanampy anay tsara tamin'ny vanim-potoanan'ny fanaraha-maso raikitra, saingy ny fipoahan'ny fampisehoana DPI avo lenta, ny interface tsara, ary ny fampiharana 3D amin'ny fotoana tena izy dia nampiharihary ny fetra fototra. Ampidiro ny endri-tsoratra Signed Distance Field (SDF) — teknika famadihana izay nanova mangina ny fomba anehoan'ny fampiharana maoderina ny lahatsoratra manjavozavo sy azo esorina tsy misy fitadidiana mivonto na manao sorona ny fampisehoana.

Na manangana UI lalao ianao, dashboard data, na sehatra mifanandrify amin'ny mpanjifa izay mila mijery maranitra amin'ny zava-drehetra manomboka amin'ny smartwatch ka hatramin'ny monitor 4K, ny fahatakarana ny endritsoratra SDF dia manome anao lafiny ara-teknika matotra. Ity torolalana ity dia manapaka ny foto-kevitra avy amin'ny fitsipika voalohany, mandeha amin'ny lalan'ny taranaka, ary manome torohevitra azo ampiharina amin'ny fampidirana ireo endritsoratra SDF amin'ny tetikasanao manokana.

Inona marina no atao hoe saha lavitra voasonia?

Ny saha halavirana voasonia dia tora-pasika roa dimanjato izay itehirizan'ny pika tsirairay ny halaviran'io teboka io mankany amin'ny sisiny akaiky indrindra amin'ny rindran-tsary glyph. Ny ampahany "voasonia" dia manan-danja: ny piksela ao anatin'ny sisin-tanin'ny glyph dia mitahiry soatoavina tsara, fa ny piksela ivelany kosa dia mitahiry sanda ratsy (na ny mifamadika amin'izany, miankina amin'ny fivoriambe). Ny sisin-tany mihitsy dia mipetraka amin'ny fiampitana aotra. Ity fanehoana matematika tsotra ity dia manodinkodina fampahalalana be dia be amin'ny endrika ho lasa sary miloko volondavenona.

Ny teknika dia nalaza tamin'ny taratasy SIGGRAPH an'i Valve tamin'ny 2007, izay nanehoan'i Chris Green fa ny soratra SDF kely toy ny 64x64 pixels dia afaka mamokatra lahatsoratra izay mijanona ho maranitra amin'ny fanamafisam-peo tafahoatra — valiny izay mitaky sarintany bit 4096x4096 hahatratrarana amin'ny rasterization nentim-paharazana. Ny tena zava-dehibe dia ny fampifangaroana bilinear naorina ao amin'ny GPU, izay mamokatra vokatra manjavozavo amin'ny endri-tsoratra bitmap mahazatra, raha ny marina dia mamokatra fifandimbiasan'ny halavirana malefaka sy marina amin'ny tontolon'ny SDF.

Amin'ny teny azo ampiharina, atlase endritsoratra SDF tokana — mazàna 512x512 na 1024x1024 piksel — dia afaka mirakitra andian-karazana iray manontolo izay mamadika madio amin'ny habe rehetra. Ampitahao amin'ny fomba fiasa endri-tsoratra bitmap, izay mitaky atlase ara-nofo misaraka ho an'ny haben'ny endritsoratra tsirairay (16px, 24px, 32px, 48px, sy ny sisa), mandany haingana megabytes fahatsiarovana ara-nofo ho an'ny endritsoratra tokana.

Ahoana no famoronana SDF Font Atlases

Miantomboka amin'ny fisie endri-tsoratra vetaveta (TTF na OTF) ny fantsona famokarana ary mamokatra atlasa miampy rakitra metadata mamaritra ny toerana, ny habe ary ny metrikan'ny glyph tsirairay. Fitaovana loharano misokatra maromaro no mitantana ity dingana ity, miaraka amin'ny msdf-atlas-gen, Hiero (ampahany amin'ny libGDX), ary msdfgen no be mpampiasa indrindra. Tafiditra ao anatin'ilay dingana ny fandrafetana ny glyph tsirairay amin'ny vahaolana avo lenta, kajy ny saha halavirana amin'ny fampiasana algorithm toy ny fiovan'ny halavirana Euclidean misy teboka 8 (8SSEDT), ary avy eo mametaka ny valiny ho endrika tokana.

Misy karazana SDF telo lehibe tokony ho azonao:

• SDF mahazatra (fantsona tokana): Mitahiry sanda halavirana iray isaky ny piksel. Mamokatra fiolahana malama nefa miady amin'ny zoro maranitra, izay mirona hihodina amin'ny fanapahan-kevitra ambany kokoa. Tsara indrindra ho an'ny lahatsoratry ny vatana sy ny toe-javatra izay azo ekena ny fanalefahana kely amin'ny zorony.
• SDF maro-fantsona (MSDF): Mampiasa fantsona miloko telo (RGB) hanidy ny fampahafantarana halavirana avy amin'ny ampahan'ny sisiny samihafa. Miaro ny zoro maranitra sy ny antsipiriany tsara lavitra noho ny SDF fantsona tokana izany, ka mahatonga azy io ho safidy tiana ho an'ny ankamaroan'ny fampiharana maoderina. Novolavolain'i Viktor Chlumský, ny MSDF no lasa fenitra de facto.
• Fantsona marobe + True SDF (MTSDF): Manampy fantsona alfa fahefatra misy saha tena halavirana miaraka amin'ireo fantsona MSDF telo. Izy io dia manome ny tsara indrindra amin'ny tontolo roa - zoro maranitra avy amin'ny MSDF sy fampahafantarana halavirana marina momba ny vokatra avy amin'ny SDF marina - amin'ny vidin'ny haingon-trano somary lehibe kokoa.

Ny baikon'ny taranaka mahazatra mampiasa msdf-atlas-gen dia mety mamaritra ny haben'ny endritsoratra 42 pixels, ny halavirana 4 pixels ary ny haben'ny texture 1024x1024. Ny mari-pamantarana elanelana lavitra dia mifehy ny halaviran'ny sisin'ny glyph ny fampahafantarana ny halavirana, izay misy fiantraikany mivantana amin'ny kalitao ambony indrindra amin'ny tsipika, ny aloka ary ny vokatry ny famirapiratana azonao ampiharina amin'ny fotoana fandehanana.

Ny Sombitsombiny Shader: Aiza no misy ny ody

Tsotra amin'ny fomba kanto ny lafiny fandikana ny endritsoratra SDF. Ao amin'ny shader fragment anao, santionany ny tontolon'ny SDF, ampitahao ny sandan'ny halavirana amin'ny tokonam-baravarana iray (matetika 0,5 ho an'ny sisiny glyph), ary ampiasao ny fampihetseham-peo mba hanoherana ny tetezamita. Ny lojika fototra ao amin'ny GLSL dia toa izao: santionany ny mediana amin'ireo fantsona MSDF telo, kajy ny gradient halaviran'ny efijery ho an'ny antialiasing mety, dia ampiharo ny fiasa smoothstep hamokatra ny sanda alpha farany.

Ny tena herin'ny endritsoratra SDF dia tsy miankina amin'ny fahaleovan-tena amin'ny famahana olana ihany, fa amin'ny vidiny tsy dia misy dikany amin'ny fampidirana vokatra. Ny rindran-damina, ny aloka mitete, ny famirapiratana anatiny, ary na dia ny bevel 3D aza dia azo kajy amin'ny alàlan'ny shader iray ihany amin'ny alalan'ny fitsapana tsotra fotsiny amin'ny tokonam-baravaran'ny halaviran-dalana - tsy misy haingon-trano fanampiny, tsy misy antso an-tsary fanampiny, tsy misy sosona vokatra efa vita.

Ho an'ny vokatry ny drafitra fototra dia andramana tokonana roa ianao: ny iray ho an'ny sisiny ivelany amin'ny drafitra ary ny iray ho an'ny famenoana anatiny. Ny pika latsaka eo anelanelan'ireo tokonana ireo dia mahazo ny lokon'ny drafitra; ny pixel ao anatiny dia mahazo ny loko feno. Miasa toy izany koa ny aloka mitete - amboary ny rindran-damina alohan'ny fakana santionany, ampiharo amin'ny halavirana midadasika kokoa, ary atambatra ny aloka ao ambadiky ny glyph lehibe. Ireo fampandehanana ireo dia manampy vidy GPU tsinontsinona satria fampandehanana kajy fotsiny amin'ny sandan'ny halavirana efa santionany.

Mendrika hojerena manokana ny antialiasing amin'ny habakabaka. Ny fampiharana tsy misy dikany dia mampiasa sakan'ny fanamafisam-peo raikitra, izay mamokatra lahatsoratra tsara tarehy amin'ny habe iray fa na manjavozavo loatra na jaggy loatra amin'ny hafa. Ny fomba fiasa marina dia manisa ny sakan'ny fanamafisam-peo avy amin'ny derivative ecran-space amin'ny saha lavitra (mampiasa fwidth()amin'ny GLSL na ddx/ddyamin'ny HLSL). Izany dia mampifanaraka ho azy ny antialiasing amin'ny haben'ny render amin'izao fotoana izao, mamokatra sisiny matevina tsy mitsaha-mitombo na inona na inona haavon'ny zoom na halavirana fijerena.

Fandrika mahazatra sy ny fomba hialana amin'izany

Na dia eo aza ny hakanton'izy ireo, ny endri-tsoratra SDF dia tonga miaraka amin'ny gotchas izay mety hanakorontana na dia ireo mpamorona efa za-draharaha aza. Ny olana mahazatra indrindra dia ny tsy fahampian'ny halavirana mandritra ny famokarana atlas. Raha tery loatra ny elanelana lavitra, dia hisy fiantraikany toy ny rindran-damina matevina na aloka lehibe hipetaka tampoka eo amin'ny sisin'ny faritra voakodia. Ny fitsipika tsara dia ny mametraka ny halavirana ho avo roa heny fara-fahakeliny amin'ny taham-pivoarana farany kasainao hampiasaina, refesina amin'ny piksel atlas.

Olana iray hafa matetika ny sivana ara-nofo. Ny tontolon'ny SDF tsy maintsy dia mampiasa sivana bilinear — ny sivana akaiky indrindra dia manimba ny interpolation izay mampandeha ny teknika, mamokatra lahatsoratra voasakana, misy anarana. Na izany aza, tokony ho esorinao ny mipmapping ho an'ny atlase SDF, satria ny saha lavitra mipmapped dia miteraka vokatra diso amin'ny haavo mip ambany izay ahafahan'ny sisin'ny glyph lavitra mifanakaiky.

Ny Kerning sy ny fisehon'ny lahatsoratra dia faritra izay matetika manapa-kevitra ny mpamorona. Ny atlas SDF dia mitantana ny famandrihana, fa ny famolavolana lahatsoratra araka ny tokony ho izy - ny elanelan'ny endri-tsoratra, ny kerning tsiroaroa, ny haavon'ny tsipika ary ny lahatsoratra roa tonta - dia mbola mitaky motera fandrindrana. Ny trano famakiam-boky toy ny HarfBuzz na FreeType dia mitantana an'io tsara. Ny fanitsakitsahana ny fandrafetana lahatsoratra mifanaraka amin'ny elanelana tsotsotra amin'ny sakany raikitra no fomba tokana haingana indrindra hahatonga ny fandikana lahatsoratrao ho tsy misy dikany, na manao ahoana na manao ahoana ny fahadiovan'ny fampiharana SDF.

1. Mamorona amin'ny fanapahan-kevitra malalaka. Raha midina tsara ny endritsoratra SDF, manomboka amin'ny haben'ny glyph farafahakeliny 32-48 piksel ao amin'ny atlas dia mitahiry antsipiriany tsara amin'ny glyph sarotra toy ny tarehin-tsoratra CJK na soratra haingon-trano.
2. Mampiasà MSDF amin'ny SDF fantsona tokana raha tsy misy antony manokana tsy hanaovanao izany. Mahagaga ny fanatsarana ny zorony amin'ny ambony tsy azo tsinontsinoavina.
3. Andramo amin'ny habeny faran'izay lehibe. Avereno amin'ny 8px sy 200px ny lahatsoratrao mandritra ny fivoarana. Ny olana tsy hita amin'ny habe mahazatra dia lasa miharihary amin'ny farany.
4. Fahatsiarovana ara-drafitra. Ny atlasa MSDF 1024x1024 tokana (RGB, 8-bit) dia mandany fahatsiarovana GPU 3 MB. Mazàna dia latsaky ny roa ny haben'ny endritsoratra bitmap amin'ny kalitao mitovy.
5. Vaovao ny quads glyph mialoha kajy ao amin'ny CPU. Ny buffer vertex misy quads glyph misy toerana dia miova raha tsy miova ny votoatin'ny lahatsoratra, fa tsy ny frame rehetra. Tadiavo amin'ny fomba mahery vaika.

Endri-tsoratra SDF amin'ny famokarana: Fampiharana eran-tany

Ny motera lalao no nitarika ny fampiasana ireo endri-tsoratra SDF, saingy niparitaka lavitra noho ny filalaovana ny teknika. Google Maps dia mampiasa etikety nadika SDF ho an'ny fanampiny sari-tany, mamela ny anaran'ny toerana ho azo vakiana hatrany amin'ny zoro amin'ny arabe mankany amin'ny zoom amin'ny kaontinanta nefa tsy misy rastering indray. Mapbox GL dia miantehitra tanteraka amin'ny glyphs SDF ho an'ny sari-tany avoakany amin'ny WebGL, manolotra taila atlasy SDF efa vita mialoha avy amin'ny CDN-ny. Amin'ireo tranga roa ireo, ny fahaleovantenan'ny famahana ny endri-tsoratra SDF dia manafoana ny kilasy rehetra amin'ny famandrihana amin'ny haavo zoom.

Tombontsoa mitovy amin'izany ny fampiharana ara-barotra. Izay sehatra rehetra mamoaka lahatsoratra mavitrika amin'ny tontolon'ny lamba na WebGL - eritrereto ny dashboard, sary an-tsary, tatitra ifanakalozan-kevitra, na famantarana nomerika - dia mahazo tombony avy hatrany amin'ny famoahana SDF. Ao amin'ny Mewayz, izay misy ny orinasa mitantana ny zava-drehetra manomboka amin'ny faktiora ka hatramin'ny analyse amin'ny maodely mitambatra 207, tsy rendrarendra ny fandefasana lahatsoratra tsy miovaova sy mahomby amin'ny fitaovana - takiana izany. Rehefa mandinika ny dashboard famandrihana azy amin'ny telefaona ny tompon'ny trano fisakafoanana iray ary mijery ny angona mitovy amin'izany amin'ny monitor 32 santimetatra ny kaontim-bolany, dia tokony ho azo vakiana mitovy ny lahatsoratra raha tsy mandefa endri-tsoratra misaraka ho an'ny hakitroky ny efijery.

Ny tontolon'ny WebGL dia nahatonga ny endritsoratra SDF ho mora azon'ny mpamorona tranonkala. Ny trano famakiam-boky toy ny three-mesh-uisy troika-three-textdia manome famandrihana lahatsoratra MSDF midina ho an'ny sehatra Three.js, raha toa kosa ny mpandrindra amin'ny ambaratonga ambany dia afaka mampihatra ny fandikana SDF manokana miaraka amin'ny andalana 100 kaody shader. Ny teknika dia nahita ny lalana mankany amin'ny fampivoarana finday teratany amin'ny alàlan'ny rafitra toa an'i Flutter, izay mampiasa fandikana mifototra amin'ny SDF ho an'ny maotera lahatsoratra manokana.

Ankoatra ny lahatsoratra: Aiza no alehan'ny SDF Techniques

Ny foto-kevitry ny saha lavitra dia miitatra mihoatra lavitra noho ny famandrihana endritsoratra. Mampiasa teknika SDF ny mpamorona UI mba hamoronana kisary tsy miankina amin'ny fanapahan-kevitra, endrika zezika azo scalable, ary eny fa na dia singa UI amin'ny fomba fiasa toy ny mahitsizoro boribory misy zorony tonga lafatra amin'ny pixel. Ny fomba fiasa mifototra amin'ny atlas ihany izay mahatonga ny endritsoratra SDF ho tsara fitadidiana dia mihatra amin'ny fitambaran'ny kisary — ny atlas SDF tokana 512x512 dia mety ahitana kisary an-jatony izay mandika tsara amin'ny habeny rehetra.

Ao amin'ny sisintanin'ny fikarohana, mipoitra ny fomba fiasa mifototra amin'ny tamba-jotra neural izay mianatra mamorona saha lavitra mivantana avy amin'ny rindran-tsary vector, mety hamokatra vokatra avo lenta kokoa noho ny fomba algorithmika mahazatra. Mandritra izany fotoana izany, ny dika mitovy amin'ny sakan'ny tsipìka mampiasa ny SDF textures dia manokatra fahafahana vaovao ho an'ny vokatry ny soratra calligraphic sy sora-tanana izay tsy azo ampiharina teo aloha amin'ny fampiharana amin'ny fotoana tena izy.

Ho an'ireo mpamorona manorina fampiharana maoderina sy sehatra maro, ny endri-tsoratra SDF dia maneho ny iray amin'ireo teknika tsy fahita firy izay handoavana ny fampiasam-bola amin'ny fianarana saika isaky ny tetikasa. Ny kalitaon'ny famandrihana dia mifaninana amin'ny motera lahatsoratra teratany, ny dian-tongotra fitadidiana dia ampahany amin'ny safidy bitmap, ary ny rafi-pamokarana mifototra amin'ny shader dia manome fahafaha-mamorona izay tsy afaka mifanandrify amin'ny fomba efa namboarina mialoha. Na manao etikety amin'ny globe 3D ianao na miantoka fa ny angon-drakitra manan-danja amin'ny raharaham-barotra dia miseho tsara amin'ny efijery rehetra amin'ny fiainan'ny mpampiasa anao, fitaovana mendrika hofehezina ny endri-tsoratra SDF.

Fanontaniana matetika

Inona ny endritsoratra SDF ary nahoana no tokony hikarakara azy ireo ny mpamorona?

Ny endri-tsoratra Distance Field voasonia dia mitahiry ny sandan'ny halaviran'ny piksel tsirairay mankany amin'ny sisin'ny glyph akaiky indrindra, ahafahana mamadika lahatsoratra tsy miankina amin'ny fanapahan-kevitra. Tsy toy ny endri-tsoratra bitmap nentim-paharazana izay manjavozavo rehefa mi-scale, ny endri-tsoratra SDF dia mijanona ho mangatsiatsiaka amin'ny habeny na ny haavon'ny zoom. Izany no mahatonga azy ireo ho tena ilaina amin'ny seha-pifandraisana maoderina, UI lalao, ary izay fampiharana rehetra mikendry ny hatevin'ny efijery marobe — manomboka amin'ny fitaovana finday ka hatramin'ny mpanara-maso 4K sy ny sisa.

Ahoana ny fampitahana ny endritsoratra SDF amin'ny sarintany bitmap sy ny fandikana endri-tsoratra vetaveta?

Ny endri-tsoratra bitmap dia mila haingon-trano misaraka ho an'ny habe tsirairay, mandany fitadidiana lehibe nefa mbola mamokatra artifact rehefa mirefy. Ny endri-tsoratra Vector dia manome kalitao tonga lafatra nefa lafo amin'ny kajy raha rasterize amin'ny fotoana tena izy. Mifandanja tsara ny endri-tsoratra SDF — ny tora-pasika iray miendrika iray dia manome endrika tsara saika amin'ny ambaratonga rehetra miaraka amin'ny GPU faran'izay kely indrindra, ka mahatonga azy ireo ho safidy tsara indrindra ho an'ny fampiharana amin'ny fotoana tena izy toy ny lalao sy ny dashboard interactive.

Inona ny fitaovana sy tranomboky misy amin'ny famoronana endritsoratra SDF?

Safidy malaza dia ahitana ny msdfgen ho an'ny famokarana SDF maro-fantsona, Hiero ho an'ny fonosana endritsoratra bitmap miaraka amin'ny fanohanan'ny SDF, ary ireo kojakoja baikon'ny baiko misokatra. Ny ankamaroan'ny motera lalao toa ny Unity sy Godot dia misy fanohanana lahatsoratra SDF naorina. Ho an'ny orinasa manangana fampiharana manokana, ny sehatra toy ny Mewayz miaraka amin'ny OS fandraharahana 207-module manomboka amin'ny $19/mo dia afaka mampiditra ireo teknika famadihana ireo amin'ny traikefa nomerika marika.

Mety ve ny endritsoratra SDF afaka mitantana vokatra manokana toy ny rindran-damina, aloka, ary lahatsoratra mamirapiratra?

Tena — iray amin'ireo endritsoratra SDF matanjaka indrindra io. Satria hita ao amin'ny shader ny angona sahan'ny halavirana, dia azonao atao ny manampy rindran-damina, aloka mitete, hazavana malefaka, ary eny fa na dia ny voka-dratsiny aza amin'ny alàlan'ny fanitsiana fotsiny ny soatoavin'ny tokonam-baravarana. Ireo vokatra ireo dia saika tsy misy vidiny amin'ny fampisehoana satria tsy mitaky geometrika fanampiny na pass text, manome fahalalahana mamorona miavaka ny mpamorona nefa tsy manao sorona ny tahan'ny frame.