当前位置：首页 > news >正文

skia的学习与研究

news 来源：原创 2025/9/1 9:54:17

最近再研究skia,特地发一篇文章来记录一下。Skia版本更新非常频繁，大概每四周就会创建一个新版本，此版本持续维护六周左右就会被标记为稳定分支；
在这里插入图片描述

skia三套渲染：

无gpu硬件如嵌入式设备，使用CPU渲染，使用软光栅化（soft rasterizer）来处理图形渲染；
无gpu硬件但在win下，CPU渲染使用Win的Warp； Windows 高级光栅化平台 (WARP) 指南
有gpu硬件（独立显卡&集成显卡）使用GPU绘制；

文档链接：

官方文档：User Documentation | Skia
API文档： skia api
win下skia编译： Windows环境编译skia库_skia 编译-CSDN博客
skia图形后端：主要是依靠google自家开源的图形后端angle 来实现,现在angle主要是ANGLE 目前提供从 OpenGL ES 2.0、3.0 到
在这里插入图片描述

调试工具Fiddle：

Skia Fiddle 的工具，这是一个专门用于测试和演示 Skia 代码片段的 Web 工具。Skia Fiddle 允许开发者在浏览器中编写和运行 Skia 代码，查看绘图结果，并分享代码片段。 Skia Fiddle
fiddle 有案例教程named： Skia Fiddle

skia模块：

web端: 作为 Skia 的核心绘制接口，它提供了一系列绘制图形的方法，如绘制点、线、矩形、圆形、文本等。Skia 现在提供了一个 WebAssembly 构建版本， CanvasKit ，将 WebGL 上下文封装为一个 SkSurface；
SkCanvas:在 Android 开发中，自定义 View 时常常会使用 SkCanvas 来实现特定的图形绘制效果。
path:在图形绘制和处理中path在skia扮演着至关重要的角色。Path 允许你定义各种复杂的 2D 形状和轮廓，是实现高级图形效果和自定义绘图的基础，简单的几何形状，如直线、矩形、圆形、椭圆等；
SkPaint与SkPath区别：SkPaint 负责绘制属性和效果，绘制的颜色、透明度和绘制样式，SkPath 负责图形的形状和轮廓，绘制的图形的轮廓，包括直线、曲线、矩形、圆形、椭圆等几何形状及其组合；
SkBitmap与skimage的区别:SkBitmap是光栅位图，包含实际的像素数据比如RGBA8888/RGB888/RGB565。它主要用于管理和操作位图数据，包括读取、写入和修改像素。SkImage 是一个只读操作，主要用于如图像显示渲染、纹理缓存。

关于Skia做三维：

首先skia是二维渲染引擎，里面根本就没有三维的概念！有的人问是否可以把它改造成也支持三维，但是最好不要这样做。不然工作量会非常大非常多。

先不说顶点着色器、曲面细分着色器、几何着色器、计算着色器（skia目标主要是二维，甚至还有软光栅，他的目标就是只支持二维的通用语跨平台跟三维的目标有差距外）；
skia没有材质系统/光照系统/camera，要自己实现一套材质系统/光照系统难度比较大工作量也很大，比如实现PBR的材质/光照/camera就很难。
3D资源模型的解析也无，对应的3D资源管理也没,3D的场景图或场景管理也没有；
pipline也无，粒子系统、骨骼动画、物理系统、全部都没有只有；
所以综上所述skia就是提供最基础的渲染跟直接裸写opengl的没区别，它就不适合3D；

源码剖析：

深入理解Flutter的图形图像绘制原理——图形库skia剖析
内存管理： SkBudgeted

当使用 SkBudgeted::kYes 时，Skia 会尝试在其内部的内存预算范围内进行操作，这意味着 Skia 会对创建和使用的资源（如图像、纹理、缓存等）进行管理，避免过度分配内存。
避免内存溢出：在一些资源受限的环境中，如移动设备或嵌入式系统，内存是非常宝贵的资源。通过设置 SkBudgeted::kYes，Skia 可以根据预先设定的内存预算来决定是否创建新的资源，或者在必要时释放一些不再使用的资源，从而避免因内存使用过多导致的系统崩溃或性能下降。
Skia 会定期检查和清理不再使用的资源，以释放内存空间。当设置为 SkBudgeted::kYes 时，这种资源回收机制会更加积极主动。例如，对于一些已经不再需要的纹理或缓存，Skia 会及时将其释放，以确保内存使用保持在预算范围内

skia渲染属性一、

skia的坐标系：
Skia Coordinate Spaces | Skia
device与local坐标系： device与local坐标系从左上角的(0, 0)到右下角的(w, h)的范围，默认情况下，本地和设备坐标系相同；片源着色器的坐标是local坐标。
修改local坐标系是直接使用canvas->translate/scale等；
修改着色器的坐标比如： SkGradientShader::MakeLinear函数的localMatrix；

色彩空间：
skia : Skia Color Management | Skia
以D50 XYZ颜色空间为中间者、在任意两个颜色空间之间做转换,
在这里插入图片描述

alpha预乘：
在 Skia 管线里，每个 SkShader 都会返回预乘Alpha的颜色，如果从一个非预乘的SkImage（例如常见的 PNG 格式图像）开始，将其转换为SkImageShader并进行求值，得到的颜色值是经过预乘处理的，即[RA, GA, B*A, A] ，而不是原本未预乘的[R, G, B, A]；

线性与非线性颜色空间转换：
toLinearSrgb 和 fromLinearSrgb 函数用于在 sRGB 和线性 sRGB 颜色空间之间进行转换；

// sRGB 颜色空间转换为线性 RGB 采用分段函数，分为线性和非线性两部分
// 当 sRGB 颜色值较小时（小于等于 0.04045），采用线性转换公式 C_linear = C_srgb / 12.92
// 当 sRGB 颜色值较大时（大于 0.04045），采用非线性转换公式 C_linear = ((C_srgb + 0.055) / (1 + 0.055)) ^ 2.4
// 其中 0.04045 是线性和非线性转换的分界点
// 12.92 是通过计算 (1 + 0.055) / (0.04045 ^ (1 / 2.4)) 得到，保证线性和非线性转换在分界点处连续
// 0.055 是 sRGB 非线性转换公式中的偏移常量
// 2.4 是 sRGB 非线性转换公式中的伽马值
vec3 toLinearSrgb(vec3 srgb) {const float a = 0.055;  // sRGB 非线性转换公式中的偏移常量return mix(srgb / 12.92,  // 线性转换部分pow((srgb + a) / (1.0 + a), vec3(2.4)),  // 非线性转换部分step(0.04045, srgb)  // 根据 srgb 值是否大于 0.04045 选择线性或非线性转换);
}// 将线性 RGB 颜色转换为 sRGB 颜色
// 从线性 RGB 转换回 sRGB 同样采用分段函数
// 当线性 RGB 颜色值较小时（小于等于 0.0031308），采用线性转换公式 C_srgb = C_linear * 12.92
// 当线性 RGB 颜色值较大时（大于 0.0031308），采用非线性转换公式 C_srgb = (1 + 0.055) * (C_linear ^ (1 / 2.4)) - 0.055
// 0.0031308 是线性和非线性转换的分界点，通过将线性和非线性转换公式在分界点处相等计算得到
// 12.92、0.055 和 2.4 的含义与 toLinearSrgb 函数中相同
vec3 fromLinearSrgb(vec3 linear) {const float a = 0.055;  // sRGB 非线性转换公式中的偏移常量return mix(linear * 12.92,  // 线性转换部分(1.0 + a) * pow(linear, vec3(1.0 / 2.4)) - a,  // 非线性转换部分step(0.0031308, linear)  // 根据 linear 值是否大于 0.0031308 选择线性或非线性转换);
}

blender混合：
SkPaint Overview | Skia Skia 使用默认的 SkBlendMode::kSrcOver`进行混合；跟opengl的混合模式一样混合 - LearnOpenGL CN

skia的shader-SKSL

sksl资料：
SKSL教程
验证sksl
sksl debug

sksl简介：
skia的shader使用的是sksl,sksl是skia自定义的shader语法，底层由angle实现图形后端RHI；SKSL只开放了片源着色器！sksl与glsl很类似但是特别要住于他俩的区别，由于：使用GLSL语言，您正在编程GPU管线的阶段。使用SKSL，您正在编程SKIA这个2D图形引擎的管道的阶段（引擎图形后端封装一层）。

SkSL 效果是 Skia 管道的一部分。当你发出画布绘图操作指令时，Skia（通常）会组装一个单一的 GPU 片段着色器来完成所有必要的工作。这个色器通常包括几个部分。例如，它可能包括：

评估一个像素是否在被绘制的形状内部或外部（或者在边界上，在这种情况下可能会应用抗锯齿）。
评估一个像素是否在剪裁区域的内部或外部（同样，对于边界像素可能会有抗锯齿逻辑）。
SkPaint 上的 SkShader 的逻辑。SkShader 实际上可以是一个对象树（由于 SkShaders::Blend 和下面描述的其他特性）。
类似的 SkColorFilter 逻辑（它也可以是一个树结构，由于 SkColorFilters::Compose、SkColorFilters::Blend 和下面描述的特性）。
混合代码（对于某些 SkBlendModes，或者通过 SkPaint::setBlender 指定的自定义混合）。
颜色空间转换代码，作为 Skia 颜色管理的一部分。

即使 SkPaint 在 SkShader、SkColorFilter 或 SkBlender 字段中有一个复杂的对象树，仍然只有一个 GPU 片源着色器。该树中的每个节点都会创建一个函数。剪裁代码和几何代码各自创建一个函数。混合代码可能会创建一个函数。总体片段着色器然后调用所有这些函数（这些函数可能会调用其他函数，例如在 SkShader 树的情况下）。（号称很优化的HSR技术、函数复用、内联函数、预计算或缓存减少overdraw但是我感觉有点吹过头了吧，不过除非二维的比较什么…）

清空：
SkCanvas 的 canvas->clear(SK_ColorGRAY);作用清除画布：clear 方法会清除画布上的所有内容。填充颜色：clear 方法会用指定的颜色填充整个画布。跟 glClear(GL_COLOR_BUFFER_BIT)类似！

原始图像着色器：
在SkImage::makeRawShader 采样计算是属于线性空间如果后续需要绘制到屏幕上需要伽马矫正或需要进行颜色空间的变换的。所以makeRawShader主要是用于对存储法线、粗糙度、oa、高度图或恰好存储在图像中的任何其他纯数学数据的图像。它的工作方式与常规图像着色器（包括过滤和平铺）类似，但有一些主要区别：

不应用色彩空间转换（忽略图像的色彩空间）。
alpha 类型为 kUnpremul 的图像不会自动预乘。
不支持双三次滤波（Bicubic filtering）调用makeRawShader时请求双三次过滤将返回nullptr 。

sksl renderTaget(FBO)
sksl 采样二维纹理SkSL_EvaluatingImageShader
sksl调用另一个render pass，动态组合着色器片段
sksl坐标系：
在这里插入图片描述

参考资料：

漫谈史上最强Skia 2D渲染引擎（少谈优点，多谈缺点）
深入理解Flutter的图形图像绘制原理——图形库skia剖析
[总结] 漫谈HDR和色彩管理（二）颜色空间 - 知乎