Flutter ve 60 FPS
İnsan beyni saniyede 10–12 frame’in (çerçeve diyelim) her birini ayırdedebiliyor, onun ötesini ise hareket olarak algılıyormuş.
Sessiz sinema ilk çıktığında saniyede 16–24 çerçeve gösterimi vardı. Nasıl olduğunu görmüşsünüzdür, komik :) Şöyle konforlu bir sinema keyfi için saniyede kaç çerçeve gösterilmesi konusunda Edison, 48 demiş: “Gözümüz ancak öyle ağrımaz”.
Sesli sinema devrinde, insan beyni sesteki frekans değişikliğine daha hassas olduğu için problem çıkmış. Sesin 35 mm film için 24 FPS standardı o zamanlardan gelir. Bu oranda film şeridi saniyede 456 mm kateder. Çift bıçaklı projeksiyon makinalarıyla da 24x2 Edison’un değeri yakalanmış, üç bıçaklılarla geçilmiş bile oluyor (72).
Haaa 50, 60 nerden geldi derseniz; Edison ile Tesla arasındaki sürtüşme bilirsiniz elektriğin alternatif olarak taşınması konusu, ABD’de 110VAC, 60 Hz elektriğe karar verilir. ABD’de meskenlerde yaygın olarak kullanılan karbon arklı lambaların 60 HZ’in altında titreme (flicker ) yapmasının da bunda etkili olduğu bilinmektedir. Avrupa’da ise tekel olan AEG firmasının; 50 Hz’i daha etkili ve yuvarlak :) bulmasından ötürüdür ki biz de Türkiye’de 50 Hz kabul etmişiz.
Analog TV’ler de sonuçta elektriğe uydu ve 50 Hz’i benimsedi (ABD, Japonya, Kanada onlar 60 Hz). Renkli TV’lerde 60 Hz, “dot crawl” denen bir sendroma yolaçtığından % 0.1 azaltılmıştır 60 FPS (59.94). O garip sayılar burdan geliyor.
Gelelilm Flutter’a… Tek bir kod kaynağı ile; Android, iOS, Linux, Windows, macOS, Web, Fuschia ve daha niceleri için uygulama yazmak harika olmaz mı? Hele bir de native ise. İşte Flutter bunu oldukça iyi başarıyor. Sırrı ise diğer çapraz uygulama geliştirme çerçevelerinin aksine kendisinin ekranı direk kullanması. Üstelik kendi widget’larını kullandığı için arada bir köprü atlama gereksinimi duymaması. Bu da örneğin React Native gibi çok popüler çapraz uygulama geliştirme çerçevelerine karşı bariz bir performans avantajı sunuyor. Hata ayıklamanın kolaylığı da cabası. Flutter’ın daha hot reload/restart gibi muhteşem başka özellikleri de var da onları da başkalarından okuyun.
Evet, Flutter oluşturduğu her çerçeveyi 60 FPS ile (120 FPS de olabilir), Skia 2D motorunu kullanarak doğrudan tarıyor. Skia; Google Chrome, Chrome OS, Android ve Fuschia’a da kullanılıyor. Flutter’ın bu iş için her bir çerçeveyi 1/60= ~16 ms’den önce bitirmesi gerekiyor. Flutter iyi iş başarıyor, bravo. Peki bunu nasıl yapıyor?
Burada iki temel thread’den bahsedebiliriz: UI ve GPU. Flutter her bir Vsync ile grafikte gördüğünüz çerçeve oluşturma yaşam döngüsüne giriyor. Vsync, kısaca ekranı kontrol ediyor, yani görüntüde değilken Flutter’ın render etmesini engelliyor diyebiliriz. Biraz karışık ama aslında çok basit; UI thread zaten Dart kodu. O malum Widget, Element, Render Object ağaçları ile çerçevelerimiz işte boyutlarıdır, yerleridir, renkleridir vs oluşturuluyor birleştiriliyor ve Skia’ya çizilmesi için gönderiliyor.
120 FPS olabilir mi? Neden olmasın. 120'ye ihtiyaç var mı konusu insandan insan göre değişir ama çok hareketli sahneleri olan video’lar, oyunlar 120 FPS ile daha güzel (480'e kadar yolu olduğunu söyleyenler var). “Yaşlı bir büyüğümüze sorsak HD ile Full HD’yi ayırır mı bilemem” gibi. Hani biraz da daha iyiyi bulma ve pazarlama konuları. Yarın birileri çıkıp adaptif FPS insan sağlığına zararlı dese buyrun işte.
Flutter’ın bu FPS’leri yakalayabilmesi için tabi kodumuzu performanslı yazmamız lazım. 16 ms’nin üstüne çıkarsak Jank olur. İnsanlar uygulamamızı hemen çöpe atarlar :) Bu konuyu da havam bulursam ayrıca yazarım. Performans konusunda yazarken çok takılmamak lazım, birikimlerimiz zaten bize sezgisel olarak yön verecektir. Sürüm öncesi sıkışan yerleri bulup düzeltmek daha verimli bir yol olabilir.
Umarım yazımı beğenmişsinizdir, çok detaylı teknik yazmak istemedim sıkıcı olmasın. Kendinize iyi bakın, Flutter’lı günler dilerim.
Kaynak: Wikipedia (Frame Rate), Flutter.dev dökümanları, Grafik https://www.cuelogic.com/wp-content/uploads/2021/06/flutter-react-native-interacts-with-native-components.png, karikatürün kaynağını bulamadım
