学习Three.js——后期处理(EffectComposer)
后期处理的步骤:
- 创建
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
:创建中间比较尖锐,周围比较模糊的效果。
学习Three.js——后期处理(EffectComposer)相关推荐
- three.js 后期处理通道postprocessing
three.js 后期处理通道postprocessing Three.js提供了很多后期通道.下面列出了官方文档中的23个通道. AdaptiveToneMappingPass Afterimage ...
- Three.js 后期处理-泛光效果-BloomPass-相机分层渲染
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染 概述 步骤 概述 本文介绍如何使用three.js的后期处理来制作处泛光效果,先来看效果图 注意: **camera的默认lay ...
- Three.js 后期处理-物体边界线条高亮处理-OutlinePass
Three.js 后期处理-物体边界线条高亮处理-OutlinePass 概述 步骤 概述 本文介绍如何使用three.js的后期处理来制作物体边界线条高亮处理,先来看效果图 步骤 添加相应的后期处理 ...
- three.js后期处理-使用UnrealBloomPass通道在场景中添加泛光效果,三维物体表面发光效果(vue中使用three.js85)
使用UnrealBloomPass通道在场景中添加泛光效果 1.demo效果 2. 重要知识点 2.1 回顾要点 2.2 UnrealBloomPass通道介绍 3. 实现要点 3.1 相关文件引入 ...
- eclipsevue代码怎么运行_[Java教程]使用eclipse初步学习vue.js操作
[Java教程]使用eclipse初步学习vue.js操作 0 2017-11-26 19:00:06 一.vue.js的初步认识 https://unpkg.com/vue ">vu ...
- 第一天 :学习node.js
第一天 :学习node.js ① node.js环境配置 我学过的语言最简单的一门 直接百度就可以配置 ② 每个入门 的程序都是从helloworld开始 代码如下 : var http=requir ...
- vue.js视频课程_在此免费课程中学习Vue.js! ✨
vue.js视频课程 by ZAYDEK 由ZAYDEK 在此免费课程中学习Vue.js! ✨ (Learn Vue.js in this free course! ?✨) 让我们做点Vueseful ...
- js/d3.min.js_在5分钟内学习D3.js
js/d3.min.js by Sohaib Nehal 通过Sohaib Nehal 在5分钟内学习D3.js (Learn D3.js in 5 minutes) 创建数据可视表示的简介 (An ...
- 学习 Node.js 的 6 个步骤
学习 Node.js 的 6 个步骤 从刚接触Node.js到现在,自己也是一路摸滚打爬过来的,虽不说是什么高手,但对于如何学习Node.js,还是有一些个人见解,拿出来与大家共勉~ 学习Node.j ...
最新文章
- 昨天还在 for 循环里写加号拼接字符串的那个同事,今天已经不在了
- DataFrame的copy的用法
- OpenCV-Python Feature2D 特征点检测 (SIFT,SURF)
- IDEA显示类的结构 Alt+F7
- kali2017添加国内更新源 + 配置并开启sshd
- Java并发程序设计(十一)设计模式与并发之生产者-消费者模式
- iOS开发UI篇—字典转模型
- LNMP-Linux下Nginx+MySQL+PHP+phpMyAdmin+eAcelerator一键安装包
- 输入语句 readline 1006 c#
- 选主元的高斯-约旦(Gauss-Jordan)消元法解线性方程组/求逆矩阵
- 在设备上添加项目失败_使用VisualGDB将Keil项目导入VisualStudio
- java盘点系统_2020年度综合大盘点:火爆IT业的7大Java技术,任何一项都是“卧槽牛逼”!...
- (转)WinForm中的各种表格控件
- 如何使用免费工具构建有效的小型APP开发团队
- Introduction to Computer Networking学习笔记(八):end-to-end principle端对端原则
- 《论个人在历史上的作用》总结反思
- CSP 202112-3 登机牌条码
- 【转】你真的理解Python中MRO算法吗?
- 【转载】校园网络客户端连网常见问题
- c语言程序如何防止盗用,如何用C语言程序盗取QQ密码
热门文章
- 2022宁波市第五届网络安全大赛(训练赛Misc部分)
- MySQL-备份恢复
- feded计算机音乐,Romeo And Jazzie/Alan Walker《Faded Refix》[FLAC/MP3-320K]
- VS解决BEX错误但无法关闭DEP保护的问题
- jQuery判断是否为数字
- 2022年蓝桥杯:第十三届蓝桥杯大赛软件赛省赛C/C++大学B组真题(考后回顾,文末附真题链接)
- java编程英语_Day17
- 安装多个Vivado版本后,双击.xpr如何启动最新版本
- php数组合并多维,PHP合并多维数组
- STM32F411核心板固件库开发(二) USART配置