threejs -内置着色器包的使用详解

threejs提供了丰富的着色器包，搭配后处理通道使用，可以实现非常强大的效果。（关于后处理通道的使用看这篇文章）
效果示例：
1.AfterimageShader.js实现效果

2.DotScreenShader.js实现效果
3.

常用着色器包：

1. CopyShader.js：
   该着色器会将效果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出。
   引用：js/shaders/CopyShader.js
   用法示例：

				var outputPass=new THREE.ShaderPass(THREE.CopyShader);
				composer.addPass(outputPass);

2. DotScreenShader.js：
   该着色器会将原始图像输出为灰度点集。
   引用：js/shaders/DotScreenShader.js
   配置项：
   scale：点的大小
   center：点的偏移量
   angle：点的对其方式
   用法示例：

				var dotScreenShader=new THREE.ShaderPass(THREE.DotScreenShader);
				dotScreenShader.uniforms['scale'].value=4;
				composer.addPass(dotScreenShader);

3. RGBShiftShader.js：
   该着色器会将图像的红绿蓝三种颜色分离。
   引用：js/shaders/RGBShiftShader.js
   配置项：
   amount：颜色深浅度
   用法示例：

				var RGBshiftShader=new THREE.ShaderPass(THREE.RGBShiftShader);
				RGBshiftShader.uniforms['amount'].value=0.0015;
				composer.addPass(RGBshiftShader);

4. DigitalGlitch.js：
   该着色器会使屏幕显示电子脉冲，搭配对应通道使用（js/postprocessing/GlitchPass.js）。
   引用：js/shaders/DigitalGlitch.js

5. AfterimageShader.js：
   该着色器主要使运动的模型产生残影，搭配对应通道使用（js/postprocessing/AfterimagePass.js）。
   引用：js/shaders/AfterimageShader.js
   配置项：
   damp：阻尼系数，即产生残影范围大小
   用法示例：

				afterimage=new THREE.AfterimagePass();
				composer.addPass(afterimage);
				afterimage.uniforms[ "damp" ].value=0.97;

6. FXAAShader.js：
   该着色器主要用于抗锯齿。
   引用：js/shaders/FXAAShader.js
   配置项：
   resolution：分辨率，根据窗口设置大小
   用法示例：

				//抗锯齿着色器
				effectFXAA=new THREE.ShaderPass(THREE.FXAAShader);
				effectFXAA.uniforms['resolution'].value.set(1/window.innerWidth,1/window.innerHeight);
				composer.addPass(effectFXAA);

7. LuminosityHighPassShader.js：
   该着色器主要用于物体亮度通道实现，搭配对应通道使用（js/postprocessing/UnrealBloomPass.js）
   引用：js/shaders/LuminosityHighPassShader.js

8. BokehShader.js：
   该着色器主要用于背景虚化，类似相机变焦，搭配对应通道使用（js/postprocessing/BokehPass.js）
   引用：js/shaders/BokehShader.js

9. HalftoneShader.js：
   该着色器能在场景中添加rgb三色元素，搭配对应通道使用（js/postprocessing/HalftonePass.js）
   引用：js/shaders/HalftoneShader.js

10. PixelShader.js：
    该着色器能给场景中的物体添加马赛克效果
    引用：js/shaders/PixelShader.js
    配置项：
    resolution，分辨率
    pixelSize，像素大小
    用法示例：

				pixelShader=new THREE.ShaderPass(THREE.PixelShader);
				composer.addPass(pixelShader);
				var pixelRatio=renderer.getPixelRatio();
				pixelShader.uniforms['resolution'].value=new THREE.Vector2(window.innerWidth*pixelRatio,window.innerHeight*pixelRatio);
				pixelShader.uniforms['pixelSize'].value=16;