15、AI虚拟背景：BodyPix/MediaPipe自拍分割、背景模糊/替换/AR叠加、性能优化（WebGL2+GPU）

各位同学，今天我们来聊聊AI虚拟背景。说实话，这个功能现在几乎成了视频会议和直播的标配。Zoom、腾讯会议、抖音都在用。但你知道底层是怎么实现的吗？

我最早接触这个，是在2019年做远程医疗项目的时候。那时候患者在家开视频问诊，背景乱糟糟的，医生根本看不清。我们想做个背景替换，结果发现浏览器端的性能是个大坑。嗯，今天就把这些经验分享给你们。

15.1 自拍分割：BodyPix vs MediaPipe

虚拟背景的第一步，是把人和背景分开。这个技术叫「自拍分割」（Selfie Segmentation）。目前主流方案有两个：Google的BodyPix和MediaPipe。

特性	BodyPix	MediaPipe
模型大小	约4MB（MobileNet）	约2.5MB
分割精度	高（支持多人）	较高（单人优化）
推理速度	30-50ms（GPU）	15-25ms（GPU）
WebGL支持	原生支持	需额外适配
维护状态	已停止更新	活跃维护

我个人习惯用MediaPipe。为什么？因为它的模型更轻，推理速度更快。而且MediaPipe团队一直在更新，Bug修复很及时。BodyPix虽然精度不错，但Google已经不怎么维护了。

15.2 背景模糊：高斯模糊与快速实现

背景模糊是最简单的虚拟背景处理。说白了，就是把分割出来的背景区域做模糊处理。

最简单的做法是用Canvas的filter属性：

// 获取分割后的mask
const mask = await segmentPerson(videoFrame);

// 创建离屏Canvas
const offscreen = document.createElement('canvas');
const ctx = offscreen.getContext('2d');

// 绘制原始帧
ctx.drawImage(videoFrame, 0, 0);

// 应用高斯模糊
ctx.filter = 'blur(20px)';
ctx.drawImage(videoFrame, 0, 0);

// 用mask恢复人物区域
ctx.globalCompositeOperation = 'destination-in';
ctx.drawImage(mask, 0, 0);

但这里有个坑。我遇到过：直接用Canvas filter做模糊，在移动端会卡成PPT。为什么？因为Canvas的filter是CPU计算的，没有走GPU。

15.3 背景替换：绿幕效果与AI抠图

背景替换比模糊复杂一些。你需要把分割出来的人物，合成到新的背景上。

核心流程是这样的：

1. 获取视频帧
2. 运行分割模型，得到人物mask
3. 用mask做alpha混合
4. 合成到新背景

代码实现：

// 使用MediaPipe自拍分割
const model = await selfieSegmentation.create({
  basePath: '/models/',
  modelType: 'general'
});

// 处理每一帧
async function processFrame(video, canvas) {
  const result = await model.send({image: video});
  
  // result.segmentationMask 是人物mask
  const mask = result.segmentationMask;
  
  // 创建合成上下文
  const ctx = canvas.getContext('2d');
  
  // 1. 绘制新背景
  ctx.drawImage(backgroundImage, 0, 0, canvas.width, canvas.height);
  
  // 2. 用mask作为alpha通道，绘制人物
  ctx.globalCompositeOperation = 'source-over';
  ctx.drawImage(video, 0, 0);
  
  // 3. 应用mask
  ctx.globalCompositeOperation = 'destination-in';
  ctx.drawImage(mask, 0, 0);
}

15.4 AR叠加：在虚拟背景上添加特效

AR叠加是虚拟背景的进阶玩法。比如在人物头上加个帽子，或者背景里飘点花瓣。

实现思路：

• 用分割模型定位人物位置
• 在人物周围叠加3D或2D特效
• 特效跟随人物移动

我做过一个项目，在视频会议里给每个人头上加个「能量条」。效果挺有意思的，但要注意：AR叠加会消耗额外的GPU资源。如果设备性能不够，建议降低特效复杂度。

15.5 性能优化：WebGL2 + GPU加速

这是今天的重头戏。虚拟背景最怕什么？卡顿。尤其是低端手机，一开背景替换，帧率直接掉到15fps以下。

怎么优化？核心思路就一条：把计算从CPU搬到GPU。

15.5.1 使用WebGL2纹理

WebGL2比WebGL1多了很多好东西。比如纹理的直接操作、更灵活的着色器。

// 创建WebGL2上下文
const gl = canvas.getContext('webgl2');

// 上传视频帧到纹理
const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, video);

// 在着色器里做背景替换
const vertexShader = `
  attribute vec2 a_position;
  varying vec2 v_texCoord;
  void main() {
    gl_Position = vec4(a_position, 0.0, 1.0);
    v_texCoord = a_position * 0.5 + 0.5;
  }
`;

const fragmentShader = `
  precision highp float;
  uniform sampler2D u_video;
  uniform sampler2D u_mask;
  uniform sampler2D u_background;
  varying vec2 v_texCoord;
  
  void main() {
    vec4 videoColor = texture2D(u_video, v_texCoord);
    vec4 maskColor = texture2D(u_mask, v_texCoord);
    vec4 bgColor = texture2D(u_background, v_texCoord);
    
    // 根据mask混合
    float alpha = maskColor.r;
    gl_FragColor = mix(bgColor, videoColor, alpha);
  }
`;

15.5.2 降低模型推理频率

分割模型不需要每帧都跑。为什么？因为视频帧之间的变化很小。

我建议的策略：

• 每3-5帧跑一次分割模型
• 中间帧用上一帧的mask做光流插值
• 如果检测到人物快速移动，临时提高推理频率

这个优化能减少70%的模型推理开销。我在项目中实测过，效果非常明显。

15.5.3 降低分辨率

分割模型不需要全分辨率。把视频缩小到256x256再跑模型，精度几乎不变，但速度翻倍。

// 创建低分辨率canvas
const smallCanvas = document.createElement('canvas');
smallCanvas.width = 256;
smallCanvas.height = 256;
const smallCtx = smallCanvas.getContext('2d');

// 每帧先缩小再推理
smallCtx.drawImage(video, 0, 0, 256, 256);
const mask = await model.send({image: smallCanvas});

// 把mask放大回原分辨率
// 用WebGL2纹理缩放，比Canvas快很多

15.6 整体架构图

下面这张图展示了整个虚拟背景系统的核心流程。从视频采集到最终渲染，每一步都经过了精心设计。

15.7 实战建议与避坑

最后，分享几个我在项目中踩过的坑：

• 内存泄漏：WebGL纹理用完一定要释放。我曾经因为忘记gl.deleteTexture()，导致页面运行10分钟后内存暴涨到2GB。
• 兼容性：MediaPipe在Safari上需要额外配置WebAssembly。建议用feature detection做降级处理。
• 功耗：移动端开虚拟背景，电池掉得飞快。建议在低电量时自动降低分割精度或帧率。

好了，这一章的内容就到这里。虚拟背景看起来简单，但真正做好，需要理解分割模型、WebGL渲染、性能优化等多个领域。希望今天的分享能帮你少走弯路。