Three.js Post-Processingавтор CloudAI-X

Three.js Post-Processing Skill.

Рассматривайте экранные эффекты как упорядоченный конвейер рендеринга, а не как не связанные между собой фильтры.

3D
Three.js

Скачать OpenDesign Открыть руководство по использованию

Обзор источника · Three.js Post-ProcessingSKILL.md

Задача 3D Результат • Упорядоченная цепочка проходов composer • Настройки эффектов, привязанные к визуальной цели • Обработка изменения размера и сравнение стоимости эффектов Перед началом Рабочий проект Three.js и renderer; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Three.js Post-Processing: создание конвейера экранных эффектов

Настройка composer, эффекты в экранном пространстве, собственные проходы, render targets и изменение размера.

Рабочий процесс на основе источникаНе тест выполнения

Принцип работы

Three.js Post-Processing охватывает EffectComposer и проходы, преобразующие отрендеренную сцену. Примеры: свечение, сглаживание, ambient occlusion, глубина резкости, контуры, цветокоррекция и собственные шейдеры экранного пространства.

Отличие от работы с материалами в охвате: постобработка применяется к отрендеренному изображению и может влиять на всю композицию. Порядок проходов, разрешение целей, обработка изменения размера и сравнение с необработанной сценой должны входить в план реализации. Перед использованием сверьте конструкторы из примеров и поддержку renderer с установленной версией Three.js.

Ожидаемые результаты

Упорядоченная цепочка проходов composer
Настройки эффектов, привязанные к визуальной цели
Обработка изменения размера и сравнение стоимости эффектов

Смотреть пример задания

От задания до проверки

01
Определите цель
Укажите, что должно светиться, оставаться в фокусе или получать акцент.
02
Соберите проходы
Начните с рендера сцены и добавляйте только проходы, нужные для задуманной обработки.
03
Сравните и измерьте
Проверьте вид без эффектов, результат после изменения размера и стоимость рендеринга в целевом разрешении.

02 Когда использовать

Когда использовать

Рабочий проект Three.js и renderer; сверьте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного подхода.

Подходит для

Финальная презентационная обработкаДобавьте контролируемое свечение или фокус, когда базовая сцена уже работает.
Выделение выбранногоОбведите выбранную геометрию, не заменяя её базовый материал.

Ограничения для проверки

Дополнительная работа рендерингаКаждый проход может увеличивать стоимость и скрывать проблему сцены, а не решать её.
Что нужно проверить в APIПолученный источник содержит конструкторы, зависящие от версии, и шаблоны WebGPU.

Что подготовить

Базовая сценаПредоставьте рабочий рендер без эффектов.
Визуальная обработкаОпишите нужное свечение, фокус, контур или цветокоррекцию.
Целевая производительностьУкажите разрешение, pixel ratio и целевые устройства.

03 Важные решения

Важные решения

Логика конвейера
Порядок объясняет взаимодействия, которые можно упустить при настройке эффектов по отдельности.
Обратимые эффекты
Сравнение с базовой версией помогает убрать дорогие проходы, не служащие кадру.

04 Пример задания

Попробуйте целевое задание

Приведённый ниже пример задания не тестировался. Перед использованием проверьте настройку навыка.

Проверьте настройку

Используйте нужную директорию threejs-skills как руководство для агента. Это не среда выполнения Three.js, и она не устанавливает ресурсы сцены.

Исходный файл в апстриме

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Начните с одного результата

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

Пример задания

Используйте threejs-postprocessing, чтобы добавить к этой сцене тонкий контур и при необходимости bloom. Сохраните вариант без эффектов для сравнения, объясните порядок проходов, проверьте изменение размера и измерьте добавленную стоимость. Перед использованием сверьте конструкторы с установленной версией.

Проверьте результат

Сравните фактический результат с этими наблюдаемыми критериями.

Composer — предполагаемый итоговый путь рендеринга.
Эффекты сохраняются при изменении размера и pixel ratio.
У каждого включённого прохода есть понятная цель.

OpenDesign предоставляет локальное дизайн-пространство для кодовых агентов. Наличие в каталоге не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesign Читать краткое руководство

05 Источник и лицензия

Источник и лицензия

Эта страница описывает зафиксированную ревизию источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника: CloudAI-X
Репозиторий: CloudAI-X/threejs-skills
Файл навыка: skills/threejs-postprocessing/SKILL.md
Лицензия: Не подтверждена — перед повторным использованием изучите условия апстрима.
Проверенный снимок: 2026-10-07 · b1c623076c66

Редакционное резюме источника

Настройка composer, эффекты в экранном пространстве, собственные проходы, render targets и изменение размера.

Авторское резюме OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Является ли bloom здесь свойством материала?

Нет. В этом навыке bloom представлен как проход постобработки.

Зачем обновлять разрешение при изменении размера?

Цели composer и uniform-переменные отдельных проходов должны оставаться согласованными с выводом.

Гарантирована ли текущая совместимость с WebGPU?

Нет. Нужно проверить renderer и установленную версию.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Скачать OpenDesign Просмотреть дизайн-навыки