
使用方式
关于
使用 TSL(Three.js 着色语言)开发 WebGPU 驱动的 Three.js 应用的综合指南。涵盖 WebGPU 渲染器设置、TSL 语法与节点材质、计算着色器、后处理效果和 WGSL 集成。
WebGPU Three.js 与 TSL
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
- 实现视觉效果(粒子、水面、地形等)
资源
- Three.js TSL Wiki
- WebGPU 示例(以
webgpu_为前缀的文件)
兼容工具
Claude CodeCursor
标签
前端开发
