带你读《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