mcpField
G
glslviewer-shader-debug

glslviewer-shader-debug

github.com/openharmonyinsight开发3549 次安装11 周前更新
代码仓库

关于 glslviewer-shader-debug

glslviewer-shader-debug 是一项用于反复生成着色器数学预览的 Skill。它指导开发者将着色器片段转换为标准 GLSL，使用 glslViewer 无头渲染 PNG，并检查形状或遮罩是否符合预期。

主要功能

  1. 01将着色器片段转换为 GLSL
  2. 02无显示器渲染着色器
  3. 03导出 PNG 预览
  4. 04可视化轮廓与遮罩
  5. 05对照预期检查渲染结果

适用场景

  1. 01检查有符号距离场轮廓
  2. 02查看渐变或法线方向变化
  3. 03比较着色器计算与预期形状

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/openharmonyinsight/openharmony-skills --skill glslviewer-shader-debug

安装后在 Claude Code 中输入/glslviewer-shader-debug确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
assets/
sdf-contour-template.frag
references/
runtime-effect-to-glsl.md
scripts/
render_headless.sh

详细介绍

glslViewer 着色器调试

使用此技能，将着色器数学转换为可重复的无头预览。

工作流

  1. 使用 command -v glslViewer || command -v glslviewer 确认 glslViewer 可用。
  2. 创建一个临时 .frag 文件，通常复制 assets/sdf-contour-template.frag。
  3. 将源着色器转换为标准 GLSL。
  4. 使用 scripts/render_headless.sh 渲染着色器。
  5. 检查生成的 PNG，并将轮廓或遮罩形状与预期进行比较。

转换规则

  • 对于 runtime-shader 或类似 SkSL 的代码片段，请阅读 references/runtime-effect-to-glsl.md。
  • 首先保持数学运算不变。先修改语法，再修改行为。
  • 将 half4 或 float2 等非标准类型替换为对应的 GLSL 类型。
  • 将 main(vec2 fragCoord) 改写为标准片段着色器入口点形式：
void main()
{
    vec2 fragCoord = gl_FragCoord.xy;
    fragColor = ...;
}
  • 优先添加轮廓或遮罩可视化，而不是盯着原始 SDF alpha 看。模板已包含可复用的 previewColor() 辅助函数。

渲染

像这样渲染一个或多个片段着色器：

/root/.codex/skills/glslviewer-shader-debug/scripts/render_headless.sh path/to/a.frag path/to/b.frag

实用选项：

  • --output DIR：选择输出目录
  • --size WIDTHxHEIGHT：选择渲染尺寸，默认值为 256x256
  • GLSLVIEWER_BIN=/full/path/to/glslViewer：指定要使用的二进制文件

脚本会为每个输入着色器写入一个 PNG，以及一个包含原始导出帧的帧目录。

验证启发式

  • 对于圆角矩形 SDF，顶部和底部扫描线应在靠近圆角处变窄。
  • 对于渐变或法线，优先使用伪彩色输出，以便清楚地观察方向变化。
  • 如果无头预览看起来正确，但设备输出不正确，请考虑是 uniform 绑定、后端着色器转换或下游阈值处理的问题，而不是纯数学运算的问题。

资源

评论

支持 Markdown