Three.jsのポストプロセスでフィルタをかける

Three.jsにはポストプロセス用のエフェクトがいくつか用意されていて、これを使うと画面をぼかしたりといったことが比較的簡単にできる。ポストプロセスで「ぼかし」と「フィルム」のフィルタをかける手順をまとまる。Three.jsのバージョンはr74。ちなみに、ポストプロセスはシーン全体に適用されるので、オブジェクト単位でフィルタをかけることはできない。

１．必要なjsファイルを適当なフォルダにコピーして、htmlから読み込む
必要なｊsファイルは、以下の2つのフォルダのどちらかにある。
　three.js-master\examples\js\postprocessing
　three.js-master\examples\js\shaders

必要なｊsファイルが不足している場合は、ブラウザのWEBコンソールに以下のようなメッセージが表示される。この場合、ConvolutionShaderをたよりにthree.js-master\examples\js配下をさがすとthree.js-master\examples\js\shaders\ConvolutionShader.jsを見つけられる。これを読み込むようにするとポストポロセスによるフィルタが有効になる。

THREE.BloomPass relies on THREE.ConvolutionShader

２．エフェクトをかける画像を表示させる

// ジオメトリの作成
// PlaneGeometry(width, height, widthSegments, heightSegments)
// width: 横の長さ（x軸）
// height 縦の長さ（y軸）
// widthSegments: 横の分割数（デフォルト1）
// heightSegments: 縦の分割数（デフォルト1） 
var geometry = new THREE.PlaneGeometry( 4, 3);

// マテリアルの作成（テクスチャとして画像を読み込む）
var material = new THREE.MeshPhongMaterial( { map: new THREE.TextureLoader().load( '../image/persimmon.jpg' ), color: 0xffffff } );
// オブジェクトの作成
var plane = new THREE.Mesh( geometry, material );
// オブジェクトをシーンに追加
scene.add( plane );

// カメラ位置調整
camera.position.z = 2;

３． EffectComposerインスタンスを作成し、フィルタを追加する

// EffectComposerインスタンス作成
var composer = new THREE.EffectComposer( renderer );

// THREE.RenderPassでシーンを描画
composer.addPass( new THREE.RenderPass( scene, camera ) );
// ぼかしフィルタ追加
composer.addPass( new THREE.BloomPass(1.0, 25, 2.0, 256) );
// フィルムフィルタ追加
composer.addPass( new THREE.FilmPass(0.1, 2.0, 5.0, 512) );

// フィルタの結果を表示画面にレンダリング
var toScreen = new THREE.ShaderPass( THREE.CopyShader );
toScreen.renderToScreen = true;
composer.addPass( toScreen );

 

４．レンダリングループ内でEffectComposerでレンダリング

// renderer.render(scene,camera);
composer.render();

 

結果は以下の通り。

 

オリジナル画像

 

ぼかしフィルタ

 

フィルムフィルタ

 

• サンプル（ぼかしフィルタ）の表示