webgl之Three.js学习 day10定制着色器和渲染后期处理

一、设置后期处理

设置Three.js为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：

1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。

2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。

3）在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。

1.创建EffectComposer对象

首先我们要创建一个EffectComposer对象，你可以在这个对象的构造函数里传入WebGLRenderer，如下所示：

var composer = new THREE.EffectComposer(WebGLRenderer);

• 为后期处理配置EffectComposer对象 

每个通道会按照其加入EffectComposer的顺序执行。第一个要加入的通道是RenderPass。下面这个通道会渲染场景，但不会将渲染结果输出到屏幕上：

var renderPass = new THREE.RenderPass(scene,camera);
composer.addPass(renderPass);

 接下来我们要添加一个可以将结果输出到屏幕的通道。我们这里所用的是FilmPass，要添加FilmPass，我们要先创建该对象，然后添加到效果组合器中。

var renderPass = new THREE.RenderPass(scene,camera);
var effectFilm = new THREE.FilmPass(0.8,0.325,256,false);
effectFilm.renderToScreen = true;

var composer = new THREE.EffectComposer(webGLRenderer);
composer.addPass(renderPass);
composer.addPass(effectFilm);

• 修改渲染循环

现在我们需要稍稍修改一下渲染循环，用效果组合器来取代WebGLRenderer：

var clock = new THREE.Clock();
function render(){
    stats.update();
    var delta = clock.getDelta();
    orbitControls.update(delta);
    sphere.rotation.y += 0.002;
    requestAnimationFrame(render);
    composer.render(delta);
}

 

二、后期处理通道

Three.js库提供了几个后期处理通道，你可以直接将它们添加到EffectComposter对象中。下表是这些通道的概览：

通道	描述
BloomPass	该通道会使得明亮区域渗入较暗的区域。模拟相机照到过多亮光的情形
DotScreenPass	将一层黑点贴到代表原始图片的屏幕上
FilmPass	通过扫描线和失真模拟电视屏幕
MaskPass	在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
RenderPass	在指定的场景和相机的基础上渲染出一个新的场景
SavePass	执行该通道时，它会将当前渲染步骤的结果复制一份，方便后面使用。
ShaderPass	使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
TexturePass	该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectComposter对象中将该纹理作为输入参数

1.简单后期处理通道

对于简单后期处理通道，我们可以先看看FilmPass、BloomPass和DotScreenPass。我们来看如下示例：

这这张图中，左上角是FilmPass，左下角是BloomPass，右上角是DotScreenPass，右下角是原始渲染的结果。在这个示例中，我们也使用了ShaderPass和TexturePass来重用原始渲染结果的输出，并将该输出作为其他三个场景的输入。所以在看各个通道之前，我们先来看看这两个通道：

var renderPass = new THREE.RenderPass(scene,camera);
var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
effectCopy.renderToScreen = true;

var composer = new THREE.EffectComposer(webGLRenderer);
composter.addPass(renderPass);
composter.addPass(effectCopy);

var renderScene = new THREE.TexturePass(composer.renderTarget2);

在这段代码中，我们设立了一个EffectComposter对象，该对象输出默认场景（右下角）。这个组合器有两个通道：RenderPass（用来渲染场景）和ShaderPass。如果用CopyShader来设置ShaderPass，那么它渲染的输出结果就不会有进一步的后期处理；如果将renderToScreen属性设为true，那么渲染结果将会输出到屏幕。

• 用FilmPass创建类似电视的效果

我们参考下面的代码片段：

var effectFilm = new THREE.FilmPass(0.8,0.325,256,false);
effectFilm.renderToScreen = true;

var composer4 = new THREE.EffectComposer(WebGLRenderer);
composer4.addPass(renderScene);
composer4.addPass(effectFilm);

 要使用TexturePass唯一要采取的步骤是将它作为效果组合器的第一个通道。接下来我们可以添加FilmPass，应用效果。FilmPass本身接受如下四个参数：

属性	描述
noiseIntensity	通过该属性你可以控制屏幕的颗粒程度
scanlinesIntensity	FilmPass会在屏幕上添加一些扫描线。通过该属性，你可以指定扫描线的显著程度
scanlinesCount	该属性可以控制显示出来的扫描线数量
grayscale	如果设为true，输出结果将会转换成灰度图

• 用BloomPass在场景中添加泛光效果

当你应用泛光效果时，场景中的明亮区域将会变得更加显著，而且会渗入到较暗的区域。创建BloomPass的代码如下所示：

var bloomPass = new THREE.BloomPass(3,25,5,256);
var composer3 = new THREE.EffectComposer(WebGLRenderer);
composer3.addPass(renderScene);
composer3.addpass(bloomPass);
composer3.addPass(effectCopy);

这里我们多添加了一个通道——effectCopy。这一步我们在普通输出中也曾用过，它不会添加任何 特殊效果，只是将最后一个通道的结果复制到屏幕上。之所以要添加这一步是因为BloomPass不能直接将渲染结果输出到屏幕上。下表列出的是BloomPass的所有可以设置的属性：

属性	描述
Strength	该属性定义的是泛光效果的强度。其值越高，则明亮的区域月明亮，而且渗入较暗区域的也就越多
kernelSize	该属性控制的是泛光效果的偏移量
sigma	通过sigma属性，你可以控制泛光效果的锐利程度。其值越高，泛光越模糊
Resolution	该属性定义的是泛光效果的解析图。如果该值太低，那么结果的方块化会比较严重

• 使用DotScreenPass将场景输出成点集

DotScreenPass的使用跟我们刚刚看到的BloomPass非常相似。参考以下代码：

var dotScreenPass = new THREE.DotScreenPass();
var composer1 = new THREE.EffectComposer(WebGLRenderer);
composer1.addPass(renderScene);
composer1.addPass(dotScreenPass);
composer1.addPass(effectCopy);

 在DotScreenPass中可以设置如下的属性：

属性	描述
center	通过center属性，你可以微调点的偏移量
angle	这些点是按照某种方式对齐的。通过angle属性，你可以更改对齐方式
scale	该属性设置所用点的大小。scale越小，则点越大

 2.使用ShaderPass定制效果

通过ShaderPass，我们可以传递一个自定义的着色器，将大量额外的效果应用到场景中。我们先来看一看简单的着色器：

名称	描述
MirrorShader	该着色器可以为部分屏幕创建镜面效果
HueStaturationShader	该着色器可以改变颜色的色调和饱和度
VignetteShader	该着色器可以添加晕映效果。该效果可以在图片中央的周围显示黑色的边框
ColorCorrectionShader	通过这个着色器，你可以调整颜色的分布
RGBShiftShader	该着色器可以将构成颜色的红绿蓝分开
BrightnessContrasShader	该着色器可以更改图片的亮度和对比度
ColorifyShader	该着色器可以在屏幕上蒙上一层颜色
SepiaShader	该着色器可以在屏幕上创建出类似乌贼墨的效果

接下来，我们将会看一些提供模糊效果的着色器：

名称	描述
HorizontalBlurShader和VerticalTiltShiftShader	这两个着色器在整个场景中应用模糊效果
HorizontalTiltShader和VerticalTiltShiftShader	这两个着色器可以创建出移轴效果。在移轴效果中只有部分图片显示得比较锐利，从而创建出一个看上去像是微缩景观的场景
TriangleBlurShader	该着色器使用基于三角形的方法，在场景中应用模糊效果

最后我们来看一下提供高级效果的着色器：

名称	描述
BleachBypassShader	该着色器可以创建一种漂白效果。在该效果下，图片上像是镀了一层膜
EdgeShader	该着色器可以深测图片中锐利的边界，并突出显示这些边界
FXAAShader	该着色器可以在后期处理阶段应用抗锯齿效果。如果在渲染时抗锯齿影响效率，那么就可以使用该着色器
FocusShader	这是一个简单着色器，器结果是中央区域渲染得比较锐利，但周围比较模糊