Skia：实质、架构及在Flutter图形引擎中的角色

什么是Skia？

Skia — 是一个跨平台的2D图形库，由Google开发，采用BSD许可证发布。它提供统一的API来绘制几何形状、文本、图像和阴影，抽象了底层的图形后端。Skia用C++编写，并优化在从手机到服务器的各种设备上运行。

Skia的历史始于2005年，最初是Skia Inc.公司的闭源库。2007年，Google收购了它，开放了源代码，并开始在自己的产品中使用它。如今，Skia是Google Chrome（包括Chrome OS）、Android（从4.0版本开始）以及Flutter的主要图形引擎。该库由Google团队维护并不断改进：添加新的后端、性能优化以及对现代图形API的支持。

Skia的关键特性是它不仅仅是绘制图元的函数集合。它是一个完整的图形管线，包括曲线（路径）的栅格化、抗锯齿（anti-aliasing）、遮罩应用、透明度处理和颜色校正。Skia支持PNG、JPEG、WebP和GIF图像格式，还可以通过HarfBuzz引擎渲染文本以进行字形塑造。

Skia与其他图形库的对比

与Cairo（用于GTK）或Quartz 2D（用于macOS）不同，Skia从一开始就设计为在具有不同图形API的多个平台上运行。这使其在Flutter等跨平台框架中具有优势。Cairo专注于软件渲染，而Skia从一开始就支持GPU加速，这对界面动画至关重要。

Skia架构

Skia架构构建为多层管线，每一层负责将图形命令转换为像素的特定阶段。这种结构允许上层独立于底层图形API进行重用。

上层 — Canvas API — 为开发者提供绘制的抽象。方法drawRect、drawCircle、drawPath、drawText接受几何参数和样式（颜色、透明度、变换）。Canvas将这些命令转换为操作序列，传递到Skia Pipeline层 — 一个在执行前进行优化的内部命令图。

中间层 — Surface和Device — 管理渲染的目标缓冲区。Surface通过指定大小、色彩空间和后端类型来创建。Device实现特定的渲染后端：CPU栅格化器（Raster）、OpenGL（GL）、Vulkan（Vk）或Metal（Mt）。Device包含针对特定后端优化的每个绘制操作的实现。

底层 — Ganesha（GPU后端） — 实现硬件加速渲染。Ganesha使用GPU进行路径栅格化、渐变填充和效果应用。它收集命令到批次中并最小化GPU状态切换。每个图形API都有其自己的Ganesha实现：用于OpenGL的Skia GL、用于Vulkan的Skia Vulkan、用于Metal的Skia Metal。

中间表示 — SkSL

Skia使用自己的着色器语言SkSL（Skia Shading Language）来描述效果。SkSL代码编译为SPIR-V（中间表示），然后转换为特定后端着色器格式（GLSL、HLSL、MSL）。这提供了一种独立于平台的统一方式来描述图形效果。

Skia在Flutter中如何工作

Flutter在所有平台上使用Skia作为主要渲染引擎：Android、iOS、Web、Windows、macOS和Linux。当Flutter应用程序渲染一帧时，小部件被转换为RenderObject树，然后传递到Engine层（用C++编写），Engine使用Skia进行最终渲染。

渲染一帧的过程包括几个阶段。首先，Flutter Engine构建操作列表（Display List） — 描述绘制内容和方式的Canvas API调用序列。然后，此列表传递到Skia，它将操作划分为分区（屏幕区域），按深度排序，并传递到相应的渲染后端。如果Skia检测到可用的图形API，GPU加速会自动启用。

Skia在Flutter中的关键优势之一是Flutter Impeller Preview — 着色器预览功能。Skia在首次使用时编译着色器，这可能导致延迟（shader jank）。为了解决这个问题，Flutter正在转向Impeller — 一个新的渲染引擎，但Skia仍然是Flutter稳定版本的主要选择。

图层树和绘制

Flutter使用图层树（Layer Tree）的概念 — 一个图层树，每一层代表UI的一部分。Skia接收每个图层的绘制命令，并确定多个图层是否可以合并为一次渲染传递。图层合成（layer compositing）是一项复杂的任务，因为每个像素都需要考虑透明度和混合模式（blend modes），Skia通过GPU着色器实现这些。

通过Skia渲染文本

Skia通过与HarfBuzz（字形塑造）和icu（Unicode）库的集成来渲染文本。在Flutter中，每个文本小部件创建一个Paragraph对象，将文本转换为一系列Skia命令来绘制字形。Skia支持亚像素抗锯齿（subpixel anti-aliasing）、字体提示以及通过SkUnicode库处理表情符号。

Skia性能

Skia的性能是多年优化和多种技术结合的结果：命令批处理、纹理缓存和最小化GPU上下文切换。对于Flutter来说，这至关重要，因为每帧必须在16毫秒（60 FPS）或8毫秒（120 FPS）内渲染。

根据Flutter团队的基准测试，在中端设备（Qualcomm Snapdragon 700系列）上使用GPU加速的Skia可在渲染具有30多个小部件的复杂界面时提供稳定的60 FPS。在软件渲染（CPU）下，性能下降40-60%，但对于简单屏幕来说仍然可以接受。

着色器抖动 — Skia的主要问题

Skia在Flutter中的主要性能问题是着色器抖动（shader jank）。当屏幕上出现具有未知效果组合的新视觉元素时，Skia会即时编译新的着色器。编译可能需要50-200毫秒，在此期间应用程序会丢帧。这在滚动带有自定义装饰的长列表时尤其明显。Google在Impeller中解决了这个问题，这是一个新的渲染引擎，可以预先编译着色器。

Skia在不同平台上的应用

Skia支持广泛的平台，每个平台使用自己的渲染后端。后端的选择在Flutter Engine构建阶段根据目标平台和可用的图形API来确定。

Android

在Android上，Skia通过OpenGL ES（所有设备）和Vulkan（Android 7.0+支持Vulkan的设备）运行。后端选择自动进行：Vulkan更优，因为它提供更低的驱动程序延迟。Android还通过HWUI（硬件加速UI）使用Skia渲染系统UI，使Skia成为操作系统的一部分，而不仅仅是Flutter的一部分。

iOS

在iOS上，Skia使用Metal — Apple的专有图形API。Metal提供对GPU的低级访问和最小的开销。在Metal出现之前（2014年），Skia在iOS上使用OpenGL ES，但在当前版本的Flutter中，Metal是iOS唯一的GPU后端，与OpenGL相比性能提升高达30%。

桌面端（Windows、macOS、Linux）

在桌面上，Skia使用OpenGL（macOS、Linux）和Direct3D 12（Windows）。对Windows的Direct3D 12支持在Flutter 3.13中添加，与Windows上的OpenGL相比性能显著提升。Skia还支持在Windows上通过ANGLE（Direct3D之上的OpenGL）进行软件渲染，以向后兼容旧的图形驱动程序。

Web

在Flutter for Web中，Skia编译为WebAssembly（通过Emscripten）并通过WebGL渲染。在此模式下，Skia完全在浏览器中运行，不使用原生代码。Skia的WebGL版本性能低于原生后端，但对于大多数Web应用程序，在具有WebGL硬件加速的现代浏览器上可以实现60 FPS。