Gerçek zamanlı vektör grafikler için Rive Renderer açık kaynağa geçti

 (rive.app)
2 puan yazan GN⁺ 2024-03-21 | 1 yorum | WhatsApp'ta paylaş
  • Rive, kendi geliştirdiği Rive Renderer'ı açık kaynak olarak yayımlayarak, Rive içeriği·animasyonları·runtime'ları için uyarlanmış tek bir render temelinin tüm platformlarda kullanılmasını sağladı
  • Renderer'ın hedefi, çok sayıda vektör grafik ve net metin çizerken bile 120fps animasyonu ve yüksek anti-aliasing kalitesini korumak
  • Daha önce Skia ve HTML Canvas API gibi birden fazla renderer'a bağımlıydı; bu yüzden bir backend'de olmayan özellikleri tüm platformlara sunmak zordu
  • Tek bir renderer sayesinde blur, drop shadow, glow, tapered stroke gibi efektler birden fazla runtime'a daha tutarlı biçimde eklenebiliyor
  • Uygulama, anti-aliased vektör yolları triangle patch'lere indirip GPU'nun paralel üçgen rasterizasyon pipeline'ından yararlanıyor; iOS·Android·Web'de etkinleştirilebiliyor ve Unity·Unreal runtime'larına zaten entegre edilmiş durumda

Rive Renderer'ın duyurulması ve geliştirilme arka planı

  • Rive Renderer, Rive içeriği, animasyonları ve runtime'ları için şirket içinde geliştirilen bir renderer'dır
  • Ekranda çok sayıda vektör grafik ve metin çizilen durumlarda bile 120fps animasyon ve temiz anti-aliasing kalitesini hedefler
  • Şirket içi geliştirme 2 yıl sürdü ve bu sayede, tasarımcının Rive Editor'da üretim yaptığı andan kullanıcının runtime'da görüp etkileşime geçtiği ana kadar tüm deneyim daha doğrudan kontrol edilebiliyor
  • Runtime'da hızlı çalışacak içeriklerin bilinçli olarak üretilmesine yönelik optimizasyonlar sayesinde, tasarımcılar performansın nasıl gerçekleştirileceğini daha az düşünerek üretime odaklanabiliyor

Çoklu renderer mimarisinin sınırları ve tek renderer'ın etkisi

  • İlk dönemde Rive, Skia ve HTML Canvas API gibi mevcut açık kaynak render çözümlerini kullanıyordu
  • Kullanıcının istediği renderer'ı kolayca bağlayabildiği bring-your-own-renderer yapısı desteklenmeye devam ediyor
  • Ancak tutarlı ve optimize edilmiş bir şirket içi renderer olmadan, ürün yol haritası ve yeni özellik geliştirme süreci platform bazlı kısıtlara bağlı kalıyordu
  • Birden fazla renderer kullanan yapıda, belirli bir özellik bir renderer'da yoksa Rive'ın çalıştığı tüm backend'lerde de çalışmadığından, o özelliği yayımlamak zorlaşıyordu
  • Tek bir renderer ile eklenmesi kolaylaşan efektler arasında blurs, drop shadows, glows, tapered strokes yer alıyor

Uygulama yöntemi ve platform desteği

  • Rive Renderer, anti-aliased vektör yolları özgün triangle patch'lere indirgeyen geometrik bir yaklaşıma dayanıyor
    • Masaüstü ve mobil GPU'larda yerleşik olan büyük ölçekli paralel üçgen rasterizasyon pipeline'ından yararlanıyor
    • Belirli bir triangulation yöntemiyle 3D donanım kullanarak Bézier eğrileri çiziyor
  • Üçüncü taraf renderer kullanımı mümkün olmaya devam etse de, Rive'a özgü özellikler ve genel deneyim için Rive Renderer kullanımı öneriliyor
  • iOS, Android ve Web'de resmi kılavuzu izleyerek Rive Renderer etkinleştirilebiliyor
  • Kodlar GitHub üzerinde yayımlandı; Unity ve Unreal runtime'larına entegre edilmiş durumda ve ek entegrasyonlar da planlanıyor

İlgili okumalar

