threejs 高级渲染组合器—EffectComposer
1.设置后期处理
设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：
1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。
3）在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。
要使用后期处理，需要引入一些javaSscript文件。这些文件可以在Three.js发布包里找到。路径是examples/js/postprocessing和example/js/shaders。至少包含下面的文件：
<script type="text/javascript" src="../libs/postprocessing/ShaderPass.js"></script><script type="text/javascript" src="../libs/shaders/CopyShader.js"></script><script type="text/javascript" src="../libs/postprocessing/EffectComposer.js"></script><script type="text/javascript" src="../libs/postprocessing/MaskPass.js"></script><script type="text/javascript" src="../libs/postprocessing/FilmPass.js"></script><script type="text/javascript" src="../libs/shaders/FilmShader.js"></script><script type="text/javascript" src="../libs/postprocessing/RenderPass.js"></script>
首先我们创建一个EffectComposer对象，你可以在这个对象的构造函数里出入WebGL-Renderer，如下所示：
var composer = new THREE.EffectComposer(webGLRenderer);
接下来我们要在这个组合器中添加各种通道。第一个要加入的通道是RenderPass。这个通道会渲染场景，但不会讲渲染结果输出到屏幕上。
var renderPass = new THREE.RenderPass(scene, camera);
...
var composer = new THREE.EffectComposer(webGLRenderer);composer.addPass(renderPass);
接下来我们要添加一个可以将结果输出到屏幕上的通道。这里使用FilmPass，我们想创建该对象，然后添加到效果组合器中。代码如下：
var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false);
effectFilm.renderToScreen = true;
var composer = new THREE.EffectComposer(webGLRenderer);
composer.addPass(effectFilm);
正如你所看到的，我们创建了一个FilmPass对象，并将它的renderToScreen属性设置为true。最后，还需要修渲染循环：
function render(){stats.update();var delta = clock.getDelta();orbitControl.update(delta);sphere.rotation.y += 0.002;requestAnimationFrame(render);composer.render(delta);}
这个代码里我们移出了“webGLRenderer.render(scene, camera)；”，用“composer.render(delta)”代替。这将调用EffectComposer的render()函数。由于我们已经将FilmPass的renderToScreen属性设置为true，所以FilmPass的结果将会输出到屏幕上。
2.后期处理通道
Three.js库提供了几个后期处理通道，你可以直接将其添加到EffectComposer对象。下表是这些通道的概览。
通道/描述：
BloomPass/该通道会使得明亮区域渗入较暗的区域。模拟相机找到过多亮点的情形
DotScreenPass/将一层黑点贴到代表原始图片的屏幕上
FilmPass/通过扫描线和失真模拟电视屏幕
MaskPass/在当前图片上贴一层掩膜，后续通道只会影响被贴的区域
RenderPass/该通道在指定的场景和相机的基础上渲染出一个新场景
ShaderPass/使用该通道你可以传入一个自定义的着色器，用来生成高级的、自定义的后期处理通道
TexturePass/该通道可以将效果组合器的当前状态保存为一个纹理，然后可以在其他EffectComposer对象中将该纹理作为输入参数
下面的例子使用了以上通道的中的BloomPass、DotScreenPass、FilmPass、RenderPass、ShaderPass、TexturePass。首先看下运行效果：
上图标左上角运用BloomPass、右上角运用FilmPass、左下角运用DotScreenPass、右下角运用原始渲染结果。渲染处理代码如下：
var renderPass = new THREE.RenderPass(scene, camera); //保存渲染结果，但不会输出到屏幕var effectCopy = new THREE.ShaderPass(THREE.CopyShader); //传入了CopyShader着色器，用于拷贝渲染结果effectCopy.renderToScreen = true; //设置输出到屏幕上var bloomPass = new THREE.BloomPass(3, 25, 5.0, 256); //BloomPass通道效果var effectFilm = new THREE.FilmPass(0.8, 0.325, 256, false); //FilmPass通道效果effectFilm.renderToScreen = true; //设置输出到屏幕上var dotScreenPass = new THREE.DotScreenPass(); // DotScrrenPass通道效果//渲染目标var composer = new THREE.EffectComposer(webGLRenderer);composer.addPass(renderPass);composer.addPass(effectCopy);var renderScene = new THREE.TexturePass(composer.renderTarget2);//左下角var composer1 = new THREE.EffectComposer(webGLRenderer);composer1.addPass(renderScene);composer1.addPass(dotScreenPass);composer1.addPass(effectCopy);//右下角var composer2 = new THREE.EffectComposer(webGLRenderer);composer2.addPass(renderScene);composer2.addPass(effectCopy);//左上角var composer3 = new THREE.EffectComposer(webGLRenderer);composer3.addPass(renderScene);composer3.addPass(bloomPass);composer3.addPass(effectCopy);//右上角var composer4 = new THREE.EffectComposer(webGLRenderer);composer4.addPass(renderScene);composer4.addPass(effectFilm);
代码原理比较简单，composer的作用是渲染最原始的效果，传入了renderPass和ShaderPass，renderPass运来创建一个新场景，ShaderPass用来输出结果到屏幕。接下来创建了一个类型为TexturePass的通道对象renderScene。可以将当前状态保存一份作为纹理。供后面的几个compoer使用。
composer1首先使用renderScene创建新场景，然后添加dotScreenPass通道，最后使用effectCopy输出渲染。composer2、composer3、composer4相似。设置了处理通道后，在每次循环渲染时还得分别调用每个composer的render函数重新渲染：
function render() {stats.update();//sphere.rotation.y=step+=0.01;var delta = clock.getDelta();orbitControls.update(delta);sphere.rotation.y += 0.002;// render using requestAnimationFramerequestAnimationFrame(render);webGLRenderer.autoClear = false;webGLRenderer.clear();webGLRenderer.setViewport(0, 0, 2 * halfWidth, 2 * halfHeight);composer.render(delta);webGLRenderer.setViewport(0, 0, halfWidth, halfHeight);composer1.render(delta);webGLRenderer.setViewport(halfWidth, 0, halfWidth, halfHeight);composer2.render(delta);webGLRenderer.setViewport(0, halfHeight, halfWidth, halfHeight);composer3.render(delta);webGLRenderer.setViewport(halfWidth, halfHeight, halfWidth, halfHeight);composer4.render(delta);}
3.各种通道属性
FilmPass用来创建类似电视的效果。通道属性的属性可通过构造函数传入，也可以直接修改uiniforms上对应的属性。属性说明如下：
属性/描述
noiseIntensity/通过该属性可以控制屏幕的颗粒程度
scanlineIntensity/FilmPass会在屏幕上添加一些扫描线。通过该属性，可以指定扫描线的显著程度
scanlineCount/该属性可以控制显示出来的扫描线数量
grayscale/如果设置为true，输出结果将会转换为灰度图
BoomPass用来在场景中添加泛光效果。属性可通过构造函数传入，也可直接修改uniforms属性。属性说明如下：
属性/描述
Strength/该属性定义的是泛光效果强度。值越高，明亮区域越明亮。而且渗入较暗区域的也就越多
kernelSize/该属性控制的是泛光效果的偏移量
sigma/可以控制泛光的锐利程度。值越高，泛光越模糊
resolution/泛光效果的解析图。值太低，那么结果的方块会比较严重
DotSreenPass用来将场景输出成点集。属性如下：
center/通过center属性，可以微调点的偏移量
angle/通过angle，可以更改对齐方式
scale/该属性设置所有点的大小。scale越小，则点越大
4.使用掩膜的高级效果组合器
Three.js库具有在特定区域应用通道的能力。我们采取如下步骤实现一个特定区域效果。例如下图的地图和火星。我们想在火星上应用一个彩色效果、在地球上应用褐色效果。我们采取如下步骤：
1）创建一个座位背景图的场景。
2）创建一个场景，里边有一个看上去像地球的球体。
3）创建一个场景，里边有一个看上去像火星的球体。
4）创建一个EffectComposer对象，将这三个场景渲染到一个图片里。
5）在渲染成火星的球体上应用一个彩色效果。
6）在渲染成地球的球体上应用褐色效果。
下面是初始化的代码：
<!DOCTYPE html>
<html lang="en"><head><title>three.js webgl - postprocessing - unreal bloom</title><meta charset="utf-8"><meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"><style>body {color: #fff;font-family:Monospace;font-size:13px;text-align:center;background-color: #fff;margin: 0px;overflow: hidden;}#info {position: absolute;top: 0px;width: 100%;padding: 5px;}#info p {max-width: 600px;margin-left: auto;margin-right: auto;padding: 0 2em;}a {color: #2983ff;}</style></head><body><div id="container"></div><!-- <div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Bloom pass by <a href="http://eduperiment.com" target="_blank" rel="noopener">Prashant Sharma</a> and <a href="https://clara.io" target="_blank" rel="noopener">Ben Houston</a><p>This Bloom Pass is inspired by the bloom pass of the Unreal Engine. It creates a mip map chain of bloom textures and blur themwith different radii. Because of the weigted combination of mips, and since larger blurs are done on higher mips, this bloomis better in quality and performance.</p>Model: <a href="https://blog.sketchfab.com/art-spotlight-primary-ion-drive/" target="_blank" rel="noopener">Primary Ion Drive</a> by<a href="http://mjmurdock.com/" target="_blank" rel="noopener">Mike Murdock</a>, CC Attribution.</div> --><script src="lib/three.js"></script><script src="lib/stats.min.js"></script><script src="lib/dat.gui.min.js"></script><script src="lib/OrbitControls.js"></script><script src="lib/GLTFLoader.js"></script><script src="lib/OBJLoader.js"></script><script src="lib/EffectComposer.js"></script><script src="lib/RenderPass.js"></script><script src="lib/ShaderPass.js"></script><script src="lib/CopyShader.js"></script><script src="lib/LuminosityHighPassShader.js"></script><script src="lib/UnrealBloomPass.js"></script><script src="lib/FilmPass.js"></script><script src="lib/FilmShader.js"></script><script src="lib/DotScreenPass.js"></script><script src="lib/TexturePass.js"></script><script src="lib/ShaderPass.js"></script><script src="lib/MaskPass.js"></script><script src="lib/SepiaShader.js"></script><script src="lib/ColorifyShader.js"></script><script src="lib/BleachBypassShader.js"></script><script>var stats = new Stats();document.body.appendChild(stats.dom);var sceneEarth = new THREE.Scene();var sceneMars = new THREE.Scene();var sceneBG = new THREE.Scene();var camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 0.1, 1000);var cameraBG = new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, -10000, 10000);cameraBG.position.z = 50;var webGLRenderer = new THREE.WebGLRenderer({alpha: true,antialias: true });webGLRenderer.setClearColor(new THREE.Color(0x000, 1.0));webGLRenderer.setSize(window.innerWidth, window.innerHeight);webGLRenderer.shadowMapEnabled = true;var sphere = new THREE.Mesh(new THREE.SphereGeometry(10, 40, 40),new THREE.MeshBasicMaterial( { map:THREE.ImageUtils.loadTexture("./textures/diqiu.jpg")}) );sphere.position.x = -10;var sphere2 = new THREE.Mesh(new THREE.SphereGeometry(5, 40, 40),new THREE.MeshBasicMaterial( { map:THREE.ImageUtils.loadTexture("./textures/yueqiu.jpg")} ));sphere2.position.x = 10;sceneEarth.add(sphere);sceneMars.add(sphere2);camera.position.set(-10, 15, 25);camera.lookAt(new THREE.Vector3(0, 0, 0));var orbitControls = new THREE.OrbitControls(camera);orbitControls.autoRotate = false;var clock = new THREE.Clock();var ambi = new THREE.AmbientLight(0x181818);var ambi2 = new THREE.AmbientLight(0x181818);sceneEarth.add(ambi);sceneMars.add(ambi2);var spotLight = new THREE.DirectionalLight(0xffffff);spotLight.position.set(550, 100, 550);spotLight.intensity = 0.6;var spotLight2 = new THREE.DirectionalLight(0xffffff);spotLight2.position.set(550, 100, 550);spotLight2.intensity = 0.6;sceneEarth.add(spotLight);sceneMars.add(spotLight2);var materialColor = new THREE.MeshBasicMaterial({map: THREE.ImageUtils.loadTexture("./textures/sky.jpg"), depthWrite: false}); var bgPlane = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), materialColor);bgPlane.position.z = -100;bgPlane.scale.set(window.innerWidth * 2, window.innerHeight * 2, 1);sceneBG.add(bgPlane);// add the output of the renderer to the html elementdocument.body.appendChild(webGLRenderer.domElement);var bgPass = new THREE.RenderPass(sceneBG, cameraBG);var renderPass = new THREE.RenderPass(sceneEarth, camera);renderPass.clear = false;var renderPass2 = new THREE.RenderPass(sceneMars, camera);renderPass2.clear = false;var effectCopy = new THREE.ShaderPass(THREE.CopyShader);effectCopy.renderToScreen = true;var clearMash = new THREE.ClearMaskPass();var earthMask = new THREE.MaskPass(sceneEarth, camera);var marsMask = new THREE.MaskPass(sceneMars, camera);//地球的褐色效果var effectSepia = new THREE.ShaderPass(THREE.SepiaShader);effectSepia.uniforms["amount"].value = 0.8;//月球的彩色效果var effectColorify = new THREE.ShaderPass(THREE.ColorifyShader);effectColorify.uniforms["color"].value.setRGB(0.5, 0.5, 1.0);console.log(effectColorify);var Bleach = new THREE.ShaderPass(THREE.BleachBypassShader); // 漂白效果 覆盖银一样Bleach.uniforms['opacity'].value = 0.6;var composer = new THREE.EffectComposer(webGLRenderer);composer.renderTarget1.stencilBuffer = true;composer.renderTarget2.stencilBuffer = true;composer.addPass(bgPass); // 添加背景渲染新场景通道composer.addPass(renderPass); // 添加地球渲染的新场景通道composer.addPass(renderPass2); // 添加月球渲染的新场景通道composer.addPass(marsMask); // 添加月球掩膜通道，以后所有的通道效果都只对月球有效，直到clearMask通道composer.addPass(effectColorify); // 添加颜色着色器通道composer.addPass(clearMash); //清理掩膜通道 composer.addPass(earthMask); //添加地图掩膜通道，之后的所有通道效果都只对月球有效，直到clearMash通道//composer.addPass(effectSepia); // 添加一种自定义着色器通道composer.addPass(Bleach);composer.addPass(clearMash); // 清理掩膜通道composer.addPass(effectCopy);render();function render() {webGLRenderer.autoClear = false;stats.update();var delta = clock.getDelta();orbitControls.update(delta);sphere.rotation.y += 0.002;sphere2.rotation.y += 0.002;requestAnimationFrame(render);composer.render(delta);}</script></body></html>效果截图：
5.用ShaderPass定制效果
通过ShaderPass，我们可以传递一个自定义的着色器，将大量额外的效果应用到场景中。Three.js扩展的着色器主要分为简单着色器、模糊着色器、高级效果着色器。
简单着色器列表：
MirrorShader/该着色器可以为部分屏幕创建镜面效果
HueStaturationShader/该着色器可以改变颜色的色调和饱和度
VignetteShader/该着色器可以添加晕映效果。该效果可以在图片中央的周围显示黑色的边框
ColorCorrectionShader/通过这个着色器，你可以调整颜色的分布
RGBShiftSader/该着色器可以将构成颜色的红、绿、蓝分开
BrightnessContrasShader/该着色器可以更改图片的亮度和对比度
ColorifyShader/可以在屏幕上蒙上一层颜色
SepiaShader/可以在屏幕上创建出类似乌贼墨的效果
模糊效果着色器：
HorizontalBlurShader和VerticalBlurShader/这两个着色器在场景中应用模糊效果
HorizontalTiltShiftShader和VerticalTiltShiftShader/这两个着色器可以创建出移轴效果。在移轴效果中只有部分图片显示得比较锐利，从而创建出一个看上去像是微缩景观的场景
TriangleBlurShader/该着色器使用基于三角形的方法，咱场景中应用模糊效果 高级效果的着色器： BleachBypassShader/该着色器可以创建一种漂白效果。在该效果下，图片上像素是镀了一层银
EdgeShader/该着色器可以探测图片中的锐利边界，并突出显示这些边界
FXAAShader/该着色器可以在后期处理阶段应用锯齿效果。如果在渲染抗锯齿影响效率，那么久可以使用该着色器
FocusShader/这是一个简单的着色器，其结果是中央区域渲染得比较锐利，但周围比较模糊
6.定制自定义着色器
为Three.js库创建自定义的着色器，需要实现两个组件：vertexShader和fragmentShader。组件vertexShader可以用来调整每个顶点的位置，组件fragmentShader可以从来决定每个像素的颜色。对于后期处理着色器来说，我们只要实现fragmentShader即可，然后使用Three.js提供的额、默认的vertexShader。
我们以定制一个灰度着色器为例。首先要创建一个js文件，存放着色器源代码，这里我们命名一个custom-shader.js文件。内容如下：
THREE.CustomGrayScaleShader = {uniforms: {"tDiffuse": {type: "t", value: null},"rPower": {type: "f", value: 0.2126},"gPower": {type: "f", value: 0.7152},"bPower": {type: "f", value: 0.0722}},vertexShader: ["varying vec2 vUv;","void main(){","vUv = uv;","gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);","}"].join("\n"),fragmentShader: ["uniform float rPower;","uniform float gPower;","uniform float bPower;","uniform sampler2D tDiffuse;","varying vec2 vUv;","void main(){","vec4 texel = texture2D(tDiffuse, vUv);","float gray = texel.r * rPower + texel.g * gPower + texel.b * bPower;","gl_FragColor = vec4(vec3(gray), texel.a);","}"].join("\n")
}
我们为Threee.js创建了一个叫做CustomGrayScaleShader的自定义着色器该对象包含uniforms、vertexShader和fragmentShader三个属性。uniforms定义了通过javascript外部传入的变量，vertexShader定义了顶点着色器，fragmentShader定义了片元着色器代码。
这里需要注意的是顶点着色器中的uv变量，是着色器代码的内部变量，表示纹理上的texel（纹理上的像素），铜鼓varying vec2 vUv变量传递给片元着色器。着色器代码定义好后，我们就可以通过以下形式在javascript代码中使用了：
var renderPass = new THREE.RenderPass(scene, camera);var effectCopy = new THREE.ShaderPass(THREE.CopyShader);effectCopy.renderToScreen = true;var shaderPass = new THREE.ShaderPass(THREE.CustomGrayScaleShader);shaderPass.enabled = false;var bitPass = new THREE.ShaderPass(THREE.CustomBitShader);bitPass.enabled = false;var composer = new THREE.EffectComposer(webGLRenderer);composer.addPass(renderPass);composer.addPass(shaderPass);composer.addPass(bitPass);composer.addPass(effectCopy);
代码中创建了两个着色器通道，分别适合shaderPass和bitPass。shaderPass正好使用的是我们创建的自定义着色器THREE.CustomGrayScaleShader。
原文地址：https://www.cnblogs.com/w-wanglei/p/6790326.html
threejs 高级渲染组合器—EffectComposer相关推荐
- oc渲染器中文手册_C4D·OC高级渲染视频教程，带你玩转质感渲染
最近有很多小伙伴互动说比较苦恼C4D的渲染有没有更加简洁高效的设计方法.今天小编就为您准备了一套C4D渲染神器 Octane中文视频教程.OC渲染器具有渲染迅速.效果震撼.功能强大.非常容易上手学习. ...
- 高级UI - Paint基本使用.高级渲染使用(最后实现放大镜效果)
Paint 基本使用 <Paint的方法主要可以抽象成两大类>: 1.1 负责设置获取图形绘制.路径相关的1.setStyle(Paint.Style style) 设置画笔样式,取值有P ...
- 多重纹理和纹理组合器
多重纹理和纹理组合器 本文主要介绍OpenGL中两种技术的使用方法:多重纹理技术和纹理组合器技术,最终根据参考[2]中的代码,实现了两个简单的演示DEMO,其中使用到了<八叉树颜色量化.BMP. ...
- Nicholas谈UE4高级渲染:动态光照迭代快
GameLook报道/6月5日,2015年第三期GameLook开放日‧虚幻引擎专场活动在上海正式举行,此次活动由Epic Games与GameLook联合主办. 如何用好UE4引擎,发挥其强大的画面 ...
- 什么是着色器/Threejs如何使用着色器/Threejs使用着色器实现平面网格的动态效果案例
1,什么是着色器 着色器(Shader)是计算机图形学中的一个重要概念,它是在 GPU 上运行的程序,用于计算三维场景中每个像素的颜色和其他属性. 着色器通常分为两种类型:顶点着色器和片元着色器.顶点 ...
- 3D绘图 WebGl引擎----ThreeJS 3D渲染引擎
3D绘图 WebGl引擎---->ThreeJS 3D渲染引擎 是将OpenGl ES2.0d原来C语言的API和配置项迁移到了JavaScript中 壹.基本图形语法 1.ThreeJs将原本 ...
- Turing渲染着色器网格技术分析
Turing渲染着色器网格技术分析 图灵体系结构通过使用 网格着色器 引入了一种新的可编程几何着色管道.新的着色器将计算编程模型引入到图形管道中,因为协同使用线程在芯片上直接生成紧凑网格( meshl ...
- boost::signals2模块实现定制组合器的测试程序
boost::signals2模块实现定制组合器的测试程序 实现功能 C++实现代码 实现功能 boost::signals2模块实现定制组合器的测试程序 C++实现代码 #include <i ...
- python高级语法装饰器_Python高级编程——装饰器Decorator超详细讲解上
Python高级编程--装饰器Decorator超详细讲解(上篇) 送你小心心记得关注我哦!! 进入正文 全文摘要 装饰器decorator,是python语言的重要特性,我们平时都会遇到,无论是面向 ...
最新文章
- python中的daemon守护进程实现方法
- PLSQL创建Oracle定时任务
- forall分批提交oracle,使用BULK COLLECT+FORALL加速批量提交
- 使用mybatis一次性添加多条数据 在oracle 数据库上
- cudart64_100.dll not found
- 「linux」win+linux 双系统 默认启动项 的修改
- ubuntu安装qtcreator
- 毕业设计《MMORPG DEMO》——1
- python入门学习：4.if语句
- c语言在一个文件后面添加数据类型,c语言简单入门之简单运行和数据类型
- Python查找指定文件
- 几行代码搞定树形文本转XML和JSON
- 除掉字符串里面相同的字符
- 微信小程序云开发小项目“研岸日记”日记记录分享，源码分享
- 再获信通院权威认证，优等生华为云GaussDB数据库凭什么？
- gensim使用FastText训练词向量
- Xcode下的中文乱码问题
- Asp.net web api 知多少
- 数据库系统概论思维导图
- （转载）一套键鼠控制多台电脑操作——Synergy软件（windows环境）