为什么跨平台框架复杂 UI 都会卡顿，而跨平台游戏引擎不会呢？

[rv54ntjwfm3ug8]

最近用 Flutter 和 React Native 写了几个复杂的 UI Demo，发现都很卡顿，一部分动画根本无法实现，用户体验极差。大部分游戏引擎都是跨平台的，为什么没有这种情况？

[loginbygoogle]

反思一下自己的水平是不是有问题

[wvitas]

你是用的 Release 么，Flutter release 的话还是相对很流畅的，当然与原生比还是有些许差距

[rv54ntjwfm3ug8]

@loginbygoogle #1 iPad Pro，连官方 Demo 都有肉眼可见掉帧

[TangMonk]

Unity3d 的跨平台 UI: UIElement 真的很强大，连 swicth, xbox 都跨平台，而且很流畅

[liprais]

白嫖的能跟付费的比么....

[shanghai1998]

demo 需要优化优化

[ch2]

游戏有各种成熟的优化办法，可以靠美工欺骗而不用实际做那么多计算

[ipwx]

渲染的水很深啊，OpenGL 和 DirectX 不是狼得虚名

[wdhwg001]

就是因为 UI 更复杂啊，UI 大部分都很不方便硬件加速。
举个例子，你看在 UI 里几乎滥用了的高斯模糊，哪个游戏敢这么搞？分分钟卡爆的。
还有 UI 通常来说意味着大量的矢量文字渲染，这东西，如果你搞过 Unity 的话就知道其实也挺吃力的。
并且，UI 不像游戏，游戏的输入是简单的，WASD 转转鼠标就行了，交互的主体无非就是相机和主角，而 UI 几乎全部都需要响应输入，这使得多线程和 GPU 并行化非常难搞。现代的显卡可以很轻易地渲染粒子一类的复杂转场，但前提是输入是一次性的，因为通讯延迟很高，并且很难进行预先计算。
而且，写游戏的时候你可以去主动干涉和调整 Shader，但是在使用 Flutter 的时候就没那么幸运了，只能靠 Flutter 翻译成 Skia 再翻译成 Shader，底层被层层封装起来了，效率自然会进一步下滑。

[wdhwg001]

再举一个，比如 UI 里非常常见的圆角矩形矢量，在游戏里就意味着成堆的多边形。
还有比如 UI 里也很常见的各种 PNG 半透明，在游戏里首先解码 PNG 就已经很沉重了（可以了解一下游戏材质是怎样压缩的，这些压缩基本都依赖显卡的硬件支持才得以实现），然后还要处理半透明排序。

如果你是纯标量 UI，就像 Unity 那种的，以标量为主的 UI，并且交互输入就像游戏按键那样简单的化，那在进行了恰当的纹理优化的情况下确实可以直接达到不错的渲染效率，并且你也不需要那么复杂的库和框架了，Flutter 和 Skia 设计之初就是为了支持矢量的。

[murmur]

@loginbygoogle 这话从何说起，不就是因为做不起 native 才选 flutter 、rn 这种跨平台框架，如果这些东西还要 native 程序员来优化，要他何用，不如直接 native，或者 native+webview

[shpkng]

游戏 UI 做不好照样很卡
游戏引擎的优势在于能充分利用 GPU，并且有很多优化的奇技淫巧，而你能见到的游戏，大概都是经过很多轮优化的
但是实际上 UI 的开销在游戏里还是非常大的，甚至会成为性能瓶颈

[loginbygoogle]

@theklf4 https://flutter.dev/docs/perf/rendering/shader#how-to-use-sksl-warmup

iOS 需要一些额外的优化，多看文档