WebGL Animation Skills — плагин
Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.
- 54 ★ репозитория
- Последний коммит
- MIT
Минимальный доступ
Почему такой уровень
- Скиллы дают инструкции, исполняемый код создает агент в проекте пользователя.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add plugins/webgl-animation-skillsОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемМинимальный доступИнструмент ничего не запускает и не ходит в сеть.
- Скиллы дают инструкции, исполняемый код создает агент в проекте пользователя.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
Набор из трех скиллов для агентов, которые пишут трехмерную анимацию в браузере. `shader-glsl` учит писать фрагментные шейдеры: градиенты, шум и `fbm`, функции расстояния, искажение координат, переходы между изображениями и подключение `ShaderMaterial` в `Three.js.` `threejs-animation` разбирает сцены, движение камеры, клипы `GLTF`, инстансинг, 3D по прокрутке, `React Three Fiber` и освобождение ресурсов видеокарты без утечек. `particle-system` отвечает за конфетти, снег, дым, искры, поля потоков, шум Перлина и сети связанных точек на шейдерах `Points`. У каждого скилла есть справочник с рецептами. Включение идет по описанию задачи, в репозитории есть скрипты для контрольных кадров и проверки видео.
Для кого. Фронтендерам и креативным разработчикам, которые делают 3D-фоны, шейдерные эффекты и интерактивные сцены на `WebGL.`
Подходит, если
- Нужен анимированный градиентный фон на фрагментном шейдере, подключенный к `Three.js.`
- Модель `GLTF` в `React Three Fiber` плавно переходит между клипами ходьбы и покоя.
- Сцена со временем начинает тормозить, и подозревают утечку памяти `WebGL.`
- Фон из двух тысяч частиц должен держать высокую частоту кадров.
Не подходит, если
- Нужна двумерная анимация или `Lottie`: скиллы рассчитаны на `WebGL.`
- Задача требует точного текста и чисел в мотивной графике с правкой одним щелчком.
- Проект идет на игровом движке, а не в браузере.
Пример запроса к агенту
Напиши фрагментный шейдер анимированного градиента северного сияния для фона и подключи его в `Three.js` через `ShaderMaterial.`Ограничения
Скиллы дают инструкции и рецепты, а проверять кадры и производительность придется на своей видеокарте и в своем браузере. Для заданий без `WebGL`, например точной двумерной графики с редактированием, авторы отсылают к собственному агенту на `iart.ai.` В репозитории нет фреймворка или библиотеки сцен: нужен свой проект на `Three.js` или `React Three Fiber.` Скрипты вспомогательные и работают с видеофайлами через `ffmpeg`.
Как отключить. Удалите плагин командой `/plugin uninstall webgl-animation-skills` или каталоги скиллов `shader-glsl`, `threejs-animation` и `particle-system` из папки навыков агента.
Частые вопросы
Какие скиллы входят?
Три: `shader-glsl` для шейдеров, `threejs-animation` для сцен и камеры, `particle-system` для частиц. У каждого есть справочник с рецептами.
В каких агентах работает?
Авторы называют `Claude Code`, `Cursor`, `Codex` и более сорока других агентов, которые читают формат скиллов.
Как установить без плагина?
Выполните `npx skills add iart-ai/webgl-animation-skills`: установщик выберет подходящие каталоги навыков вашего агента.
Подходит ли для `React Three Fiber`?
Да, `threejs-animation` отдельно разбирает `React Three Fiber`, клипы `GLTF` и корректное освобождение ресурсов.
Есть ли в пакете другие наборы?
Это один из 19 открытых наборов того же автора, например для видео в `TikTok` и объясняющих роликов. Нужный набор ставят отдельно.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
ПлагиныДесять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка
Three.js Awesome Graphics Skills
threejs-awesome-graphics-agent-skills
Пакет скиллов three.js для красивой графики сцен и игр: свет, PBR, шейдеры, TSL и WebGPU, постобработка, частицы
Скилл для разработки WebGPU-приложений на Three.js с шейдерами на TSL: рендерер, node-материалы, compute-шейдеры, пост-обработка
Восемь скиллов для 3D и анимированных сайтов: сцены three.js из кода, скролл-фильмы, прозрачное видео, разбор машин на детали
Скилл разбирает и переносит WebGL, WebGPU и Canvas-эффекты со страницы в отдельный локальный проект на нативном JS
Скилл и MCP-сервер библиотеки Shaders: агент собирает фоны, стекло, градиенты и курсорные эффекты на WebGPU для React, Vue, Svelte, Solid и JS
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Звезды репозитория | Главное отличие |
|---|---|---|---|
| WebGL Animation Skills (эта карточка) | нет | 54 | |
| Shader Skills | нет | 447 | различие: `shader-skills` посвящен шейдерам, этот пакет добавляет сцены `Three.js` и частицы |
| Three.js Awesome Graphics Skills | нет | 990 | различие: набор по графике `Three.js` шире по теме, здесь три узких скилла с рецептами для шейдеров, сцен и частиц |
Коротко о README
В README перечислены три скилла, команды установки, сценарии включения и примеры запросов. Пакет входит в коллекцию из 19 наборов на `hub`-странице автора.