1 yorum

 
GN⁺ 2024-03-21
Hacker News yorumları

  • Az önce GDC standındaydım; UI/UX tasarımcılarının oyunlarda daha fazla işi doğrudan kendilerinin yapmasını sağlayan bir program olarak gerçekten iyi görünüyordu.
    Genelde tasarımcı Figma’da birkaç gün çalışıp programcıya devreder; programcı da çeşitli nedenlerle bunun uygulanamayacağını söyler ve gidip gelmeler sürer.
    Unreal Engine’de AAA oyunlara uygun iyi bir UI framework’ünün eksik olması bunu daha da kötüleştiriyor; bu aracın iş akışı şimdiye kadar gördüklerimin en iyisi ve Unreal Engine ile Blueprints’e doğal biçimde bağlanıyor gibi görünüyor.
    Kişisel olarak, UI/UX tasarımcılarının programcı yardımı olmadan çalışabilmesini sağlayacak gibi göründüğü için beklentim yüksek. Oyun programcıları da genel olarak UI işleri yapmaktan hoşlanmaz.

    • Bir UI/UX tasarımcısı olsaydım oyun tarafında çalışmak isterdim. Üretkenlik yazılımlarında zaten derinlemesine yerleşmiş çok sayıda paradigma ve soyutlama var; bunları değiştirmeye kalkınca kullanıcılar söyleniyor. Oyunlarda ise yeni UI/UX kararları çoğu zaman rahatsızlıktan çok merakla karşılanıyor.
      Bunun, çalışmak için oturduğunuz andaki zihniyet ile oyun oynamak için oturduğunuz andaki zihniyet farkıyla açıklanabileceğini düşünüyorum.
    • Tasarım ile programlama arasındaki devir teslimin sıkıcı olduğuna katılıyorum, ama UMG’yi nerede yetersiz gördüğünüzü merak ediyorum. Alıştıktan sonra UI uygulamak bana epey eğlenceli gelmişti.
    • Bugünlerde Unreal Engine’in UI/UX’inin bu kadar kötüleşmiş olması üzücü. Kısa süre önce arkadaşlarımla UT99 oynadım; oyun içi UI’dan ayarlara ve sunucu tarayıcı menüsüne kadar her şeyin ne kadar güçlü, sezgisel ve esnek olduğuna yeniden şaşırdım.
      Modern sürümlerin berbat olduğunu bağıran yaşlı biri gibi hissettiğim neredeyse ilk andı.

  • GPU tesselation ile 2D vektör grafikleri render etme üzerine araştırmalar oldukça aktif; Raph Levien’in çalışmaları gibi bir çizgideki teknolojiyi gerçek bir ürün olarak sunmaları epey güzel.
    Rive’ı hiç kullanmadım; bu yüzden yalnızca havalı animasyonlar üretmeye mi yönelik, yoksa immediate mode GUI kütüphanesiyle yapılabilecek türden dinamik UI’lar da oluşturulabiliyor mu merak ediyorum.

  • Bu deneyi zaten Flash ile yapmadık mı diye düşünüyorum. Macromedia/Adobe oynatıcıyı ücretsiz dağıtıp araçlardan ücret alıyordu; Rive da oynatıcıyı açık kaynak yayımlayıp editörden ücret almak istiyor gibi görünüyor.
    Rive biraz farklı; Unity veya Unreal gibi başka platformları kullanan, örneğin sinematik gibi şeyleri gömmek isteyen oyun geliştiricilerini hedefliyor gibi.
    Yine de açık kaynak bir oynatıcının olması, Rive’ın tüm deneyimi kontrol etmek istediği anlamına geliyor; bu da Flash’ı akla getiriyor.

    • Flash harikaydı. Daha iyi bir Flash yapmak uzun zamandır ihtiyaçtı; Rive, yeni Flash’a yönelik iyi bir deneme gibi görünüyor.
    • İyi bir karşılaştırma; bunun yalnızca renderer olması da önemli. MIT lisansı ile yayımlanması sevindirici, ama uyumlu içerik üretmek için ne kadar açık kaynak araç olduğu ve mevcut araçların başka formatlarından dışa aktarma desteği oluşturmanın ne kadar kolay olacağı merak konusu.
    • Oynatıcı ve dosya biçimi açık olsaydı, üçüncü taraf araçların tersine mühendislik yapması gerekmeseydi Flash’ın ne kadar daha iyi olabileceğini düşündürüyor.
    • Eskiden Scaleform vardı ve Flash ile birlikte bırakılmış gibi görünüyor: https://en.wikipedia.org/wiki/Scaleform_GFx

  • Duyurulduğundan beri bekliyordum. Önceden Skia kullanıyordu ve tüm uygulama ile render çıktısı Flutter ile yapılmıştı. Artık Flutter’da, Skia’ya kıyasla Flutter’a özgü sorunlara daha iyi optimize edilmiş yeni render motoru Impeller var.
    Bir zamanlar Impeller ekibine Rive renderer’ı nasıl gördüklerini sorduğumda, vektör grafikler için mükemmel olduğunu ama Impeller’ın metni düzgün görüntüleme gibi UI ile ilgili render sorunlarını da ele alması gerektiğini, bu yüzden bire bir karşılaştırma konusu olmadığını söylemişlerdi.
    Bu renderer açık kaynak olduğuna göre iki ekibin birbirinden öğrenebilmesini umuyorum.

    • Yanılıyorsam düzeltin. Fontlar da zaten vektör grafik olarak render edilmiyor mu? TTF ve OTF vektör formatları değil mi?

  • Rive ürününü ve şirketini de seviyorum, açık kaynağı da seviyorum; ancak bu, içeriklerin Rive Editor ile oluşturulmasını gerektiren Rive runtime’ının bir parçası olan render soyutlama katmanının MIT lisansıyla yayımlanması.
    Açık kaynak yapmanın hedefini ve bunun etrafında nasıl daha büyük bir topluluk kurmak istediklerini merak ediyorum.
    Sadece renderer’ı benimseyerek fayda görebilecek başka projeler aklınıza geliyor mu, onu da merak ediyorum.

    • Görünüşe göre özel mülk editörle para kazanmaya devam ederken, dağıtım ve ekosistem oluşturma için açık kaynak renderer sunmak istiyorlar. Başkalarını bu renderer’ı hedeflemeye ikna edebilirlerse renderer ne kadar iyiyse o kadar avantajlı olur.
      Benim de ilgimi çekiyor. Şu anda canvasAPI ve pixi kullanıyorum; 16 ms’lik kare bütçesi içinde 2D çizimin sınırlarına sık sık çarpıyorum.
    • GitHub’a göre bu depoda renderer koduyla doğrudan nasıl arayüz kurulacağını gösteren örnekler bulunuyor.
      [0] https://github.com/rive-app/rive-renderer
    • Vektör grafik oluşturmak için mutlaka özel bir editöre ihtiyaç yok. Oyunlardan UI araç takımlarına kadar pek çok proje vektör grafik renderer’ına ihtiyaç duyar; Skia, Cairo ve şimdi Rive gibi kütüphaneler de bu yüzden var.
    • “Macromedia Flash olmamak” için akıllıca bir strateji gibi görünüyor.

  • Kişisel hobi projemde denemek isteyeceğim kadar gerçekten harika görünüyor
    moveTo, lineTo gibi bir ölçüde standartlaşmış bir Cairo/Skia/canvas/NanoVG API sunuluyor gibi; bu yüzden öğrenmek için çok büyük çaba gerektirmemesini umuyorum
    En azından burada lineTo görünüyor: https://github.com/rive-app/rive-renderer/blob/main/renderer...

  • Bu render performansının Skia veya Pathfinder ile karşılaştırıldığında nasıl olduğunu merak ediyorum. Pathfinder, donanım destekliyorsa yolları üçgenlere dönüştürme adımını GPU compute ile de işleyebiliyor
    Daha kapsamlı compute tabanlı 2D render yaklaşımı olarak Vello da var

    • Dikkatli bir benchmark yapmak isterim. Bu renderer yeterince rekabetçi görünüyor, ama anlamlı sonuçlar elde etmek için benchmark yapmak gerçekten zor
      İlk değerlendirmeme göre performans donanıma, özellikle de pixel local storage desteğine büyük ölçüde bağlı olacak gibi. Şimdiye kadar gördüğüm kadarıyla Apple Silicon ideal nokta. Tile bazlı binning ve sıralamayı donanım destekliyor; tile içinde fragment shader yürütmesini serileştirmek de iyi çalışıyor
      Diğer donanımlarda bu tür çağrı serileştirme maliyetinin çok daha yüksek olmasını beklerim
      Vello tarafında henüz derinlemesine benchmark yapmamış olmamızın nedenlerinden biri, performans hikâyesinin henüz tamamlanmamış olması. Şu anda cihaz atomik işlemleriyle bounding box toplama sorunu var; segment indirgeme için monoid kullanan prototip bir uygulama[2] ise epey daha iyi sonuçlar gösteriyor
      Ek olarak f16 işlemlerini kullanmayı planlıyoruz; bu özellikle mobilde büyük kazanç sağlayabilir. Birkaç prefix sum adımında subgroup kullanmayı planlıyoruz; subgroup'lar WebGPU'ya eklenme sürecinde[3]
      Genel olarak bu renderer'ın açık kaynak olarak yayımlanmasına seviniyorum; hızlı GPU vektör grafik render alanında hareketliliğin artması da güzel. Bir gün CPU yol render'ının çağın gerisinde kalmış sayıldığı bir geleceği görmek istiyorum; bu yayın da bizi o yöne biraz daha yaklaştırıyor
      [1]: https://dawn.googlesource.com/dawn/+/refs/heads/main/docs/da...
      [2]: https://github.com/linebender/vello/issues/259
      [3]: https://github.com/gpuweb/gpuweb/issues/4306
    • Kullanılan GPU teknolojisine ve depodaki committer adlarına bakınca, en azından hem Skia hem de Pathfinder ile rekabet edebileceğinden oldukça eminim. Vello'yu pek bilmiyorum
      Ne yaptığını bilen kişilerin seçtiği sağlam teknik tercihler gibi görünüyor; performansını ve kalitesini bizzat kontrol etmeye kesinlikle değer
      Bu GPU öncelikli renderer'ların yaklaşımları biraz farklı; kalite, performans, donanım/sürücü desteği ve entegrasyon zorluğu gibi çok boyutlu bir alanda her birinin en iyi olduğu bölgeler olması muhtemel. Dördünden biri hoşunuza gitmezse diğerlerine de bakmaya değer
    • Yeni benchmark'lar yapmak gerekiyor. İlk testlerden bu yana Rive Renderer daha da hızlandı: https://twitter.com/guidorosso/status/1595187838454140928
    • İncelediğim runtime uygulamalarından en az biri Skia üzerine kuruluydu. Birden fazla olası backend destekliyor gibi görünüyor

  • Kişisel olarak gerçekten sevindirici
    Yaklaşık son 6 aydır, yerel mobil uygulaması olan sağlık şirketlerinden derin oyun şirketleri ve ürünlerine kadar çeşitli müşterilerde Lottie ve eski çözümler yerine Rive benimsenmesini destekliyordum. Artık sonunda rayına oturduğunu ve “uygulamaya hazır” durumda olduğunu düşünüyorum
    Bu görüşmelerde potansiyel son endişe olarak kalan nokta, en yeni renderer'ın kapalı olması ve henüz nihai hâlinde olmamasıydı
    Bu karar ve Rive ekibinin genel çalışmaları sayesinde bu problem alanının ilerlemeye devam edeceğini düşünüyor ve heyecan duyuyorum. Gölge, blur gibi özellikler de çıktığında çok ilginç olacak

    • Temel bir soru olabilir ama neden Rive?
      Lottie bir dosya formatı olarak epey yerleşiyor, iş akışı da iyi oturmuş ve nispeten basit
      Rive neyi çok daha iyi yapıyor da özellikle zorlamaya değiyor, merak ediyorum

  • Depo: https://github.com/rive-app/rive-renderer

  • Bu sorun, kesin bir çözümü olmadan, onu çözmeye çalışan yazılımlar üretmeye devam ettiriyor gibi görünüyor.
    Biraz tuhaf olmasının nedeni şu: Piksel örnekleme fonksiyonu ve renk uzayı metriği verildiğinde, herhangi bir vektör grafik sahnesi için nesnel olarak doğru tek bir render vardır. Her çıkış piksel değeri, o fonksiyon ile sahnenin konvolüsyonuna en yakın temsil edilebilir renk olmalı; sahne R^2’den R’ye giden bir fonksiyon, renk de doğrusal bir renk sistemiyle temsil edilebilir.
    GPU compute ile, eğri tessellation’ı ya da eğrilerin kesin sembolik integrasyonunu sayısal olarak hesaplarken hata sınırlarını iyi ele alarak bunun başarılabilir göründüğünü düşünüyorum.
    Ayrıca böyle bir çözüm, daha hızlı render için yaklaşım seviyesini ayarlamayı da kolaylaştıracak gibi görünüyor.

    • Bence doğru bir tespit. 2D render oldukça iyi tanımlanmış durumda. Sorun, GPU ekosisteminin ezici karmaşıklığı.
      Yalnızca makul bir paralel bilgisayarımız olsaydı o kadar zor olmazdı; ama pratikte render mantığını, GPU altyapısının desteklediği hack yığınının belirli kombinasyonlarına uyarlamak gerekiyor ve bunların her birinin çok kendine özgü kısıtları ve ödünleşimleri var.
      Yakında çıkacak GPU dostu stroke genişletme makalesini seveceğinizi düşünüyorum. İşin özü, eğrinin belirli bir eğrilik metriği için kesin sembolik integrasyonu, hata sınırları olan sayısal bir yöntemle ele almak.
      Merak ediyorsanız bunu şu anda Vello main’deki shader/flatten.wgsl kodunda görebilirsiniz.
    • O halde doğrudan bir vektör grafik kütüphanesi yazmak gerekecek gibi.