一、设置后期处理

设置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	这是一个简单着色器，器结果是中央区域渲染得比较锐利，但周围比较模糊

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

定制着色器和渲染后期处理
1.设置后期处理设置Three.js库为后期处理做准备,我们需要通过以下步骤对当前的配置进行修改: 1)创建一个EffectComposer(效果组合器)对象,然后在该对象上添加后期处理通道. 2) ...
three.js使用Shadertoy的着色器
three.js使用Shadertoy的着色器 shadertor上有许多非常有趣的着色器,我们可以借鉴并用在自己的three的项目上. 1 在shadertoy上新建一个着色器,默认有一个主函数,如 ...
OpenGL超级宝典学习笔记：着色器存储区块、原子内存操作、内存屏障
前言本篇在讲什么本篇为蓝宝书学习笔记着色器存储区块原子内存操作内存屏障本篇适合什么适合初学Open的小白本篇需要什么对 C++语法有简单认知对 OpenGL有简单认知最好是有 O ...
dx12 龙书第十二章学习笔记 -- 几何着色器
如果不启用曲面细分(tessellation)这一环节,那么几何着色器(geometry shader)这个可选阶段便会位于顶点着色器与像素着色器之间.顶点着色器以顶点作为输入数据,而几何着色器的输入 ...
LearnOpenGL学习笔记——几何着色器
几何着色器在顶点和片段着色器之间有一个可选的几何着色器(Geometry Shader),几何着色器的输入是一个图元(如点或三角形)的一组顶点.几何着色器可以在顶点发送到下一着色器阶段之前对它们随意 ...
【 Threejs 】- Shader 着色器实例渲染教程
着色器在threejs中是一个难点,话不多说,先来看看着色器是什么? 如果您已经有使用计算机绘图的经验,您就会知道在这个过程中您先画一个圆,然后画一个矩形.一条线.一些三角形,直到您组成您想要的图像. ...
webgl着色器初学习-顶点着色器和片元着色器
文章目录 webgl工作步骤顶点着色器片元着色器案例 webgl工作步骤每一个像素点都将执行这两个着色器我理解为这两个着色器,顶点着色器决定渲染位置 ,片元着色器决定颜色顶点着色器编写一 ...
webgl入门(2)-初识webgl和着色器
前言原书中第2章非常长,如果整理成一个文档的话,得看好多天.为了浏览方便,我将其拆分成若干小节,方便大家学习. webgl采用HTML5中引入的canvas元素来定义页面的绘图区域.如果没有WegG ...
Web3D编程入门总结——WebGL与Three.js基础介绍
1 /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成"webgl与three.js基础介绍"."面向对象的基础3D场景框架编写".&quo ...

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