webgpu-threejs-tsl

用途

该技能用于在 Three.js 中参考和使用 WebGPU 相关能力，重点围绕 TSL（Three.js Shading Language）。TSL 是一种基于节点的着色器抽象，让开发者可以用 JavaScript 编写 GPU 着色器，而不必直接书写 GLSL/WGSL 字符串。技能面向需要搭建 WebGPU 渲染、编写自定义着色器、计算着色器与后处理效果的场景。

主要能力

技能内容分为文档、示例、模板和参考速查表几部分。

文档部分包括：

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 为快速参考速查表。

使用方式

快速开始示例：

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));

导入模式：始终使用 WebGPU 入口点：

import * as THREE from 'three/webgpu';
import { /* TSL functions */ } from 'three/tsl';

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

material.colorNode = texture(map);        // 替代 material.map
material.roughnessNode = float(0.5);      // 替代 material.roughness
material.positionNode = displaced;         // 顶点位移

方法链：TSL 使用方法链进行操作：

// 替代：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
实现视觉效果（粒子、水面、地形等）

限制

资料未提供关于收费、价格、平台支持范围、性能效果或具体使用步骤的更多信息，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制