93 lines
3.1 KiB
Markdown
93 lines
3.1 KiB
Markdown
---
|
|
name: webgpu-threejs-tsl
|
|
description: Comprehensive guide for developing WebGPU-enabled Three.js applications using TSL (Three.js Shading Language). Covers WebGPU renderer setup, TSL syntax and node materials, compute shaders, post-processing effects, and WGSL integration. Use this skill when working with Three.js WebGPU, TSL shaders, node materials, or GPU compute in Three.js.
|
|
---
|
|
|
|
# WebGPU Three.js with TSL
|
|
|
|
TSL (Three.js Shading Language) is a node-based shader abstraction that lets you write GPU shaders in JavaScript instead of GLSL/WGSL strings.
|
|
|
|
## Quick Start
|
|
|
|
```javascript
|
|
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));
|
|
```
|
|
|
|
## Skill Contents
|
|
|
|
### Documentation
|
|
- `docs/core-concepts.md` - Types, operators, uniforms, control flow
|
|
- `docs/materials.md` - Node materials and all properties
|
|
- `docs/compute-shaders.md` - GPU compute with instanced arrays
|
|
- `docs/post-processing.md` - Built-in and custom effects
|
|
- `docs/wgsl-integration.md` - Custom WGSL functions
|
|
- `docs/device-loss.md` - Handling GPU device loss and recovery
|
|
|
|
### Examples
|
|
- `examples/basic-setup.js` - Minimal WebGPU project
|
|
- `examples/custom-material.js` - Custom shader material
|
|
- `examples/particle-system.js` - GPU compute particles
|
|
- `examples/post-processing.js` - Effect pipeline
|
|
- `examples/earth-shader.js` - Complete Earth with atmosphere
|
|
|
|
### Templates
|
|
- `templates/webgpu-project.js` - Starter project template
|
|
- `templates/compute-shader.js` - Compute shader template
|
|
|
|
### Reference
|
|
- `REFERENCE.md` - Quick reference cheatsheet
|
|
|
|
## Key Concepts
|
|
|
|
### Import Pattern
|
|
```javascript
|
|
// Always use the WebGPU entry point
|
|
import * as THREE from 'three/webgpu';
|
|
import { /* TSL functions */ } from 'three/tsl';
|
|
```
|
|
|
|
### Node Materials
|
|
Replace standard material properties with TSL nodes:
|
|
```javascript
|
|
material.colorNode = texture(map); // instead of material.map
|
|
material.roughnessNode = float(0.5); // instead of material.roughness
|
|
material.positionNode = displaced; // vertex displacement
|
|
```
|
|
|
|
### Method Chaining
|
|
TSL uses method chaining for operations:
|
|
```javascript
|
|
// Instead of: sin(time * 2.0 + offset) * 0.5 + 0.5
|
|
time.mul(2.0).add(offset).sin().mul(0.5).add(0.5)
|
|
```
|
|
|
|
### Custom Functions
|
|
Use `Fn()` for reusable shader logic:
|
|
```javascript
|
|
const fresnel = Fn(([power = 2.0]) => {
|
|
const nDotV = normalWorld.dot(viewDir).saturate();
|
|
return float(1.0).sub(nDotV).pow(power);
|
|
});
|
|
```
|
|
|
|
## When to Use This Skill
|
|
|
|
- Setting up Three.js with WebGPU renderer
|
|
- Creating custom shader materials with TSL
|
|
- Writing GPU compute shaders
|
|
- Building post-processing pipelines
|
|
- Migrating from GLSL to TSL
|
|
- Implementing visual effects (particles, water, terrain, etc.)
|
|
|
|
## Resources
|
|
|
|
- [Three.js TSL Wiki](https://github.com/mrdoob/three.js/wiki/Three.js-Shading-Language)
|
|
- [WebGPU Examples](https://github.com/mrdoob/three.js/tree/master/examples) (files prefixed with `webgpu_`)
|