三维可视化融合系统 | 像素流篇
本文档的主要目的是为了读者能够快捷地了解本软件从虚幻引擎到前端渲染的基本架构。我们的数字大桥利用Autodesk系列软件进行三维建模，再通过虚幻引擎（UE）渲染，最后将视频流通过WebRTC技术实时传输到浏览器前端展示。在UE4中使用PixelStream功能将渲染画面发送至前端页面。
像素流与WebRTC
像素流是虚幻引擎利用WebRTC技术将视频流实时传输到浏览器的流程，像素流由3个部分组成：
- 发送方：虚幻引擎后端的像素流官方插件，用于发送实时视频流
- 中间方：用NodeJS启动的信令服务器，用于在发送方和接收方之间转发信令，协助建立P2P
- 接收方：浏览器前端用JavaScript调用WebRTC的功能，接受视频流
像素流是WebRTC的一个子集，因为WebRTC包含mesh、sfu、mcu等多种复杂架构，但数字大桥使用的像素流只用到了最简单的p2p架构，即一个虚幻引擎后端向多个浏览器前端传输像素流。3个端的启动方式如下：
信令服务器启动参数 | ||
|---|---|---|
选项 | 默认值 | 作用 |
player | 88 | 浏览器用户端口 |
unreal | 8888 | 虚幻引擎端口 |
token | insigma | WebSocket认证凭证 |
limit | 4 | 最大用户数量 |
虚幻引擎启动参数 | ||
|---|---|---|
选项 | 类型 | 作用 |
ForceRes | void | 强制分辨率，结合ResX和ResY使用 |
AudioMixer | void | 允许传输音频 |
RenderOffScreen | void | 后台运行 |
graphicsadapter | 自然数 | 选择GPU |
AllowPixelStreamingCommands | void | 允许调试像素流 |
PixelStreamingEncoderRateControl | 枚举{CBR, VBR} | 常码率或可变码率 |
PixelStreamingURL | 字符串 | 信令服务器URL |
前端启动的2种方式 | |
|---|---|
JavaScript | import "PixelStream.js";const ps = document.createElement("video", { is: "pixel-stream" });ps.setAttribute("signal", "ws://127.0.0.1:88/insigma");document.body.appendChild(ps); |
HTML | <script src="PixelStream.js"></script><video is="pixel-stream" signal="ws://127.0.0.1:88/insigma"></video> |