本章主要学习知识点
- 掌握对模型实现发光描边
- 了解发光通道概念，以及如何运用Bloom发光通道
- 掌握多通道组合运用
- 尝试在外部加载的模型上设置发光
后处理发光描边
后处理发光描边效果 可以理解为给3D模型叠加一个“滤镜”，核心是通过EffectComposer（效果合成器）依次叠加多种处理效果。
实现对立方体的描边
想要实现后处理，那必然需要先初始化后处理合成器
const composer = new EffectComposer( renderer );
const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
初始化完成后，就可以添加描边滤镜了
// 创建一个THREE.Vector2对象，用于存储窗口的宽度和高度
const v2 = new THREE.Vector2( window.innerWidth, window.innerHeight );
// 创建一个OutlinePass对象，用于创建轮廓效果
const outlinePass = new OutlinePass( v2, scene, camera );
// 设置OutlinePass对象的选择对象，这里选择了一个立方体
outlinePass.selectedObjects = [ cube ];
// 设置轮廓的厚度
outlinePass.edgeThickness = 6;
// 设置轮廓的强度
outlinePass.edgeStrength = 10;
// 设置轮廓的脉动周期
outlinePass.pulsePeriod = 3;
composer.addPass( outlinePass );
outlinePass.selectedObjects用于指定要发光的物体，选中物体后，OutlinePass会自动计算其边缘轮廓
最后需要使用合成渲染替换原渲染
composer.render();
requestAnimationFrame( animate );
最终效果
Bloom发光通道
Bloom发光通道，可以理解为给场景中明亮区域叠加一层“柔和光晕”，类似相机拍摄高亮物体时的泛光效果。
实现原理
- 分离亮部：先渲染场景，提取亮度超过阈值的区域。
- 模糊扩散：对亮部进行多次模糊处理，模拟光线扩散。
- 混合叠加：将模糊后的亮部与原场景混合，形成发光效果
实际操作下
创建合成器
const composer = new EffectComposer( renderer );
// 创建一个新的渲染通道
const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
添加Bloom发光通道
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight));
composer.addPass( bloomPass );
指定发光物体(局部Bloom)
-
全局Bloom：所有亮度超过阈值的区域都会发光。
-
局部Bloom：需分两步渲染：
- 正常渲染普通物体到一张纹理。
- 单独渲染发光物体到另一张纹理，再对其应用Bloom效果。
- 将两张纹理混合叠加（通过ShaderPass或MaskPass）。 使用合成渲染替换原渲染
composer.render();
requestAnimationFrame( animate );
这里我使用的是默认的参数，实际可调节参数如下
- strength：发光强度，值越大光晕越明显（典型值1~3）
- radius：光晕扩散范围，值越大边缘越模糊（0~1之间）
- threshold：亮度阈值，只有颜色亮度超过该值的区域会发光（0~1之间）
多通道组合
后处理多通道组合，可以理解为将多个图像处理效果（如描边、模糊、光晕等）像滤镜流水线一样叠加处理，最终合成一个完整的画面效果
实现原理
- 基础图层：原始渲染的场景（相当于
RenderPass生成的底图） - 滤镜叠加：每个通道（如发光、模糊、噪点）对应一个滤镜层，按顺序叠加处理
- 最终效果：所有滤镜处理后的结果合并输出到屏幕
下面是一个描边+闪屏效果的组合案例
const composer = new EffectComposer(renderer)
const renderPass = new RenderPass(scene,camera)
composer.addPass(renderPass)
const glitchPass = new GlitchPass()
// 将GlitchPass对象添加到composer中
composer.addPass(glitchPass)
// 创建一个Vector2对象，用于存储窗口的宽度和高度
const v2 = new THREE.Vector2(window.innerWidth,window.innerHeight)
// 创建一个OutlinePass对象，用于创建轮廓效果
const outlinePass = new OutlinePass(v2,scene,camera)
// 设置OutlinePass对象的选择对象，这里选择了一个立方体
outlinePass.selectedObjects = [cube]
// 设置OutlinePass对象的可见边缘颜色为黄色
outlinePass.visibleEdgeColor.set('yellow')
// 设置OutlinePass对象的边缘厚度为4
outlinePass.edgeThickness = 4;
// 设置OutlinePass对象的边缘强度为10
outlinePass.edgeStrength = 10;
// 设置OutlinePass对象的脉冲周期为2
outlinePass.pulsePeriod = 2;
// 将OutlinePass对象添加到composer中
composer.addPass(outlinePass)
一些常见的通道组合
| 组合名称 | 效果描述 | 适用场景 |
|---|---|---|
| 描边+发光 | 物体边缘发光+整体泛光 | 角色选中/技能特效 |
| 景深+色彩校正 | 背景模糊+色调调整 | 电影感场景 |
| 闪屏+噪点 | 画面随机抖动+颗粒感 | 故障艺术/科幻界面 |
模型设置发光
const loader = new GLTFLoader(loadingManager);
loader.load('model/sewing_factory/scene.gltf', function (gltf) {
scene.add(gltf.scene)
gltf.scene.traverse((child) => {
if(child.isMesh) {
// 创建后处理
composer = new EffectComposer(renderer);
// 创建渲染通道
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 创建轮廓通道
const outlinePass = new OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), scene, camera);
composer.addPass(outlinePass);
// 设置轮廓颜色
outlinePass.selectedObjects = [child]; // 设置需要高亮的物体
outlinePass.edgeStrength = 10; // 轮廓的强度
outlinePass.edgeGlow = 1; // 轮廓的发光
outlinePass.edgeThickness = 1; // 轮廓的厚度
outlinePass.pulsePeriod = 4; // 轮廓的脉动周期
outlinePass.visibleEdgeColor.set('skyblue'); // 轮廓可见边的颜色
outlinePass.hiddenEdgeColor.set('yellow'); // 轮廓隐藏边的颜色
// 创建GammaCorrectionShader通道，用于调整亮度
const gammaCorrectionPass = new ShaderPass(GammaCorrectionShader);
composer.addPass(gammaCorrectionPass);
// 抗锯齿
const pixelRatio = renderer.getPixelRatio();
const smaaPass = new SMAAPass(window.innerWidth * pixelRatio, window.innerHeight * pixelRatio);
composer.addPass(smaaPass);
animate()
}else {
console.log(('this is not a mesh'));
}
})
})
