К основному содержанию
скилл CX Codex

optimize-threejs-games — скилл для Claude Code: профилирование

Скилл для профилирования и ускорения игр на Three.js и WebGL: находит, что тормозит — процессор или видеокарта, и чинит без потери геймплея.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add MengTo/Skills --skill optimize-threejs-games -a claude-code
Открыть на GitHub

Что делает optimize-threejs-games

Скилл ведёт агента по шагам: сначала замеры, потом правки. Нужно выбрать один и тот же игровой эпизод и записывать по нему устройство, размер окна, уровень качества, позицию игрока, врагов, активные эффекты, время кадра, число draw calls, треугольников, текстур и предупреждения. Сравнивать можно только одинаковые прогоны, иначе цифры ничего не значат.

Дальше идёт диагностика. Процессор подозревают, когда нагрузка растёт вместе с числом персонажей: симуляция, аллокации, работа React, поиск пути, сканирование сцены каждый кадр. Видеокарту — когда упираются в разрешение, overdraw, тени, прозрачные частицы, постобработку, геометрию и пропускную способность текстур. Скилл прямо запрещает крутить качество вслепую: сначала смотреть, потом менять.

Правки начинаются с дешёвых: переиспользовать геометрию и материалы, пулить временные эффекты, отсекать неактивное и закадровое, реже обновлять неважный интерфейс, ограничивать число частиц, не выделять память в каждом кадре, обновлять только изменившиеся трансформы. Настройки качества остаются явными и обратимыми, а декоративные эффекты срезают раньше, чем читаемость боя или управление. После каждой правки скилл требует прогнать исходный эпизод заново и проверить время кадра, корректность картинки, столкновения, стабильность памяти, мобильное управление, режим уменьшенной анимации и консоль. Временные серверы, бенчмарки и вкладки браузера после этого закрывают.

Какие задачи решает

  • найти, что ограничивает частоту кадров — процессор или видеокарта
  • сократить число draw calls и потребление памяти под текстуры
  • убрать аллокации и лишнюю работу в игровом цикле
  • снизить нагрузку на мобильных устройствах без потери управления
  • проверить, что оптимизация не сломала столкновения и читаемость боя

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

  • профилируй эту сцену и скажи, что упирается в процессор, а что в видеокарту
  • сократи draw calls и число частиц, качество рендера оставь обратимым
  • прогони исходный эпизод заново и проверь время кадра, столкновения и консоль

Как установить optimize-threejs-games

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill optimize-threejs-games -a claude-code

2Вручную: положить файлы

~/.claude/skills/optimize-threejs-games/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/optimize-threejs-games/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о optimize-threejs-games

Как установить optimize-threejs-games в Claude?

Выполните npx skills add MengTo/Skills --skill optimize-threejs-games -a claude-code. Скилл появится по пути ~/.claude/skills/optimize-threejs-games/SKILL.md.

Что делает optimize-threejs-games?

Профилирует и ускоряет игры на Three.js и WebGL, не ломая геймплей. Сначала замеряет сцену, потом ищет узкое место и только затем меняет код.

С какими платформами работает скилл?

Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot команда другая: gh skill install MengTo/Skills optimize-threejs-games.

Исходный текст

SKILL.md · MIT
---
name: optimize-threejs-games
description: Profile, diagnose, and improve Three.js or WebGL game performance without regressing gameplay. Use for frame-time drops, CPU/GPU pressure, draw calls, texture and geometry budgets, animation loops, adaptive quality, mobile performance, and browser performance verification.
---

# Optimize Three.js Games

Measure before changing behavior, then validate the same gameplay path after every optimization.

## Establish a repeatable scene

Choose a deterministic representative encounter and record device, viewport, quality level, player position, enemies, active effects, frame-time sample, draw calls, triangles, texture count, and warnings. Compare like with like.

## Diagnose the limiting side

- Suspect CPU when simulation, allocations, React work, pathfinding, or per-frame scans grow with actors.
- Suspect GPU when resolution, overdraw, shadows, transparent particles, post-processing, draw calls, geometry, or texture bandwidth dominate.
- Inspect before optimizing; do not lower quality blindly.

## Apply low-risk fixes first

Reuse geometry/materials, pool transient effects, cull inactive/offscreen work, throttle noncritical UI updates, cap particle counts, avoid per-frame allocation, and update only changed transforms. Keep render quality settings explicit and reversible. Degrade decorative effects before combat readability or controls.

## Guard the result

Re-run the original encounter and verify frame time, visual correctness, collision/contact behavior, memory stability, mobile controls, reduced motion, and console health. Close temporary servers, benchmarks, and browser tabs once they are no longer needed.

© MengTo · MIT · MengTo/Skills

Похожие скиллы

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
threejs-debug-profiler majidmanzarpour Ищет причины пустого экрана и сбоев рендера в браузерных играх на Three.js. Помогает замерить вызовы отрисовки и расход памяти без поломки геймплея. CX Codex +1 3 100установок threejs-performance CloudAI-X Скилл помогает находить узкие места в three.js: draw calls, память, CPU, тени и работу GPU. Пригодится, когда сцена тормозит или расходует много памяти. CX Codex +1 1 400установок threejs-aaa-graphics-builder majidmanzarpour Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок threejs-game OpusGameLabs Задаёт структуру проекта и обязательные модули для 3D-игры в браузере на Three.js. Пригодится, когда агенту нужно развернуть сцену и игровой цикл с нуля. CX Codex +1 1 100установок mint-threejs-skills mintdotgg Набор инструкций для создания браузерных 3D-приложений, игр и вьюверов на Three.js с генерацией моделей через Mint MCP. Помогает настроить пайплайн ассетов и рендеринг без рутины. CX Codex +1 616установок threejs-fundamentals CloudAI-X Помогает настроить базовую сцену Three.js r186: рендерер, камеры, цикл анимации с THREE.Timer и import map для WebGL или WebGPU с TSL. CX Codex +1 17 400установок

Из того же набора148

build-mobile-threejs-games Скилл для сборки и проверки Three.js-игры под мобильный веб: тач-управление, адаптивный HUD, бюджеты производительности. CX Codex +1 1 300установок design-game-encounters Скилл для проектирования и настройки боёв в экшн-играх на Three.js: арены, враги, волны, фазы боссов. CX Codex +1 1 300установок design-action-combat Скилл помогает настраивать тактическую боёвку для веб-игр через детерминированные стейт-машины. Пригодится при расчёте окон парирования, кадров запуска и регистрации попаданий. CX Codex +1 1 300установок build-game-audio-feedback Помогает агенту спроектировать звуковые подсказки для Three.js или браузерной игры: попадания, блоки, музыка по состояниям. CX Codex +1 1 300установок test-playable-web-games Скилл помогает тестировать браузерные игры от первого запуска до финала через детерминированные фикстуры и реальный браузер. Зелёный билд ещё не доказывает, что геймплей работает. CX Codex +1 1 300установок liquid-metal-border Добавляет и настраивает анимированные WebGL-рамки из metal-fx для кнопок, карточек и выбранных элементов React-интерфейса. CX Codex +1 1 300установок beam-glow-states Скилл для React-интерфейсов: подключает анимированное свечение границ из пакета border-beam к состояниям загрузки, выбора и фокуса. CX Codex +1 1 300установок x-bookmark-quote-posts Собирает закладки в X и превращает их в черновики цитат, подстраивая тон под 100 последних собственных публикаций автора. CX Codex +1 1 300установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой