SDF şriftlərinə bələdçi yazın

Niyə Şriftlərin göstərilməsi hələ də düşündüyünüzdən daha vacibdir

Ekranınızdakı hər piksel bir hekayə danışır və heç bir yerdə mətnin cihazlarda, təsvir ölçüsündə və böyütmə səviyyələrində necə göstərilməsindən daha aydın görünmür. Ənənəvi bitmap şriftləri sabit rezolyusiyaya malik monitorlar dövründə bizə yaxşı xidmət edirdi, lakin yüksək DPI displeylərin, həssas interfeyslərin və real vaxt rejimində 3D tətbiqlərinin partlaması onların əsas məhdudiyyətlərini üzə çıxardı. Signed Distance Field (SDF) şriftlərini daxil edin — müasir proqramların yaddaşı şişirtmədən və ya performansdan ödün vermədən xırtıldayan, genişlənə bilən mətni nümayiş etdirmə üsulunu səssizcə dəyişmiş göstərmə texnikası.

Ağıllı saatdan tutmuş 4K monitora kimi hər şeydə ülgüc kimi görünməli olan oyun interfeysi, verilənlər paneli və ya müştəri ilə üzbəüz platforma qurursunuz, SDF şriftlərini başa düşmək sizə ciddi texniki üstünlük verir. Bu bələdçi konsepsiyanı ilk prinsiplərdən ayırır, generasiya xəttini gəzir və SDF şriftlərini öz layihələrinizə inteqrasiya etmək üçün praktiki məsləhətlər təklif edir.

İmzalanmış Məsafə Sahəsi Dəqiq Nədir?

İmzalanmış Məsafə Sahəsi hər bir pikselin həmin nöqtədən qlif konturunun ən yaxın kənarına qədər olan məsafəni saxladığı iki ölçülü fakturadır. "İmzalanmış" hissə vacibdir: qlif sərhədindəki piksellər müsbət dəyərləri saxlayır, kənardakı piksellər isə mənfi dəyərləri saxlayır (və ya əksinə, konvensiyadan asılı olaraq). Sərhədin özü sıfır keçiddə oturur. Bu sadə riyazi təsvir fövqəladə miqdarda forma məlumatını yığcam boz rəngli təsvirə kodlaşdırır.

Texnika Valve-nin 2007-ci il SIGGRAPH kağızı ilə populyarlaşdı, burada Chris Green nümayiş etdirdi ki, 64x64 piksel kimi kiçik SDF teksturaları həddindən artıq böyütmələrdə kəskin qalan mətn yarada bilər - ənənəvi rasterləşdirmə ilə əldə etmək üçün 4096x4096 bitmap tələb edən nəticələr. Əsas fikir ondan ibarətdir ki, adi bitmap şriftlərində bulanıq nəticələr verən GPU-nun daxili ikixətli interpolasiyası əslində SDF teksturalarında hamar və dəqiq məsafə interpolasiyası yaradır.

Praktik baxımdan, tək bir SDF şrift atlası - adətən 512x512 və ya 1024x1024 piksel - demək olar ki, istənilən ölçüdə təmiz göstərən bütün simvol dəstini ehtiva edə bilər. Bunu hər bir şrift ölçüsü (16px, 24px, 32px, 48px və s.) üçün ayrıca tekstura atlasları tələb edən, tək şrift üçün meqabayt faktura yaddaşını tez sərf edən bitmap şrift yanaşmaları ilə müqayisə edin.

SDF Şrift Atlasları Necə Yaradılır

Nesil boru xətti vektor şrift faylı (TTF və ya OTF) ilə başlayır və hər bir qlifin mövqeyini, ölçüsünü və ölçülərini təsvir edən tekstura atlası və metadata faylı yaradır. Bir neçə açıq mənbə alətləri bu prosesi idarə edir, bunlardan ən çox istifadə edilənlər msdf-atlas-gen, Hiero (libGDX-in bir hissəsi) və msdfgendir. Proses hər bir qlifi yüksək ayırdetmədə rasterləşdirməyi, 8 nöqtəli ardıcıl Evklid məsafəsi çevrilməsi (8SSEDT) kimi alqoritmlərdən istifadə edərək məsafə sahəsinin hesablanmasını və sonra nəticələrin vahid fakturaya yığılmasını əhatə edir.

