three.js 后期处理通道postprocessing

Three.js提供了很多后期通道。下面列出了官方文档中的23个通道。

AdaptiveToneMappingPass
AfterimagePass
BloomPass：该通道可以增强场景中明亮的区域，可以模拟辉光。
BokehPass
ClearPass
CubeTexturePass
DotScreenPass
EffectComposer
FilmPass
GlitchPass
HalftonePass
MaskPass
OutlinePass：轮廓通道，可以为边缘添加发光效果。
RenderPass
SAOPass
SavePass
ShaderPass
SMAAPass
SSAARenderPass
SSAOPass
TAARenderPass
TexturePass
UnrealBloomPass

13.outlinepass

outlinepass通道可以为物体（场景中被被添加到通道中的物体）的边缘添加一个发光效果。下面是一些可配置的参数。

edgeStrength: 3.0,  //强度 默认3
edgeGlow: 1,    强度 默认1
edgeThickness: 1.0, //边缘浓度
pulsePeriod: 0,  闪烁频率 默认0 值越大频率越低
usePatternTexture: false  使用纹理
visibleEdgeColor #ffffff 边缘可见部分发光颜色
hiddenEdgeColor #190a05  边缘遮挡部分发光颜色

写了一个three-outlinepass，方便在npm的项目中使用。
npm i three-outlinepass

对于outlinepass这里有个地方不要产生误解，不是所有的物体边缘，也不是添加到通道中所有物体的所有边缘，而是物体渲染后整体的边缘，类似ps中合并图层之后的再添加描边效果一样。对面下面两张图片，不同角度边缘是不一样的。

three.js 后期处理通道postprocessing相关推荐

three.js后期处理-使用UnrealBloomPass通道在场景中添加泛光效果，三维物体表面发光效果(vue中使用three.js85)
使用UnrealBloomPass通道在场景中添加泛光效果 1.demo效果 2. 重要知识点 2.1 回顾要点 2.2 UnrealBloomPass通道介绍 3. 实现要点 3.1 相关文件引入 ...
ThreeJS的特效合成器和后期处理通道
最近要写个 web 交互式发光可交互的框架.没查到啥好资料,自己一个人摸索了很久,有些失望,可是毕竟是探索过的东西,所以做个记录,怀念我过去好多天掉的青丝(捂脸).我在前面那篇博客里面已经介绍了如何让 ...
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染
Three.js 后期处理-泛光效果-BloomPass-相机分层渲染概述步骤概述本文介绍如何使用three.js的后期处理来制作处泛光效果,先来看效果图注意: **camera的默认lay ...
Three.js 后期处理-物体边界线条高亮处理-OutlinePass
Three.js 后期处理-物体边界线条高亮处理-OutlinePass 概述步骤概述本文介绍如何使用three.js的后期处理来制作物体边界线条高亮处理,先来看效果图步骤添加相应的后期处理 ...
模型描边（一）—— three.js后期处理实现
最近在使用three.js库开发项目的时候,想实现鼠标悬停在物体上时,通过模型描边显示当前被选中物体的效果.因此,查询了很多关于模型描边.轮廓效果资料,实现该效果的方法有很多,这里只说一下通过后期处理 ...
学习Three.js——后期处理(EffectComposer)
后期处理的步骤: 创建THREE.EffectComposer(效果组合器)对象配置EffectComposer对象在render循环中,使用EffectComposer来渲染场景一般用法: v ...
three.js 后期处理，物体高亮
已经最简化的代码了,看 EffectComposer,RenderPass,UnrealBloomPass这三个东西就行了.主要是UnrealBloomPass实现高亮 sence.backgroun ...
three.js学习笔记(十九)——后期处理
介绍后期处理是指在最终图像(渲染)上添加效果.人们大多在电影制作中使用这种技术,但我们也可以在WebGL中使用. 后期处理可以是略微改善图像或者产生巨大影响效果. 下面链接是Three.js官方文档 ...
webgl之Three.js学习 day10定制着色器和渲染后期处理
一.设置后期处理设置Three.js为后期处理做准备,我们需要通过以下步骤对当前的配置进行修改: 1)创建一个EffectComposer(效果组合器)对象,然后在该对象上添加后期处理通道. 2)配 ...

three.js 后期处理通道postprocessing

three.js 后期处理通道postprocessing

13.outlinepass

three.js 后期处理通道postprocessing相关推荐

最新文章

热门文章