@gogomi/pi-glsl-shader-vision
Pi 智能体内的 GLSL 着色器实时预览与调试工具
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：@gogomi/pi-glsl-shader-vision。 它的用途是：Pi 智能体内的 GLSL 着色器实时预览与调试工具 完整的 Skill 内容见：https://321skill.com/skills/gogomi-pi-glsl-shader-vision/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“帮我用这个 skill 预览一段水面波纹的 GLSL 代码。”，它会启动着色器查看器，加载你的代码并显示实时渲染效果。接着你可以说：“调出控制面板，把波纹频率调高一点。”，它便会通过 Tweakpane 面板让你滑动滑块，即时看到更密集的波纹效果。
介绍
这个 Skill 解决了在 Pi Agent 环境中编写和调试 GLSL 片段着色器时缺乏直观实时反馈的难题。开发者通常需要反复修改代码、刷新页面才能看到效果，过程繁琐且低效。
它通过集成一个 WebGL 预览窗口，让用户输入的 GLSL 代码能够即时渲染出视觉效果。同时，它整合了 Tweakpane 控制面板，允许用户动态调整着色器中的 uniform 变量（如颜色、时间、噪声强度等），无需修改代码即可实时观察参数变化对最终图像的影响。此外，它还支持预设管理、探针表（probe sheets）生成和视频导出功能。
这个 Skill 主要适合图形编程爱好者、WebGL/Three.js 开发者、创意编码艺术家以及任何需要在 Pi Agent 环境中快速原型化或教学 GLSL 着色器效果的用户。它降低了图形编程的实时调试门槛。
使用建议：在编写涉及复杂数学或光照模型的着色器时，充分利用其实时调整参数的功能来微调效果。注意，其性能依赖于 Pi Agent 的运行环境以及着色器本身的复杂度，过于复杂的着色器可能导致预览帧率下降。导出视频功能适合用于录制效果演示。
核心特点
这是首个深度集成于 Pi Agent 环境内的专用 GLSL 着色器查看器，提供了从编码、实时参数调试到效果录制的一站式闭环体验，而非简单的代码展示或外部链接跳转。其内置的 Tweakpane 控制面板和预设系统，使得非专业图形程序员也能轻松探索和调整着色器参数。
注意事项
不适合需要处理复杂 3D 几何体、顶点着色器或需要与特定 WebGL 上下文深度集成的重型图形应用开发。
常见问题
这个 skill 能导出视频吗？
可以，支持将着色器动画效果导出为视频文件。
需要懂 WebGL 才能用吗？
需要基本的 GLSL 片段着色器知识，但实时调整功能降低了调试门槛。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/gogomi-pi-glsl-shader-vision/raw/index.md 读取 @gogomi/pi-glsl-shader-vision 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/gogomi-pi-glsl-shader-vision/raw/index.md（查看排版版本）