ポストプロセス

<script src="examples/js/postprocessing/EffectComposer.js"></script>
  <script src="examples/js/shaders/CopyShader.js"></script>       <!-- EffectComposerに必要 -->
  <script src="examples/js/postprocessing/MaskPass.js"></script>  <!-- EffectComposerに必要 -->
<script src="examples/js/postprocessing/RenderPass.js"></script>
<script src="examples/js/postprocessing/ShaderPass.js"></script>
  <script src="examples/js/shaders/DotScreenShader.js"></script>  <!-- 好きなシェーダ -->
  <script src="examples/js/shaders/FXAAShader.js"></script>       <!-- 好きなシェーダ -->

読んどく

// EffectComposer。WebGLRendererをラップする。addPassでフィルタ追加していく。
  // サイズ設定のための記述。幅window.innerWidth, 高さwindow.innerHeightだったら必要ない。
  var parameters = {                  // EffectComposerのデフォパラメータ
    minFilter: THREE.LinearFilter,
    magFilter: THREE.LinearFilter, 
    format: THREE.RGBFormat,
    stencilBuffer: false
  };
  var renderTarget = new THREE.WebGLRenderTarget( 320, 240, parameters );  // サイズ設定
var composer = new THREE.EffectComposer( renderer, renderTarget );  // 普通のrendererをラップ

// RenderPass。現在シーンを普通に描画。
composer.addPass( new THREE.RenderPass( scene, camera ) );

// ShaderPass(1) : DotScreenShader。ドットスクリーン。ハーフトーン。網点。新聞の写真に使われてるようなやつ。
var dotscreen = new THREE.ShaderPass( THREE.DotScreenShader );
composer.addPass( dotscreen );
dotscreen.enabled = false;         // enabledをfalseにするとこのフィルタはOFFになる

// ShaderPass(2) : FXAA。アンチエイリアスの一種。
var fxaa = new THREE.ShaderPass( THREE.FXAAShader );
fxaa.uniforms[ 'resolution' ].value = new THREE.Vector2( 1 / 320, 1 / 240 );
composer.addPass( fxaa );

// ShaderPass(3) : Copy to screen  // ただコピーするだけのフィルタ ―
var toScreen = new THREE.ShaderPass( THREE.CopyShader );
composer.addPass( toScreen );
toScreen.renderToScreen = true;    // ― にrenderToScreenを有効にして
                                   // スクリーン描画させるだけのフィルタとして使う。
                                   // 1コ前のFXAAにrenderToScreenさせることもできるが
                                   // 最後にCopyShaderかましとくといろいろ安全。
                                   // renderToScreenの機能を持たないBloomフィルタなどを使うときや
                                   // この例でFXAAもオフにしたいときとかにも。
// render
composer.render();                 // renderer.render(scene, camera) の代わりにこれを使ってレンダリング

WebGLRenderer

普通のレンダラ。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

RenderPass
+ CopyShader(renderToScreen)

現在シーンを描画するだけ。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

以降、RenderPass +

BloomPass
(要 ConvolutionShader)
+ CopyShader(renderToScreen)

明るい部分の周囲に光がぼんやりにじむライトブルーム。renderer.autoClearをfalseっておく。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

BleachBypassShader

銀残し(Wikipedia)。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

BrightnessContrastShader

明るさとコントラスト。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

ColorCorrectionShader

色調補正。色をRGBそれぞれについて何乗して何倍するか指定。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

ColorifyShader

単色塗り。指定した色についてのグレースケール。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

DotScreenShader

ドットスクリーン。ハーフトーン。網点(Wikipedia)。新聞の写真に使われるような画像。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

EdgeShader

エッジ抽出。背景色黒。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

EdgeShader2

エッジ抽出。背景色透明。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

FilmShader

ノイズと走査線。time引数によってノイズの種を与える。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

FocusShader

フォーカス。画面中央から外側へ離れるに従ってゆがんでボケる。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

FXAAShader

アンチエイリアス。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

HorizontalBlurShader

水平方向にブレる。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

VerticalBlurShader

垂直方向にブレる。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

HorizontalTiltShiftShader

ある画面水平線から上下に離れるほど水平方向にブレる。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

VerticalTiltShiftShader

ある画面水平線から上下に離れるほど垂直方向にブレる。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

HueSaturationShader

色相と彩度の調整。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

KaleidoShader

万華鏡。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

LuminosityShader

明度の抽出。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

MirrorShader

鏡。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

RGBShiftShader

RGBのブレ。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

SepiaShader

セピアカラー。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

SSAOShader

光の当たりにくそうなところを暗くする。環境遮蔽。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

VignetteShader

画面周辺部が暗くなる。ヴィネット。口径食(Wikipedia)。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

BokehShader

ボケ。下例だと赤箱の角の距離でピントが合っていて、離れるに従いボケている。

#ref error ：画像を取得できませんでした。しばらく時間を置いてから再度お試しください。

タグ：

+ タグ編集

「ポストプロセス」をウィキ内検索

最終更新：2013年04月30日 23:16

three.js wiki

リンク

更新履歴