mcpField
W
webgpu-threejs-tsl

webgpu-threejs-tsl

github.com/dgreenheck开发1.3k1.6k 次安装29 周前更新
代码仓库

关于 webgpu-threejs-tsl

面向 Three.js WebGPU 开发的技能资料，帮助开发者用 JavaScript 和 TSL 编写着色器，并提供概念文档、示例与模板。

主要功能

  1. 01TSL 节点着色器文档
  2. 02节点材质与计算着色器示例
  3. 03后期处理与 WGSL 集成指南
  4. 04WebGPU 项目和计算着色器模板
  5. 05设备丢失及设备限制参考

适用场景

  1. 01搭建 Three.js WebGPU 项目
  2. 02使用 TSL 创建自定义材质
  3. 03实现 GPU 计算粒子效果
  4. 04从 GLSL 迁移到 TSL

安装

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

$npx skills add https://github.com/dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl

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

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

REFERENCE.md
docs/
compute-shaders.md
core-concepts.md
device-loss.md
limits-and-features.md
materials.md
post-processing.md
wgsl-integration.md
examples/
basic-setup.js
custom-material.js
earth-shader.js
particle-system.js
post-processing.js
templates/
compute-shader.js
webgpu-project.js

详细介绍

使用 TSL 的 WebGPU Three.js

TSL（Three.js Shading Language）是一种基于节点的着色器抽象，让你可以用 JavaScript 编写 GPU 着色器，而不是使用 GLSL/WGSL 字符串。

快速开始

import * as THREE from 'three/webgpu';
import { color, time, oscSine } from 'three/tsl';

const renderer = new THREE.WebGPURenderer();
await renderer.init();

const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0xff0000).mul(oscSine(time));

技能内容

文档
  • docs/core-concepts.md - 类型、运算符、uniform、控制流
  • docs/materials.md - 节点材质及其所有属性
  • docs/compute-shaders.md - 使用实例化数组进行 GPU 计算
  • docs/post-processing.md - 内置效果和自定义效果
  • docs/wgsl-integration.md - 自定义 WGSL 函数
  • docs/device-loss.md - 处理 GPU 设备丢失与恢复
  • docs/limits-and-features.md - WebGPU 设备限制和可选功能
示例
  • examples/basic-setup.js - 最简 WebGPU 项目
  • examples/custom-material.js - 自定义着色器材质
  • examples/particle-system.js - GPU 计算粒子
  • examples/post-processing.js - 效果管线
  • examples/earth-shader.js - 带大气层的完整地球
模板
  • templates/webgpu-project.js - 入门项目模板
  • templates/compute-shader.js - 计算着色器模板
参考
  • REFERENCE.md - 快速参考速查表

核心概念

导入模式
// Always use the WebGPU entry point
import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';
节点材质

使用 TSL 节点替换标准材质属性：

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement
方法链式调用

TSL 使用方法链式调用执行操作：

// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
自定义函数

使用 Fn() 编写可复用的着色器逻辑：

const fresnel = Fn(([power = 2.0]) => {
  const nDotV = normalWorld.dot(viewDir).saturate();
  return float(1.0).sub(nDotV).pow(power);
});

何时使用此技能

  • 使用 WebGPU 渲染器设置 Three.js
  • 使用 TSL 创建自定义着色器材质
  • 编写 GPU 计算着色器
  • 构建后期处理管线
  • 从 GLSL 迁移到 TSL
  • 实现视觉效果（粒子、水、地形等）

资源

评论

支持 Markdown