第十三节：后期处理：效果增强
第十三节：后期处理：效果增强
引言
后期处理是3D渲染的画龙点睛之笔，它将平凡的渲染结果转化为电影级视觉盛宴。Three.js的后期处理系统通过可组合的效果通道链，让开发者轻松实现专业级特效。本文将深入解析后期处理管线，并通过Vue3实现实时特效编辑器，助你掌握视觉增强的核心技术。
1. 后期处理管线原理
1.1 渲染流程
1.2 核心组件
| 组件 | 作用 | 性能影响 |
|---|---|---|
| EffectComposer | 效果组合器 | 低 |
| RenderPass | 基础渲染通道 | 中 |
| ShaderPass | 着色器效果通道 | 高 |
| CopyPass | 复制输出 | 极低 |
2. 基础后期处理
2.1 初始化管线
<script setup>
import { ref, onMounted } from 'vue';
import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/addons/postprocessing/ShaderPass.js';const composer = ref(null);onMounted(() => {// 创建基础渲染器const renderer = new THREE.WebGLRenderer({ antialias: true });renderer.setSize(window.innerWidth, window.innerHeight);// 创建效果组合器composer.value = new EffectComposer(renderer);// 添加基础渲染通道const renderPass = new RenderPass(scene, camera);composer.value.addPass(renderPass);// 添加自定义效果通道const customPass = new ShaderPass(customEffectShader);composer.value.addPass(customPass);// 设置渲染循环function animate() {requestAnimationFrame(animate);composer.value.render();}animate();
});
</script>
2.2 基础效果链
// 创建组合器
const composer = new EffectComposer(renderer);// 1. 基础渲染
composer.addPass(new RenderPass(scene, camera));// 2. 添加抗锯齿
import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
composer.addPass(new SMAAPass(window.innerWidth, window.innerHeight));// 3. 添加辉光效果
import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js';
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.5, // 强度0.4, // 半径0.85 // 阈值
);
composer.addPass(bloomPass);// 4. 最终输出（必须）
import { OutputPass } from 'three/addons/postprocessing/OutputPass.js';
composer.addPass(new OutputPass());
3. 内置效果详解
3.1 辉光效果(Bloom)
const bloomPass = new UnrealBloomPass(new THREE.Vector2(window.innerWidth, window.innerHeight),1.2, // 强度0.4, // 半径0.6 // 阈值
);// 动态调整辉光参数
function updateBloom(intensity, radius, threshold) {bloomPass.strength = intensity;bloomPass.radius = radius;bloomPass.threshold = threshold;
}// 性能优化：只对特定物体应用辉光
bloomPass.selectedObjects = [glowingObject1, glowingObject2];
3.2 环境光遮蔽(SSAO)
import { SSAOPass } from 'three/addons/postprocessing/SSAOPass.js';const ssaoPass = new SSAOPass(scene,camera,window.innerWidth,window.innerHeight
);// 配置参数
ssaoPass.kernelRadius = 0.1;
ssaoPass.minDistance = 0.001;
ssaoPass.maxDistance = 0.1;
ssaoPass.output = SSAOPass.OUTPUT.Default;// 性能敏感：降低采样数
ssaoPass.kernelSize = 16; // 默认32
3.3 故障效果(Glitch)
import { GlitchPass } from 'three/addons/postprocessing/GlitchPass.js';const glitchPass = new GlitchPass();
glitchPass.goWild = false; // 控制是否随机触发// 自定义故障参数
function triggerGlitch(duration = 0.2) {glitchPass.goWild = true;setTimeout(() => {glitchPass.goWild = false;}, duration * 1000);
}
3.4 色彩校正
import { ColorCorrectionShader } from 'three/addons/shaders/ColorCorrectionShader.js';const colorPass = new ShaderPass(ColorCorrectionShader);
colorPass.uniforms['tDiffuse'].value = composer.readBuffer.texture;// 调整参数
colorPass.uniforms['powRGB'].value = new THREE.Vector3(1.2, 1.1, 1.0);
colorPass.uniforms['mulRGB'].value = new THREE.Vector3(1.1, 1.0, 0.9);
4. 自定义ShaderPass
4.1 着色器基础结构
// vertexShader.glsl
varying vec2 vUv;void main() {vUv = uv;gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}// fragmentShader.glsl
uniform sampler2D tDiffuse; // 输入纹理
uniform float customParam;
varying vec2 vUv;void main() {vec4 color = texture2D(tDiffuse, vUv);// 自定义效果处理vec3 result = processColor(color.rgb, customParam);gl_FragColor = vec4(result, color.a);
}
4.2 边缘检测效果
const edgeDetectionShader = {uniforms: {"tDiffuse": { value: null },"edgeColor": { value: new THREE.Color(0x000000) },"threshold": { value: 0.1 }},vertexShader: `...`, // 使用基础顶点着色器fragmentShader: `uniform sampler2D tDiffuse;uniform vec3 edgeColor;uniform float threshold;varying vec2 vUv;void main() {vec4 color = texture2D(tDiffuse, vUv);// Sobel算子边缘检测vec2 offset = vec2(1.0) / vec2(textureSize(tDiffuse, 0));float gx = 0.0;float gy = 0.0;// 3x3卷积核mat3 sobelX = mat3(-1, 0, 1, -2, 0, 2, -1, 0, 1);mat3 sobelY = mat3(-1, -2, -1, 0, 0, 0, 1, 2, 1);for (int y = -1; y <= 1; y++) {for (int x = -1; x <= 1; x++) {vec2 samplePos = vUv + vec2(x, y) * offset;vec4 sampleColor = texture2D(tDiffuse, samplePos);float luminance = dot(sampleColor.rgb, vec3(0.299, 0.587, 0.114));gx += luminance * sobelX[y+1][x+1];gy += luminance * sobelY[y+1][x+1];}}float edge = sqrt(gx * gx + gy * gy);if (edge > threshold) {gl_FragColor = vec4(edgeColor, 1.0);} else {gl_FragColor = color;}}`
};const edgePass = new ShaderPass(edgeDetectionShader);
4.3 像素化效果
const pixelateShader = {uniforms: {"tDiffuse": { value: null },"pixelSize": { value: 8 }},vertexShader: `...`,fragmentShader: `uniform sampler2D tDiffuse;uniform int pixelSize;varying vec2 vUv;void main() {vec2 pixelCoord = vUv * vec2(textureSize(tDiffuse, 0));vec2 blockCoord = floor(pixelCoord / float(pixelSize)) * float(pixelSize);vec2 uv = blockCoord / vec2(textureSize(tDiffuse, 0));gl_FragColor = texture2D(tDiffuse, uv);}`
};
5. 高级特效实现
5.1 景深效果
import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';const bokehPass = new BokehPass(scene,camera,{focus: 10.0, // 焦点距离aperture: 0.025, // 光圈大小maxblur: 0.01, // 最大模糊width: window.innerWidth,height: window.innerHeight}
);// 动态焦点跟踪
function trackFocus(object) {const focusDistance = camera.position.distanceTo(object.position);bokehPass.uniforms['focus'].value = focusDistance;
}
5.2 运动模糊
import { MotionBlurPass } from 'three/addons/postprocessing/MotionBlurPass.js';const motionBlurPass = new MotionBlurPass(scene, camera);// 配置参数
motionBlurPass.uniforms['intensity'].value = 0.5;
motionBlurPass.uniforms['samples'].value = 16;// 在相机移动时启用
cameraControls.addEventListener('change', () => {motionBlurPass.enabled = true;setTimeout(() => motionBlurPass.enabled = false, 500);
});
5.3 体积光
import { VolumetricLightShader } from 'three/addons/shaders/VolumetricLightShader.js';const volumeLightPass = new ShaderPass(VolumetricLightShader);
volumeLightPass.uniforms['lightPosition'].value = sunLight.position;
volumeLightPass.uniforms['exposure'].value = 0.2;
volumeLightPass.uniforms['decay'].value = 0.98;
volumeLightPass.uniforms['density'].value = 0.96;
volumeLightPass.uniforms['weight'].value = 0.4;
volumeLightPass.uniforms['samples'].value = 100; // 性能敏感
6. 性能优化策略
6.1 多采样抗锯齿(MSAA)
// 渲染器配置
const renderer = new THREE.WebGLRenderer({antialias: true,powerPreference: "high-performance"
});// 使用SMAA代替MSAA
import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js';
const smaaPass = new SMAAPass(window.innerWidth, window.innerHeight);
composer.addPass(smaaPass);// 移动端降级
if (isMobile) {composer.passes = composer.passes.filter(pass => !(pass instanceof SMAAPass));
}
6.2 效果分级系统
6.3 渲染目标复用
// 共享渲染目标
const rtParameters = {minFilter: THREE.LinearFilter,magFilter: THREE.LinearFilter,format: THREE.RGBAFormat,stencilBuffer: false
};const sharedRenderTarget = new THREE.WebGLRenderTarget(window.innerWidth,window.innerHeight,rtParameters
);// 多个通道共享
bloomPass.renderTargetX = sharedRenderTarget;
ssaoPass.renderTarget = sharedRenderTarget;
6.4 通道调度优化
// 按需启用通道
function setPassEnabled(passName, enabled) {const pass = composer.passes.find(p => p.name === passName);if (pass) pass.enabled = enabled;
}// 场景静止时跳过部分计算
let lastCameraPosition = camera.position.clone();
function checkSceneChanged() {const changed = !camera.position.equals(lastCameraPosition) ||scene.children.some(obj => obj.userData.updated);lastCameraPosition.copy(camera.position);return changed;
}function render() {const needsFullRender = checkSceneChanged();if (!needsFullRender) {// 只运行输出通道composer.passes.forEach(pass => {pass.enabled = pass instanceof OutputPass;});} else {// 启用所有通道composer.passes.forEach(pass => pass.enabled = true);}composer.render();
}
7. Vue3后期处理编辑器
7.1 项目结构
src/├── components/│ ├── PostProcessingEditor.vue // 主编辑器│ ├── EffectController.vue // 效果控制器│ ├── ShaderEditor.vue // 着色器编辑器│ └── PreviewPane.vue // 实时预览└── App.vue
7.2 主编辑器
<!-- PostProcessingEditor.vue -->
<template><div class="post-processing-editor"><div class="effect-list"><EffectList :effects="activeEffects" @select="selectEffect" /><button @click="addEffect('bloom')">+ 添加效果</button></div><div class="preview-pane"><PreviewPane ref="previewRef" :effects="activeEffects" /></div><div class="effect-controls" v-if="selectedEffect"><EffectController :effect="selectedEffect" @update="updateEffect" /></div></div>
</template><script setup>
import { ref, reactive } from 'vue';
import { effectPresets } from './effectPresets';const activeEffects = reactive([]);
const selectedEffect = ref(null);
const previewRef = ref(null);// 添加效果
function addEffect(type) {const effect = { ...effectPresets[type], id: Date.now() };activeEffects.push(effect);selectEffect(effect);
}// 更新效果
function updateEffect(updatedEffect) {const index = activeEffects.findIndex(e => e.id === updatedEffect.id);if (index !== -1) {activeEffects[index] = updatedEffect;previewRef.value.updateEffect(updatedEffect);}
}
</script>
7.3 效果控制器
<!-- EffectController.vue -->
<template><div class="effect-controller"><h3>{{ effect.name }} 控制</h3><div v-if="effect.type === 'bloom'"><ParamRange label="强度" v-model="localEffect.params.strength" :min="0" :max="2" :step="0.01" /><ParamRange label="半径" v-model="localEffect.params.radius" :min="0" :max="1" :step="0.01" /><ParamRange label="阈值" v-model="localEffect.params.threshold" :min="0" :max="1" :step="0.01" /></div><div v-if="effect.type === 'ssao'"><ParamRange label="采样半径" v-model="localEffect.params.kernelRadius" :min="0" :max="1" :step="0.01" /><ParamRange label="最小距离" v-model="localEffect.params.minDistance" :min="0" :max="0.1" :step="0.001" /><ParamRange label="最大距离" v-model="localEffect.params.maxDistance" :min="0" :max="0.5" :step="0.01" /></div><div v-if="effect.type === 'custom'"><ShaderEditor :shader="localEffect.shader" @update="updateShader" /></div><button @click="removeEffect">移除效果</button></div>
</template><script setup>
import { ref, watch } from 'vue';const props = defineProps(['effect']);
const emit = defineEmits(['update', 'remove']);const localEffect = ref({ ...props.effect });// 更新参数
watch(localEffect, (newVal) => {emit('update', newVal);
}, { deep: true });function updateShader(newShader) {localEffect.value.shader = newShader;emit('update', localEffect.value);
}function removeEffect() {emit('remove', props.effect.id);
}
</script>
7.4 着色器编辑器
<!-- ShaderEditor.vue -->
<template><div class="shader-editor"><div class="editor-header"><button @click="setActiveTab('vertex')">顶点着色器</button><button @click="setActiveTab('fragment')">片元着色器</button><button @click="applyChanges">应用</button></div><textarea v-if="activeTab === 'vertex'" v-model="vertexShader"></textarea><textarea v-if="activeTab === 'fragment'" v-model="fragmentShader"></textarea><div v-if="error" class="error">{{ error }}</div></div>
</template><script setup>
import { ref, watch } from 'vue';const props = defineProps(['shader']);
const emit = defineEmits(['update']);const activeTab = ref('fragment');
const vertexShader = ref(props.shader.vertexShader);
const fragmentShader = ref(props.shader.fragmentShader);
const error = ref(null);// 应用更改
function applyChanges() {try {// 尝试编译验证const testMaterial = new THREE.ShaderMaterial({vertexShader: vertexShader.value,fragmentShader: fragmentShader.value});// 更新输出emit('update', {vertexShader: vertexShader.value,fragmentShader: fragmentShader.value});error.value = null;} catch (e) {error.value = `编译错误: ${e.message}`;}
}
</script>
7.5 预览面板
<!-- PreviewPane.vue -->
<script setup>
import { ref, onMounted, watch } from 'vue';
import * as THREE from 'three';
import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/addons/postprocessing/RenderPass.js';const props = defineProps(['effects']);
const canvasRef = ref(null);
const composer = ref(null);
const effectPasses = ref({});// 初始化场景
onMounted(() => {// 创建场景、相机、渲染器const renderer = new THREE.WebGLRenderer({ canvas: canvasRef.value });// ...场景初始化代码// 创建效果组合器composer.value = new EffectComposer(renderer);composer.value.addPass(new RenderPass(scene, camera));// 添加效果通道props.effects.forEach(effect => {addEffectPass(effect);});composer.value.addPass(new OutputPass());// 启动渲染循环animate();
});// 添加效果通道
function addEffectPass(effect) {let pass;switch(effect.type) {case 'bloom':pass = new UnrealBloomPass(/* 参数 */);break;case 'custom':pass = new ShaderPass(effect.shader);break;// 其他效果...}if (pass) {pass.name = effect.id;composer.value.addPass(pass);effectPasses.value[effect.id] = pass;}
}// 更新效果
function updateEffect(effect) {const pass = effectPasses.value[effect.id];if (!pass) return;// 更新参数switch(effect.type) {case 'bloom':pass.strength = effect.params.strength;pass.radius = effect.params.radius;pass.threshold = effect.params.threshold;break;case 'custom':pass.material = new THREE.ShaderMaterial({vertexShader: effect.shader.vertexShader,fragmentShader: effect.shader.fragmentShader});break;}
}// 移除效果
function removeEffect(effectId) {const pass = effectPasses.value[effectId];if (pass) {const index = composer.value.passes.indexOf(pass);if (index !== -1) {composer.value.passes.splice(index, 1);delete effectPasses.value[effectId];}}
}// 监听效果列表变化
watch(() => props.effects, (newEffects, oldEffects) => {// 找出新增效果const added = newEffects.filter(e => !oldEffects.some(old => old.id === e.id));// 找出移除效果const removed = oldEffects.filter(e => !newEffects.some(n => n.id === e.id));// 添加新效果added.forEach(effect => {addEffectPass(effect);});// 移除效果removed.forEach(effect => {removeEffect(effect.id);});// 重新排序（确保通道顺序正确）composer.value.passes.sort((a, b) => {const aIndex = newEffects.findIndex(e => e.id === a.name);const bIndex = newEffects.findIndex(e => e.id === b.name);return aIndex - bIndex;});
}, { deep: true });
</script>
8. 实战效果组合
8.1 赛博朋克风格
const cyberpunkPreset = [{type: 'bloom',params: { strength: 1.8, radius: 0.6, threshold: 0.3 }},{type: 'custom',shader: {vertexShader: `...`,fragmentShader: `uniform sampler2D tDiffuse;varying vec2 vUv;void main() {vec4 color = texture2D(tDiffuse, vUv);// 增强蓝色和紫色color.b *= 1.5;color.r = pow(color.r, 1.5);// 添加扫描线float scanline = mod(gl_FragCoord.y, 4.0) < 1.0 ? 0.8 : 1.0;color.rgb *= scanline;gl_FragColor = color;}`}},{type: 'vignette',params: { darkness: 0.6, offset: 0.8 }}
];
8.2 电影胶片风格
const filmPreset = [{type: 'colorCorrection',params: { saturation: 0.9, contrast: 1.2 }},{type: 'grain',params: { intensity: 0.05 }},{type: 'vignette',params: { darkness: 0.3, offset: 0.7 }}
];
8.3 水彩画风格
const watercolorPreset = [{type: 'blur',params: { radius: 2 }},{type: 'custom',shader: {fragmentShader: `uniform sampler2D tDiffuse;uniform vec2 resolution;varying vec2 vUv;void main() {vec2 uv = vUv;vec4 color = texture2D(tDiffuse, uv);// 边缘模糊vec4 blur = texture2D(tDiffuse, uv + vec2(0.005, 0.005));blur += texture2D(tDiffuse, uv + vec2(-0.005, 0.005));blur += texture2D(tDiffuse, uv + vec2(0.005, -0.005));blur += texture2D(tDiffuse, uv + vec2(-0.005, -0.005));blur /= 4.0;// 混合原始和模糊float edge = smoothstep(0.2, 0.8, length(color.rgb - blur.rgb));color = mix(color, blur, edge * 0.8);// 纸张纹理vec2 paperUV = uv * 5.0;vec4 paper = texture2D(paperTexture, paperUV);color.rgb *= paper.rgb * 1.2;gl_FragColor = color;}`}}
];
9. 常见问题解答
Q1：后期处理导致性能骤降怎么办？
- 减少通道数量（≤4个）
- 降低高开销效果质量（如SSAO采样数）
- 使用更小的渲染目标：
composer.setSize(window.innerWidth / 2, window.innerHeight / 2); - 分帧渲染不同效果
Q2：如何解决效果叠加顺序问题？
// 正确排序：
composer.addPass(renderPass); // 1. 基础渲染
composer.addPass(ssaoPass); // 2. SSAO
composer.addPass(bloomPass); // 3. 辉光
composer.addPass(colorPass); // 4. 色彩校正
composer.addPass(outputPass); // 5. 输出
Q3：WebGL: INVALID_OPERATION: useProgram: program not valid
- 检查着色器编译错误：
console.log(renderer.getProgramInfoLog(shaderProgram)); - 验证uniform变量是否匹配
- 检查纹理绑定
- 使用简单测试着色器逐步排查
10. 总结
通过本文，你已掌握：
- 后期处理管线核心原理
- 内置效果（Bloom/SSAO/Glitch）配置
- 自定义ShaderPass开发
- 高级特效（景深/运动模糊）实现
- 性能优化策略
- Vue3后期处理编辑器开发
- 实战效果组合案例
核心价值：Three.js后期处理系统通过GPU加速的效果通道链，为Web应用提供媲美影视级的视觉增强能力，结合Vue3的响应式管理，实现实时特效创作工作流。
下一篇预告
第十四篇：物理引擎集成：Cannon.js入门
你将学习：
- 刚体物理基础概念
- Cannon.js与Three.js集成
- 碰撞检测与响应
- 约束与关节系统
- 车辆与角色控制器
- 物理性能优化
- Vue3实现物理沙盒