前言

  最近想要制作动态模糊的效果，又想起之前研究过的postprocesisng来制作模糊，网上搜索了一下如何通过Three.js制作动态模糊，没想到居然是这个案例里面有动态模糊。

  postprocessing难学的地方在于没有官方文档的说明，连引用的脚本也没有使用说明，所以只能先从简单的入手，慢慢去看懂postprocessing的运行原理。

postprocesing的作用

  正如名字所说的，这个是后期处理，可以给画面添加后期合成软件的滤镜效果。
  当然上面的说法易于理解但也不完全准确，three.js的后期处理更多的是计算机图形学意义上的后期处理，因此辉光、AO生成都属于这里范畴，不只是单纯的滤镜。
  如此说来，postprocessing应该有很多的效果，官方确实给了不少效果，而且有些使用了postprocessing的效果还不在postprocessing的分类当中。
  找出他们去学习就得费不少的周折。

postprocessing的运用

  先从最简单的postprocessing效果入手，去理解它是怎么运作的。
官方案例

  前面的流程就是Three.js的三件套，生成物体等等的，我就不加赘述了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
// postprocessing

/******************************/
/*********合成基本要素*********/
/****************************/

//创建合成容器EffectComposer 
//用Three.js去理解就是在合成中起到renderer（渲染）和scene（容器）的作用
//将渲染器添加进去获取渲染信息
composer = new THREE.EffectComposer( renderer );

//添加通道 RenderPass 获取渲染的场景和摄像机
//用Three.js去理解就是生成的模型需要添加到容易当中才能起作用
composer.addPass( new THREE.RenderPass( scene, camera ) );

/******************************/
/***********添加通道***********/
/****************************/


//DotScreenShader使屏幕产生点状噪点
var effect = new THREE.ShaderPass( THREE.DotScreenShader );//添加材质通道层
effect.uniforms[ 'scale' ].value = 4;//设置噪点的到小
composer.addPass( effect );

//RGBShiftShader偏移颜色是屏幕产生色差效果
var effect = new THREE.ShaderPass( THREE.RGBShiftShader );
effect.uniforms[ 'amount' ].value = 0.0015;
effect.renderToScreen = true;//最后一个效果一定添加这个才可以在屏幕看到处理效果
composer.addPass( effect );

/******************************/
/*******改变窗口大小适配*******/
/****************************/

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize() {
    //resize的基本操作
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );

    //加入合成器的resize
    composer.setSize( window.innerWidth, window.innerHeight );
}

/******************************/
/***********刷新函数***********/
/****************************/
function animate() {

    //刷新函数的基本操作
    requestAnimationFrame( animate );

    //动态效果
    object.rotation.x += 0.005;
    object.rotation.y += 0.01;
    

    //这里可以不加入renderer.render进行渲染，直接渲染composer即可 
    composer.render();

    //如果需要加入renderer.rende
    // renderer.render( scene, camera );
    //务必将这一行语句放在composer的上面
    //否则就会覆盖掉composer渲染出来的画面

}