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

threejs提供了丰富的着色器包,搭配后处理通道使用,可以实现非常强大的效果。(关于后处理通道的使用看这篇文章)
效果示例:
1.AfterimageShader.js实现效果
threejs -内置着色器包的使用详解_第1张图片
2.DotScreenShader.js实现效果threejs -内置着色器包的使用详解_第2张图片
3.threejs -内置着色器包的使用详解_第3张图片

常用着色器包:

  1. CopyShader.js:
    该着色器会将效果输出,普通的通道一般都是不能输出的,要靠CopyShader进行输出。
    引用:js/shaders/CopyShader.js
    用法示例:
				var outputPass=new THREE.ShaderPass(THREE.CopyShader);
				composer.addPass(outputPass);
  1. DotScreenShader.js:
    该着色器会将原始图像输出为灰度点集。
    引用:js/shaders/DotScreenShader.js
    配置项:
    scale:点的大小
    center:点的偏移量
    angle:点的对其方式
    用法示例:
				var dotScreenShader=new THREE.ShaderPass(THREE.DotScreenShader);
				dotScreenShader.uniforms['scale'].value=4;
				composer.addPass(dotScreenShader);
  1. RGBShiftShader.js:
    该着色器会将图像的红绿蓝三种颜色分离。
    引用:js/shaders/RGBShiftShader.js
    配置项:
    amount:颜色深浅度
    用法示例:
				var RGBshiftShader=new THREE.ShaderPass(THREE.RGBShiftShader);
				RGBshiftShader.uniforms['amount'].value=0.0015;
				composer.addPass(RGBshiftShader);
  1. DigitalGlitch.js:
    该着色器会使屏幕显示电子脉冲,搭配对应通道使用(js/postprocessing/GlitchPass.js)。
    引用:js/shaders/DigitalGlitch.js

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

				afterimage=new THREE.AfterimagePass();
				composer.addPass(afterimage);
				afterimage.uniforms[ "damp" ].value=0.97;
  1. 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);
  1. LuminosityHighPassShader.js:
    该着色器主要用于物体亮度通道实现,搭配对应通道使用(js/postprocessing/UnrealBloomPass.js)
    引用:js/shaders/LuminosityHighPassShader.js

  2. BokehShader.js:
    该着色器主要用于背景虚化,类似相机变焦,搭配对应通道使用(js/postprocessing/BokehPass.js)
    引用:js/shaders/BokehShader.js

  3. HalftoneShader.js:
    该着色器能在场景中添加rgb三色元素,搭配对应通道使用(js/postprocessing/HalftonePass.js)
    引用:js/shaders/HalftoneShader.js

  4. 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;

你可能感兴趣的:(shaders)