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

3d-sky-background — скилл для Claude Code: что делает и как установить

Настраивает корректный фон неба в 3D-сцене: процедурную атмосферу, туман у горизонта, направленный солнечный свет и окружение для PBR.

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

Что делает 3d-sky-background

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

Для расчётов света используется линейное цветовое пространство, а текстуры помечаются как sRGB. При панорамном маппинге скилл проверяет швы текстур и совпадение угла солнца с источником направленного света в сцене.

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

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

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

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

  • Настрой процедурный купол неба с закатным солнцем и свяжи его с направленным источником света.
  • Добавь equirectangular-панораму для Three.js с асинхронной загрузкой и запасным градиентом.
  • Сделай skybox, следующий за камерой, с отключённой записью глубины и без влияния тумана сцены.

Как установить 3d-sky-background

1Через Skills CLI (Vercel)

npx skills add MengTo/Skills --skill 3d-sky-background -a claude-code

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

~/.claude/skills/3d-sky-background/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/3d-sky-background/

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

Вопросы о 3d-sky-background

Как установить 3d-sky-background в Claude Code?

Выполните команду npx skills add MengTo/Skills --skill 3d-sky-background -a claude-code.

Что делает скилл 3d-sky-background?

Он задаёт правила построения фона 3D-сцены: связывает процедурный градиент атмосферы, панорамы, окружение PMREM и направленный свет солнца.

Почему нельзя пересчитывать PMREM на каждом кадре анимации?

Постоянная генерация карты окружения перегружает видеопамять и процессор. Скилл рекомендует кэшировать заготовки окружения и интерполировать их при смене времени суток.

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

SKILL.md · MIT
---
name: 3d-sky-background
description: Create a camera-correct sky background for a 3D scene with a procedural atmosphere or panorama, horizon haze, aligned sunlight, and coherent environment lighting. Use for architectural skies, outdoor 3D backgrounds, golden hour, and day-to-night sky transitions.
---

# 3D Sky Background

Build a sky that surrounds the world, with a readable horizon and lighting that belongs to the same atmosphere.

## Choose the representation

Inspect the project's renderer, camera range, color pipeline, environment lighting, and existing assets. Use an existing licensed panorama when its cloud composition matters, a procedural sky when changing sun position matters, or a restrained hybrid. Keep the project's rendering backend and version; do not add a second renderer for the sky.

