WebGPU Three.js TSL Skill

Установка

npx skillfoxx add skills/webgpu-three-js-tsl-skill

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a claude-code -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .claude/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .claude/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cursor -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a github-copilot -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .github/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .github/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a codex -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a gemini-cli -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .devin/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .devin/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a cline -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .cline/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .cline/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a roo -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .roo/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .roo/skills/webgpu-threejs-tsl

npx skills add dgreenheck/webgpu-claude-skill --skill webgpu-threejs-tsl -a opencode -y

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

tmp=$(mktemp -d)
git clone --filter=blob:none --no-checkout https://github.com/dgreenheck/webgpu-claude-skill.git "$tmp"
git -C "$tmp" sparse-checkout set --no-cone /skills/webgpu-threejs-tsl/
git -C "$tmp" checkout af2319bd01bb7cc881267a9ef42cafdaf5e9029d
mkdir -p .agents/skills
cp -R "$tmp/skills/webgpu-threejs-tsl" .agents/skills/webgpu-threejs-tsl

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

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл дает агенту справочник по разработке графики на Three.js с рендерером WebGPU и языком шейдеров TSL. Он объясняет, как поднять WebGPU-рендерер, собрать node-материалы, писать вычислительные шейдеры и цепочки пост-обработки, встраивать собственный код на WGSL и обрабатывать потерю GPU-устройства. Внутри лежат документация по темам, готовые примеры (базовая сцена, кастомный материал, система частиц, шейдер Земли) и шаблоны проекта. Тот же материал оформлен как правила для Cursor, которые подключаются к нужным файлам по маске.

Для кого. Для разработчиков, которые делают интерактивную 3D-графику в браузере на Three.js и WebGPU.

Пример запроса к агенту

Настрой Three.js на рендерер WebGPU и сделай материал с анимированным эффектом Френеля на TSL

Ограничения

Материал ориентирован на Three.js r171 и новее и отмечает изменения API в поздних версиях. WebGPU поддержан не во всех браузерах: в Chrome и Edge стабильно, в Firefox за флагом, в Safari в режиме предпросмотра. Скилл дает знания и примеры, но не заменяет проверку кода в реальном проекте.

Как отключить. Удалите папку webgpu-threejs-tsl из каталога скиллов, либо снимите плагин через /plugin. В Cursor удалите файлы .cursor/rules из проекта.

Проверка безопасности

• Скилл состоит из документации, примеров и шаблонов кода

Коротко о README

README описывает скилл для разработки на Three.js с рендерером WebGPU и шейдерным языком TSL. Содержимое разбито на документацию по темам, примеры и шаблоны, а SKILL.md служит точкой входа. Один и тот же материал поставляется в двух форматах: как Agent Skill для Claude Code и как правила для Cursor, которые ссылаются на общие файлы. Отдельно перечислены совместимость с версиями Three.js и поддержка браузеров. Лицензия MIT, примеры кода взяты из Three.js.

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

Похожие