SDF տառատեսակների ուղեցույց գրելը

Ինչու է տառատեսակի ցուցադրումը դեռ ավելի կարևոր, քան կարծում եք

Ձեր էկրանի յուրաքանչյուր պիքսելը պատմում է մի պատմություն, և ոչ մի տեղ դա այնքան ակնհայտ չէ, որքան այն, թե ինչպես է տեքստը վերարտադրվում սարքերի, լուծաչափերի և խոշորացման մակարդակներում: Ավանդական bitmap տառատեսակները մեզ լավ ծառայեցին ֆիքսված լուծաչափով մոնիտորների դարաշրջանում, սակայն բարձր DPI էկրանների, արձագանքող միջերեսների և իրական ժամանակի 3D հավելվածների պայթյունը բացահայտեց դրանց հիմնարար սահմանափակումները: Մուտքագրեք «Signed Distance Field» (SDF) տառատեսակները. մատուցման տեխնիկա, որը հանդարտորեն հեղափոխել է, թե ինչպես են ժամանակակից հավելվածները ցուցադրում հստակ, մասշտաբային տեքստ՝ առանց հիշողությունը փքելու կամ կատարողականը զոհաբերելու:

Անկախ նրանից, թե դուք կառուցում եք խաղի միջերես, տվյալների վահանակ կամ հաճախորդի առջև կանգնած հարթակ, որը պետք է հստակ տեսք ունենա ամեն ինչում՝ խելացի ժամացույցից մինչև 4K մոնիտոր, SDF տառատեսակների ըմբռնումը ձեզ լուրջ տեխնիկական առավելություն է տալիս: Այս ուղեցույցը բաժանում է հայեցակարգը առաջին սկզբունքներից, անցնում է սերնդի խողովակաշարով և առաջարկում գործնական խորհուրդներ SDF տառատեսակները ձեր սեփական նախագծերում ինտեգրելու համար:

Ի՞նչ է նշանակում ստորագրված հեռավորության դաշտը:

Ստորագրված հեռավորության դաշտը երկչափ հյուսվածք է, որտեղ յուրաքանչյուր պիքսել պահպանում է այդ կետից մինչև հոլովակի ուրվագծերի մոտակա եզրը: «Ստորագրված» մասը կարևոր է. պիքսելները գլիֆի սահմանի ներսում պահպանում են դրական արժեքներ, իսկ դրսում գտնվող պիքսելները պահում են բացասական արժեքներ (կամ հակառակը՝ կախված պայմանից): Սահմանն ինքնին նստում է զրոյական հատման վրա: Այս պարզ մաթեմատիկական ներկայացումը կոդավորում է արտասովոր քանակությամբ ձևի տեղեկատվություն կոմպակտ մոխրագույն մասշտաբի պատկերի մեջ:

Տեխնիկան տարածվեց Valve-ի 2007թ. SIGGRAPH թղթի միջոցով, որտեղ Քրիս Գրինը ցույց տվեց, որ 64x64 պիքսելից փոքր SDF հյուսվածքները կարող են ստեղծել տեքստ, որը մնում է կտրուկ ծայրահեղ խոշորացումների դեպքում. Հիմնական պատկերացումն այն է, որ GPU-ի ներկառուցված երկգծային ինտերպոլացիան, որը մշուշոտ արդյունքներ է տալիս սովորական bitmap տառատեսակների վրա, իրականում ապահովում է հարթ և ճշգրիտ հեռավորության ինտերպոլացիա SDF հյուսվածքների վրա:

Գործնական առումով, մեկ SDF տառատեսակի ատլասը (սովորաբար 512x512 կամ 1024x1024 պիքսել) կարող է պարունակել մի ամբողջ նիշերի հավաքածու, որը մաքուր կերպով արտացոլվում է գրեթե ցանկացած չափսով: Համեմատեք դա bitmap տառատեսակների մոտեցումների հետ, որոնք պահանջում են առանձին հյուսվածքային ատլասներ յուրաքանչյուր տառաչափի համար (16px, 24px, 32px, 48px և այլն), որոնք արագ սպառում են մեգաբայթ հյուսվածքային հիշողություն մեկ տառատեսակի համար:

Ինչպես են ստեղծվում SDF տառատեսակների ատլասները

Գեներացման խողովակաշարը սկսվում է վեկտորային տառատեսակի ֆայլից (TTF կամ OTF) և արտադրում է հյուսվածքային ատլաս, գումարած մետատվյալների ֆայլ, որը նկարագրում է յուրաքանչյուր հոլովակի դիրքը, չափը և չափումները: Բաց կոդով մի քանի գործիքներ կառավարում են այս գործընթացը, որոնցից ամենաշատ օգտագործվողներն են msdf-atlas-gen, Hiero (libGDX-ի մաս) և msdfgen: Գործընթացը ներառում է յուրաքանչյուր հոլովակի պատկերացում բարձր լուծաչափով, հեռավորության դաշտը հաշվարկելով՝ օգտագործելով ալգորիթմներ, ինչպիսիք են 8-բալանոց հաջորդական էվկլիդեսյան հեռավորության փոխակերպումը (8SSEDT), և այնուհետև արդյունքները փաթեթավորվում են մեկ հյուսվածքի մեջ:

Կան երեք հիմնական SDF տարբերակներ, որոնք դուք պետք է հասկանաք.

• Ստանդարտ SDF (մեկ ալիք). Պահպանում է հեռավորության մեկ արժեք յուրաքանչյուր պիքսելի համար: Ստեղծում է հարթ կորեր, բայց պայքարում է սուր անկյունների հետ, որոնք հակված են կլորացնել ավելի ցածր լուծաչափերով: Լավագույնը մարմնի տեքստի և իրավիճակների համար, որտեղ անկյունների թեթև փափկեցումը ընդունելի է:
• Բազմաալիք SDF (MSDF). Օգտագործում է երեք գունավոր ալիքներ (RGB)՝ տարբեր եզրային հատվածներից հեռավորության մասին տեղեկությունները կոդավորելու համար: Սա պահպանում է սուր անկյունները և նուրբ մանրամասները շատ ավելի լավ, քան մեկ ալիքով SDF-ն, ինչը այն դարձնում է նախընտրելի ընտրությունը շատ ժամանակակից ծրագրերի համար: Վիկտոր Չլումսկիի կողմից մշակված MSDF-ը դարձել է դե ֆակտո ստանդարտ:
• Բազմաալիք + True SDF (MTSDF). Ավելացնում է չորրորդ ալֆա ալիք, որը պարունակում է իրական հեռավորության դաշտ երեք MSDF ալիքների կողքին: Սա ապահովում է երկու աշխարհներից լավագույնը` MSDF-ի սուր անկյունները և իրական SDF-ից էֆեկտների ճշգրիտ հեռավորության մասին տեղեկատվություն` մի փոքր ավելի մեծ հյուսվածքների գնով:

Տիպիկ ստեղծման հրամանը, որն օգտագործում է msdf-atlas-gen, կարող է նշել տառաչափը 42 պիքսել, հեռավորությունը՝ 4 պիքսել, և հյուսվածքի չափը՝ 1024x1024: Հեռավորության տիրույթի պարամետրը վերահսկում է, թե որքան հեռավորության վրա է տարածվում գիֆի եզրից տարածության տեղեկատվությունը, որն ուղղակիորեն ազդում է ուրվագծերի, ստվերների և փայլի էֆեկտների առավելագույն որակի վրա, որոնք կարող եք կիրառել գործարկման ժամանակ:

The Fragment Shader. Where the Magic Happens

SDF տառատեսակների մատուցման կողմը նրբագեղ պարզ է: Ձեր բեկորների ստվերում դուք նմուշառում եք SDF հյուսվածքը, համեմատում հեռավորության արժեքը շեմի հետ (սովորաբար 0,5 հոլովակի եզրի համար) և օգտագործում հարթեցման ֆունկցիա՝ անցումը հակադարձելու համար: GLSL-ի հիմնական տրամաբանությունը նման է հետևյալին. նմուշառեք MSDF երեք ալիքների մեդիանը, հաշվարկեք էկրանի տարածության գրադիենտը ճիշտ հակաալիզացման համար, այնուհետև կիրառեք սահուն քայլ՝ վերջնական ալֆա արժեքը ստանալու համար:

SDF տառատեսակների իրական ուժը ոչ միայն լուծման անկախության մեջ է, այլ էֆեկտներ ավելացնելու չնչին արժեքի մեջ: Եզրագծերը, բացվող ստվերները, ներքին փայլերը և նույնիսկ 3D թեքությունները կարող են հաշվարկվել նույն ստվերային անցումով՝ պարզապես փորձարկելով տարբեր հեռավորության շեմերի համեմատ՝ առանց լրացուցիչ հյուսվածքների, առանց լրացուցիչ գծագրման, առանց նախապես թխված էֆեկտների շերտերի:

Հիմնական ուրվագծային էֆեկտի համար դուք փորձարկում եք երկու շեմ՝ մեկը եզրագծի արտաքին եզրին, մյուսը՝ ներքին լիցքի համար: Այս շեմերի միջև ընկած պիքսելները ստանում են ուրվագծի գույնը. ներսում պիքսելները ստանում են լրացման գույնը: Կաթիլային ստվերներն աշխատում են նույն կերպ. նմուշառումից առաջ շեղեք հյուսվածքի կոորդինատները, կիրառեք հարթեցման ավելի լայն շրջանակ և կազմեք ստվերը հիմնական հոլովակի հետևում: Այս գործողությունները ավելացնում են GPU-ի աննշան արժեքը, քանի որ դրանք զուտ թվաբանական գործողություններ են արդեն իսկ ընտրված հեռավորության արժեքի վրա:

Էկրանի տարածության հակաալիզացիան հատուկ ուշադրության է արժանի: Միամիտ իրականացումը օգտագործում է ֆիքսված հարթեցման լայնություն, որը ստեղծում է տեքստ, որը հիանալի տեսք ունի մեկ չափսի մեջ, բայց կամ չափազանց մշուշոտ կամ չափազանց անհարթ, մյուսների դեպքում: Ճիշտ մոտեցումը հաշվարկում է հարթեցման լայնությունը հեռավորության դաշտի էկրանի տարածության ածանցյալներից (օգտագործելով fwidth() GLSL-ում կամ ddx/ddy HLSL-ում): Սա ինքնաբերաբար հարմարեցնում է հակաալիզինգը ռենդերների ընթացիկ չափերին՝ ստեղծելով հետևողականորեն հստակ եզրեր՝ անկախ խոշորացման մակարդակից կամ դիտման հեռավորությունից:

Ընդհանուր որոգայթներ և ինչպես խուսափել դրանցից

Չնայած իրենց նրբագեղությանը, SDF տառատեսակները գալիս են գոթչաներով, որոնք կարող են հարվածել նույնիսկ փորձառու մշակողներին: Ամենատարածված խնդիրը ատլասի արտադրության ընթացքում հեռավորության անբավարար տիրույթն է: Եթե ​​հեռավորության միջակայքը չափազանց նեղ է, էֆեկտները, ինչպիսիք են հաստ ուրվագծերը կամ մեծ ստվերները, կտրուկ կկտրվեն կոդավորված տիրույթի եզրին: Լավ ընդհանուր կանոնն այն է, որ հեռավորության միջակայքը սահմանել առնվազն կրկնակի առավելագույն ազդեցության շառավիղից, որը նախատեսում եք օգտագործել՝ չափված ատլասի պիքսելներով:

Մեկ այլ հաճախակի խնդիր է հյուսվածքների զտումը: SDF-ի հյուսվածքները պետք է օգտագործեն երկգծային զտում. մոտակա հարևանով զտումը ոչնչացնում է ինտերպոլացիան, որը ստիպում է տեխնիկան աշխատել՝ արտադրելով բլոկ, կեղծ տեքստ: Այնուամենայնիվ, դուք պետք է անջատեք mipmapping SDF ատլասների համար, քանի որ mipmapped հեռավորության դաշտերը սխալ արդյունքներ են տալիս ավելի ցածր mip մակարդակներում, որտեղ հեռավոր հոլովակի եզրերը կարող են արյունահոսել միմյանց մեջ:

Kerning-ը և տեքստի դասավորությունը նույնպես ոլորտներ են, որտեղ մշակողները հաճախ կտրում են անկյունները: SDF ատլասը մշակում է արտապատկերումը, բայց տեքստի ճիշտ ձևավորումը՝ նիշերի տարածություն, միջուկային զույգեր, տողերի բարձրություն և երկկողմանի տեքստ, դեռ պահանջում է դասավորության շարժիչ: Գրադարանները, ինչպիսիք են HarfBuzz-ը կամ FreeType-ը, դա ճիշտ են վարվում: Տեքստի ճիշտ ձևավորումը բաց թողնելը՝ ի օգուտ պարզ ֆիքսված լայնության տարածության, ամենաարագ միջոցն է՝ ձեր տեքստի մատուցումը սիրողական տեսք հաղորդելու համար՝ անկախ նրանից, թե որքան մաքուր է ձեր SDF-ի ներդրումը:

1. Ստեղծեք առատաձեռն լուծաչափով: Մինչ SDF տառատեսակները գեղեցիկորեն նվազում են, սկսած ատլասի առնվազն 32-48 պիքսել հոլովակի չափից, պահպանվում են նուրբ մանրամասներ բարդ հոլովներում, ինչպիսիք են CJK նիշերը կամ դեկորատիվ սկրիպտները:
2. Օգտագործեք MSDF-ը մեկ ալիքով SDF-ի միջոցով, եթե հատուկ պատճառ չունեք դրա համար: Անկյունների ճշգրտության բարելավումը կտրուկ է, աննշան վերևումով:
3. Փորձարկեք ծայրահեղ չափսերով: Մշակեք ձեր տեքստը 8px և 200px չափերով: Նորմալ չափսերով անտեսանելի խնդիրները ծայրահեղության դեպքում ակնհայտ են դառնում:
4. Պրոֆիլի հյուսվածքային հիշողություն: Մեկ 1024x1024 MSDF ատլասը (RGB, 8 բիթ) սպառում է 3 ՄԲ GPU հիշողություն: Դա սովորաբար երկու բիթմապ տառատեսակի չափից պակաս է համարժեք որակով:
5. Նախապես հաշվարկեք հոլովակի քառակուսիները CPU-ի վրա: Գլիֆի քառակուսիները պարունակող գագաթային բուֆերը փոխվում է միայն այն ժամանակ, երբ փոխվում է տեքստի բովանդակությունը, այլ ոչ թե յուրաքանչյուր շրջանակ: Քեշել այն ագրեսիվ կերպով:

SDF տառատեսակներ արտադրության մեջ. իրական աշխարհի հավելվածներ

Խաղի շարժիչները հանգեցրին SDF տառատեսակների ընդունմանը, սակայն տեխնիկան տարածվել է խաղերից դուրս: Google Քարտեզները օգտագործում է SDF-ի կողմից մշակված պիտակներ իր քարտեզների ծածկույթների համար՝ թույլ տալով տեղանունները ընթեռնելի մնալ փողոցի մակարդակից մինչև մայրցամաքի մակարդակի խոշորացում՝ առանց վերափոխման: Mapbox GL-ն ամբողջությամբ հիմնված է SDF հոլովակների վրա՝ իր WebGL-ով մշակված քարտեզների համար, որոնք մատուցում են նախապես ստեղծված SDF ատլասի սալիկներ իր CDN-ից: Երկու դեպքում էլ SDF տառատեսակների լուծման անկախությունը վերացնում է խոշորացման մակարդակի ցուցադրման սխալների մի ամբողջ դաս:

Բիզնես հավելվածները հավասարապես շահում են: Ցանկացած հարթակ, որը ներկայացնում է դինամիկ տեքստը կտավի կամ WebGL համատեքստում՝ մտածողության վահանակներ, տվյալների վիզուալիզացիա, ինտերակտիվ հաշվետվություններ կամ թվային ցուցանակներ, անմիջապես առավելություններ է ստանում SDF-ի մատուցումից: Mewayz-ում, որտեղ բիզնեսները կառավարում են ամեն ինչ՝ սկսած հաշիվ-ապրանքագրերից մինչև վերլուծություն 207 ինտեգրված մոդուլների միջոցով, սարքերի միջև տեքստի հետևողական և արդյունավետ արտապատկերումը շքեղություն չէ, դա պահանջ է: Երբ ռեստորանի սեփականատերը ստուգում է իր ամրագրման վահանակը հեռախոսով, իսկ հաշվապահը ստուգում է նույն տվյալները 32 դյույմանոց մոնիտորի վրա, տեքստը պետք է լինի հավասարապես ընթեռնելի՝ առանց յուրաքանչյուր էկրանի խտության համար առանձին տառատեսակների առաքման:

WebGL էկոհամակարգը SDF տառատեսակներն ավելի հասանելի է դարձրել վեբ մշակողների համար: Գրադարանները, ինչպիսիք են three-mesh-ui-ը և troika-three-text-ը, ապահովում են MSDF-ի տեքստի արտապատկերում Three.js տեսարանների համար, մինչդեռ ցածր մակարդակի մշակողները կարող են կիրառել հատուկ SDF-ի արտապատկերում 100-ից պակաս ստվերային կոդով: Տեխնիկան նաև գտել է իր ճանապարհը դեպի բնիկ բջջային ծրագրավորում Flutter-ի նման շրջանակների միջոցով, որն օգտագործում է SDF-ի վրա հիմնված արտապատկերում իր հատուկ տեքստային շարժիչի համար:

Տեքստից այն կողմ. ուր են գնում SDF-ի տեխնիկան

Հեռավորության դաշտի հայեցակարգը տարածվում է տառատեսակի վերարտադրման սահմաններից դուրս: UI դիզայներները օգտագործում են SDF տեխնիկա՝ լուծաչափից անկախ պատկերակներ, ընդլայնվող վեկտորային ձևեր և նույնիսկ ընթացակարգային միջերեսի տարրեր, ինչպիսիք են կլորացված ուղղանկյունները՝ պիքսելային կատարյալ անկյուններով: Ատլասի վրա հիմնված նույն մոտեցումը, որը SDF տառատեսակները դարձնում է հիշողության արդյունավետությունը, հավասարապես վերաբերում է պատկերակների հավաքածուներին. մեկ 512x512 SDF ատլասը կարող է պարունակել հարյուրավոր պատկերակներ, որոնք կատարյալ կերպով արտացոլվում են ցանկացած չափի:

Հետազոտական սահմաններում ի հայտ են գալիս նեյրոնային ցանցի վրա հիմնված մոտեցումներ, որոնք սովորում են ստեղծել հեռավոր դաշտեր անմիջապես վեկտորային ուրվագծերից՝ պոտենցիալ առաջացնելով ավելի բարձր որակի արդյունքներ, քան ավանդական ալգորիթմական մեթոդները: Միևնույն ժամանակ, SDF հյուսվածքների օգտագործմամբ փոփոխական լայնությամբ հարվածների ցուցադրումը նոր հնարավորություններ է բացում գեղագրական և ձեռագիր տեքստային էֆեկտների համար, որոնք նախկինում անիրագործելի էին իրական ժամանակի ծրագրերում:

Ժամանակակից, բազմահարթակ հավելվածներ կառուցող ծրագրավորողների համար SDF տառատեսակները ներկայացնում են այն հազվագյուտ մեթոդներից մեկը, որտեղ ուսուցման ներդրումները շահաբաժիններ են տալիս գրեթե յուրաքանչյուր նախագծի համար: Վերարտադրման որակը մրցակցում է բնիկ տեքստային շարժիչներին, հիշողության հետքը բիթքարտեզի այլընտրանքների մի մասն է, և ստվերների վրա հիմնված էֆեկտների համակարգը ապահովում է ստեղծագործական ճկունություն, որը նախապես պատրաստված մոտեցումները պարզապես չեն կարող համապատասխանել: Անկախ նրանից, թե դուք պիտակներ եք ներկայացնում 3D գլոբուսում, թե երաշխավորում եք, որ բիզնեսի համար կարևոր տվյալները ճիշտ են ցուցադրվում ձեր օգտատերերի կյանքի յուրաքանչյուր էկրանին, SDF տառատեսակները գործիք են, որոնք արժե տիրապետել:

