Uniform, tarayıcının yerleşim ve çizim düzenini 280 KB'lık bir araç setiyle WASM ve WebGPU ile değiştiriyor

Tarayıcıyı atlayan bir arayüz yığını

Uniform, GitHub üzerinde rkaehn/uniform adresinde yayınlanan ve Hacker News'in ana sayfasında Show HN gönderisi olarak öne çıkan açık kaynak bir proje; tarayıcının yerleşik metin, yerleşim ve çizim özelliklerini kendi uygulamasıyla değiştiriyor. Proje dokümantasyonuna göre, kitaplık üzerine kurulmuş eksiksiz bir web uygulaması sıkıştırıldığında 280 KB'ın altına iniyor; bu rakam araç setinin metin motorunu, yerleşim çözücüsünü ve GPU çizimcisini birlikte kapsıyor.

Çekirdek C ile yazıldı, shader'lar ise Slang gölgelendirme dilinde. Web'de bu çekirdek WebAssembly'ye derleniyor ve WebGPU üzerinden çizim yapıyor. iOS ve macOS'ta yerel kod olarak çalışıyor ve Metal ile çiziyor.

Yerleşim, metin ve şekiller

Yerleşim sistemi iki tekniği birleştiriyor. Ebeveyn ile çocuk arasındaki kısıtlar, çocuğun bir çapasının ebeveyndeki bir çapaya sabitlenmesi ve isteğe bağlı bir ofsetle ifade ediliyor. Stack'ler boşlukları, dolguları, hizalamayı ve dağıtımı yönetiyor; her çocuk kullanılabilir alanı doldurabilir, içeriğine sarılabilir ya da sabit bir boyutta kalabilir.

Yerleşim hesaplamaları sabit noktalı aritmetikle yürütülüyor ve kenarlar piksel sınırlarına hizalanarak hizalama ve boşlukların keskin kalması sağlanıyor. Metin dizgisi karakter düzeyinde bilgi sunuyor; böylece uygulama kendi seçim davranışını ya da karakter bazlı efektlerini kurabiliyor ve tek bir dizi içinde yazı tipi, boyut, kalınlık ve renk aralıklara göre değişebiliyor.

Çizim, her pikselin en yakın kenara uzaklığını ve ilgili normali bildiği signed distance field'lar etrafında örgütlenmiş. Dokümantasyon bunu; cam benzeri malzemelerde kenarlara yakın kırılma, bir şekil boyunca değişen bulanıklık, gerçekçi gölgeler ve birbirine karışan şekilleri mümkün kılan unsur olarak gösteriyor. Yuvarlatılmış dikdörtgenler konum, eğim, eğrilik ve eğriliğin değişim hızı bakımından sürekli eğriler kullanıyor; bu eğriler yumuşak biçimde kapsül ve daire şekline dönüşüyor ve keyfi çoklu çizgiler ile çokgenler için de kullanılabiliyorlar.

Hazır bileşen yok. Düğmeler sıfırdan kuruluyor; kaydırmalı listeler ve metin alanları gibi daha zor parçalar için kitaplık olay işleme, hareketler, fizik ve animasyon gibi iç mekanizmaları sağlıyor, geliştirici de hesaplanan sonuçları okuyup görselleri çiziyor.

Girdi ve görüntü

Girdi; dokunma, kalem, klavye ve fareyi kapsayan platformdan bağımsız bir katman üzerinden işleniyor, ham olaylar düğüm hiyerarşisine karşı hit-test ediliyor. Bir hareket sistemi bileşenlerin hangisinin davranacağını uzlaştırıyor; tap, uzun basma, pan ve pinch gibi paketle gelen hareketler, bir geliştiricinin kullanacağı aynı herkese açık API'ye göre yazıldığından özel hareketler eşit konumda.

Çizimci genişletilmiş dinamik aralığı destekliyor: renklerde, gradyanlarda ve görüntülerde 1.0'ın üstündeki değerler yetenekli ekranlarda daha parlak çiziliyor. Compositor yüksek bit derinliğinde çalışabiliyor ya da dithering uygulayabiliyor ve yüksek yenileme hızları destekleniyor.

Tek C çekirdeği üzerinde iki API

JavaScript API'si hızlı yinelemeye ayarlı: derleme adımı yok, değişiklikler anında görünüyor ve doğrudan C çekirdeğine çağrı yapılıyor. C API'si daha fazla performans sunuyor, statik bağlamayı destekliyor ve kitaplığın shader'lar dahil kaynaktan derlenmesi bir saniyenin altında sürüyor.

Paketlenmiş uygulamalar için runtime, JavaScript'i JavaScriptCore üzerinden yürütüyor; masaüstünde JIT ile derleniyor, mobilde yorumlanıyor ve dağıtım için bir runtime ile tek bir uygulama dosyası paketlenebiliyor, uygulama mağazaları dahil. Web'de runtime gerekmiyor çünkü kitaplık sayfayla birlikte doğrudan geliyor. C projeleri platform başına başlık dosyaları ve ikili arşiv alıyor; uygulama ve sunucusu tek bir bağımlılıksız çalıştırılabilir dosyada birleştirilebiliyor, böylece üretime güncelleme çıkarmak bir dosyayı kopyalamaya dönüşüyor.

Önizleme durumu

Uniform şu anda önizleme aşamasında: API değişebilir ve bazı özellikler tamamlanmadı. iOS, macOS ve web bugün destekleniyor; Windows, Linux ve Android planlanıyor, çizim Vulkan üzerinden yapılacak.

Neden önemli

Uniform, yerleşim, metin ve GPU çizimini birlikte kapsayan arayüz yığınının tamamının sıkıştırılmış 280 KB'ın altına sığdığını iddia ediyor; bu boyut birçok üretim web sitesinin JavaScript'inden daha küçük. Bu kompaktlık, araç setinin denetimindeki sabit noktalı yerleşim ve piksel hizalamasıyla birleşince her yerde aynı çizilen, tarayıcıların platformlar arası çizim farklılıklarını devre dışı bırakan arayüzler vaat ediyor.

Kitaplık uygulamayla birlikte, platformla değil geldiği için iyileştirmeler tarayıcı ya da işletim sistemi sürüm döngülerini beklemeksizin tüm kullanıcılara anında ulaşıyor. Ödünler de gerçek: DOM'u bırakmak tarayıcıların varsayılan olarak sağladığı semantiği, erişilebilirlik ağacını ve geliştirici araçlarını elden çıkarmak anlamına geliyor ve proje dokümantasyonu şu anda erişilebilirliğe değinmiyor. WebGPU zorunluluğu ayrıca bu uygulamaları çalıştırabilecek tarayıcı kümesini daraltıyor. Yine de, WebAssembly artı modern bir grafik API'sinin bir arayüzü ne kadar ileri taşıyabildiğinin bir gösterimi olarak, web ile yerel uygulamalar arasındaki sınırı izleyenler için dikkat çekici bir veri noktası.