Anlamalı olduğunuz üç əsas SDF variantı var:

• Standart SDF (tək kanallı): Hər piksel üçün bir məsafə dəyərini saxlayır. Hamar əyrilər yaradır, lakin aşağı ayırdetmələrdə yuvarlaqlaşmağa meylli olan kəskin künclərlə mübarizə aparır. Əsas mətn və künclərin yüngül yumşaldılmasının məqbul olduğu vəziyyətlər üçün ən yaxşısıdır.
• Çox kanallı SDF (MSDF): Müxtəlif kənar seqmentlərdən məsafə məlumatını kodlaşdırmaq üçün üç rəngli kanaldan (RGB) istifadə edir. Bu, iti küncləri və incə detalları tək kanallı SDF-dən daha yaxşı qoruyur, bu da onu əksər müasir tətbiqlər üçün üstünlük təşkil edir. Viktor Çlumski tərəfindən hazırlanmış MSDF faktiki standarta çevrilmişdir.
• Çox kanallı + Əsl SDF (MTSDF): Üç MSDF kanalı ilə yanaşı həqiqi məsafə sahəsini ehtiva edən dördüncü alfa kanalı əlavə edir. Bu, hər iki dünyanın ən yaxşısını təmin edir - MSDF-dən kəskin künclər və həqiqi SDF-dən effektlər üçün dəqiq məsafə məlumatı - bir qədər böyük teksturalar hesabına.

Msdf-atlas-gen istifadə edən tipik nəsil əmri 42 piksel şrift ölçüsü, 4 piksel məsafə diapazonu və 1024x1024 tekstura ölçüsünü təyin edə bilər. Məsafə diapazonu parametri məsafə məlumatının qlif kənarından nə qədər uzağa uzanmasına nəzarət edir ki, bu da icra zamanı tətbiq edə biləcəyiniz konturların, kölgələrin və parıltı effektlərinin maksimum keyfiyyətinə birbaşa təsir edir.

Fraqment şaderi: Sehrinin baş verdiyi yer

SDF şriftlərinin göstərilmə tərəfi nəfis şəkildə sadədir. Fraqment şaderinizdə siz SDF fakturasını nümunə götürürsünüz, məsafə dəyərini eşik həddi ilə müqayisə edirsiniz (adətən qlifin kənarı üçün 0,5) və keçidi antialias etmək üçün hamarlama funksiyasından istifadə edirsiniz. GLSL-də əsas məntiq belə görünür: üç MSDF kanalının medianı nümunə götürün, düzgün antialiasing üçün ekran-məkan məsafəsi gradientini hesablayın, sonra yekun alfa dəyərini yaratmaq üçün hamar addım funksiyasını tətbiq edin.

SDF şriftlərinin əsl gücü təkcə rezolyusiyadan müstəqillikdə deyil, həm də effektlərin əlavə edilməsinin cüzi qiymətindədir. Konturlar, kölgələr, daxili parıltılar və hətta 3D əyilmələri müxtəlif məsafə hədlərinə qarşı sadəcə sınaqdan keçirməklə eyni şeyder keçidində hesablana bilər – əlavə fakturalar, əlavə çəkiliş çağırışları, əvvəlcədən hazırlanmış effektli təbəqələr yoxdur.

Əsas kontur effekti üçün siz iki həddi sınayırsınız: biri konturun xarici kənarı üçün, biri isə daxili doldurma üçün. Bu həddlər arasında düşən piksellər kontur rəngini alır; daxili piksellər dolğun rəng alır. Açılan kölgələr eyni şəkildə işləyir - nümunə götürməzdən əvvəl faktura koordinatlarını dəyişdirin, daha geniş hamarlama diapazonu tətbiq edin və kölgəni əsas qlifin arxasında birləşdirin. Bu əməliyyatlar cüzi GPU dəyəri əlavə edir, çünki onlar artıq seçilmiş məsafə dəyəri üzərində sırf hesab əməliyyatlarıdır.

Ekran boşluğunun antialiasing xüsusi diqqətə layiqdir. Sadə bir tətbiq sabit hamarlama genişliyindən istifadə edir ki, bu da bir ölçüdə əla görünən, lakin digərlərində çox bulanıq və ya çox cızıqlı mətn yaradır. Düzgün yanaşma məsafə sahəsinin ekran-məkan törəmələrindən hamarlama enini hesablayır (GLSL-də fwidth() və ya HLSL-də ddx/ddy istifadə edərək). Bu avtomatik olaraq antialiasingi cari render ölçüsünə uyğunlaşdırır, böyütmə səviyyəsindən və ya baxış məsafəsindən asılı olmayaraq ardıcıl olaraq kəskin kənarlar yaradır.

Ümumi tələlər və onlardan necə qaçınmaq olar

Zərifliklərinə baxmayaraq, SDF şriftləri hətta təcrübəli tərtibatçıları da sındıra bilən qovluqlarla gəlir. Ən çox rast gəlinən problem atlas generasiyası zamanı məsafə diapazonunun qeyri-kafi olmasıdır. Məsafə diapazonu çox dardırsa, qalın konturlar və ya böyük kölgələr kimi effektlər kodlaşdırılmış diapazonun kənarında kəskin şəkildə kəsiləcək. Yaxşı bir qayda, məsafə diapazonunu istifadə etməyi planlaşdırdığınız maksimum effekt radiusunun atlas pikselləri ilə ölçülən ən azı iki qatına təyin etməkdir.

Digər tez-tez rast gəlinən problem faktura filtrləməsidir. SDF teksturaları ikixəttli filtrdən istifadə etməlidirlər - ən yaxın qonşu filtri bloklu, ləqəbli mətn istehsal edərək texnikanın işləməsini təmin edən interpolyasiyanı məhv edir. Bununla belə, SDF atlasları üçün mipmappingi deaktiv etməlisiniz, çünki mipmapped məsafə sahələri uzaq qlif kənarlarının bir-birinə axdığı daha aşağı mip səviyyələrində yanlış nəticələr verir.

Kerninq və mətn tərtibatı həm də tərtibatçıların tez-tez küncləri kəsdiyi sahələrdir. SDF atlası renderlə məşğul olur, lakin mətnin düzgün formalaşdırılması - simvol intervalı, kerning cütləri, sətir hündürlüyü və iki istiqamətli mətn - hələ də tərtibat mühərriki tələb edir. HarfBuzz və ya FreeType kimi kitabxanalar bunu düzgün idarə edir. Sadə sabit enli intervalın xeyrinə düzgün mətn formasını atlamaq, SDF tətbiqinizin nə qədər təmiz olmasından asılı olmayaraq, mətn renderinizin həvəskar görünməsinin yeganə ən sürətli yoludur.

1. Böyük ayırdetmə ilə yaradın. SDF şriftləri gözəl şəkildə kiçilsə də, atlasda ən azı 32-48 piksel qlif ölçüsündən başlayaraq CJK simvolları və ya dekorativ skriptlər kimi mürəkkəb qliflərdə incə detalları qoruyur.
2. Xüsusi səbəbiniz yoxdursa, tək kanallı SDF üzərində MSDF istifadə edin. Künc dəqiqliyinin yaxşılaşması cüzi bir yüklə dramatikdir.
3. Həddindən artıq ölçülərdə sınaqdan keçirin. İnkişaf zamanı mətninizi 8px və 200px-də göstərin. Normal ölçülərdə görünməyən problemlər həddindən artıq dərəcədə aydın olur.
4. Profil faktura yaddaşı. Tək 1024x1024 MSDF atlası (RGB, 8-bit) 3 MB GPU yaddaşını sərf edir. Bu, adətən ekvivalent keyfiyyətdə iki bitmap şrift ölçüsündən azdır.
5. CPU-da qlif kvadlarını əvvəlcədən hesablayın. Yerləşdirilmiş qlif kvadlarını ehtiva edən vertex buferi hər çərçivədə deyil, yalnız mətn məzmunu dəyişdikdə dəyişir. Onu aqressiv şəkildə keş edin.

İstehsalda SDF Şriftləri: Real Dünya Tətbiqləri

Oyun mühərrikləri SDF şriftlərinin mənimsənilməsinə səbəb oldu, lakin bu texnika oyundan çox uzaqlara yayıldı. Google Xəritə xəritə örtükləri üçün SDF-də göstərilən etiketlərdən istifadə edir, yer adlarını yenidən rasterləşdirmədən küçə səviyyəli böyütmədən qitə səviyyəli böyütməyə qədər oxunaqlı qalmağa imkan verir. Mapbox GL CDN-dən əvvəlcədən yaradılmış SDF atlas plitələrinə xidmət edərək, WebGL-də göstərilən xəritələri üçün tamamilə SDF qliflərinə əsaslanır. Hər iki halda, SDF şriftlərinin ayırdetmə qabiliyyətindən asılı olmayaraq, böyütmə səviyyəsində göstərmə xətalarının bütün sinfini aradan qaldırır.

Biznes tətbiqləri eyni dərəcədə faydalanır. Dinamik mətni kətan və ya WebGL kontekstində təqdim edən hər hansı platforma – hesab panelləri, məlumat vizualizasiyaları, interaktiv hesabatlar və ya rəqəmsal işarələr – SDF-nin göstərilməsindən dərhal üstünlüklər qazanır. Müəssisələrin 207 inteqrasiya olunmuş modul üzrə fakturadan tutmuş analitikaya qədər hər şeyi idarə etdiyi Mewayz-də cihazlar arasında ardıcıl və performanslı mətnin göstərilməsi lüks deyil – bu, tələbdir. Restoran sahibi telefonda rezervasiya panelini yoxlayanda və mühasib eyni məlumatları 32 düymlük monitorda nəzərdən keçirdikdə, mətn hər ekran sıxlığı üçün ayrıca şrift aktivləri göndərilmədən eyni dərəcədə oxunaqlı olmalıdır.

WebGL ekosistemi SDF şriftlərini veb tərtibatçıları üçün getdikcə daha çox əlçatan etdi. three-mesh-ui və troy-three-text kimi kitabxanalar Three.js səhnələri üçün açılan MSDF mətn renderini təmin edir, aşağı səviyyəli tərtibatçılar isə 100 sətirdən az şeyder kodu ilə fərdi SDF renderini həyata keçirə bilərlər. Texnika həmçinin fərdi mətn mühərriki üçün SDF əsaslı renderdən istifadə edən Flutter kimi çərçivələr vasitəsilə yerli mobil inkişafa yol tapıb.

Mətndən kənar: SDF Texnikaları Haradadır

Məsafə sahəsi konsepsiyası şriftlərin göstərilməsindən xeyli kənara çıxır. UI dizaynerləri qətnamədən asılı olmayan nişanlar, miqyaslana bilən vektor formaları və hətta piksel mükəmməl küncləri olan dairəvi düzbucaqlılar kimi prosessual UI elementləri yaratmaq üçün SDF üsullarından istifadə edirlər. SDF şriftlərini yaddaşda səmərəli edən eyni atlas əsaslı yanaşma eyni dərəcədə ikona dəstlərinə də aiddir — tək 512x512 SDF atlası istənilən ölçüdə mükəmməl şəkildə əks olunan yüzlərlə ikonadan ibarət ola bilər.

Tədqiqat sahəsində neyroşəbəkə əsaslı yanaşmalar yaranır ki, onlar birbaşa vektor konturlarından məsafə sahələri yaratmağı öyrənir və potensial olaraq ənənəvi alqoritmik metodlardan daha yüksək keyfiyyətli nəticələr verir. Eyni zamanda, SDF teksturalarından istifadə edərək dəyişən enli ştrixin göstərilməsi əvvəllər real vaxt tətbiqlərində praktiki olmayan xəttatlıq və əlyazma mətn effektləri üçün yeni imkanlar açır.

Müasir, çox platformalı proqramlar quran tərtibatçılar üçün SDF şriftləri öyrənmə sərmayəsinin demək olar ki, hər bir layihə üzrə dividendlər ödədiyi nadir üsullardan birini təmsil edir. Göstərmə keyfiyyəti yerli mətn mühərrikləri ilə rəqabət aparır, yaddaş izi bitmap alternativlərinin bir hissəsini təşkil edir və şeyder əsaslı effekt sistemi əvvəlcədən hazırlanmış yanaşmaların sadəcə uyğun gəlməyəcəyi yaradıcı çeviklik təmin edir. İstər 3D qlobusda etiketlər təqdim edirsiniz, istərsə də istifadəçilərinizin həyatında hər bir ekranda biznes üçün kritik məlumatların düzgün göstərilməsini təmin edirsinizsə, SDF şriftləri mənimsəməyə dəyər bir vasitədir.

Tez-tez verilən suallar

SDF şriftləri nədir və tərtibatçılar onlara nə üçün əhəmiyyət verməlidirlər?

İmzalanmış Məsafə Sahəsi şriftləri hər pikseldən ən yaxın qlif kənarına qədər məsafə dəyərlərini saxlayır, bu da ayırdetmədən asılı olmayan mətn renderinə imkan verir. Ölçəkləndikdə bulanıqlaşan ənənəvi bitmap şriftlərindən fərqli olaraq, SDF şriftləri istənilən ölçüdə və ya böyütmə səviyyəsində xırtıldayan qalır. Bu, onları müasir cavab verən interfeyslər, oyun istifadəçi interfeysi və mobil cihazlardan tutmuş 4K monitorlara və daha çox ekran sıxlığını hədəfləyən istənilən tətbiq üçün vacib edir.

SDF şriftləri ənənəvi bitmap və vektor şrift göstərilməsi ilə necə müqayisə olunur?

Bitmap şriftləri hər ölçü üçün ayrı-ayrı teksturalar tələb edir, əhəmiyyətli yaddaş sərf edir, eyni zamanda miqyaslı zaman artefaktlar yaradır. Vektor şriftləri mükəmməl keyfiyyət təklif edir, lakin real vaxtda rasterləşdirmə üçün hesablama baxımından bahalıdır. SDF şriftləri ideal tarazlıq yaradır — vahid kompakt tekstura minimal GPU yükü ilə demək olar ki, istənilən miqyasda gözəl təqdim edir və bu, onları oyunlar və interaktiv idarə panelləri kimi real vaxt proqramları üçün üstünlük təşkil edir.

SDF şriftləri yaratmaq üçün hansı alətlər və kitabxanalar mövcuddur?

Məşhur seçimlərə çox kanallı SDF istehsalı üçün msdfgen, SDF dəstəyi ilə bitmap şrift qablaşdırması üçün Hiero və müxtəlif açıq mənbəli əmr xətti utilitləri daxildir. Unity və Godot kimi əksər oyun mühərriklərində daxili SDF mətn dəstəyi var. Fərdi tətbiqlər yaradan bizneslər üçün ayda $19-dan başlayan 207 modullu biznes ƏS ilə Mewayz kimi platformalar bu təqdimetmə üsullarını markalı rəqəmsal təcrübələrə inteqrasiya edə bilər.

SDF şriftləri konturlar, kölgələr və parlaq mətn kimi xüsusi effektləri idarə edə bilərmi?

Mütləq — bu, SDF şriftlərinin ən güclü tərəflərindən biridir. Məsafə sahəsi məlumatları şeyderdə mövcud olduğundan, sadəcə həddi tənzimləməklə konturlar, kölgələr, yumşaq parıltılar və hətta animasiya effektləri əlavə edə bilərsiniz. Bu effektlər performans baxımından demək olar ki, heç bir xərc tələb etmir, çünki onlar əlavə həndəsə və ya tekstura keçidlərinə ehtiyac duymur, bu da dizaynerlərə kadr sürətlərini itirmədən gözəl yaradıcılıq azadlığı verir.