Հաճախակի տրվող հարցեր

Ի՞նչ են SDF տառատեսակները և ինչո՞ւ պետք է մշակողները հոգ տանեն դրանց մասին:

Ստորագրված հեռավորության դաշտի տառատեսակները պահում են հեռավորության արժեքները յուրաքանչյուր պիքսելից մինչև հոլովակի մոտակա եզրը՝ հնարավորություն տալով տեքստի լուծաչափից անկախ արտապատկերում: Ի տարբերություն ավանդական bitmap տառատեսակների, որոնք մշուշոտ են դառնում, երբ չափվում են, SDF տառատեսակները մնում են հստակ ցանկացած չափի կամ խոշորացման մակարդակում: Սա դրանք կարևոր է դարձնում ժամանակակից արձագանքող ինտերֆեյսների, խաղի միջերեսի և ցանկացած հավելվածի համար, որն ուղղված է էկրանի բազմակի խտությանը՝ շարժական սարքերից մինչև 4K մոնիտորներ և ավելին:

Ինչպե՞ս են SDF տառատեսակները համեմատվում ավանդական bitmap-ի և վեկտորային տառատեսակների հետ:

Bitmap տառատեսակները պահանջում են առանձին հյուսվածքներ յուրաքանչյուր չափսի համար, ինչը զգալի հիշողություն է սպառում, մինչդեռ մասշտաբով արտադրում է արտեֆակտ: Վեկտորային տառատեսակներն առաջարկում են կատարյալ որակ, բայց իրական ժամանակում ռաստերիզացնելու համար հաշվողականորեն թանկ են: SDF տառատեսակները իդեալական հավասարակշռություն են պահպանում. մեկ կոմպակտ հյուսվածքը գեղեցիկ տեսք է ստանում գրեթե ցանկացած մասշտաբով, նվազագույն GPU-ի գերբեռնվածությամբ, ինչը նրանց դարձնում է նախընտրելի ընտրություն իրական ժամանակի հավելվածների համար, ինչպիսիք են խաղերը և ինտերակտիվ վահանակները:

Ի՞նչ գործիքներ և գրադարաններ կան մատչելի SDF տառատեսակներ ստեղծելու համար:

Հանրաճանաչ ընտրանքները ներառում են msdfgen բազմալիք SDF-ի ստեղծման համար, Hiero-ն SDF-ի աջակցությամբ բիթքարտեզի տառատեսակների փաթեթավորման համար և բաց կոդով հրամանի տողի տարբեր կոմունալ ծառայություններ: Խաղային շարժիչների մեծ մասը, ինչպիսիք են Unity-ն և Godot-ը, ներառում են ներկառուցված SDF տեքստային աջակցություն: Հատուկ հավելվածներ ստեղծող ձեռնարկությունների համար այնպիսի հարթակներ, ինչպիսին է Mewayz-ն իր 207 մոդուլից բաղկացած բիզնես ՕՀ-ով, որը սկսվում է $19/ամսական արժեքից, կարող է ինտեգրել այս մատուցման տեխնիկան բրենդավորված թվային փորձառությունների մեջ:

Կարո՞ղ են SDF տառատեսակները մշակել հատուկ էֆեկտներ, ինչպիսիք են ուրվագծերը, ստվերները և փայլուն տեքստը:

Բացարձակապես, սա SDF տառատեսակների ամենամեծ ուժեղ կողմերից մեկն է: Քանի որ հեռավորության դաշտի տվյալները հասանելի են ստվերում, դուք կարող եք ավելացնել ուրվագծեր, բացվող ստվերներ, փափուկ փայլեր և նույնիսկ անիմացիոն էֆեկտներ՝ պարզապես կարգավորելով շեմային արժեքները: Այս էֆեկտները կատարողականում գրեթե ոչինչ չեն պահանջում, քանի որ դրանք չեն պահանջում լրացուցիչ երկրաչափություն կամ հյուսվածքային անցումներ՝ դիզայներներին տալով ստեղծագործական զգալի ազատություն՝ առանց կադրերի արագությունը զոհաբերելու: