8 ms·

How Flutter uses Widgets, Elements, RenderObjects to create eye-candy at 120fps

98 points by yannikyeo 8y ago

skybrian 8y ago
Wait, why should we care about 120hz? It seems like 60hz should be good enough for people who aren't professional gamers? I wonder how much battery life could be saved by turning the refresh rate down to 30hz?
- minimaxir 8y ago
  If you haven’t tried an iPad Pro that can display 120fps, I recommend you do. It makes a surprising difference.
- bitpush 8y ago
  +1. This, and "640K ought to be enough for anybody"
  - nixpulvis 8y ago
    There is an important distinction between a phonomonan that stops being detectable at high enough values (to humans), and the size of memory for a computer system.
    - gpm 8y ago
      I think VR has sufficiently demonstrated that > 60fps is easily detectable by the vast majority of humans.
    - jcelerier 8y ago
      > high enough values (to humans), and we know experimentally that for humans, "high enough values" > 500Hz https://www.quora.com/What-is-the-highest-frame-rate-fps-that-can-be-recognized-by-human-perception-At-what-rate-do-we-essentially-stop-noticing-the-difference https://www.quora.com/What-is-the-highest-frame-rate-fps-tha...
      - jug 8y ago
        It was shown that a system won’t even rum with 640K, so this (disputed) quote became an example of shortsightedness in tech. However, a system does not need to meet the maximum detectable frame rate of the human eye to be usable, or even close to it. There is a difference in use, yes, but a mere luxury. That’s why I think this comparison doesn’t hold.
        jcelerier 8y ago
        > However, a system does not need to meet the maximum detectable frame rate of the human eye to be usable, or even close to it. for me it's really the same thing. It's physically painful to go back to 60hz screens after getting used to 120hz, just like it would be to go back to 640k systems, even if I have used 60Hz screens for many years and my first computer only had a 5 1⁄4 drive and no disk - and back then I managed just fine (though I was quite young :p).
- zozbot123 8y ago
  60hz may indeed be enough, but in general, touch-friendly UI needs tight bounds on latency to user input (which may be a problem with a mere 30hz). Every "drag"- or "swipe"-like interaction on a touch UI is basically the UX equivalent to moving a mouse pointer - something that has used a hardware-accelerated sprite since forever, precisely in order to put a tight bound on max latency!
- jcelerier 8y ago
  just having the mouse cursor at 120 hz is striking
- rkangel 8y ago
  It only renders on vsync, so if you screen can only do 60Hz (which I believe is most) it'll never be more than 60Hz. Also,if nothing is moving, then its 0Hz.
- izacus 8y ago
  Pretty much all better mobile devices (laptops, tablets and mobile phones) use adaptive refresh, where new frames are only sent to the screen when an actual update has happened. So looking at still image on your phone will not cause 60Hz refresh cycles. Having said that - 120Hz updates when things are moving are noticably smoother than 60Hz updates. You can see this on modern iPads.
- aphextron 8y ago
  >Wait, why should we care about 120hz? It seems like 60hz should be good enough for people who aren't professional gamers? Fuchsia is being developed with AR/VR in mind from the OS level on up. The target for UI animation has to be way higher than 60FPS to accommodate that.
- ghusbands 8y ago
  The most obvious difference for most people is to how readable text is while it is moving, and how fast it can move while still being readable. For touch interfaces, this is important, as people do read while pushing things around. In essence, anything above a pixel per frame is not very readable. So at 30fps, text is only readable when moving at less than 30 pixels per second (60 for hi-DPI). At 120fps, you can move everything four times faster and still have it look sharp. You could expand your knowledge greatly by visiting blur busters [1]. It is trivial for humans and cameras to see the difference between 60Hz and 120Hz motion [2], especially when tracking motion. When we were all on CRTs, the difference was much less noticeable, give or take flicker sensitivity, because they display things in pulses. Most modern displays will hold the image until it changes, which any tracking visual system (eyes or camera) will see as smearing. You can see images of this at blur busters. A lot of often-cited sufficient-for-everything frame rates are incorrect. 24fps is claimed to be sufficient for motion for cinemas, but it only works with heavy motion blur and a lack of fast camera sweeps. 30fps is claimed to be sufficient for games, but it impacts reaction times, input lag and blur in motion. 60fps is claimed to be sufficient for games, next, but it stopped being so when we stopped using CRTs (visit blur busters for more detail). We're now at 120fps for many things and it's almost good enough. [1] https://www.blurbusters.com/ https://www.blurbusters.com/ [2] https://www.blurbusters.com/faq/60vs120vslb/ https://www.blurbusters.com/faq/60vs120vslb/
  - skybrian 8y ago
    This is good information, but to quibble, "noticeable" does not mean "not good enough". Being able to notice a difference doesn't mean it matters to the user; that's more subjective and both versions might be considered fine by many users. For example, I'd be surprised if most users would care about reading text while moving it quickly. (Well, maybe they would care with sufficient advertising?)
