As someone with a shallow grasp of rendering in general, it amazes me that we can achieve near 60fps for these insanely detailed games with tons of 3D objects, and yet we find it difficult to do the same with 2D UI rendering.
Its the abstraction on abstraction culture which seems to be the norm these days, because, hey "ECMA script is portable and accessible"! So lets "browserify" all the things...
Just wait until your BBQ has its own browser - oh shit wait
> hey "ECMA script is portable and accessible"! So lets "browserify" all the things
It's not because JavaScript is portable or accessible (it's definitely not portable, and if you wanted accessibility you could do much better), it's simply because it's the most popular language.
The bottleneck is typically CPU <-> GPU transfer. If your UI is processing data on the CPU, that information has to be shuttled over the GPU. On a platform like iOS (or MacOS) the core text rendering frameworks are built on the CPU. Text rendering, for instance, is complicated and despite a lot of experience with both native iOS development and recently with compute shader development, I couldn’t really throw out an estimate of how involved it would be to recreate something like CoreText fully on the GPU. And unless you give up CPUs, you’re still left with the problem of transferring data back and forth.
More and more gets ported to the GPU through parallelized algorithms, and smart GPU memory usage — but CPUs still offer a lot in their ability to do generalized computing.
This is why as I’ve gotten older I’ve come to really respect Computer Science fundamentals; the more you understand how to make the most of resource constraints — whether time, or memory, etc — the more magic you can make.
The overhead is much, much lower in native development. Having a JS bloatware adds a lot of slowdown, as does the additional nonsense layers of React Native itself. As you can see, RN developers are still boasting “60fps animations” in 2020.
Also I believe the traditional drawing algorithm (e.g. the painters algorithm) is not well suited for parallelization and how gpus do work. So the gpu is “fast” at slapping a circle texture on a couple of triangles, but rendering a circle from vector data not so much.
I think Apple has said that Core Animation (and maybe Core Graphics) now use Metal where possible, but vector to bitmap rendering is still done on the cpu.
Native framework (I'm familiar with Android) will just issue a translation coordinate change for the rendered view in this scroll. So there's no CPU <--> GPU transmission here because the view is already rendered in a texture and compositor will just move it a bit.
If web frameworks really reupload the whole view to GPU on each frame, it's no wonder all apps run like arse and burn battery.
They don‘t, but you also can‘t prepare (and download) a whole list of (tens of) thousands of items, which is why you only do the parts that are going to be scrolled in next. Both react native and standard native apps do this, but standard native apps are much better at it.
