用途:指导使用 WebGPU 渲染器开发 Three.js 应用,并用 TSL(Three.js Shading Language)以 JavaScript 编写 GPU 着色器,替代 GLSL/WGSL 字符串写法。
主要能力:覆盖核心概念(类型、运算符、uniform、控制流)、节点材质及其属性、计算着色器与实例化数组、内置与自定义后处理、自定义 WGSL 函数集成、GPU 设备丢失与恢复、WebGPU 设备限制与可选特性。提供快速参考速查表。
使用方式:始终从 WebGPU 入口导入,如 import * as THREE from 'three/webgpu',并从 three/tsl 引入 TSL 函数;用 WebGPURenderer 并 await renderer.init() 初始化;节点材质以 *Node 属性替代传统属性,例如 material.colorNode 替代 material.map、material.roughnessNode 替代 material.roughness、material.positionNode 做顶点位移;TSL 采用方法链,例如 time.mul(2.0).add(offset).sin().mul(0.5).add(0.5);用 Fn() 封装可复用着色器逻辑。
适用场景:为 Three.js 配置 WebGPU 渲染器、创建自定义着色器材质、编写 GPU 计算着色器、搭建后处理管线、从 GLSL 迁移到 TSL、实现粒子/水面/地形等视觉效果。
限制:资料未提供具体版本要求、浏览器兼容范围、性能数据与收费信息;安装命令、定价与平台支持暂未提供。使用前需自行确认运行环境对 WebGPU 的支持情况。