threejs-postprocessing

Three.js ポストプロセッシング

意図的なスクリーンスペースのパイプラインを構築する場合は、このスキルを使用してください。シーンとカメラの設定は threejs-fundamentals に、メッシュとマテリアルのシェーダー処理は threejs-shaders に、テクスチャとレンダー ターゲットの仕様は threejs-textures に任せてください。

このスキルを使用する場面

• ブルーム、アンチエイリアス、アンビエントオクルージョン、被写界深度、アウトライン、カラーグレーディングを追加する
• EffectComposer を設定し、パスの順序や二重レンダリングの不具合を解決する
• カスタムのフルスクリーン ShaderPass を作成する、またはオフスクリーンのレンダーターゲットを管理する
• ぼけ、解像度の誤り、エフェクトの欠落、パスの過剰な負荷、破棄時のリークを修正する

手順

Step 1: まず基本となるレンダラーを確立する

1. パスを追加する前に、未処理の renderer.render(scene, camera) の表示を正しくします。
2. エフェクトがマテリアルやシーンに関するものか、本当にスクリーンスペースで処理すべきものかを判断します。 不適切なライト、テクスチャの色空間、マテリアルを補うためにフルスクリーンパスを使用しないでください。
3. コンポーザーの所有者はキャンバスとレンダーループの所有者にします。1 フレームにつき、 最終出力にはレンダラーによるレンダリングとコンポーザーによるレンダリングのどちらか一方だけを使用してください。

Step 2: 最小構成で順序を決めたコンポーザーを作成する

import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new UnrealBloomPass(new THREE.Vector2(width, height), 0.6, 0.4, 0.85));

function render() {
  composer.render();
  requestAnimationFrame(render);
}
render();

パスの順序によって挙動が決まります。特に深度依存、選択、アンチエイリアス、色補正のパスを組み合わせる場合は、 各パスをその次のパスより前または後に配置する理由を記録してください。

Step 3: 解像度と色を意図的に扱う

function resize(width, height) {
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height, false);
  composer.setSize(width, height);
}

コンポーザーの解像度を、レンダラーで設定された描画バッファーの方式に合わせてください。ピクセルオフセットや深度を サンプリングするエフェクトには、現在のサイズを渡す必要があります。レンダラーの現在の色出力設定を確認せずに、 旧式のガンマ補正や色補正パスを適用しないでください。

Step 4: 各パスを予算内の機能として扱う

必要な機能	最初に選ぶもの
通常のシーン出力	RenderPass のみ
明るい発光の輝き	対象解像度で測定してからブルーム
エイリアスの平滑化	利用可能な場合は組み込みの MSAA、その後に適切な AA パス
オブジェクトのアウトライン	アウトラインパスまたは対象を絞ったカスタムパス
カスタムのスクリーンスペース演算	明示的なユニフォームを指定した ShaderPass
強い DOF／SSAO／グリッチ	フォールバックやオフ切り替えを備えた任意の品質設定

低解像度バッファー、品質設定、または選択的なエフェクトを使うのは、視覚上の要件を検証してからにしてください。 アートディレクションの代わりにパスを重ねないでください。

Step 5: エフェクトとクリーンアップを検証する

• リサイズ、ピクセル比、動的なカメラ移動、ルートの切り替えやアンマウントをテストします。
• 対象ハードウェアで低品質と高品質の設定をテストし、フレーム時間への影響を記録します。
• 各エフェクトを個別に切り替えて、パスの順序を確認します。
• インストールされている API と機能のライフサイクルに従って、コンポーザーが所有するレンダーターゲットとパスを破棄します。 シーンがなくなった後もオフスクリーンの GPU バッファーを残さないでください。

例

選択的ブルーム

選択対象やレイヤーのレンダリングを明示的に保ち、通常のシーンが暗くなったり、オブジェクトが重複したりしないことを確認します。 選択的ブルームは複数回レンダリングするパイプラインであり、ブルームのしきい値フラグだけでは実現できません。

カスタムビネット

CSS やキャンバスのオーバーレイでは要件を満たせないと確認できた場合にのみ、ShaderPass を使用します。 時間、解像度、テクスチャのユニフォームを明示的に宣言し、単一の所有者を通じて更新してください。

ベストプラクティス

1. 通常のレンダリング経路から始め、パスを 1 つずつ追加します。
2. リサイズのたびに、コンポーザーとレンダラーの寸法を同期させます。
3. パスの順序と色のパイプラインを、機能要件の一部として扱います。
4. 負荷の高いエフェクトには、デバイスに適した品質設定を設けます。
5. 視覚効果を組み合わせてリリースする前に、GPU のフレーム時間を測定します。

参考資料

• Three.js ポストプロセッシングのソースカバレッジ
• Three.js マニュアル：ポストプロセッシング
• EffectComposer のドキュメント