SkillFoxx
Telegram

WebGPU Three.js TSL Skill

Скилл для разработки WebGPU-приложений на Three.js с шейдерами на TSL: рендерер, node-материалы, compute-шейдеры, пост-обработка

  • 1 281 ★ репозитория
  • Последний коммит
Скилл

Минимальный доступ

Почему такой уровень

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

dgreenheck/webgpu-claude-skillАвтор:Dan Greenheck

Установка

Работает в

В терминале, через SkillFoxx CLI

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

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Минимальный доступИнструмент ничего не запускает и не ходит в сеть.

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

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

Что делает

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

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

Подходит, если

  • Нужно поднять Three.js на рендерере WebGPU и написать материал на TSL
  • Нужно собрать compute-шейдер, систему частиц или цепочку пост-обработки
  • Переносите шейдеры с GLSL на TSL или встраиваете свой код на WGSL

Не подходит, если

  • Проект остается на WebGL-рендерере Three.js без TSL
  • Нужна графика вне Three.js, например чистый WebGPU или другой движок

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

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

Ограничения

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

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

Частые вопросы

Что такое TSL?

Three.js Shading Language, node-подход к шейдерам: вместо строк на GLSL или WGSL шейдер описывается функциями JavaScript с цепочками методов.

Работает ли скилл в Cursor?

Да. Тот же материал оформлен как правила .cursor/rules, которые ссылаются на файлы из skills/, поэтому обе папки нужно держать вместе.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Three.js Awesome Graphics Skills

threejs-awesome-graphics-agent-skills

Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы

СкиллМинимальный доступ990

Десять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка

СкиллМинимальный доступ4,2 тыс.

Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.

ПлагинМинимальный доступ54

Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS

СкиллРасширенный доступ773

Скилл помогает писать и отлаживать GLSL-шейдеры из готовых блоков, собирает зависимости в один файл и проверяет код для WebGL2.

СкиллРасширенный доступ447
Официальный

Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS

СкиллРасширенный доступ5,9 тыс.

Коротко о README

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

Бейдж для README

Исходный 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

Сообщить о проблеме