「ポストプロセス」の編集履歴（バックアップ）一覧はこちら
「ポストプロセス」(2013/04/30 (火) 23:16:07) の最新版変更点
追加された行は緑色になります。
削除された行は赤色になります。
#divclass(modif){更新日：&date(), r58}
#divclass(hd){#hr()}
*基本
<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) の代わりにこれを使ってレンダリング
----
#divclass(pp0){
***WebGLRenderer
普通のレンダラ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/WebGLRenderer.png)
}
#divclass(pp1){
***RenderPass&br()+ CopyShader(renderToScreen)
現在シーンを描画するだけ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/RenderPass.png)
}
----
***以降、RenderPass +
----
#divclass(pp0){
***BloomPass (br,2)(要 ConvolutionShader)&br()+ CopyShader(renderToScreen)
明るい部分の周囲に光がぼんやりにじむライトブルーム。renderer.autoClearをfalseっておく。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BloomPass.png)
}
#divclass(pp1){
***BleachBypassShader
銀残し。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BleachBypassShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***BrightnessContrastShader
明るさとコントラスト。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BrightnessContrastShader.png)
}
#divclass(pp1){
***ColorCorrectionShader
色調補正。色をRGBそれぞれについて何乗して何倍するか指定。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/ColorCorrectionShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***ColorifyShader
単色塗り。指定した色についてのグレースケール。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/ColorifyShader.png)
}
#divclass(pp1){
***DotScreenShader
ドットスクリーン。ハーフトーン。網点。新聞の写真に使われるような画像。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/DotScreenShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***EdgeShader
エッジ抽出。背景色黒。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/EdgeShader.png)
}
#divclass(pp1){
***EdgeShader2
エッジ抽出。背景色透明。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/EdgeShader2.png)
}
#divclass(ppc){}
#divclass(pp0){
***FilmShader
ノイズと走査線。time引数によってノイズの種を与える。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FilmShader.gif)
}
#divclass(pp1){
***FocusShader
フォーカス。画面中央から外側へ離れるに従ってゆがんでボケる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FocusShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***FXAAShader
アンチエイリアス。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FXAAShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HorizontalBlurShader
水平方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HorizontalBlurShader.png)
}
#divclass(pp1){
***VerticalBlurShader
垂直方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VerticalBlurShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HorizontalTiltShiftShader
ある画面水平線から上下に離れるほど水平方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HorizontalTiltShiftShader.png)
}
#divclass(pp1){
***VerticalTiltShiftShader
ある画面水平線から上下に離れるほど垂直方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VerticalTiltShiftShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HueSaturationShader
色相と彩度の調整。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HueSaturationShader.png)
}
#divclass(pp1){
***KaleidoShader
万華鏡。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/KaleidoShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***LuminosityShader
明度の抽出。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/LuminosityShader.png)
}
#divclass(pp1){
***MirrorShader
鏡。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/MirrorShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***RGBShiftShader
RGBのブレ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/RGBShiftShader.png)
}
#divclass(pp1){
***SepiaShader
セピアカラー。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/SepiaShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***SSAOShader
光の当たりにくそうなところを暗くする。環境遮蔽。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/SSAOShader.png)
}
#divclass(pp1){
***VignetteShader
画面周辺部が暗くなる。ヴィネット。口径食。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VignetteShader.png)
}
#divclass(ppc){}
----
#divclass(pp0){
***BokehShader
ボケ。下例だと赤箱の角の距離でピントが合っていて、離れるに従いボケている。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BokehShader.png)
}
#divclass(ppc){}
//.
#divclass(modif){更新日：&date(), r58}
#divclass(hd){#hr()}
*基本
<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) の代わりにこれを使ってレンダリング
----
#divclass(pp0){
***WebGLRenderer
普通のレンダラ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/WebGLRenderer.png)
}
#divclass(pp1){
***RenderPass&br()+ CopyShader(renderToScreen)
現在シーンを描画するだけ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/RenderPass.png)
}
----
***以降、RenderPass +
----
#divclass(pp0){
***BloomPass (br,2)(要 ConvolutionShader)&br()+ CopyShader(renderToScreen)
明るい部分の周囲に光がぼんやりにじむライトブルーム。renderer.autoClearをfalseっておく。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BloomPass.png)
}
#divclass(pp1){
***BleachBypassShader
銀残し([[Wikipedia>>http://ja.wikipedia.org/wiki/%E9%8A%80%E6%AE%8B%E3%81%97]])。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BleachBypassShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***BrightnessContrastShader
明るさとコントラスト。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BrightnessContrastShader.png)
}
#divclass(pp1){
***ColorCorrectionShader
色調補正。色をRGBそれぞれについて何乗して何倍するか指定。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/ColorCorrectionShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***ColorifyShader
単色塗り。指定した色についてのグレースケール。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/ColorifyShader.png)
}
#divclass(pp1){
***DotScreenShader
ドットスクリーン。ハーフトーン。網点([[Wikipedia>>http://ja.wikipedia.org/wiki/%E7%B6%B2%E7%82%B9]])。新聞の写真に使われるような画像。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/DotScreenShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***EdgeShader
エッジ抽出。背景色黒。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/EdgeShader.png)
}
#divclass(pp1){
***EdgeShader2
エッジ抽出。背景色透明。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/EdgeShader2.png)
}
#divclass(ppc){}
#divclass(pp0){
***FilmShader
ノイズと走査線。time引数によってノイズの種を与える。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FilmShader.gif)
}
#divclass(pp1){
***FocusShader
フォーカス。画面中央から外側へ離れるに従ってゆがんでボケる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FocusShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***FXAAShader
アンチエイリアス。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/FXAAShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HorizontalBlurShader
水平方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HorizontalBlurShader.png)
}
#divclass(pp1){
***VerticalBlurShader
垂直方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VerticalBlurShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HorizontalTiltShiftShader
ある画面水平線から上下に離れるほど水平方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HorizontalTiltShiftShader.png)
}
#divclass(pp1){
***VerticalTiltShiftShader
ある画面水平線から上下に離れるほど垂直方向にブレる。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VerticalTiltShiftShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***HueSaturationShader
色相と彩度の調整。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/HueSaturationShader.png)
}
#divclass(pp1){
***KaleidoShader
万華鏡。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/KaleidoShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***LuminosityShader
明度の抽出。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/LuminosityShader.png)
}
#divclass(pp1){
***MirrorShader
鏡。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/MirrorShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***RGBShiftShader
RGBのブレ。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/RGBShiftShader.png)
}
#divclass(pp1){
***SepiaShader
セピアカラー。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/SepiaShader.png)
}
#divclass(ppc){}
#divclass(pp0){
***SSAOShader
光の当たりにくそうなところを暗くする。環境遮蔽。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/SSAOShader.png)
}
#divclass(pp1){
***VignetteShader
画面周辺部が暗くなる。ヴィネット。口径食([[Wikipedia>>http://ja.wikipedia.org/wiki/%E5%8F%A3%E5%BE%84%E9%A3%9F]])。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/VignetteShader.png)
}
#divclass(ppc){}
----
#divclass(pp0){
***BokehShader
ボケ。下例だと赤箱の角の距離でピントが合っていて、離れるに従いボケている。
#ref(http://cdn56.atwikiimg.com/threejs/pub/img/BokehShader.png)
}
#divclass(ppc){}
//.
