基于WebRTC技术实现Web端的三维呈现和互操作
UE4（Unreal Engine 4）是目前世界上最知名、最顶尖的3D游戏引擎，UE4的画质效果完全达到3A游戏大作的水准。本文主要研究如何基于WebRTC技术实现Web端的三维呈现和互操作。
目录 | 按时空性能对通讯场景分类WebRTC底层原理简介虚幻引擎像素流的RTC架构单人模式：计算与显示分离多人模式：分布式or中心化边缘计算：前后端分离像素流优化 |
|---|
- 按时空性能对通讯场景分类
- WebRTC底层原理简介
- 虚幻引擎像素流的RTC架构
- 单人模式：计算与显示分离
- 多人模式：分布式or中心化
- 边缘计算：前后端分离
- 像素流优化
按时空性能对通讯场景分类
如果按照时间性能和空间性能（数据量）这2个维度对所有网络通讯应用进行分类，大致可以分为3类：常规通讯、即时（消息）通讯、即时音视频通讯。
类型 | 时间要求 | 数据量 | 场景 | |
|---|---|---|---|---|
1 | 通讯 | 低 | 小 | HTTP网页、文件传输、电子邮件 |
2 | 即时通讯 | 高 | 小 | 聊天室、电话、网络游戏 |
3 | 即时音视频通讯 | 高 | 大 | 视频通讯、远程桌面、3D像素流 |
这3类app对性能的要求递增，很显然WebRTC是为了解决第3类应用场景。此类通讯的难度最大，单位时间内传递的数据量巨大，同时要求低延迟。通常，第三类应用涵盖前两类，比如视频会议室内可以发送文字，所以WebRTC既支持MediaStreams也支持DataChannel。
WebRTC底层原理简介
WebRTC是一个重量级的开源软件，光对外提供的API接口就非常复杂。WebRTC的底层原理可以分成若干部分，其中最主要的3个核心模块分别是对等连接、压缩算法、通讯协议。
WebRTC | 功能 | 涉及学科 |
|---|---|---|
对等体连接 | 通过ICE-agent完成网络层的点到点UDP连接，完成对NAT/防火墙的打洞，定义p2p信令通道的序列化格式 | 图论 |
音视频压缩 | 音视频压缩算法，包括H.264/5和VP8/9编码 | 信息论 |
通讯协议 | 在传输层之上的流媒体通信协议RTP（RTCP），实时流量控制、状态控制、数据加密 | 控制论 |
即时通讯技术要求最低的延迟，通讯数据都是临时生成，没有缓冲的机会，需要在最短的时间内完成消息传递同时还要保证安全性，所以即时通讯app的难度大于普通的app。比即时通讯更困难的场景是即时音视频通讯。目前市面上最成熟的音视频技术是WebRTC，从功能、性能、安全性考虑，WebRTC主要为我们做了很多事情：
- 功能：开源、回声消除/降噪、支持媒体流和常规消息
- 空间性能：音视频压缩、流量控制
- 时间性能：UDP传输、p2p通讯
- 安全性：数据加密、外设用户授权
WebRTC全部的应用场景和注意事项还包括基于WebSocket的房间控制与认证服务、多人RTC拓扑架构的选择、私有IP泄露问题等，但本文主要研究WebRTC在UE4引擎中的应用，所以不谈这些内容。
虚幻引擎像素流的RTC架构
虚幻引擎的像素流（pixel streaming）支持将某个摄像机（不是物理摄像头）的实时画面通过WebRTC协议发送到计算机网络上的其他设备，并接收对方发来的媒体流或数据流（DataChannel）。
UE4像素流只提供了这几样东西：摄像机的媒体流接口、WebRTC引擎插件、信令/Web服务程序、前端配合像素流的JS库。至于如何搭配使用这些功能来满足不同的应用场景，需要我们来设计不同的RTC架构。伴随着不同RTC架构的是3种常用的服务器：
- Web服务：用于提供前端静态资源，中心化管理、认证。
- ICE服务：用于NAT穿透/中继的STUN/TURN服务，内网则不需要。
- 信令服务：用于peer之间交换协商IP地址、端口号、协议格式等信息。
虚幻引擎提供了Web服务和信令服务，剩下2个服务需要我们自己搭建，通常这3个服务位于同一台服务器上的不同端口。ICE服务可以使用开源的Coturn或者免费的公共服务器；Web服务则可使用任何一个http服务器；信令服务则推荐用WebSocket协议开发。不同的RTC架构也分单人模式和多人模式。
单人模式：计算与显示分离
一般情况，3D游戏引擎将cpu/显卡计算好的像素流通过DP/HTMI系统总线直接传导至显示器，这样看来，所有的过程发生在同一台电脑上；但基于WebRTC的像素流技术让视频的计算和显示发生在由计算机网络相连的不同设备上，这种情况下，一台机器运行引擎，另一台机器显示画面。除此之外还有一个重要区别：由于计算机网络的带宽远小于数据总线，还要保证网络安全，像素流在机器间的传输必须经过压缩和加密，这无疑给该项技术增加了许多难度，好在，WebRTC本身就支持媒体流的压缩和加密，这也是虚幻引擎选择WebRTC的原因。
多人模式：分布式or中心化
在一般的多人模式中，比如开放世界游戏中2个角色相遇：每个终端都运行UE4，然后通过服务器交换角色数据。全程没有WebRTC和像素流的参与，只有普通的UDP消息交换，如下图所示（一般网络游戏为了反外挂，不采用p2p通讯）。
但是这种场景需要每个客户端都拥有足够运行UE4的硬件条件，为了让更多的低端设备也能体验UE4的高清画质，就需要采用像素流的架构了。在多人像素流架构中，UE4运行在服务器上，客户端只要准备WebRTC软件（浏览器）和高清显示器即可，如下图所示。
边缘计算：前后端分离
在Web行业，以前所有的页面都是在服务端渲染（SSR），后来为了分担服务器的压力，2010年左右开始了前后端分离运动：大量计算资源被运送到前端，让前端承担更多的业务逻辑、UI渲染等工作。
在游戏行业的像素流架构下，为了减轻UE4服务器的计算压力，也可以将部分简单的计算任务放到前端，这些任务主要包括和3D引擎无关的UI界面、业务逻辑，让UE4服务器专心渲染3D。
- UI界面：利用浏览器的HTML和JavaScript引擎来自定义2D的UI界面，比如游戏菜单和HUD。
- 边缘计算：将尽可能多的可以预处理的程序放在前端计算，再将计算好的结果送给后端，比如计时器、数据验证（包括判断合法输入）等工作。
像素流优化
并不是每时每刻都需要传输100%的画质，可以按需对像素流的分辨率（空间）和帧率（时间）进行调整，以节省资源。在WebRTC、像素流API、开发者这3个层面需要考虑不同的优化方案。
- WebRTC会自动地根据网络带宽等情况进行流量控制，码率调整。
- 前端AFK接口检测用户在线状态，后端像素流API可以检测所有的连接并通过冻帧等手段限制像素流。
- 开发者需根据视频窗口的尺寸变化动态调整WebRTC分辨率，在必要时暂停像素流（如切入菜单），以及在偏静态场景中主动降低帧速。
<完>
