学习Three.js——后期处理(EffectComposer)_yyyzhhhhh的博客

相关文章推荐
纯真的皮带 · 中国每年新确诊患者约3万名，药企为何加码这一 ...· 10 月前 ·
爽快的日记本 · 江苏省司法厅生活法律风险提示 ...· 11 月前 ·
豪爽的饭盒 · 陕西省教育考试院 ...· 1 年前 ·
刚分手的红薯 · 第六届北京大学外国语学院南亚学系研究生学术论 ...· 1 年前 ·
重情义的烤红薯 · [辉煌十二五]“十二五”以来特别是十八大以来 ...· 1 年前 ·
后期处理的步骤：
创建 THREE.EffectComposer (效果组合器)对象
配置EffectComposer对象
在render循环中，使用EffectComposer来渲染场景
一般用法：
var composer = new THREE.EffectComposer(webGLRenderer)//配置composer
var renderPass = new THREE.RenderPass(scene,camera)//配置通道
composer.add(renderPass)//将通道加入composer
function render(){
    var delta = clock.getDelta();
    requestAnimationFrame(render);
    composer.render(delta);//使用组合器来渲染，而不再用webGLRenderer
后期处理通道
 
需要注意的是通道是顺序执行的，加入时要注意顺序 
THREE.BloomPass
 
增强场景中的亮度 
		var renderPass = new THREE.RenderPass(scene, camera);
        var effectCopy = new THREE.ShaderPass(THREE.CopyShader);//CopyShader是为了能将结果输出，普通的通道一般都是不能输出的，要靠CopyShader进行输出
        effectCopy.renderToScreen = true;//设置这个参数的目的是马上将当前的内容输出
        var bloomPass = new THREE.BloomPass(3, 25, 5.0, 256);
        composer1.addPass(renderScene);//渲染当前场景
        composer1.addPass(bloomPass);//添加光效
        composer1.addPass(effectCopy);//输出到屏幕
Strength:光的强度 
kernelSize:光的偏移 
sigma:光的锐利程度 
Resolution:光的精确度，值越低，光的方块化越严重 
THREE.DotScreenPass
 
将原始图片输出为灰度点集 
用法参考BloomPass 
center:点的偏移量 
angle:点的对其方式 
Scale:点的大小 
THREE.FilmPass
 
使用扫描线和失真来模拟电视屏幕效果 
noiseIntensity:场景的粗糙程度 
scanlinesIntensity:扫描线的显著程度 
scanLinesCount:扫描线的数量 
gratScale:是否使用灰度图输出 
THREE.GlitchPass
 
随机的在屏幕上显示电脉冲 
THREE.MaskPass
 
添加掩码，后续通道只会影响掩码区域，取消掩码需要加入THREE.ClearMaskPass通道 
		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);
        composer.addPass(effectColorify);
        composer.addPass(clearMask);
        composer.addPass(earthMask);
        composer.addPass(effectSepia);
        composer.addPass(clearMask);
        composer.addPass(effectCopy);
需要注意的是需要将使用掩码前，要将composer.renderTarget.stencilBuffer设置为true,用于限制渲染区域。 
另外，使用完掩码后，需要使用ClearMaskPass()去掉掩码区域 
THREE.RenderPass
 
根据scene和camera渲染出一个场景，和普通的webGLRenderer一样 
THREE.TexturePass
 
保存当前通道的输出，作为后续使用 
var renderScene = new THREE.TexturePass(composer1.renderTarget2);//保留当前输出结果
composer2.addPass(renderScene);//将保留的输出结果加入到别的composer中即可
THREE.ShaderPass
 
