遮光mcp
用于着色器效果开发的MCP服务器。
从三个项目中提炼出来：
快速开始
npm install
npm run setup # install Playwright Chromium
bash scripts/setup.sh # vendor noisemaker runtime (requires ../noisemaker)
npm run build使用带噪音制造器的遮光板还是便携式？ 看 docs/SETUP.md 用于逐步配置。
配置
环境变量：
| 变量 | 默认值 | 描述 |
|---|---|---|
SHADE_EFFECTS_DIR | ../noisemaker/effects | 效果库路径 |
SHADE_VIEWER_PORT | 4173 | 本地开发服务器端口 |
SHADE_BACKEND | webgl2 | 默认渲染后端(webgl2 或 webgpu) |
SHADE_PROJECT_ROOT | cwd | 相对路径的项目根 |
ANTHROPIC_API_KEY | -- | AI驱动的工具（视觉、分析）所需 |
OPENAI_API_KEY | -- | 后备AI提供商 |
MCP客户端配置
克劳德代码
{
"mcpServers": {
"shade": {
"command": "node",
"args": ["/path/to/shade-mcp/dist/index.js"],
"env": {
"SHADE_EFFECTS_DIR": "/path/to/effects"
}
}
}
}VS代码副本
在 .vscode/mcp.json:
{
"servers": {
"shade": {
"command": "node",
"args": ["/path/to/shade-mcp/dist/index.js"],
"env": {
"SHADE_EFFECTS_DIR": "/path/to/effects"
}
}
}
}光标
在 .cursor/mcp.json:
{
"mcpServers": {
"shade": {
"command": "node",
"args": ["/path/to/shade-mcp/dist/index.js"],
"env": {
"SHADE_EFFECTS_DIR": "/path/to/effects"
}
}
}
}帆板运动
在 ~/.codeium/windsurf/mcp_config.json:
{
"mcpServers": {
"shade": {
"command": "node",
"args": ["/path/to/shade-mcp/dist/index.js"],
"env": {
"SHADE_EFFECTS_DIR": "/path/to/effects"
}
}
}
}工具参考
浏览器工具（8）
需要剧作家Chromium和供应商提供的噪音制造器运行时间。
| 工具 | 说明 |
|---|---|
compileEffect | 编译着色器效果，返回过程级别诊断。支持CSV批处理。 |
renderEffectFrame | 渲染单帧，计算图像度量（平均RGB、方差、空白/单色检测），可选PNG捕获。 |
describeEffectFrame | 渲染帧+AI视觉分析。需要 ANTHROPIC_API_KEY 或 OPENAI_API_KEY. |
benchmarkEffectFPS | 根据目标帧率测量FPS、抖动和帧定时统计数据。 |
testUniformResponsiveness | 测试每个统一修改输出。每次统一通过/失败都会返回。 |
testNoPassthrough | 验证过滤器效果是否实际修改了输入（>1%像素差）。 |
testPixelParity | 在epsilon容差内逐像素比较WebGL2和WebGPU渲染。 |
runDslProgram | 编译并执行任意DSL代码。返回指标+通过状态。 |
分析工具（4）
磁盘分析，无需浏览器。
| 工具 | 说明 |
|---|---|
checkEffectStructure | 检测未使用的文件、损坏的引用、命名违规、泄露的制服、结构奇偶校验问题。 |
checkAlgEquiv | GLSL/WGSL对的AI语义比较。需要AI密钥。 |
compareShaders | 静态结构比较：函数名称、统一、行数。 |
analyzeBranching | 对不必要的着色器分支进行AI分析，并给出优化建议。需要AI密钥。 |
知识工具（4）
内存中搜索索引。
| 工具 | 说明 |
|---|---|
searchEffects | 按概念、标签、算法或视觉风格搜索效果库。 |
analyzeEffect | 效果ID的完整定义、着色器源、统一和传递 |
searchShaderSource | 正则表达式在GLSL源代码中搜索所有效果。 |
searchShaderKnowledge | 对精心策划的着色器文档进行语义搜索：DSL语法、GLSL技术、模式、错误。 |
实用工具（2）
| 工具 | 说明 |
|---|---|
listEffects | 列出所有效果，可选择按命名空间筛选。 |
generateManifest | 通过扫描效果目录重建效果清单。 |
发展
npm test # run tests
npm run build # build with tsup
npm run dev # watch mode许可证
麻省理工学院