企业官网建设流程全解析

Skia viewer 工具完全指南：GM/SKP/SVG 可视化与着色器实时调试

【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images. See documentation for contribution instructions.项目地址: https://gitcode.com/gh_mirrors/ski/skia

viewer是 Skia 仓库内置的交互式图形查看工具，用于可视化 GMs（Golden 测试图）、SKP 录制文件、SVG 矢量图以及 MSKP、Lottie 动画等素材，并提供基于 ImGui 的调试 HUD 对着色器进行实时检视与修改。本文基于 viewer 使用文档 并结合源码，完整讲解它的命令行参数、键盘交互、着色器调试流程与典型工作流，读完即可独立用它检查渲染结果、定位绘制与着色器问题。

viewer 是什么：从源码看它的角色

viewer的完整实现位于 tools/viewer/Viewer.cpp，入口在 Application::Create，它创建Viewer实例并驱动tools/window下的原生窗口系统。与dm（无头批量跑测试）、nanobench（基准测试）不同，viewer 的核心价值是人机交互：把测试用例组织成一个个 "slide"（幻灯片），通过 GUI 逐张查看、放大、切换后端，并实时观察 GPU 渲染与着色器编译结果。

slide 的来源非常丰富，initSlides 中注册了外部文件到 slide 类型的映射：

也就是说，viewer 不仅能看内置 GM，还能直接把目录里的 SKP、SVG、动图等文件批量加载为可翻页的 slide。

构建与基础用法

构建viewer目标与构建其他 Skia 工具一致，在构建产物目录下直接运行：

# 假设已用 GN 生成 Debug 构建（args 中包含 is_debug=true 等） out/Debug/viewer --match <pattern>

未加任何筛选参数启动时，viewer 会进入全部 slide 列表，可用键盘翻页浏览。最基本的目标是快速核对某个 GM 的绘制结果，例如：

out/Debug/viewer --match alphagradients

启动后直接定位到名称匹配alphagradients的 GM slide。也可以先列出所有可用的 slide 名称：

out/Debug/viewer --list

--list只打印名称后退出（对应源码中 FLAGS_list 与 listNames 调用），适合先用它确认名称再配合--match精准打开。

命令行参数全解

匹配与筛选

• --match/-m：按名称过滤 slide，默认是大小写敏感的连续子串匹配。源码 FLAGS_match 的完整定义 还支持更精确的模式：
  • [~]前缀：~表示"该名称始终跳过"；
  • [^]前缀：^要求名称以该子串开头；
  • [$]后缀：$要求名称以该子串结尾；
  • ^与$同时使用表示精确匹配；
  • 多个匹配子串用空格分隔，任一命中即入选。
• --slide <name>：启动后从指定名称的 slide 开始（源码在 FLAGS_slide 处理处，找不到该名称时会向 stderr 报Unknown slide并继续）。
• --backend/-b：选择渲染后端，默认sw。详见下一节。
• --skps <dir>：从目录读取.skp文件（默认目录名为skps，Android 上为/data/local/tmp/skps，见 FLAGS_skps 定义）。
• --svgs <dir>：读取目录下所有 SVG，也可直接传单个 SVG 文件路径（见 FLAGS_svgs 定义）。
• --file/-f：直接打开单个文件查看（FLAGS_file）。

渲染后端选择

--backend的合法取值在源码中通过宏按构建配置拼接（BACKENDS_STR），实际可用值取决于构建时启用的后端。完整候选包括：

源码中get_backend_type（Viewer.cpp#L472 起）负责把字符串映射为窗口后端枚举。运行时按b键可在已构建且可用的后端之间循环切换，这也是对比 CPU/GPU 渲染差异的最快方式。

窗口与显示

• --width <n>、--height <n>：初始窗口尺寸。
• --stats：启动时显示统计浮层（FLAGS_stats，对应fStatsLayer.setActive(FLAGS_stats)）。
• --redraw：开启连续重绘，用于动画类 slide（FLAGS_redraw，运行时也可按r切换）。
• --msaa <n>：子像素采样数，0表示关闭硬件抗锯齿（FLAGS_msaa）。
• --resourcePath/-i：资源根目录。当界面中出现字体、图片等资源加载失败时，优先检查该路径是否正确。Android 构建会在 Viewer 构造函数中强制设置 为/data/local/tmp/resources，桌面端需通过此参数显式指定。
• 其他常用参数：--threads/-j控制线程池大小（默认每核一线程，FLAGS_threads）；--bisect <file>对指定 skp/svg 文件做二分定位；--offscreen强制离屏渲染。

交互控制：键盘快捷键

Viewer构造函数中通过fCommands.addCommand注册了大量按键绑定（Viewer.cpp#L797 起），下表将原文档列出的快捷键与当前源码中的实际绑定对应起来：

按键绑定属于 UI 实现细节，具体版本间可能调整；若按键无响应，以i打开的 ImGui HUD 内提供的菜单项为准。

Shader 检视与实时修改（ImGui HUD）

这是 viewer 区别于普通预览器的最强能力。操作流程：

1. 启动后按i唤出 ImGui HUD；
2. 打开Shaders窗口；
3. 即可查看当前 slide 用到的SkSL 源码以及编译产物（如 GLSL / SPIR-V，SPIR-V 查看依赖SK_VULKAN构建时链接的 spirv-tools，见 Viewer.cpp#L133-L135）；
4. 直接在窗口内修改 SkSL 并即时生效，用于排查 shader 问题，无需重新编译整个应用。

这套能力由专门的 slide 支撑：SkSLSlide（tools/viewer/SkSLSlide.cpp）与SkSLDebuggerSlide（tools/viewer/SkSLDebuggerSlide.cpp）——后者相当于一个可交互的 SkSL 调试器，可用于单步观察 shader 执行与变量取值。HUD 中还提供 "Dump SkSL to resources/sksl/" 按钮（Viewer.cpp#L3260），可将当前 SkSL 导出到资源目录，便于留存最小复现用例。此外，Ganesh 后端下 viewer 还挂接了CapturingShaderErrorHandler（Viewer.cpp#L161-L180），会在编译失败时捕获 shader 与错误文本，供 HUD 展示。

实战工作流示例

1. 查看指定的 GM

out/Debug/viewer --match alphagradients

用[/]在相近命名的 GM 之间切换；按b对比sw与 GPU 后端的差异；按z放大检视边缘锯齿，配合m调整 MSAA。

2. 检视 SKP 录制文件

out/Debug/viewer --skps /path/to/skp --match <file_name_without_extension>

--skps会把目录内的.skp注册为skp-dir组的 slide（Viewer.cpp#L1171-L1176），slide 名称即文件名（不含扩展名），因此--match直接传文件名即可命中。若文件较多，可先用--list确认名称。

3. 查看 SVG 与动图素材

# 目录形式：加载整个目录的 SVG out/Debug/viewer --svgs ./my_svgs # 单文件形式：直接打开一个 SVG out/Debug/viewer --svgs ./logo.svg # Lottie 动画（需 SK_ENABLE_SKOTTIE 构建） out/Debug/viewer --lotties /path/to/lotties

4. 调试一段 shader

out/Debug/viewer --match SkSLSlide # 或直接 --slide SkSLSlide

进入后按i打开 HUD，切到 Shaders 窗口修改 SkSL 并观察即时渲染反馈，借助 SkSLDebuggerSlide 做逐指令调试。这一工作流对 Graphics/GPU 团队排查绘制异常、验证新特效算法极为高效。

小结

viewer 以"slide + GUI"的方式把 Skia 的绘制测试、外部素材与 GPU 调试能力统一到一个交互式窗口中：--match的灵活匹配语法适合精准定位，--backend适合跨后端对比，ImGui HUD 则提供了从 SkSL 到 GLSL/SPIR-V 的全链路检视与实时改码能力。需要更深入了解参数细节可继续阅读 Viewer.cpp 顶部的参数定义区与 tools/viewer 目录下的各 Slide 实现；与之配套的 nanobench 用法、dm 用法 和 GMs 说明 分别覆盖性能测试与批量校验场景，可组合使用形成完整的验证闭环。

【免费下载链接】skiaSkia is a complete 2D graphic library for drawing Text, Geometries, and Images. See documentation for contribution instructions.项目地址: https://gitcode.com/gh_mirrors/ski/skia