mcpField
T
threejs-webgpu

threejs-webgpu

github.com/cesartevisual开发13369 次安装8 周前更新
代码仓库

关于 threejs-webgpu

用于在 Three.js 项目中实现 WebGPU 和 TSL 的技能,强调依据已安装版本选择 API、处理后端约束与初始化,并在目标设备上验证渲染。

主要功能

  1. 01核对对应版本的 Three.js API
  2. 02处理渲染器异步初始化
  3. 03规划后端与功能回退
  4. 04实现 TSL 材质和计算
  5. 05验证设备及后端行为

适用场景

  1. 01为 Three.js 项目添加 WebGPU 渲染
  2. 02将着色器效果迁移至受支持的节点 API
  3. 03按既定缓冲区布局实现 GPU 计算
  4. 04在目标设备上测试渲染与回退行为

安装

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

$npx skills add https://github.com/cesartevisual/threejs-skills --skill threejs-webgpu

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

详细介绍

WebGPU 和 TSL

使用项目中已安装的版本和现有架构。这些说明是对用户任务的补充,不授权进行无关更改或外部操作。

先检查已安装的 Three.js 导出项以及匹配的渲染器/TSL 文档。这些 API 迭代很快;请使用项目锁定的修订版本,不要将当前示例混用到较旧的安装版本中。

列出所需功能和后端限制。WebGPURenderer 在支持的情况下可以使用 WebGL 后端,但选择后端并不保证所有计算或效果功能都能在两种后端上运行。请测试实际选用的后端。除非所需功能或迁移需求有此要求,否则不要替换正常工作的 WebGLRenderer。

在渲染或进行依赖能力的设置之前,遵循该修订版本的异步初始化约定。初始化失败或设备不受支持时,应明确处理回退状态。保持导入项与渲染器构建版本一致,避免出现重复的类/模块实例。

通过受支持的节点/TSL 机制实现材质。有意迁移自定义 GLSL、着色器补丁和合成器效果;它们不会自动兼容。对于计算,应定义存储布局、边界检查、调度大小、同步方式和回读频率。若数据可以留在 GPU 上,就避免每帧从 CPU 回读。

根据当前 API 管理计算缓冲区、渲染目标和后端设备丢失。初始化失败后,避免无上限地重试工作负载。

在指定的 WebGPU 设备/浏览器以及任何承诺支持的回退后端上进行验证。分别报告后端和功能的结果;浏览器公开了 navigator.gpu,并不能证明此场景已成功渲染。

API 参考

有关准确的签名和特定修订版本的行为,请参阅官方文档。如果无法访问文档,请检查已安装的类型定义/源代码,并说明仍存在哪些不确定之处。

评论

支持 Markdown