自定义的通道，一般在构造函数中指定相关的参数即可，new ShaderPass(xxx) 
THREE.MirrorShader:创建镜面效果 
THREE.HueSaturationShader:改变颜色的色调和饱和度 
THREE.VignetteShader:添加晕映效果 
THREE.ColorCorrectionShader:调整颜色的分布 
THREE.RGBShiftShader:将红绿蓝三种颜色分开 
THREE.BrightnessContrastShader:改变亮度和对比度 
THREE.ColorifyShader:将某种颜色覆盖到整个屏幕 
THREE.SepiaShader:创建类似于乌贼墨的效果 
THREE.KaleidoShader:类似于万花筒的效果 
THREE.LuminosityShader:提高亮度 
THREE.TechnicolorShader:模拟类似老电影里面的两条彩色效果 
THREE.HorizontalBlurShader和THREE.VerticalBlurShader:可以向水平和垂直方向创建模糊效果 
THREE.HorizontalTiltShiftShader和THREE.VerticalTileShiftShader:可以在水平和垂直方向创建倾斜平移的效果 
THREE.TriangleBlurShader:基于三角形的方法创造一种模糊效果 
THREE.BleachBypassShader:创造一种镀银的效果 
THREE.EdgeShader:找到图片的边界并显示 
THREE.FXAAShader:添加抗锯齿的效果 
THREE.FocusShader:创建中间比较尖锐，周围比较模糊的效果。
                                    给场景中的设备描边关键代码
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer'
let composer = null
let outlinePassRing = null // 光圈
composer = new EffectComposer(renderer)
outlinePassRing = new OutlinePass(new THREE.Vector2(div3D.clientW
设置Three.js库为后期处理做准备，我们需要通过以下步骤对当前的配置进行修改：
1）创建一个EffectComposer（效果组合器）对象，然后在该对象上添加后期处理通道。
2）配置该对象，使它可以渲染我们的场景，并应用额外的后期处理步骤。
3）在render循环中，使用EffectComposer渲染场景、应用通道，并输出结果。
要使用后期处理，需要引入一些ja...
npm install https://github.com/MasatoMakino/threejs-postprocess.git --save-dev
threejs-postprocess由ES6模块和TypeScript d.ts文件组成。
 首先，导入类
import {
  PostProcessRenderer ,
  ChromaticAberrationShaderPass ,
} from "threejs-postprocess" ;
创建PostProcessRenderer实例
const postProcessRender = new PostProcessRenderer ( scene , camera , renderer ) ;
创建Pass实例
                                    一、教程说明     有一定的Threejs基础和WebGL基础，希望能够深入理解Three.js引擎，想了解Threejs是如何对WebGL API和着色器封装的，想了解Threejs向量、矩阵等数学知识，在实际的项目中需要使用Threejs自定义着色器代码。 二、源码下载 源码和课件在本课程页面滚动到最下方 三、源码 四、文字课件 每节课基本都有一篇文章介绍本节课内容，平时学习可以看视频，也可以像看书一样直接阅读文章
                                    用于在three.js中实现后期处理效果。该类管理了产生最终视觉效果的后期处理过程链。 后期处理过程根据它们添加/插入的顺序来执行，最后一个过程会被自动渲染到屏幕上。
EffectComposer( renderer 例子outlinePass
outlinePass
方法如下：
function initEffectComposer(){
  composer = new THREE.EffectComposer( renderer );
  const renderPass = new TH
                                    ThreeJS-EffectComposer
三个 JS 效果器的 UMD 端口，以促进通过包含
该库的目的是为具有并希望使用已经开发的Effects Composer 之一的网站启用更现代的工作流程； 使用 Bower 将控件作为组件进行管理，而不必在 html 顶部放置松散的脚本。
 该库不包括所有后期处理文件，仅包括 Main Effects Composer 文件所依赖的文件。 随着我做更多的三个 js 工作和探索，我将用剩余的文件更新这个存储库。
                                    但是设置为false时，另外可能有些精度的场景会出现叠加图层闪烁z-buffer这种问题，处理办法是，创建相机【PerspectiveCamera】尽量缩小场景可见范围，根据自己场景的调整相机的【near/far】，我这个0.1/10是模型本来就长度不到3，这个根据自己条件调整。object是一个数组，可以先声明一个数组，把要做反射的物体添加到数组里，然后在SSRPass的selects里添加。处理方式和上一个问题雷同，把camera的near【近切面】设置大一点即可，根据自身场景调整，不多赘述。