基本
<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
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
BokehShader
ボケ。下例だと赤箱の角の距離でピントが合っていて、離れるに従いボケている。
最終更新:2013年04月30日 23:16