Repolode
投稿する
pmndrs

pmndrs/postprocessing

three.jsのWebGLシーンにブルーム、SSAO、カラーグレーディングなどのフルスクリーン画像効果を連ねて適用するポストプロセッシングライブラリ。

GitHub で見る
スター
2,960
フォーク
258
未解決の Issue
30
最終コミット
6 日前

これは何？

postprocessingは、three.jsのシーンにフルスクリーンのポストプロセッシング効果を追加するJavaScriptライブラリです。ポストプロセッシングはシーンのレンダリング後に実行され、最終フレームに画像空間の効果を適用します。ライブラリは、シーケンス状のパスを実行するEffectComposerを中心に構成されており、シーンを描画するRenderPassと、効果を適用するEffectPassが用意されています。

EffectPassは、任意の組み合わせの効果を可能な限り少ないレンダリング処理にまとめるため、効果ごとに個別のパスを連ねるコストをかけずに、多くの効果を組み合わせられます。各効果には独自のブレンド関数を定義できます。フルスクリーン処理では、画面を覆う四角形の代わりに単一の三角形を使用します。また、HDR風のワークフロー向けに高精度のHalfFloatフレームバッファをサポートし、HDRカラーを表示可能な出力に変換するToneMappingEffectも備えています。

パッケージには、ブルーム、ブラー、被写界深度、グリッチ、ゴッドレイ、アウトライン、SSAO、ピクセル化、LUTベースのカラーグレーディング、ビネットなどの組み込み効果が含まれています。カスタム効果やパスも作成でき、その手順はプロジェクトのWikiで解説されています。

主な機能

  • 01多くの効果を1つのEffectPassにまとめ、レンダリング処理を削減します。
  • 02ブルーム、SSAO、被写界深度、アウトライン、カラーグレーディングなどの組み込み効果を備えています。
  • 03効果ごとにブレンド関数を設定できます。
  • 04HDR風のレンダリング向けに高精度のHalfFloatフレームバッファを利用できます。
  • 05HDRからLDRへの変換を行うToneMappingEffectを備えています。
  • 06カスタム効果やパスを作成できます。

ユースケース

  • three.jsの製品ビジュアライゼーションやゲームシーンにブルームやグローを追加する。
  • WebGLシーンに走査線、ピクセル化、グリッチなどのレトロな表現を適用する。
  • LUTファイルを使って3Dシーンのカラーグレーディングを行う。
  • 衝撃波や選択したオブジェクトのアウトラインなど、インタラクティブな効果を構築する。

トピック

#threejs#webgl#post-processing#graphics#shaders#real-time#image-effects#2d-filter-effects#composer#effects

よくある質問

postprocessing とは？
three.jsのWebGLシーンにブルーム、SSAO、カラーグレーディングなどのフルスクリーン画像効果を連ねて適用するポストプロセッシングライブラリ。 postprocessingは、three.jsのシーンにフルスクリーンのポストプロセッシング効果を追加するJavaScriptライブラリです。ポストプロセッシングはシーンのレンダリング後に実行され、最終フレームに画像空間の効果を適用します。ライブラリは、シーケンス状のパスを実行するEffectComposerを中心に構成されており、シーンを描画するRenderPassと、効果を適用するEffectPassが用意されています。
postprocessing は無料で使えますか？ライセンスは？
postprocessing は Zlib ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。
postprocessing は今もメンテナンスされていますか？
活発にメンテナンス中。postprocessing の最終コミットは 2026年11月1日 です。
postprocessing は何に使えますか？
three.jsの製品ビジュアライゼーションやゲームシーンにブルームやグローを追加する。 WebGLシーンに走査線、ピクセル化、グリッチなどのレトロな表現を適用する。 LUTファイルを使って3Dシーンのカラーグレーディングを行う。 衝撃波や選択したオブジェクトのアウトラインなど、インタラクティブな効果を構築する。
postprocessing はどこで入手できますか？
ソースコードとインストール手順は GitHub にあります：https://github.com/pmndrs/postprocessing

概要はプロジェクトの README をもとに AI が生成しています。GitHub の数値は毎日更新されます。

関連プロジェクト