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

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/skiaviewer是 Skia 仓库内置的交互式图形查看工具用于可视化 GMsGolden 测试图、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 类型的映射扩展名Slide 类型对应命令行参数.skpSKPSlide--skps.mskpMSKPSlide--mskps.jpg/.jxlImageSlide--jpgs/--jxls.gif/.webpAnimatedImageSlide--jpgs.jsonSkottieSlide需SK_ENABLE_SKOTTIE--lotties.svgSvgSlide需SK_ENABLE_SVG--svgs也就是说viewer 不仅能看内置 GM还能直接把目录里的 SKP、SVG、动图等文件批量加载为可翻页的 slide。构建与基础用法构建viewer目标与构建其他 Skia 工具一致在构建产物目录下直接运行# 假设已用 GN 生成 Debug 构建args 中包含 is_debugtrue 等 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文件默认目录名为skpsAndroid 上为/data/local/tmp/skps见 FLAGS_skps 定义。--svgs dir读取目录下所有 SVG也可直接传单个 SVG 文件路径见 FLAGS_svgs 定义。--file/-f直接打开单个文件查看FLAGS_file。渲染后端选择--backend的合法取值在源码中通过宏按构建配置拼接BACKENDS_STR实际可用值取决于构建时启用的后端。完整候选包括取值含义平台/构建前提swCPU 光栅化Raster默认值始终可用glOpenGLGanesh需SK_GLvkVulkanGanesh需SK_VULKAN且 Linux/WindowsmtlMetalGanesh需SK_METAL且 macOS/iOSd3dDirect3DGanesh需SK_DIRECT3D且 WindowsangleANGLE 封装Ganesh需SK_GLSK_ANGLE且 Windows/macOSgrvkVulkanGraphite需SK_GRAPHITESK_VULKANgrmtlMetalGraphite需SK_GRAPHITESK_METALgrdawn_d3d11/grdawn_d3d12/grdawn_metal/grdawn_gles/grdawn_vkDawn 后端Graphite需SK_GRAPHITESK_DAWN按平台裁剪源码中get_backend_typeViewer.cpp#L472 起负责把字符串映射为窗口后端枚举。运行时按b键可在已构建且可用的后端之间循环切换这也是对比 CPU/GPU 渲染差异的最快方式。窗口与显示--width n、--height n初始窗口尺寸。--stats启动时显示统计浮层FLAGS_stats对应fStatsLayer.setActive(FLAGS_stats)。--redraw开启连续重绘用于动画类 slideFLAGS_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 起下表将原文档列出的快捷键与当前源码中的实际绑定对应起来按键功能[/]上一张 / 下一张 slideb在可用后端之间循环Cycle backendsm切换 MSAA 抗锯齿i显示 / 隐藏 ImGui 调试浮层HUDz/Z开关缩放窗口 / 固定缩放窗口状态源码 z、Z 绑定h开关颜色直方图窗口当前源码中直方图绑定为C见 addCommand(C)注意不同版本可能略有差异s保存当前 slide 为 PNG同时源码中s还承担统计浮层开关addCommand(s)c循环切换颜色模式Legacy / 颜色管理 8888 / F16 等wGanesh 后端下切换线框渲染v/V切换 vsync / 延迟获取 drawableMetalr切换连续重绘空格开关调试 GUI/或 Backspace直接跳到 slide 选择器picker并聚焦0重置统计测量按键绑定属于 UI 实现细节具体版本间可能调整若按键无响应以i打开的 ImGui HUD 内提供的菜单项为准。Shader 检视与实时修改ImGui HUD这是 viewer 区别于普通预览器的最强能力。操作流程启动后按i唤出 ImGui HUD打开Shaders窗口即可查看当前 slide 用到的SkSL 源码以及编译产物如 GLSL / SPIR-VSPIR-V 查看依赖SK_VULKAN构建时链接的 spirv-tools见 Viewer.cpp#L133-L135直接在窗口内修改 SkSL 并即时生效用于排查 shader 问题无需重新编译整个应用。这套能力由专门的 slide 支撑SkSLSlidetools/viewer/SkSLSlide.cpp与SkSLDebuggerSlidetools/viewer/SkSLDebuggerSlide.cpp——后者相当于一个可交互的 SkSL 调试器可用于单步观察 shader 执行与变量取值。HUD 中还提供 Dump SkSL to resources/sksl/ 按钮Viewer.cpp#L3260可将当前 SkSL 导出到资源目录便于留存最小复现用例。此外Ganesh 后端下 viewer 还挂接了CapturingShaderErrorHandlerViewer.cpp#L161-L180会在编译失败时捕获 shader 与错误文本供 HUD 展示。实战工作流示例1. 查看指定的 GMout/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组的 slideViewer.cpp#L1171-L1176slide 名称即文件名不含扩展名因此--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/lotties4. 调试一段 shaderout/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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考