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

implement-fog-of-war — скилл для Claude Code: туман войны в Three.js

Скилл для ИИ-агента, который помогает собрать и отладить туман войны в Three.js-игре: видимость за стенами, радиусы обзора игрока и врагов.

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

Что делает implement-fog-of-war

Скилл описывает туман войны как систему восприятия, отделённую от отрисовки. Логика видимости считается на CPU: диапазоны обзора, пересечения с препятствиями, кто кого видит. Результат упаковывается в текстуру-справочник фиксированного размера, а один полноэкранный шейдер превращает её в мягкий радиальный туман с учётом стен.

Внутри — порядок работы по зависимостям: сначала определить истину восприятия, потом собрать справочник видимости, затем отрисовать один оверлей и только после этого встроить всё в геймплей и жизненный цикл сцены. Отдельные разделы про настройку в правильном порядке и про проверку. Есть ссылки на references/mechanics.md и references/validation.md — их стоит прочитать до правок алгоритма.

Скилл требует аккуратности к существующему коду: перед изменениями нужно найти авторитетную позицию игрока, камеру, препятствия, цикл кадров, прицеливание и слои рендера. Метод восстановления позиции по углам камеры предполагает локально горизонтальную плоскость, поэтому при перепадах высот нужна реконструкция поверхности. Игровую правду нельзя выводить из пикселей тумана — это первое, на чём всё сломается.

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

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

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

  • добавь туман войны в мою Three.js-игру, стены должны перекрывать обзор
  • в шейдере тумана видны радиальные лучи по углам — почини
  • враги атакуют из-за угла, хотя игрок их не видит — проверь восприятие

Как установить implement-fog-of-war

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill implement-fog-of-war -a claude-code

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

~/.claude/skills/implement-fog-of-war/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/implement-fog-of-war/

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

Вопросы о implement-fog-of-war

Как установить implement-fog-of-war в Claude?

Выполните npx skills add MengTo/Skills --skill implement-fog-of-war -a claude-code. После этого файл скилла появится в ~/.claude/skills/implement-fog-of-war/SKILL.md.

Что делает implement-fog-of-war?

Помогает реализовать, настроить и отладить туман войны в Three.js-играх: маску видимости, перекрытие стен, радиусы обзора игрока и врагов, правила прицеливания по скрытым врагам.

На чём сломается этот скилл?

Метод восстановления позиции по углам камеры рассчитан на локально горизонтальную плоскость. Если рельеф меняется по высоте, нужна реконструкция поверхности, иначе туман ляжет неверно.

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

SKILL.md · MIT
---
name: implement-fog-of-war
description: Implement, tune, debug, or validate soft wall-aware fog of war and gameplay perception in Three.js action games. Use for orthographic or isometric visibility masks, obstacle-aware line of sight, player and enemy vision ranges, hidden-enemy targeting rules, fog shader artifacts such as spokes or seams, mobile ray budgets, lifecycle and menu-state integration, and deterministic fog-of-war tests.
---

# Implement Fog of War

Build fog of war as a shared perception system with a restrained presentation layer.

## Preserve the architecture

Keep these responsibilities separate:

1. Let deterministic CPU perception own ranges, obstacle intersections, and gameplay visibility.
2. Encode the player's angular visible distances into one fixed-size lookup texture.
3. Let one full-screen shader turn that lookup into soft radial and wall-aware fog.
4. Let gameplay consume perception results directly; never infer combat truth from fog pixels.

Read [mechanics.md](references/mechanics.md) before implementing or changing the algorithm. It records the proven obstacle model, shader composition, calibrated values, state rules, enemy behavior, lighting constraints, and telemetry.

## Inspect before editing

- Locate the authoritative player position, camera, obstacles, scene lifecycle, frame loop, targeting, enemy perception, and render layers.
- Confirm the gameplay ground model. The proven corner-unprojection method assumes a locally horizontal plane; use authoritative surface or terrain reconstruction when elevation varies across the visible area.
- Find existing scene fog, post-processing, renderer creation, review modes, menus, captures, transitions, and disposal paths.
- Read the current tests and recent fog/perception commits before changing constants or ownership.
- Confirm whether obstacle state changes at runtime. Reuse the same active obstacle collection used by navigation or collision when its geometry is suitable for sight.
- Check the working tree early and preserve unrelated changes.

## Implement in dependency order

### 1. Define perception truth

- Represent each sight blocker with a stable footprint, vertical span, and active state.
- Intersect a 3D sight segment or ray with both the horizontal footprint and vertical span.
- Ignore inactive blockers and cover below the eye-to-target sight line.
- Expose:
  - point-to-point perception for enemies, targeting, and attacks;
  - a deterministic angular distance fill for the fog lookup.
- Use explicit player and enemy ranges. Allow them to differ when the encounter design needs enemies to acquire beyond the player's reveal edge.

### 2. Build the visibility lookup

- Allocate the distance array, byte pixels, and data texture once.
- Cast a fixed number of evenly spaced horizontal rays around the player's eye point.
- Normalize hit distances by the player vision radius and quantize them into a one-row red-channel texture.
- Use linear filtering, horizontal repeat wrapping, no mipmaps, and a bounded mobile/desktop ray budget.
- Refresh after meaningful player motion or a short maximum interval. Do not allocate in the frame loop.

### 3. Render one soft overlay

- Use one clip-space plane and one transparent shader material.
- Reconstruct each fragment's ground-plane position from the four camera-corner intersections.
- Combine:
  - a clear inner radius and soft outer radial falloff;
  - a feathered wall boundary sampled from the angular lookup.
- Smooth obstacle visibility across neighboring angles. Weight wall fog below the outer radial fog so blockers read as atmosphere, not opaque wedges.
- Combine radial and obstacle fog with `max`, then cap final opacity.
- Disable depth test, depth write, and tone mapping; render after the world.
- Do not introduce a second renderer, render target, composer, or per-ray meshes.

### 4. Integrate gameplay

- Keep simulation presence separate from presentation visibility.
- Hide unrevealed enemy renderables through layers or a presentation-only mechanism; do not toggle the actor root if root visibility also controls lifecycle or simulation.
- Exclude unrevealed enemies from target lock, aim selection, nearest-target search, HUD counts, and player hit eligibility.
- Hide telegraphs that would leak an unseen enemy.
- Let enemy acquisition and attacks use their own range plus the same line-of-sight truth.
- Clear an active target lock as soon as perception invalidates it.
- Cache perception within a simulation phase and refresh after movement when downstream systems need current positions.

### 5. Integrate state and lifecycle

- Enable fog only during active gameplay.
- Disable it for menus, inventory, review/capture modes, paused or non-playing states, and stage transitions unless the product explicitly requires otherwise.
- Disable it before any early-render branch so a previous frame cannot leak into another state.
- Keep atmospheric scene fog separate from fog of war.
- Dispose the overlay geometry, material, and lookup texture on teardown.
- Publish compact telemetry for ray budget, enabled state, ranges, visible enemies, target visibility, line of sight, and measured distance.

## Tune in the right order

1. Validate obstacle geometry and eye height.
2. Validate player and enemy ranges.
3. Set the fully clear inner radius.
4. Set the outer radial falloff and maximum opacity.
5. Set wall-edge softness.
6. Add angular smoothing until spokes disappear.
7. Reduce obstacle darkness until walls feel like occlusion rather than black rays.
8. Adjust ray budgets only after visual correctness and measured performance.

Do not hide bad obstacle data with extra blur. Do not make the entire scene darker to compensate for weak visibility boundaries.

## Validate

Read [validation.md](references/validation.md) before claiming completion. Run:

- pure perception and opacity tests;
- structural render-budget contracts;
- integration tests for targeting, layers, lighting, and state;
- project lint and build;
- real desktop and mobile browser checks in the Codex browser.

Use normal gameplay for visual verification when review modes intentionally disable fog. Judge motion, camera movement, wall edges, gates, seams, and menu transitions—not only a still frame.

## Protect the proven qualities

- Keep the inner play area readable.
- Keep the maximum darkness restrained.
- Keep walls soft and free of visible radial spokes.
- Keep the angle seam invisible.
- Keep dynamic gates synchronized with sight.
- Keep enemy behavior fair even when enemy vision exceeds player reveal.
- Keep one authoritative visibility model and one bounded overlay.

© MengTo · MIT · MengTo/Skills

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

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
threejs-materials calesthio Справочник по материалам Three.js: PBR, базовые, фонговские, кастомные шейдеры. Помогает быстро выбрать нужный материал для сетки, настроить текстуры и оптимизировать рендеринг. CX Codex +1 1 000установок threejs-game-director majidmanzarpour Скилл-режиссёр для браузерных игр на Three.js: ведёт от играбельного цикла до графики, UI и проверки в браузере, раздавая фазы соседним скиллам. CX Codex +1 3 100установок game-designer OpusGameLabs Скилл для геймдизайна: разбирает браузерную игру и доводит её вид — фон, частицы, анимации, переходы между сценами. CX Codex +1 1 900установок game-architecture OpusGameLabs Скилл задаёт структуру проекта браузерной игры: EventBus, единый GameState, Constants.js и порядок слоёв. Пригодится, когда код игры уже расползается. CX Codex +1 1 200установок threejs-3d-generator majidmanzarpour Генерирует 3D-модели для игр на Three.js через Tripo API: из текста или картинки, с текстурами, ригом и анимациями, и складывает готовые GLB или FBX в проект. CX Codex +1 3 500установок mint-threejs-skills mintdotgg Набор инструкций для создания браузерных 3D-приложений, игр и вьюверов на Three.js с генерацией моделей через Mint MCP. Помогает настроить пайплайн ассетов и рендеринг без рутины. CX Codex +1 616установок

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

threejs-weather Добавляет в Three.js сцены управляемые состояния дождя, грозы и снега. Нужен для атмосферного фона, где погода меняет частицы, свет и поверхность. CX Codex +1 1 200установок threejs-landscape Скилл собирает живой ландшафт на Three.js: холмы, трава, камни, небо и смена времени суток. Годится для hero-фонов и сцен, где объект должен стоять в месте, а не висеть на градиенте. CX Codex +1 1 200установок falling-leaves Скилл помогает генерировать реалистичную анимацию падающих листьев и лепестков на canvas или в 3D. Пригодится, когда обычные частицы выглядят плоским конфетти. CX Codex +1 1 200установок pointer-trail-emitter Скилл учит агента строить шлейф за курсором, который держит одинаковый шаг между частицами при любой скорости руки. CX Codex +1 1 200установок build-vesperfall-review-assets Скилл формирует пары для ревью ассетов каталога Vesperfall: прозрачный PNG-референс и живую модель Three.js или FBX. Пригодится при добавлении персонажей, оружия и проверке наборов анимаций. CX Codex +1 1 200установок build-game-changelog Скилл для проектирования и ведения внутриигрового чейнджлога: версии, провенанс деплоя, навигация по меню. CX Codex +1 1 200установок build-game-monster-system Скилл собирает риггованных монстров для Three.js и веб-экшенов: контракт ассетов, сокеты, хитбоксы, состояния боя. CX Codex +1 1 200установок build-game-map-editor Скилл помогает спроектировать браузерный редактор карт для Three.js и изометрических игр. Он настраивает режим режиссёра, черновики и оверлеи без изменения боевых сохранений. CX Codex +1 1 200установок

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

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