klohto 8y ago
Last time an article about Flutter was posted, several users showed concerns that this is a campaign to promote the product. I'm starting to lean into this theory more and more. Articles like these bring nothing to the table and look out of place for HN. Putting on my tinfoil hat, I'm concerned about the ratio of likes and comments as well.
- xpaulbettsx 8y ago
  People excited about X submit articles about X, is this surprising? > Articles like these bring nothing to the table and look out of place for HN. This is a reasonable technical article on how one framework implements rendering and manages to achieve a pretty high bar for performance, not at all out-of-scope for HN.
- untog 8y ago
  It's a new cross platform UI framework with excellent performance. I'm not surprised people (myself included!) are interested to learn about how it does what it does.
- jonas21 8y ago
  > Putting on my tinfoil hat, I'm concerned about the ratio of likes and comments as well. Maybe I'm missing something, but what's unusual about the ratio of likes to comments for this article? At the time I'm writing this, the article has 88 points and 20 comments, a ratio of 4.4. Was it significantly different when you wrote your comment? Among the top 10 articles on HN right now, the average ratio of points to comments is 4.2 and varies from 1.2 to 6.7.
- bgdam 8y ago
  Last time I did a 'Show HN' post, I got 40 points and only 4 comments. The comment to points ratio is not a good indicator of shilling. It could just mean that most of those who vote don't have anything to contribute to the discussion. Besides, even if the article is a campaign, so what? It still contains information that I (as someone who has never used Flutter) found interesting, and I'm sure many others did too, and that's why it's gotten the points.
- 8y ago
IshKebab 8y ago
Flutter seems great, but so far it definitely does not achieve perfect 120 fps performance. It still drops frames quite often at 60 fps. It's getting better but I don't think it is up to iOS performance levees yet.
- saagarjha 8y ago
  I doubt it will get there anytime soon. UIKit still has APIs designed back when iPhone was clearly underpowered (for example, UITableViews still deque cells), so it really performs well on new hardware.
  - kitsunesoba 8y ago
    I mean, is dequeueing cells ever a bad idea, regardless of available power? In AppKit on macOS, NSTableView and NSCollectionView still dequeue even though computers have been exceedingly powerful for decades now. It’s slightly more tricky to work with as a developer, but it’s not that hard and saves resources that’d be better spent elsewhere.
yen223 8y ago
Correct me if I'm wrong, but this sounds almost exactly like how React works under the hood. Which I suppose goes a long way to explaining why the Flutter API resembles React's a lot. Not a knock, I really like the React approach to building UIs.

98 points by yannikyeo 8y ago

Wait, why should we care about 120hz? It seems like 60hz should be good enough for people who aren't professional gamers? I wonder how much battery life could be saved by turning the refresh rate down to 30hz?

minimaxir 8y ago
If you haven’t tried an iPad Pro that can display 120fps, I recommend you do. It makes a surprising difference.
bitpush 8y ago
+1. This, and "640K ought to be enough for anybody"
- nixpulvis 8y ago
  There is an important distinction between a phonomonan that stops being detectable at high enough values (to humans), and the size of memory for a computer system.
  - gpm 8y ago
    I think VR has sufficiently demonstrated that > 60fps is easily detectable by the vast majority of humans.
  - jcelerier 8y ago
    > high enough values (to humans), and we know experimentally that for humans, "high enough values" > 500Hz https://www.quora.com/What-is-the-highest-frame-rate-fps-that-can-be-recognized-by-human-perception-At-what-rate-do-we-essentially-stop-noticing-the-difference https://www.quora.com/What-is-the-highest-frame-rate-fps-tha...
    - jug 8y ago
      It was shown that a system won’t even rum with 640K, so this (disputed) quote became an example of shortsightedness in tech. However, a system does not need to meet the maximum detectable frame rate of the human eye to be usable, or even close to it. There is a difference in use, yes, but a mere luxury. That’s why I think this comparison doesn’t hold.
      - jcelerier 8y ago
        > However, a system does not need to meet the maximum detectable frame rate of the human eye to be usable, or even close to it. for me it's really the same thing. It's physically painful to go back to 60hz screens after getting used to 120hz, just like it would be to go back to 640k systems, even if I have used 60Hz screens for many years and my first computer only had a 5 1⁄4 drive and no disk - and back then I managed just fine (though I was quite young :p).
