- Rive merilis Rive Renderer buatannya sendiri sebagai open source, sehingga satu fondasi rendering yang disesuaikan untuk konten, animasi, dan runtime Rive dapat digunakan di semua platform
- Tujuan renderer ini adalah mempertahankan animasi 120fps dan kualitas antialiasing tinggi sambil menggambar banyak grafis vektor dan teks yang tajam
- Sebelumnya, Rive bergantung pada beberapa renderer seperti Skia dan HTML Canvas API, sehingga fitur yang tidak tersedia di salah satu backend sulit dirilis ke seluruh platform
- Berkat satu renderer, efek seperti blur, drop shadow, glow, tapered stroke dapat ditambahkan secara lebih konsisten ke berbagai runtime
- Implementasinya mereduksi path vektor yang sudah di-antialias menjadi patch segitiga dan memanfaatkan pipeline rasterisasi segitiga paralel GPU; dapat diaktifkan di iOS, Android, dan Web, serta sudah terintegrasi di runtime Unity dan Unreal
Perilisan Rive Renderer dan latar belakang pembuatannya
- Rive Renderer adalah renderer yang dibuat sendiri untuk konten, animasi, dan runtime Rive
- Renderer ini menargetkan animasi 120fps dan kualitas antialiasing yang bersih, bahkan saat menggambar banyak grafis vektor dan teks di layar
- Pengembangan internalnya memakan waktu 2 tahun, dan memungkinkan Rive mengontrol pengalaman secara lebih langsung, mulai dari saat desainer membuatnya di Rive Editor hingga saat pengguna melihat dan berinteraksi dengannya di runtime
- Dengan mengoptimalkan agar hanya menghasilkan konten yang memang dapat berjalan cepat di runtime, desainer bisa lebih fokus pada proses kreasi tanpa terlalu memikirkan cara implementasi performanya
Keterbatasan struktur multi-renderer dan dampak satu renderer
- Pada awalnya Rive menggunakan solusi rendering open source yang sudah ada seperti Skia dan HTML Canvas API
- Struktur bring-your-own-renderer, yang memungkinkan pengguna dengan mudah menghubungkan renderer pilihan mereka sendiri, akan tetap didukung
- Namun tanpa renderer sendiri yang konsisten dan teroptimasi, roadmap produk dan pengembangan fitur baru mau tidak mau terikat pada batasan per platform
- Dalam struktur yang memakai beberapa renderer, ketika suatu fitur tidak ada di salah satu renderer, fitur tersebut tidak berjalan di semua backend tempat Rive dijalankan, sehingga sulit untuk merilis fitur itu
- Efek yang menjadi lebih mudah ditambahkan dengan satu renderer mencakup blurs, drop shadows, glows, tapered strokes, dan lainnya
Cara implementasi dan dukungan platform
- Rive Renderer didasarkan pada pendekatan geometris yang mereduksi path vektor yang sudah di-antialias menjadi patch segitiga unik
- Renderer ini memanfaatkan pipeline rasterisasi segitiga paralel berskala besar yang tersedia secara native di GPU desktop dan mobile
- Dengan metode triangulasi tertentu, renderer ini menggunakan hardware 3D untuk menggambar kurva Bézier
- Penggunaan renderer pihak ketiga tetap dimungkinkan, tetapi untuk fitur khas Rive dan pengalaman keseluruhan, penggunaan Rive Renderer direkomendasikan
- Di iOS, Android, dan Web, Rive Renderer dapat diaktifkan dengan mengikuti panduan resmi
- Kodenya tersedia di GitHub, sudah terintegrasi ke runtime Unity dan Unreal, dan integrasi tambahan juga direncanakan
1 komentar
Komentar Hacker News
Saya baru saja berada di booth GDC, dan ini terlihat sangat bagus sebagai program yang memungkinkan desainer UI/UX melakukan lebih banyak hal sendiri di game
Biasanya desainer bekerja beberapa hari di Figma lalu menyerahkannya ke programmer, kemudian programmer menjawab bahwa implementasinya tidak mungkin karena berbagai alasan, dan bolak-balik itu terus berlanjut
Ini makin parah karena Unreal Engine kekurangan framework UI yang bagus untuk game AAA, tetapi alur kerja alat ini adalah yang terbaik yang pernah saya lihat sejauh ini dan tampaknya menyatu secara alami dengan Unreal Engine dan Blueprints
Secara pribadi saya sangat menantikannya karena desainer UI/UX tampaknya bisa bekerja tanpa bantuan programmer. Programmer game juga umumnya tidak suka mengerjakan UI
Ini tampaknya bisa dijelaskan oleh perbedaan pola pikir saat duduk untuk bekerja dan saat duduk untuk bermain game
Itu hampir menjadi momen pertama saya merasa seperti orang tua yang berteriak bahwa versi modernnya sangat buruk
Riset untuk merender grafis vektor 2D dengan tessellation GPU sedang aktif, dan cukup keren melihat teknologi sejenis karya Raph Levien diwujudkan sebagai produk nyata
Saya belum pernah memakai Rive, jadi penasaran apakah ini hanya untuk membuat animasi keren, atau juga bisa membuat UI dinamis seperti yang mungkin dibuat sebagai library GUI immediate mode
https://rive.app/game-ui
https://rive.app/blog/how-age-of-learning-uses-rive-to-a-b-t...
Saya pernah membuat UI yang cukup kompleks dengan Rive, tetapi belum mengeksplorasi area seperti menambahkan elemen secara terprogram berdasarkan event eksternal atau mengubah teks UI
Rasanya eksperimen ini sudah pernah dicoba dengan Flash. Macromedia/Adobe merilis player secara gratis dan mengenakan biaya untuk tool-nya, dan Rive juga tampak ingin membuka player sebagai open source lalu mengenakan biaya untuk editornya
Rive memang sedikit berbeda karena tampaknya menargetkan developer game yang memakai platform lain seperti Unity atau Unreal, misalnya pihak yang ingin menyematkan sesuatu seperti sinematik
Meski begitu, adanya player open source berarti Rive ingin menguasai seluruh pengalaman, jadi mengingatkan pada Flash
Saya sudah menunggu ini sejak diumumkan. Sebelumnya mereka memakai Skia, dan seluruh aplikasi serta output rendering dibuat dengan Flutter. Kini Flutter memiliki engine rendering baru, Impeller, yang lebih dioptimalkan untuk masalah khusus Flutter dibanding Skia
Ketika dulu saya bertanya kepada tim Impeller bagaimana mereka memandang renderer Rive, mereka mengatakan bahwa renderer itu bagus untuk grafis vektor, tetapi Impeller juga harus menangani masalah rendering terkait UI seperti menampilkan teks dengan benar, jadi keduanya bukan perbandingan satu banding satu
Karena renderer ini sekarang menjadi open source, saya berharap kedua tim bisa saling belajar
Saya menyukai produk dan perusahaan Rive, dan juga menyukai open source, tetapi ini adalah lapisan abstraksi rendering bagian dari runtime Rive yang kontennya harus dibuat dengan Rive Editor, dan kini dirilis dengan lisensi MIT
Saya penasaran apa tujuan open source-nya, dan komunitas lebih besar seperti apa yang ingin mereka bangun di sekelilingnya
Saya juga penasaran apakah ada proyek lain yang bisa diuntungkan hanya dengan mengadopsi renderer ini
Secara pribadi saya juga tertarik. Saat ini saya memakai canvasAPI dan pixi, dan sering membentur batas menggambar 2D dalam anggaran frame 16 ms
[0] https://github.com/rive-app/rive-renderer
Terlihat sangat keren sampai-sampai ingin saya coba untuk proyek hobi pribadi
Sepertinya disediakan Cairo/Skia/canvas/NanoVG API yang sudah cukup terstandardisasi seperti moveTo, lineTo, jadi saya berharap tidak butuh banyak usaha untuk mempelajarinya
Setidaknya lineTo terlihat di sini: https://github.com/rive-app/rive-renderer/blob/main/renderer...
Saya penasaran bagaimana performa rendering ini dibandingkan dengan Skia atau Pathfinder. Pathfinder, jika didukung hardware, juga bisa memproses tahap mengubah path menjadi segitiga dengan komputasi GPU
Untuk pendekatan rendering 2D berbasis komputasi yang lebih menyeluruh, ada juga Vello
Penilaian awal saya, performanya tampaknya akan sangat bergantung pada hardware, khususnya dukungan pixel local storage. Dari yang saya lihat sejauh ini, Apple Silicon adalah titik idealnya. Hardware mendukung binning dan sorting per tile, dan tetap berjalan baik meski eksekusi fragment shader di dalam tile diserialkan
Di hardware lain, saya memperkirakan biaya serialisasi pemanggilan seperti itu akan jauh lebih besar
Salah satu alasan pihak Vello belum melakukan benchmarking mendalam adalah karena cerita performanya belum final. Saat ini ada masalah mengumpulkan bounding box dengan operasi atomik perangkat, dan implementasi prototipe[2] yang memakai monoid untuk reduksi segmen menunjukkan hasil yang cukup meningkat
Selain itu ada rencana menggunakan operasi f16, yang bisa memberi keuntungan besar terutama di mobile. Untuk beberapa tahap prefix sum, rencananya akan memakai subgroup, dan subgroup sedang masuk ke WebGPU[3]
Secara keseluruhan saya senang renderer ini dirilis sebagai open source, dan senang juga melihat aktivitas yang makin ramai di rendering grafis vektor GPU yang cepat. Saya ingin suatu hari melihat masa depan ketika rendering path di CPU dianggap ketinggalan zaman, dan rilis ini membawa kita lebih dekat ke arah itu
[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
Ini terlihat seperti pilihan teknologi yang solid dari orang-orang yang paham apa yang mereka lakukan, dan sangat layak dicoba langsung untuk memeriksa performa dan kualitasnya
Renderer yang mengutamakan GPU seperti ini masing-masing punya pendekatan yang sedikit berbeda, dan kemungkinan masing-masing punya area terbaiknya sendiri dalam ruang multidimensi kualitas, performa, dukungan hardware/driver, dan tingkat kesulitan integrasi. Jika salah satu dari empat hal itu tidak cocok, yang lain juga layak diperiksa
Secara pribadi saya sangat senang
Selama kurang lebih 6 bulan terakhir, saya mendorong beberapa klien, mulai dari perusahaan healthcare dengan aplikasi mobile native hingga perusahaan dan produk game yang mendalam, untuk mengadopsi Rive alih-alih Lottie dan solusi-solusi lama. Sekarang akhirnya menurut saya sudah berada di jalur dan dalam kondisi “siap diadopsi”
Dalam diskusi-diskusi itu, bagian terakhir yang masih tersisa sebagai potensi kekhawatiran adalah bahwa renderer terbaru masih tertutup dan belum dalam bentuk final
Berkat keputusan ini dan pekerjaan tim Rive secara keseluruhan, saya berharap area masalah ini akan terus membaik. Fitur seperti shadow dan blur juga akan sangat menarik ketika dirilis
Lottie sudah cukup mapan sebagai format file, alur kerjanya juga sudah tertata dengan baik, dan relatif sederhana
Saya penasaran, apa yang jauh lebih baik dilakukan Rive sampai perlu didorong seperti itu?
Repositori: https://github.com/rive-app/rive-renderer
Terkait: https://news.ycombinator.com/item?id=39754770 (Build System Schism: The Curse of Meta Build Systems)
Masalah ini tampaknya terus melahirkan perangkat lunak yang mencoba menyelesaikannya, tanpa solusi yang definitif
Alasannya agak aneh, karena jika fungsi sampling piksel dan metrik ruang warna diberikan, ada satu rendering yang benar secara objektif untuk adegan grafis vektor apa pun. Nilai setiap piksel keluaran harus menjadi warna yang dapat direpresentasikan yang paling dekat dengan konvolusi fungsi tersebut dengan adegan, dan adegan dapat direpresentasikan sebagai fungsi dari R^2 ke R, sedangkan warna dalam sistem warna linear
Dengan GPU compute, serta penanganan batas galat yang baik saat menghitung secara numerik teselasi kurva atau integrasi simbolik kurva yang presisi, ini tampaknya bisa dicapai
Selain itu, solusi seperti ini juga tampaknya mudah dibuat agar tingkat aproksimasi bisa disesuaikan demi rendering yang lebih cepat
Kalau saja kita hanya punya komputer paralel yang layak, ini mungkin tidak terlalu sulit, tetapi kenyataannya logika rendering harus diadaptasikan ke kombinasi spesifik dari tumpukan hack yang didukung infrastruktur GPU, dan masing-masing memiliki batasan serta trade-off yang sangat khas
Sepertinya Anda akan menyukai paper yang akan segera terbit tentang ekspansi stroke yang ramah GPU. Intinya memang menangani integrasi simbolik presisi untuk metrik kelengkungan tertentu pada kurva dengan metode numerik yang memiliki batas galat
Kalau penasaran, sekarang pun bisa dilihat di kode shader/flatten.wgsl pada main Vello