mcpField
W
webgpu-claude-skill

webgpu-claude-skill

github.com/podo开发29162 次安装1 天前更新
代码仓库

关于 webgpu-claude-skill

webgpu-claude-skill 为 Claude Code 和 Cursor 提供 Three.js r183+ 的 WebGPU 开发技能，涵盖 TSL 材质、GPU 计算、后处理与 WGSL 集成。

主要功能

  1. 01Three.js WebGPU 渲染指导
  2. 02TSL 节点式材质
  3. 03GPU 计算着色器
  4. 04WebGPU 后处理
  5. 05WGSL 着色器集成

适用场景

  1. 01构建基于 WebGPU 的 3D 体验
  2. 02在 Three.js 中编写 TSL 材质
  3. 03使用 GPU 计算处理非渲染任务

安装

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

$npx skills add https://github.com/podo/design-agent-skills --skill webgpu-claude-skill

安装后在 Claude Code 中输入/webgpu-claude-skill确认已加载。

附带文件stub.yaml

详细介绍

webgpu-claude-skill

目录占位内容 — 完整软件包：dgreenheck/webgpu-claude-skill

决策树

  1. 是否已安装软件包？ 检查：~/.design-agent-skills/skills/webgpu-claude-skill/SKILL.md 是否存在。

    • 是 → 调用 webgpu-claude-skill 并继续
    • 否 → 转到第 2 步

  2. 是否可以访问 shell？

    • 是 → 运行下方的安装命令，然后调用该技能
    • 否 → 显示安装命令；在 Claude Code 中，将其作为以 ! 开头的聊天消息发送 — 全局安装请添加 -g，仅用于当前项目则省略

安装命令

npx skills add dgreenheck/webgpu-claude-skill

安装后调用

  • 技能名称：webgpu-claude-skill
  • 触发短语："WebGPU"、"TSL Three.js"、"GPU compute shaders"、"WGSL"

功能说明

提供 Three.js（r183+）中 WebGPU 渲染管线的深入知识，包括用于基于节点创建材质的 Three.js 着色语言（TSL）、用于非渲染工作负载的 GPU 计算着色器、使用 WebGPU passes 进行高级后期处理，以及 WGSL 着色器集成。提供兼容 Claude Code 和 Cursor 的双格式版本。适用于构建需要 GPU 计算或新一代着色器创建方式的高性能 3D 体验。

不适用场景

  • 不使用 WebGPU 的标准 Three.js 场景 — 请改用 cloudai-threejs
  • WebGL 上的 GLSL 着色器开发 — 请改用标准 Three.js 技能
  • 架构/BIM 工作流 — 请改用 threejs-claude-skill-package

评论

支持 Markdown