September 26, 2026
WebGPU Three.js TSL Skill
Provides knowledge and rules for developing WebGPU Three.js apps with TSL in Claude Code and Cursor.
MITClaude CodeCursorText InputCode Output
```bash
# Install from this repository
/skill install webgpu-threejs-tsl@<your-github-username>/webgpu-claude-skill
```
Or manually copy the `skills/webgpu-threejs-tsl` folder to:
- **Global**: `~/.claude/skills/`
- **Project**: `<project>/.claude/skills/````javascript
import * as THREE from 'three/webgpu';
import { color, time, oscSine, normalWorld, cameraPosition, positionWorld, Fn, float } from 'three/tsl';
// WebGPU renderer
const renderer = new THREE.WebGPURenderer();
await renderer.init();
// TSL material with animated fresnel
const material = new THREE.MeshStandardNodeMaterial();
material.colorNode = color(0x0066ff);
material.emissiveNode = Fn(() => {
const viewDir = cameraPosition.sub(positionWorld).normalize();
const fresnel = float(1).sub(normalWorld.dot(viewDir).saturate()).pow(3);
return color(0x00ffff).mul(fresnel).mul(oscSine(time));
})();
```Reviews
No reviews yet
The product content on this page was translated by AI from the author's original.