three.jsアプリケーションの多くは3Dオブジェクトをスクリーンに直接描画します。 しかしながら時々、一つ以上のエフェクト(被写界深度、Bloom、フィルムグレイン、様々なアンチエイリアス効果など)を適用したい場合があります。こういったエフェクトを実装するためにpost-processingは広く使用されています。 まず、シーンはビデオカードメモリのバッファを表す描画対象に対して描画されます。 次に、最終的なスクリーンへのレンダリングの前に、1つ以上のpost-processingで画像バッファにフィルタとエフェクトを適用します。
こういったワークフローを実装するために、three.jsは[page:EffectComposer]で完全なpost-processingを提供しています。
プロセスの一段階目はexampleディレクトリから必要なファイルを全てimportすることです。 このガイドではthree.jsの[link:https://www.npmjs.com/package/three npm package](npmの公式のパッケージ)を使っていると想定しています。 このガイドのデモでは下に示したファイルが必要です。
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
全てのファイルのimportが成功したのちに、[page:WebGLRenderer]のインスタンスを渡すことでcomposerを作成します。
const composer = new EffectComposer( renderer );
composerを使うときにはアプリケーションのアニメーションループを変更する必要があります。 [page:WebGLRenderer]のrenderメソッドを呼ぶ代わりに[page:EffectComposer]のそれぞれの対応するものを使います。
function animate() {
requestAnimationFrame( animate );
composer.render();
}
composerが準備できたので、post-processingパスのチェーンを設定できるようになりました。 これらのパスはアプリケーションの最終的なビジュアルを出力することに責任を持ちます。 これらのパスは追加/挿入の順番で処理されます。今回示している例では、*RenderPass*インスタンスがはじめに実行され、 それから*GlitchPass*インスタンスが実行されます。チェーンの中で最後の有効なpassが自動的に画面に描画されます。 passの設定は以下のように行います。
const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
const glitchPass = new GlitchPass();
composer.addPass( glitchPass );
*RenderPass*は普通チェインのはじめにあります。 これはレンダリングされたシーンを次のpost-processingの入力とするためです。 *GlitchPass*は、これらのイメージをワイルドなglitch effectを適用するために使います。 実際に動いているものを見るために、[link:https://threejs.org/examples/webgl_postprocessing_glitch sample]を見てみましょう。
エンジンに元から入っている定義済みの後処理passが使えます。 このpassは[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]ディレクトリに入っていて、広範囲に使用できます。
独自のpostprocessing shaderを書いて、post-processing passのチェーンの中に組み込みたい場合があります。そういった場合には、*ShaderPass*を利用することが出来ます。 ファイルと独自のshaderをインポートしたのちに、以下のコードでpassを設定することができます。
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
// later in your init routine
const luminosityPass = new ShaderPass( LuminosityShader );
composer.addPass( luminosityPass );
リポジトリには[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]と呼ばれるファイルがあり、カスタムshaderを作る上での良いスタートコードです。 *CopyShader*はエフェクトを適用せずに、EffectComposerの読み込みバッファの画像内容を書き込みバッファにコピーするだけです。