Keep three responsibilities explicit: the visible sky background, the reflection/ambient environment, and direct sun lighting. A background photograph alone does not light PBR objects. A PMREM environment does not supply a shadow-casting directional sun. See the [PMREM documentation](https://threejs.org/docs/pages/PMREMGenerator.html).

## Build a stable surrounding sky

- Use the engine's background facility, a fullscreen direction shader, or an inward-facing dome with depth writes disabled and fog disabled. A dome must fit inside the camera's clipping range and follow camera translation; it should retain world orientation as the camera rotates.
- Derive color from the normalized viewing direction. Blend a pale warm horizon through a muted middle band into a cooler zenith. Keep the lower hemisphere compatible with the ground haze rather than leaving an exposed hard edge.
- Use a shared sun direction for the visible disk, glow, directional light, and any sky-ray pass. A broad halo and a small disk are separate terms; avoid a large white blob.
- Add distant silhouettes only when the composition needs depth. Keep them low contrast, with a hue and value close to the horizon.

## Map a panorama deliberately

A true equirectangular sky wraps a full 360° horizontally and 180° vertically. Establish a consistent world-axis convention, rotate the texture so its photographed sun matches the scene sun, and inspect both the seam and zenith.

A wide landscape photograph is a partial panorama. Record its angular coverage and horizon position; do not stretch it indiscriminately over a sphere. Seijaku aligns a partial sky image around the sun and mirrors its back coverage. That is a composition-specific shortcut; repeated cloud shapes may be visible during a full orbit. Prefer a complete panorama for unrestricted cameras.

When a custom shader wraps longitude, a discontinuity at the seam can cause bad texture derivatives and a blurred stripe. Prefer continuous sampling coordinates with texture wrapping; otherwise supply corrected gradients appropriate to the shader version. Test the seam while orbiting, not only in the initial view.

## Keep color and lighting coherent

Annotate display-referred color images as sRGB and keep lighting calculations in linear space. Apply tone mapping and output conversion once at the intended final stage. Do not copy a fitted inverse tone-map function from another project: Seijaku's fit is coupled to its custom final shader and exposure. Decide explicitly whether a photograph should be tone-mapped with the scene or composited through a separate display-referred path.

Provide a procedural gradient immediately, then load the sky asset asynchronously and blend it in. An asset error should leave a usable sky. Fit texture resolution to the visible angular coverage and target display; do not gate first interaction on an oversized sky image.

Generate a prefiltered environment when needed and reuse it. During a day/night or season transition, interpolate cached environments where supported or refresh at meaningful state changes. Rebuilding PMREM every frame can dominate the scene cost. Dispose superseded environment render targets without disposing textures still in use.

## Day, dusk, and night

Use continuous weights for horizon/zenith colors, sun glow, fog tint, exposure, moon, and stars. Fade stars after the sky darkens. Preserve enough ambient illumination to read materials at night. Animate cloud movement slowly, pause when hidden, and retain a designed still sky for reduced motion.

## Verify

- A full orbit and vertical look reveal no seam, stretched clouds, dome edge, or camera translation parallax.
- Sun direction, shadows, rays, and reflections agree at the intended hero view.
- Day/dusk/night changes avoid flashes, double tone mapping, and mismatched fog.
- The sky remains useful before its image loads and when that image fails.
- Mobile and 2× rendering preserve the horizon and avoid unexpected environment rebuilds.

Read [REFERENCES.md](REFERENCES.md) for source inspection and official APIs. Seijaku's relevant functions are `makeSky`, `makeHills`, `makeStars`, and its environment update path.

© MengTo · MIT · MengTo/Skills

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

Всё по теме «Геймдев и 3D: Unity, Unreal, Godot, Blender» →
threejs-materials-lighting gamedev-skills Скилл для three.js: подбирает материал, ставит источники света, включает тени и подключает HDR-окружение, когда модель выглядит чёрной или плоской. CX Codex +1 5 500установок threejs-lighting calesthio Набор инструкций по настройке источников света и теней в Three.js. Помогает подобрать подходящие типы ламп, настроить карты теней и устранить артефакты рендеринга. CX Codex +1 1 100установок threejs nexu-io Помогает ассистенту создавать 3D-сцены, настраивать материалы, камеру и пост-обработку на Three.js прямо в браузере. CX Codex +1 3 400установок threejs-aaa-graphics-builder majidmanzarpour Скилл переводит браузерную 3D-графику Three.js из прототипа в качественный продакшен: настраивает материалы, свет, шейдеры и проверяет сцену по шкале качества. CX Codex +1 3 200установок three-best-practices three-agent-skills Скилл с набором правил по Three.js: подсказывает агенту, как не течь по памяти и держать кадры. Пригодится, когда пишете или чините 3D-сцену. CX Codex +1 1 500установок godot-3d-lighting thedivergentai Скилл для ИИ-агентов, который подсказывает, как настроить 3D-освещение в Godot: каскады теней, затухание источников, VoxelGI, SDFGI и запекание лайтмапов. CX Codex +1 449установок

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

3d-virtual-tour Скилл для сборки виртуальных туров по 3D-сцене: маршрут камеры, переходы между комнатами, осмотр модели. Пригодится для архитектурных обходов и шоурумов на Three.js. CX Codex +1 527установок 3d-retina-resolution Настраивает чёткий 3D-рендеринг на Retina и HiDPI, включая фиксированный масштаб 200%. Нужен для WebGL-превью, где картинка теряет резкость. CX Codex +1 512установок 3d-high-resolution-textures Помогает подобрать разрешение и PBR-карты для 3D-материалов, чтобы близкие планы выглядели резко, а GPU-память не улетала в потолок. CX Codex +1 508установок 3d-sky-rays Скилл добавляет в Three.js-сцену лучи света из-за крыш и сквозь листву. Пригодится, когда нужен золотой час в архитектурном рендере. CX Codex +1 506установок 3d-falling-leaves Скилл для Three.js и похожих сцен: учит агента строить падающие листья в мировых координатах, с переворотом, сносом и переиспользованием инстансов. CX Codex +1 499установок 3d-four-seasons Добавляет смену четырёх времён года в 3D-сцену через шейдерные uniform-переменные. Помогает переключать листву, свет и снег без пересборки геометрии мира. CX Codex +1 497установок codex-gpt-image-2-5-flare Скилл для генерации и правки графики встроенным инструментом Codex: прозрачные PNG, спрайты, эмблемы и элементы интерфейса. CX Codex +1 475установок 3d-ultra-realistic-water Скилл для Three.js: собирает открытое море с волнами Герстнера, бликами солнца, пеной и кильватерным следом. Пригодится, когда в сцене есть горизонт и движущаяся камера. CX Codex +1 408установок

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

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