28、WebRTC与元宇宙：3D场景集成、空间音频、虚拟化身、沉浸式体验
说实话，我第一次把WebRTC和3D场景结合起来的时候，心里也没底。那时候元宇宙概念刚火，老板说“咱们的视频会议能不能做成虚拟世界？”我心想，这不就是把视频贴到3D模型上吗？后来踩了不少坑，才慢慢摸出门道。
今天咱们就聊聊，怎么用WebRTC给元宇宙“注入灵魂”。说白了，就是让真人视频在3D空间里活起来。
28.1 3D场景集成：把视频贴到虚拟世界
元宇宙里最基础的需求是什么？让真人出现在虚拟场景中。这可不是简单的画中画，而是要把视频流“贴”到3D物体表面。
核心思路：用Three.js或Babylon.js创建3D场景，把WebRTC的video元素作为纹理，映射到3D平面或球体上。
我习惯用Three.js，因为它生态好，文档全。来看一个最简实现：
// 1. 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 2. 获取WebRTC视频流（假设已有peerConnection）
const video = document.createElement('video');
video.srcObject = remoteStream;
video.play();
// 3. 创建视频纹理
const texture = new THREE.VideoTexture(video);
const material = new THREE.MeshBasicMaterial({ map: texture });
// 4. 创建平面几何体，把视频贴上去
const geometry = new THREE.PlaneGeometry(4, 3);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
// 5. 动画循环
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();嗯，这里要注意：VideoTexture需要视频正在播放才能更新纹理。我曾经遇到过视频流已经来了，但纹理还是黑屏——就是因为忘了调video.play()。
避坑指南：移动端浏览器对自动播放有限制。建议在用户点击“加入会议”按钮后再创建VideoTexture，或者在play()前加一个用户手势事件。
28.2 空间音频：让声音有“位置感”
视频有了3D位置，音频呢？如果所有人声音都从同一个方向传来，那还叫什么元宇宙？
空间音频（Spatial Audio）就是解决这个问题的。它利用Web Audio API的PannerNode，根据声源在3D空间中的位置，动态调整左右声道音量、混响和延迟。
我个人习惯用Resonance Audio库，它是Google开源的，效果比原生PannerNode好不少。核心逻辑就三步：
- 把WebRTC的音频流接入AudioContext
- 创建PannerNode，设置声源位置
- 根据用户头部旋转更新声源方向
// 创建音频上下文
const audioCtx = new AudioContext();
// 获取远程音频流
const remoteStream = peerConnection.getRemoteStreams()[0];
const source = audioCtx.createMediaStreamSource(remoteStream);
// 创建空间音频节点
const panner = audioCtx.createPanner();
panner.panningModel = 'HRTF'; // 头部相关传输函数，效果更真实
panner.distanceModel = 'inverse';
panner.refDistance = 1;
panner.maxDistance = 100;
// 设置声源位置（比如在3D场景中的坐标）
panner.positionX.value = 2;
panner.positionY.value = 1.5;
panner.positionZ.value = -3;
// 连接：source -> panner -> 输出
source.connect(panner);
panner.connect(audioCtx.destination);注意：AudioContext在iOS上需要用户手势才能激活。我踩过这个坑——用户没点击任何按钮就加入会议，结果音频一直没声音。解决方案是在“加入会议”按钮的点击事件里调用audioCtx.resume()。
你想想看，如果会议室里有5个人，每个人的声音都从不同方向传来，是不是比传统视频会议有沉浸感多了？
28.3 虚拟化身：用WebRTC驱动3D模型
有些场景下，用户不想露脸（比如社恐），或者网络带宽不够传视频。这时候就需要虚拟化身（Avatar）了。
怎么做？用WebRTC的数据通道（DataChannel）传输用户的动作数据，然后驱动3D模型。说白了，就是把视频流换成骨骼动画数据。
我建议用MediaPipe做面部捕捉，它能在浏览器里实时检测人脸关键点，然后通过DataChannel发送给其他人：
// 发送端：检测面部关键点并发送
const dataChannel = peerConnection.createDataChannel('avatar');
const faceMesh = new FaceMesh({ locateFile: (file) => `https://cdn.jsdelivr.net/npm/@mediapipe/face_mesh/${file}` });
faceMesh.onResults((results) => {
if (results.multiFaceLandmarks) {
const landmarks = results.multiFaceLandmarks[0];
// 只发送关键点坐标，比视频流小得多
dataChannel.send(JSON.stringify({
type: 'face_landmarks',
data: landmarks.map(l => ({ x: l.x, y: l.y, z: l.z }))
}));
}
});
// 接收端：用数据驱动3D模型
dataChannel.onmessage = (event) => {
const msg = JSON.parse(event.data);
if (msg.type === 'face_landmarks') {
// 更新3D模型的blendShape权重
avatarMesh.updateBlendShapes(msg.data);
}
};关键点：DataChannel传输的是结构化数据，不是视频帧。一个面部关键点数据包大概只有2-3KB，而一帧视频至少几十KB。带宽节省非常明显。
我记得有一次做项目，用户带宽只有1Mbps，传视频卡成PPT。换成虚拟化身方案后，流畅度直接拉满。虽然看不到真人脸，但3D模型的表情同步延迟只有50ms，体验反而更好。
28.4 沉浸式体验：把一切串起来
前面讲了3D场景、空间音频、虚拟化身，怎么把它们整合成一个完整的沉浸式体验？
我画了一张架构图，帮你理清思路：
从图里能看出来，核心就是“采集-传输-渲染”三个环节。采集端把视频、音频、动作数据都塞进WebRTC，传输端用SFU做转发，渲染端再根据数据类型做不同处理。
这里有个经验：不要把视频流和动作数据混在一起。视频走媒体轨道，动作数据走DataChannel，分开处理。否则一旦网络抖动，视频卡顿会连带影响化身同步。
我的建议：如果用户带宽足够（>5Mbps），优先用视频流+空间音频，真实感最强。带宽不足时，自动降级为虚拟化身+空间音频。这个降级逻辑我一般在iceConnectionState变化时触发检测。
28.5 性能优化：别让3D场景拖垮浏览器
3D场景+WebRTC，对浏览器来说是个不小的负担。我遇到过几次内存泄漏，场景越跑越卡。总结几个关键点：
- 纹理复用：多个用户的视频纹理不要重复创建，用纹理数组管理
- LOD（细节层次）：距离远的用户用低面数模型，近的用高面数
- 音频池：空间音频节点不要无限创建，最多同时激活8-10个PannerNode
- 帧率控制：3D渲染帧率可以降到30fps，视频流保持60fps
我曾经在一个项目里，同时渲染了12个人的视频纹理，结果Chrome直接崩了。后来加了纹理复用和LOD，稳定运行在40fps左右。
嗯，今天就聊到这儿。WebRTC和元宇宙的结合，说白了就是把传统视频会议从“平面”升级到“立体”。3D场景给视觉，空间音频给听觉，虚拟化身给社交存在感——这三样凑齐了，沉浸感自然就来了。