带你读《2022技术人的百宝黑皮书》——Flutter 新一代图形渲染器 Impeller（3）

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