zozbot123 8y ago
60hz may indeed be enough, but in general, touch-friendly UI needs tight bounds on latency to user input (which may be a problem with a mere 30hz). Every "drag"- or "swipe"-like interaction on a touch UI is basically the UX equivalent to moving a mouse pointer - something that has used a hardware-accelerated sprite since forever, precisely in order to put a tight bound on max latency!
jcelerier 8y ago
just having the mouse cursor at 120 hz is striking
rkangel 8y ago
It only renders on vsync, so if you screen can only do 60Hz (which I believe is most) it'll never be more than 60Hz. Also,if nothing is moving, then its 0Hz.
izacus 8y ago
Pretty much all better mobile devices (laptops, tablets and mobile phones) use adaptive refresh, where new frames are only sent to the screen when an actual update has happened. So looking at still image on your phone will not cause 60Hz refresh cycles. Having said that - 120Hz updates when things are moving are noticably smoother than 60Hz updates. You can see this on modern iPads.
aphextron 8y ago
>Wait, why should we care about 120hz? It seems like 60hz should be good enough for people who aren't professional gamers? Fuchsia is being developed with AR/VR in mind from the OS level on up. The target for UI animation has to be way higher than 60FPS to accommodate that.
ghusbands 8y ago
The most obvious difference for most people is to how readable text is while it is moving, and how fast it can move while still being readable. For touch interfaces, this is important, as people do read while pushing things around. In essence, anything above a pixel per frame is not very readable. So at 30fps, text is only readable when moving at less than 30 pixels per second (60 for hi-DPI). At 120fps, you can move everything four times faster and still have it look sharp. You could expand your knowledge greatly by visiting blur busters [1]. It is trivial for humans and cameras to see the difference between 60Hz and 120Hz motion [2], especially when tracking motion. When we were all on CRTs, the difference was much less noticeable, give or take flicker sensitivity, because they display things in pulses. Most modern displays will hold the image until it changes, which any tracking visual system (eyes or camera) will see as smearing. You can see images of this at blur busters. A lot of often-cited sufficient-for-everything frame rates are incorrect. 24fps is claimed to be sufficient for motion for cinemas, but it only works with heavy motion blur and a lack of fast camera sweeps. 30fps is claimed to be sufficient for games, but it impacts reaction times, input lag and blur in motion. 60fps is claimed to be sufficient for games, next, but it stopped being so when we stopped using CRTs (visit blur busters for more detail). We're now at 120fps for many things and it's almost good enough. [1] https://www.blurbusters.com/ https://www.blurbusters.com/ [2] https://www.blurbusters.com/faq/60vs120vslb/ https://www.blurbusters.com/faq/60vs120vslb/
- skybrian 8y ago
  This is good information, but to quibble, "noticeable" does not mean "not good enough". Being able to notice a difference doesn't mean it matters to the user; that's more subjective and both versions might be considered fine by many users. For example, I'd be surprised if most users would care about reading text while moving it quickly. (Well, maybe they would care with sufficient advertising?)

klohto 8y ago

Last time an article about Flutter was posted, several users showed concerns that this is a campaign to promote the product. I'm starting to lean into this theory more and more. Articles like these bring nothing to the table and look out of place for HN. Putting on my tinfoil hat, I'm concerned about the ratio of likes and comments as well.

xpaulbettsx 8y ago
People excited about X submit articles about X, is this surprising? > Articles like these bring nothing to the table and look out of place for HN. This is a reasonable technical article on how one framework implements rendering and manages to achieve a pretty high bar for performance, not at all out-of-scope for HN.
untog 8y ago
It's a new cross platform UI framework with excellent performance. I'm not surprised people (myself included!) are interested to learn about how it does what it does.
jonas21 8y ago
> Putting on my tinfoil hat, I'm concerned about the ratio of likes and comments as well. Maybe I'm missing something, but what's unusual about the ratio of likes to comments for this article? At the time I'm writing this, the article has 88 points and 20 comments, a ratio of 4.4. Was it significantly different when you wrote your comment? Among the top 10 articles on HN right now, the average ratio of points to comments is 4.2 and varies from 1.2 to 6.7.
bgdam 8y ago
Last time I did a 'Show HN' post, I got 40 points and only 4 comments. The comment to points ratio is not a good indicator of shilling. It could just mean that most of those who vote don't have anything to contribute to the discussion. Besides, even if the article is a campaign, so what? It still contains information that I (as someone who has never used Flutter) found interesting, and I'm sure many others did too, and that's why it's gotten the points.
8y ago

IshKebab 8y ago

Flutter seems great, but so far it definitely does not achieve perfect 120 fps performance. It still drops frames quite often at 60 fps. It's getting better but I don't think it is up to iOS performance levees yet.

saagarjha 8y ago
I doubt it will get there anytime soon. UIKit still has APIs designed back when iPhone was clearly underpowered (for example, UITableViews still deque cells), so it really performs well on new hardware.
- kitsunesoba 8y ago
  I mean, is dequeueing cells ever a bad idea, regardless of available power? In AppKit on macOS, NSTableView and NSCollectionView still dequeue even though computers have been exceedingly powerful for decades now. It’s slightly more tricky to work with as a developer, but it’s not that hard and saves resources that’d be better spent elsewhere.

yen223 8y ago

Correct me if I'm wrong, but this sounds almost exactly like how React works under the hood. Which I suppose goes a long way to explaining why the Flutter API resembles React's a lot. Not a knock, I really like the React approach to building UIs.