关于 verify-pixels
此测试 Skill 用于检查图形变更是否保留原有渲染像素。它指导如何确定性地捕获帧、选择逐像素比较或并排审查，并报告测得的差异。
主要功能
- 01选择精确或视觉比较方式
- 02确定性地捕获帧
- 03捕获 WebGL 和 WebGPU 输出
- 04检查基线捕获的重复性
- 05报告像素差异
适用场景
- 01测试渲染变更
- 02比较新旧构建结果
- 03检查动画场景的指定姿态
- 04发现捕获测试框架中的噪声
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/verify-pixels确认已加载。
详细介绍
证明像素未发生变化
选择关卡
- 字节级精确：改动保持相同的解码数据和相同的着色计算，因此每个像素 都必须匹配。
- 并排评审：改动会改变采样值、随机顺序、精度或数学运算的执行位置。将其报告为“无法进行字节级把关”，并在每个姿态下展示旧版和新版；不要凭空捏造 阈值。
让帧具备确定性
- 加载每个资源，并在各构建之间匹配相机、画布尺寸、光照和动画时间。为 偶发的随机性设置种子。
- 用应用自身持有的单一时间值驱动动画 shader，而不是
Date.now()或performance.now()。 app.timeScale = 0会让dt变为零，但update仍会运行；任何按帧计数或读取 挂钟时间的东西仍会推进。- 设置
app.autoRender = false，然后在每一帧之前设置app.renderNextFrame = true以进行捕获。
捕获并比较
- WebGL：
await (device as WebglGraphicsDevice).readPixelsAsync(x, y, w, h, pixels)。WebGPU： 渲染到一个RenderTarget中，并用Texture#read()读取其colorBuffer。避免颜色 转换和有损编码。 - 先对未修改的构建捕获两次。这些捕获必须完全匹配，否则测试框架本身 就是有噪声的。
- 在至少两个姿态下覆盖每个被触及的表面，并在相关时额外覆盖一个动画中间阶段。
- 报告计数，例如“65536 个像素中有 0 个不同”，或报告计数以及差异 所在的位置。“看起来一样”不是结果。
将测试框架代码排除在发布的 bundle 之外；通过 inspect-runtime 附加它。
评论
支持 Markdown