webgpu-threejs-tsl adoption decision

README excerpt

README.md

Overview

This skill provides Claude with comprehensive knowledge for:

• Setting up Three.js with WebGPU renderer
• Writing shaders using TSL (Three.js Shading Language)
• Creating node-based materials
• Building GPU compute shaders
• Implementing post-processing effects
• Integrating custom WGSL code

Installation

This repo ships the same content in two formats so it works in both Claude Code (as an Agent Skill) and Cursor (as project rules). The Claude skill under skills/ is the source of truth; the Cursor rules under .cursor/rules/ are thin shims that @file-reference those same docs, so edits flow through automatically.

Install from this repository

/skill install webgpu-threejs-tsl@ /webgpu-claude-skill

Or manually copy the `skills/webgpu-threejs-tsl` folder to:
- **Global**: `~/.claude/skills/`
- **Project**: `<project>/.claude/skills/`

### Cursor

Clone this repo and open it directly — Cursor picks up `.cursor/rules/` automatically.

To use the rules in your own project, copy **both** directories into your project root, preserving the paths:

your-project/

├── .cursor/rules/ # from this repo

└── skills/webgpu-threejs-tsl/ # from this repo (referenced by the rules)

The `.mdc` files use `@file` references pointing at `skills/webgpu-threejs-tsl/...`, so the `skills/` directory must travel with them. If you'd rather not keep the `skills/` folder, inline the referenced content into each `.mdc` file.

The rules are scoped by globs and auto-attach only on relevant files:

- `webgpu-threejs-tsl.mdc` — entry point, JS/TS files
- `compute-shaders.mdc` — files matching `*compute*` or `*particle*`
- `post-processing.mdc` — files matching `*post*`, `*effect*`, `*bloom*`
- `wgsl-integration.mdc` — `.wgsl` files and `*wgsl*` JS/TS
- `device-loss-and-limits.mdc` — files matching `*renderer*` or `*webgpu*`

## Quick Example

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

})();

SKILL.md excerpt

skills/webgpu-threejs-tsl/SKILL.md

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

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

Import Pattern

// 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:

material.colorNode = texture(map);        // instead of material.map
material.roughnessNode = float(0.5);      // instead of material.roughness
material.positionNode = displaced;         // vertex displacement

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