Flutter sksl 着色器预热

Flutter Skia sksl 着色器预热（小记）

纯Flutter项目开发时间大概3年多了，基本都是构建在Android和IOS平台的应用程序，至于Flutter性能方面，Android平台的体验和流畅度确实优于IOS，再加上安卓平台可以根据Skia着色器预热编译，使得页面导航、动画、裁剪等触发时更加流畅。

虽然IOS也可以缓存着色器数据，但是和安卓还是有很大不同的，着色器主要还是为了解决应用程序首次运行的编译卡顿，对于安卓，App从安装到首次打开，着色器预热编译数据就已经起到了很好的助攻效果，但是IOS则是每次打开App时都需要从0开始加载着色器数据，这就导致IOS在Flutter性能方面不如Android平台。

所以针对于IOS平台，除了着色器预热，还可以选择延迟加载的方式，出现卡顿的很大原因是Widget在绘制过程中更新了UI, 例如，页面导航时，请求服务器数据或者其他耗时的操作，可以在页面导航结束后再执行，例如Future.delayed 等等。

怀疑是着色器编译卡顿时，可以通过命令运行app，查看Timeline Raster耗时

flutter run --trace-skia --profile

收集着色器数据

flutter run --cache-sksl --profile

通过上一步生成的着色器数据flutter_01.sksl.json文件，进行编译预热打包

android :
flutter build apk --profile (release）–bundle-sksl-path flutter_01.sksl.json
ios:
flutter build ios --profile（release） --bundle-sksl-path flutter_ios.sksl.json
flutter build ipa --profile（release） --bundle-sksl-path flutter_ios.sksl.json

最终生成的.apk就包含了着色器的预编译信息，当app执行页面导航或者动画时,就会很快的执行完毕。

android
最终生成的apk可以通过adb安装，也可以通flutter run来执行
flutter run --use-application-binary xxx.apk --profile（release）
ios
flutter run --use-application-binary 项目路径/build/ios/iphoneos/Runner.app --profile（release）
ios分发测试
如果打包生成的ios产物是Runner.app，可以直接安装到ios设备上去测试，如果想要转换成 .ipa去分发，则可以通过以下方式去转换：
桌面新建一个Payload文件夹（一定要区分大小写哦！），将Runner.app拷贝到Payload文件夹中，最后将Payload文件夹整体压缩成 .zip，最后将Payload.zip后缀名改成 .ipa 即可，此时才可以修改Payload.ipa的文件名 ！！！

Flutter sksl 着色器预热相关推荐

Flutter 新一代图形渲染器 Impeller
目前 Flutter 社区的发展已经很庞大,官方统计在过去的一年里,数据上 Flutter 已经基本超过超过其他跨平台框架,成为最受欢迎的移动端跨平台开发工具,截至 2022 年 2 月,有近 50 ...
android代码设置drawor色值,Android 着色器 tint
本文主要总结了 Android 着色器的使用及其原理,在实现同等效果的情况下,减少资源图的使用以减小 apk 包的体积并降低对内存的占用. 假设我们想实现一种效果,如下: 不怎么友好的做法是让设计师给 ...
Shader着色器代码辅助工具
借用二次元界一个传奇组合的话:"既然你诚心诚意地发问了,我们就大发慈悲地告诉你--"这次我为普罗开发者提供Shader代码辅助工具的安装指南,也是作为Unity着色器训练营第二期直 ...
Turing渲染着色器网格技术分析
Turing渲染着色器网格技术分析图灵体系结构通过使用网格着色器引入了一种新的可编程几何着色管道.新的着色器将计算编程模型引入到图形管道中,因为协同使用线程在芯片上直接生成紧凑网格( meshl ...
Learn OpenGL （三）：着色器
GLSL 着色器是使用一种叫GLSL的类C语言写成的.GLSL是为图形计算量身定制的,它包含一些针对向量和矩阵操作的有用特性. 着色器的开头总是要声明版本,接着是输入和输出变量.uniform和mai ...
Blender着色器纹理材质创作教程含源文件 Shader Forge
本Blender视频课程是一个正在进行的关于为Cycles渲染引擎构建材质(着色器)的系列.只要有足够的时间和努力,物质性就能给CG场景注入这样的生命. 本课程是一个正在进行的关于为Cycles渲染引 ...
UE4材质着色器全面学习教程
你会学到什么通过所有着色器类型和设计的实际演示,学习创建材质要求对虚幻的基本理解会有所帮助了解纹理的一般知识(不仅限于UE4)也很有用描述在这个系列中,我将带你设置大量不同的材料,教你如何 ...
学习编写Unity计算着色器 Learn to Write Unity Compute Shaders
利用图形处理器的力量你会学到: 如何编写Unity计算着色器如何在后处理图像过滤器中使用ComputeShaders 如何使用ComputeShaders进行粒子效果和群集如何使用Structu ...
从头开始学习Unity着色器
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确)|时长:56节课(4h 26m) |大小解压后:2.89 GB ...
Unity初学Shadergraph创建着色器学习教程
MP4 |视频:h264,1280×720 |音频:AAC,44.1 KHz,2 Ch 语言:英语+中英文字幕(根据原英文字幕机译更准确) |时长:51节课(4h 44m) |大小解压后:2.55 G ...