# threejs-asset-pipeline

Скилл для сжатия и проверки glTF-моделей перед загрузкой в three.js: команды gltf-transform, Draco, meshopt, KTX2 и gltfjsx.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1300 установок · ★ 3745
- Автор: CloudAI-X
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-asset-pipeline/SKILL.md
- Обновлён: 2026-10-19
- HTML: https://affpapa.org/nevibecode/skills/threejs-asset-pipeline

## Что делает

Скилл описывает пайплайн обработки glTF-ассетов через `@gltf-transform/cli`. Сначала `inspect` показывает, где лежат байты: генератор, `extensionsUsed`, `extensionsRequired` и таблицы по сценам, мешам, материалам, текстурам и анимациям. Потом `optimize` прогоняет цепочку проходов — dedup, instance, palette, flatten, join, weld, simplify, resample, prune — и в конце сжимает геометрию и текстуры.

Геометрию жмут тремя способами. Draco берёт только треугольные меши, анимация и морф-таргеты остаются как есть, на рантайме нужен `DRACOLoader`. Meshopt покрывает точки, линии, морф-таргеты и треки анимации, декодируется быстро. Quantize хранит float-атрибуты как 8- или 16-битные целые под `KHR_mesh_quantization`, декодер подключать не надо. Скилл советует ставить `draco`, `meshopt` или `optimize` последней командой в цепочке: остальные команды при чтении распаковывают геометрию и пишут её обратно без сжатия, о чём предупреждают в логе.

Текстуры — отдельная история. KTX2 остаётся сжатым в памяти GPU и грузится быстро, но `KTX2Loader` откатывается на несжатый RGBA, если GPU не поддерживает ни один из transcode-таргетов. WebP и AVIF уменьшают размер загрузки. `validate` гоняет официальный валидатор glTF и выходит с ненулевым кодом при ошибках, так что годится как гейт в CI. Скилл целится в three.js r186, примеры на `WebGLRenderer`, а раздел про WebGPU и TSL — на `WebGPURenderer`.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-asset-pipeline -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/threejs-asset-pipeline/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/threejs-asset-pipeline/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-asset-pipeline -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/threejs-asset-pipeline/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-asset-pipeline -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/threejs-asset-pipeline/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install CloudAI-X/threejs-skills threejs-asset-pipeline
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/threejs-asset-pipeline/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-asset-pipeline -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/CloudAI-X/threejs-skills --path skills/threejs-asset-pipeline
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/threejs-asset-pipeline/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add CloudAI-X/threejs-skills --skill threejs-asset-pipeline -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/CloudAI-X/threejs-skills/tree/HEAD/skills/threejs-asset-pipeline/SKILL.md

## Когда брать
- понять, где в glb лежат байты, до сжатия
- уменьшить вес glTF-модели для веба
- выбрать между Draco, meshopt и quantize под конкретную модель
- сжать текстуры в KTX2, WebP или AVIF
- проверить модель валидатором в CI

## Примеры запросов агенту
- Сожми model.glb через optimize с draco и webp, потом покажи inspect до и после
- Проверь model.glb валидатором и объясни ошибки
- Собери цепочку команд gltf-transform для этой модели и подскажи, какой лоадер подключить

## Похожие
- [threejs-gltf-loading](https://affpapa.org/nevibecode/skills/threejs-gltf-loading.md) — скилл · 5600 установок
- [blender-web-pipeline](https://affpapa.org/nevibecode/skills/blender-web-pipeline.md) — скилл · 3500 установок
- [threejs-webgl](https://affpapa.org/nevibecode/skills/threejs-webgl.md) — скилл · 4600 установок
- [threejs](https://affpapa.org/nevibecode/skills/mengto-threejs.md) — скилл · 2000 установок
- [threejs-animation](https://affpapa.org/nevibecode/skills/iart-ai-threejs-animation.md) — скилл · 1400 установок
- [threejs-loaders](https://affpapa.org/nevibecode/skills/calesthio-threejs-loaders.md) — скилл · 1000 установок

Из того же набора: [cloudai-x/threejs-skills](https://affpapa.org/nevibecode/by/cloudai-x/threejs-skills.md) — 13 карточек

_Часть страницы не вошла по размеру — она есть в HTML-версии._

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md