WSの小屋

Threejs后处理

所谓 threejs 后期处理，就像 ps 一样，对 threejs 的渲染结果进行后期处理，比如添加发光效果。

EffectComposer

EffectComposer 文件用于提供 EffectComposer 对象，以便添加后期处理步骤

RenderPass

RenderPass 文件用于在EffectComposer 对象上添加渲染通道，如果没有通道，我们的场景就不会被渲染

Threejs所有后处理通道

名称 描述
AdaptiveToneMappingPass 该通道可以根据场景的光照度自动调节场景的亮度。
BloomPass 该通道通过增强场景中明亮的区域来模拟真实世界中的摄像机。
BokehPass 该通道可以实现类似大光圈镜头的景深效果。
ClearPass 该通道清空当前纹理缓存。
CubeTexturePass 用于渲染天空盒。
DotScreenPass 将黑点图层应用于屏幕的原始图片上。
FilmPass 通过扫描线和失真来模拟电视屏幕效果。
GlitchPass 随机在屏幕上显示电脉冲。
HalftonePass 用于模拟传统印刷术的半色调效果。
MaskPass 在图片上显示掩码，后续通道只会影响到掩码区域。
OutlinePass 勾勒出场景中的物体轮廓。
RenderPass 在当前场景和摄像机的基础上渲染出一个新场景。
SAOPass 实现实时环境光遮挡效果。
SMAAPass 全屏反锯齿效果。
SSAARenderPass 使用另一种算法实现全屏反锯齿效果。
SSAOPass 使用另一种算法实现实时环境光遮挡效果
SavePass 该通道执行时会赋值当前渲染结果，在后续步骤中可以使用。实际应用中用处不大。
ShaderPass 自定义着色器通道，可以传入自定义着色器作为参数，以生成一个高级、自定义的后期处理通道。
TAARenderPass 也是一个全屏反锯齿效果。
TexturePass 将合成器的当前状态保存为纹理，然后将其作为参数传入到其他的 EffectComposer 组合器中。
UnrealBloomPass 该通道与 Bloom 类似，但是它实现的效果更接近于 Unreal3D 引擎的 Bloom 效果。

OutlinePass 示例

typescript 复制代码 
// 省略scene、camera、renderer的定义

const mesh = new Mesh(new BoxGeometry(100, 100, 100), new MeshLambertMaterial({ color: "white" }));
scene.add(mesh);

const composer = new EffectComposer(renderer);
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

const outlinePass = new OutlinePass(new Vector2(window.innerWidth, window.innerHeight), scene, camera);
outlinePass.selectedObjects = [mesh];
outlinePass.edgeThickness = 4;
outlinePass.edgeStrength = 6;
outlinePass.pulsePeriod = 2;
outlinePass.visibleEdgeColor.set(0xFFFF00);
composer.addPass(outlinePass);

引用

十八、Three.js后期处理与自定义着色器
1. 后处理(发光描边OutlinePass) | Three.js中文网

上一篇

关于

Comments | 0条评论