带你读《2022技术人的百宝黑皮书》——Flutter 新一代图形渲染器 Impeller（2）https://developer.aliyun.com/article/1340790?groupCode=taobaotech
Impeller着色器离线编译
impeller compiler模块是解决着色器编译Jank的关键所在。在编译阶段，首先把compiler相关源码编译为host工具impellerc binary。然后开始着色器的第一编译阶段，利用impellerc compiler 把//impeller/entity/shaders/目录下所有着色器源码（包括顶点着色器和片段着色）编译为着色器中间语言 SPIR-V。再开始着色的第二个编译阶段，把 SPIR-V 转换为特定后端的高级着色器语言（如Metal SL），随后（iOS上利用Metal Binary Archives） 把特定后端的着色器源码（Metal着色器）编译为 shader library。同时，另外一条路径中利用impellerc reflector 处理SPIR-V生成 C++ shader binding，用于在运行时快速创建pipeline state objecs（PSO）。Shader bind- ing生成的头文件中包括了一些结构体（有适当的填充和对齐），使得可以将uniform data和vertex数据直接指定给着色器，而无需处理绑定和顶点描述符。最后把shader library和binding sources编译进flutter engine中。
这样所有着色器在离线时被编译为shader library，在运行时不需要执行任何编译操作，从而提升首帧渲染性能，也彻底解决了着色器编译带来的jank问题。
Shader Bindings
impeller中的着色器仅需要基于 GLSL 4.60 语法编写一次，编译时转换为特定后端的着色器和binding。比如solid_fill.vert 顶点着色器经过离线编译后生成了solid_fill.vert.metal，solid_fill.vert.h和solid_fill.vert.mm文件。solid_fill.vert：
uniform FrameInfo { mat4 mvp; vec4 color; } frame_info; using namespace metal; struct FrameInfo { float4x4 mvp; float4 color; }; struct solid_fill_vertex_main_out { float4 color [[user(locn0)]]; float4 gl_Position [[position]]; }; struct solid_fill_vertex_main_in { float2 vertices [[attribute(0)]]; }; vertex solid_fill_vertex_main_out solid_fill_vertex_main( solid_fill_vertex_main_in in [[stage_in]], constant FrameInfo& frame_info [[buffer(0)]]) { solid_fill_vertex_main_out out = {}; out.gl_Position = frame_info.mvp * float4(in.vertices, 0.0, 1.0); out.color = frame_info.color; return out; }
带你读《2022技术人的百宝黑皮书》——Flutter 新一代图形渲染器 Impeller（4）https://developer.aliyun.com/article/1340788?groupCode=taobaotech
