ポストプロセス

更新日:2013-04-30, r58

基本


<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

普通のレンダラ。

RenderPass
+ CopyShader(renderToScreen)

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



以降、RenderPass +




BloomPass
  (要 ConvolutionShader)
+ CopyShader(renderToScreen)

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

BleachBypassShader

銀残し(Wikipedia)。

BrightnessContrastShader

明るさとコントラスト。

ColorCorrectionShader

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

ColorifyShader

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

DotScreenShader

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

EdgeShader

エッジ抽出。背景色黒。

EdgeShader2

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

FilmShader

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

FocusShader

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

FXAAShader

アンチエイリアス。

HorizontalBlurShader

水平方向にブレる。

VerticalBlurShader

垂直方向にブレる。

HorizontalTiltShiftShader

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

VerticalTiltShiftShader

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

HueSaturationShader

色相と彩度の調整。

KaleidoShader

万華鏡。

LuminosityShader

明度の抽出。

MirrorShader

鏡。

RGBShiftShader

RGBのブレ。

SepiaShader

セピアカラー。

SSAOShader

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

VignetteShader

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

BokehShader

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











タグ:

+ タグ編集
  • タグ:

このサイトはreCAPTCHAによって保護されており、Googleの プライバシーポリシー利用規約 が適用されます。

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