首页 / 技能 / shadertoy — 着色器助手

🟥 shadertoy — 着色器助手

v1.0.0

一站式 ShaderToy 片段着色器创作、讲解、调试与移植工具，支持 mainImage、iTime 等内置变量解析，附带 WebGL 演示与 Node 脚本，快速迁移至 WebGL、Three.js 等环境。

0· 139·0 当前·0 累计
jvy 头像by @jvy
开发工具代码生成浏览器自动化文档工具数据处理
下载技能包
最后更新
2026/3/21
0
安全扫描
VirusTotal
无害
查看报告
OpenClaw
安全
high confidence
该技能的文件、运行时说明与附带的辅助脚本均与其既定用途（帮助编写/调试/移植 ShaderToy 片段着色器）一致，未请求无关凭据、安装或网络访问。
评估建议
该技能内部一致，专注于 ShaderToy 任务。在本地运行捆绑的 node 脚本前，请审阅脚本（已包含且可读）并在普通用户环境中执行（无需特殊密钥）。演示 HTML 仅在浏览器内运行 WebGL，本地打开安全。若计划在生产环境复用代码，请先在沙箱项目中检查并测试着色器/宿主胶水。注意，agents/openai.yaml 允许隐式/自动调用（技能标准），仅当后续添加请求凭据或执行网络操作的技能时才需谨慎。...
详细分析 ▾
✓ 用途与能力
名称/描述（ShaderToy 片段着色器帮助与移植）与提供的产物一致：SKILL.md、参考资料、演示 HTML 及小型本地 Node 辅助脚本。未请求无关云凭据、系统访问或工具。
✓ 指令范围
SKILL.md 仅聚焦 ShaderToy 概念、调试与移植，仅引用捆绑本地文件并指示运行所含脚本；未指示读取无关系统文件、环境变量或联系外部端点。
✓ 安装机制
未提供安装规范（纯指令技能，含捆绑脚本与资源）。所含脚本与 HTML 均为本地且可读；安装时无下载、包安装或外部 URL。
✓ 凭证需求
技能未声明所需环境变量、主凭据或配置路径。代码未尝试访问密钥或外部服务。
✓ 持久化与权限
技能非常驻（always: false）且不修改其他技能或系统设置。agents/openai.yaml 允许隐式调用（技能常态），但未与其他可疑权限结合。
安全有层次，运行前请审查代码。

运行时依赖

无特殊依赖

版本

latestv1.0.02026/3/21

shadertoy 技能的初始发布。 - 提供用于编写、讲解、调试和移植 ShaderToy 风格片段着色器的工作流与命令。 - 仅聚焦 ShaderToy 内置变量、mainImage、通道、缓冲区及向 WebGL 或 Three.js 等运行时的迁移。 - 包含命令行辅助工具，用于检查内置变量、生成移植/调试清单及演示脚手架。 - 附带捆绑演示模板与参考指南，涵盖 ShaderToy 概念与迁移。 - 添加明确护栏，确保在故障排查与移植全程保持 ShaderToy 特定约定。

● 无害

安装命令

点击复制
官方npx clawhub@latest install shadertoy
镜像加速npx clawhub@latest install shadertoy --registry https://cn.longxiaskill.com

技能文档

工作流程

1. 确认 ShaderToy 结构

首先解决以下问题：
  • 是单个 Image 通道还是包含 Buffer A/B/C/D 的多通道
  • 是否使用 iTime、iResolution、iMouse
  • 通道使用情况：iChannel0..3
  • 代码是纯程序化还是采样纹理/缓冲区

如果用户贴出 ShaderToy 代码，在效果正常工作前保持原始结构可见。

2. 先在 ShaderToy 术语内调试

在移植前，用 ShaderToy 约定简化效果：
  • 将输出替换为固定颜色
  • 可视化 fragCoord / iResolution.xy
  • 临时跳过纹理读取和通道
  • 一次隔离一个项

阅读 references/builtins.md 获取内置变量映射。

3. 理解效果后再移植

从 ShaderToy 移植时：
  • 将 mainImage(out vec4 fragColor, in vec2 fragCoord) 转换为主机入口点
  • 用显式 uniform 替换内置变量
  • 重建全屏四边形或后处理主机设置
  • 显式处理通道纹理和缓冲区通道

在重写主机端胶水代码前，先阅读 references/porting.md。

4. 保持答案具体

优先提供：
  • 修正后的 ShaderToy fragment shader
  • 内置变量到主机 uniform 的映射
  • 最小迁移计划
  • 第一个可能的失败点

命令

检查内置变量和通道

node {baseDir}/scripts/shadertoy.js builtins
node {baseDir}/scripts/shadertoy.js channels --json

生成移植检查清单

node {baseDir}/scripts/shadertoy.js port three
node {baseDir}/scripts/shadertoy.js port webgl --json
将 ShaderToy 代码转换到其他运行时时使用。

打印调试检查清单

node {baseDir}/scripts/shadertoy.js debug black-screen
node {baseDir}/scripts/shadertoy.js debug channels

生成接入计划

node {baseDir}/scripts/shadertoy.js intake "port a shadertoy ocean to r3f"
node {baseDir}/scripts/shadertoy.js intake "fix my iChannel feedback effect" --json

选择正确的演示起点

node {baseDir}/scripts/shadertoy.js demo single-pass
node {baseDir}/scripts/shadertoy.js demo feedback --json

生成脚手架推荐

node {baseDir}/scripts/shadertoy.js scaffold three single-pass
node {baseDir}/scripts/shadertoy.js scaffold webgl feedback --json
当用户希望从 ShaderToy 想法到可运行主机设置的最快路径时使用。

资源

捆绑模板：
  • assets/shadertoy-single-pass-demo/index.html
  • assets/shadertoy-feedback-notes.txt

参考资料

  • 内置变量、通道及通道语义：references/builtins.md
  • 迁移到 WebGL / Three.js / R3F 规则：references/porting.md
  • 缓冲区与反馈分类：references/buffers-feedback.md

护栏规则

  • 在理解效果前保持 ShaderToy 命名不变。
  • 不要发明用户未指定的通道或缓冲区通道。
  • 如果 shader 依赖缓冲区或反馈，在假装它是单通道效果前明确说明。
  • 移植时，将每个隐式的 ShaderToy 输入在主机代码中显式化。
数据来源：ClawHub ↗ · 中文优化：龙虾技能库