WebGPU Three.js TSL Skill
A skill for building WebGPU apps on Three.js with TSL shaders: renderer setup, node materials, compute shaders, post-processing
- 1,281 ★ on the repository
- Last commit
Minimal access
Why this level
- The skill consists of documentation, examples and code templates
Install
- Works in
In your terminal, with SkillFoxx CLI
npx skillfoxx add skills/webgpu-three-js-tsl-skillDetects the agents on your machine, shows the access level and pins the version.
Other ways to install
Access and checks
How we reviewMinimal accessThe tool runs nothing and makes no network calls.
- The skill consists of documentation, examples and code templates
This is third-party code. Review the repository files before installing.
What it does
The skill gives the agent a reference for Three.js graphics on the WebGPU renderer with the TSL shading language. It explains how to start a WebGPU renderer, build node materials, write compute shaders and post-processing chains, embed custom WGSL, and handle GPU device loss. It bundles topic docs, ready examples (basic scene, custom material, particle system, Earth shader) and project templates. The same material is mirrored as Cursor rules that attach to matching files by glob.
Who it is for. For developers building interactive browser 3D graphics with Three.js and WebGPU.
Good fit when
- You need to set up Three.js on the WebGPU renderer and write a TSL material
- You need a compute shader, particle system or post-processing chain
- You are porting shaders from GLSL to TSL or embedding your own WGSL
Not a fit when
- The project stays on the Three.js WebGL renderer without TSL
- You need graphics outside Three.js, for example raw WebGPU or another engine
Example request
Set up Three.js with the WebGPU renderer and make a material with an animated fresnel effect in TSLLimitations
The material targets Three.js r171 and later and flags API changes in newer releases. WebGPU is not supported everywhere: stable in Chrome and Edge, behind a flag in Firefox, in preview in Safari. The skill provides knowledge and examples but does not replace testing the code in a real project.
How to disable. Remove the webgpu-threejs-tsl folder from the skills directory, or uninstall the plugin via /plugin. In Cursor delete the .cursor/rules files from the project.
FAQ
What is TSL?
Three.js Shading Language, a node approach to shaders: instead of GLSL or WGSL strings the shader is described with JavaScript functions and method chaining.
Does the skill work in Cursor?
Yes. The same material is packaged as .cursor/rules that reference files inside skills/, so both folders must stay together.
Discussion
No questions or reviews yet.
Related
SkillsThree.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
A three.js skills pack for great scene and game graphics: lighting, PBR, shaders, TSL and WebGPU, post-processing, particles
Ten reference skills for Three.js: scene setup, geometry, materials, lighting, shaders, animation and post-processing
Three skills for web 3D: GLSL shaders, Three.js scenes with React Three Fiber and GPU particle systems.
A skill that dissects and ports WebGL, WebGPU and Canvas effects from a page into a standalone local JS project
A skill builds and debugs GLSL shaders from reusable blocks, bundles dependencies into one file and checks WebGL2-oriented code.
Skill and MCP server for Shaders: the agent builds backgrounds, glass, gradients and cursor effects on WebGPU for React, Vue, Svelte, Solid and JS
README in short
The README describes a skill for Three.js development on the WebGPU renderer with the TSL shading language. Content is split into topic docs, examples and templates, with SKILL.md as the entry point. The same material ships in two formats: an Agent Skill for Claude Code and Cursor rules that reference the shared files. It also lists Three.js version compatibility and browser support. MIT licensed, with code examples derived from Three.js.
README badge
Original SKILL.md
---
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
- `docs/limits-and-features.md` - WebGPU device limits and optional features