# shader-glsl

Скилл помогает писать фрагментные шейдеры GLSL для генеративного фона, переходов между картинками и эффектов в Three.js.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 1400 установок · ★ 44
- Автор: iart-ai
- Лицензия: MIT · policy=mirror · начало файла — в конце страницы
- Исходник: https://github.com/iart-ai/webgl-animation-skills/tree/HEAD/skills/shader-glsl/SKILL.md
- Обновлён: 2026-06-22
- HTML: https://affpapa.org/nevibecode/skills/shader-glsl

## Что делает

Скилл даёт формулы для рендеринга графики на GPU. Шейдер считает цвет каждого пикселя отдельно. Внутри собраны готовые решения для палитр Иниго Килеса, расчёта шума fbm, сглаживания через `fwidth` и фигур SDF вроде круга или прямоугольника.

В материалах описаны техники искажения координат (domain warping) и переходы между текстурами: dissolve, displacement и эффект glitch с разделением цветовых каналов. Отдельный блок показывает настройку `THREE.ShaderMaterial` с передачей времени через `u_time` и разрешения через `u_resolution`. Рендеринг запускается на плоскости `PlaneGeometry(2, 2)` без матрицы проекции.

Для мобильных чипов нужно следить за точностью: если для координат не требуется `highp`, лучше объявлять `precision mediump float;`. Циклы в GLSL ES требуют только константных границ, а число октав в fbm автор советует держать не больше 5–6. В репозитории есть скрипты `scripts/seek-shot.sh` и `scripts/contact-sheet.sh` для съёмки кадров через аргумент `?t=N`.

## Установка

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

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/webgl-animation-skills --skill shader-glsl -a claude-code
```

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

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/webgl-animation-skills --skill shader-glsl -a codex
```

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

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/webgl-animation-skills --skill shader-glsl -a cursor
```

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

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install iart-ai/webgl-animation-skills shader-glsl
```

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

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/webgl-animation-skills --skill shader-glsl -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/iart-ai/webgl-animation-skills --path skills/shader-glsl
```

### Windsurf (Devin Desktop)

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

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add iart-ai/webgl-animation-skills --skill shader-glsl -a opencode
```

### Claude.ai

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

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/iart-ai/webgl-animation-skills/tree/HEAD/skills/shader-glsl/SKILL.md

## Когда брать
- сделать процедурный фон с градиентом или шумом
- настроить Three.js ShaderMaterial для полноэкранного квада
- создать переход между текстурами через карту смещения или шум
- добавить глитч с хроматической аберрацией
- нарисовать фигуру SDF со сглаживанием через fwidth

## Примеры запросов агенту
- Сделай анимированный фон с шумом Перлина через Three.js ShaderMaterial
- Напиши шейдер перехода между двумя текстурами с эффектом dissolve
- Добавь глитч с хроматической аберрацией и сдвигом строк для картинки

## Похожие
- [glsl](https://affpapa.org/nevibecode/skills/glsl.md) — скилл · 369 установок
- [shader-dev](https://affpapa.org/nevibecode/skills/minimax-ai-shader-dev.md) — скилл · 2500 установок
- [threejs-shaders](https://affpapa.org/nevibecode/skills/threejs-shaders.md) — скилл · 15600 установок
- [threejs](https://affpapa.org/nevibecode/skills/mrgoonie-threejs.md) — скилл · 1200 установок
- [3d-ultra-realistic-water](https://affpapa.org/nevibecode/skills/3d-ultra-realistic-water.md) — скилл · 408 установок
- [shader-programming](https://affpapa.org/nevibecode/skills/shader-programming.md) — скилл · 6900 установок

Из того же набора: [iart-ai/webgl-animation-skills](https://affpapa.org/nevibecode/by/iart-ai/webgl-animation-skills.md) — 3 карточки

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

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