Repolode
Предложить
pmndrs

pmndrs/react-postprocessing

Обёртка для React над библиотекой postprocessing, которая позволяет декларативно добавлять эффекты постобработки в сцены react-three-fiber с помощью JSX-компонентов.

Открыть на GitHubСайт
Звёзды
1,438
Форки
141
Открытые issues
12
Последний коммит
вчера

Что это?

react-postprocessing связывает библиотеку postprocessing с @react-three/fiber — React-рендерером для Three.js. Вместо того чтобы вручную создавать проходы эффектов, достаточно разместить компоненты эффектов, например Bloom, DepthOfField, Noise и Vignette, внутри элемента EffectComposer в Canvas.

Обёртка предназначена для простых цепочек эффектов, а не для сложной оркестрации множества проходов. Библиотека postprocessing объединяет переданные эффекты в один проход, сокращая количество операций рендеринга; при этом для каждого эффекта можно выбрать собственную функцию смешивания. Коррекция гаммы поддерживается из коробки, а WebGL2 MSAA включён по умолчанию.

Пакет опубликован на npm под именем @react-three/postprocessing, а документация доступна на отдельном сайте.

Ключевые возможности

  • 01Декларативные компоненты эффектов, например Bloom, DepthOfField, Noise и Vignette, внутри EffectComposer
  • 02Объединение эффектов в один проход для сокращения количества операций рендеринга
  • 03Возможность задать собственную функцию смешивания для каждого эффекта
  • 04Встроенная коррекция гаммы и WebGL2 MSAA, включённый по умолчанию
  • 05Написан на TypeScript для использования с react-three-fiber

Сценарии использования

  • Добавление свечения, виньетки или плёночного зерна в сцену react-three-fiber
  • Применение размытия с эффектом глубины резкости, чтобы привлечь внимание к части 3D-сцены
  • Создание простой линейной цепочки визуальных эффектов без ручного написания проходов рендеринга

Быстрый старт

  1. 1

    Установите пакет

    npm install @react-three/postprocessing
  2. 2

    Оберните сцену в EffectComposer с компонентами эффектов внутри Canvas из react-three-fiber

Что важно знать

  • Не предназначен для сложной оркестрации эффектов; лучше всего подходит для простых цепочек эффектов.
  • Требует @react-three/fiber, поэтому подходит только для сцен react-three-fiber.

Темы

#react#threejs#webgl#3d#postprocessing#react-three-fiber#graphics#react-postprocessing

Частые вопросы

Что такое react-postprocessing?
Обёртка для React над библиотекой postprocessing, которая позволяет декларативно добавлять эффекты постобработки в сцены react-three-fiber с помощью JSX-компонентов. react-postprocessing связывает библиотеку postprocessing с @react-three/fiber — React-рендерером для Three.js. Вместо того чтобы вручную создавать проходы эффектов, достаточно разместить компоненты эффектов, например Bloom, DepthOfField, Noise и Vignette, внутри элемента EffectComposer в Canvas.
react-postprocessing можно использовать бесплатно? Какая у него лицензия?
react-postprocessing распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
react-postprocessing всё ещё поддерживается?
Активно поддерживается. Последний коммит в react-postprocessing — 19 окт. 2026 г..
Для чего можно использовать react-postprocessing?
Добавление свечения, виньетки или плёночного зерна в сцену react-three-fiber Применение размытия с эффектом глубины резкости, чтобы привлечь внимание к части 3D-сцены Создание простой линейной цепочки визуальных эффектов без ручного написания проходов рендеринга
Как установить react-postprocessing?
Установите пакет: npm install @react-three/postprocessing Оберните сцену в EffectComposer с компонентами эффектов внутри Canvas из react-three-fiber
Где скачать react-postprocessing?
Исходный код и инструкции по установке — на GitHub: https://github.com/pmndrs/react-postprocessing

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты