pmndrs/react-postprocessing

これは何？

主な機能

• 01EffectComposer内でBloom、DepthOfField、Noise、Vignetteなどのエフェクトコンポーネントを宣言的に配置
• 02描画処理を減らすため、エフェクトを単一のパスに統合
• 03各エフェクトで個別のブレンド関数を指定可能
• 04ガンマ補正に標準対応し、WebGL2 MSAAはデフォルトで有効
• 05react-three-fiberで使えるTypeScript製

ユースケース

• react-three-fiberのシーンにブルーム、ビネット、フィルムグレインを追加
• 3Dシーンの一部に視線を集めるため、被写界深度によるぼかしを適用
• レンダーパスを手作業で記述せず、シンプルで直線的なビジュアルエフェクトのチェーンを構築

クイックスタート

1. 1

   パッケージをインストールする

   npm install @react-three/postprocessing
2. 2

   react-three-fiber の Canvas 内で、エフェクトコンポーネントを含む EffectComposer でシーンを囲む

使う前に知っておきたいこと

• !エフェクトを複雑に組み合わせて制御する用途には向いておらず、シンプルなエフェクトチェーンに最適です。
• !@react-three/fiber が必要なため、react-three-fiber のシーンでのみ使用できます。

トピック

よくある質問

react-postprocessing とは？

react-three-fiberのシーンに、JSXコンポーネントとして宣言的にポストプロセスエフェクトを適用できる、postprocessingライブラリのReactラッパーです。 react-postprocessingは、Three.js向けのReactレンダラーである@react-three/fiberとpostprocessingライブラリをつなぐラッパーです。エフェクトのパスを手作業で組み立てる代わりに、Canvas内のEffectComposer要素にBloom、DepthOfField、Noise、Vignetteなどのエフェクトコンポーネントを配置します。

react-postprocessing は無料で使えますか？ライセンスは？

react-postprocessing は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-postprocessing は今もメンテナンスされていますか？

活発にメンテナンス中。react-postprocessing の最終コミットは 2026年10月19日 です。

react-postprocessing は何に使えますか？

react-three-fiberのシーンにブルーム、ビネット、フィルムグレインを追加 3Dシーンの一部に視線を集めるため、被写界深度によるぼかしを適用 レンダーパスを手作業で記述せず、シンプルで直線的なビジュアルエフェクトのチェーンを構築

react-postprocessing のインストール方法は？

パッケージをインストールする: npm install @react-three/postprocessing react-three-fiber の Canvas 内で、エフェクトコンポーネントを含む EffectComposer でシーンを囲む

react-postprocessing はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/react-postprocessing