如何在网页中嵌入UE/Unity/WebGL程序，并与网页端通信
在数字孪生可视化场景中，UE开发的高精度大场景程序，通常需要与前端网页通信实现数据的传递，并且经过Web化后，更需要与已有业务系统进行对接。像素流提供了Web化的一种技术实现方式，但是在实际项目交付过程中，存在数据通信不畅、与系统对接和二次开发能力有限等诸多限制。商业化实时云渲染产品，将行业通用需求封装成功能组件，供开发者调用。
以LarkXR实时云渲染平台为例，初步介绍如何在网页中嵌入UE引擎三维场景，并与网页端通信。
1. 3D应用数据通道
数据通道功能组件是用来实现客户端与应用之间的双向通信的，在数字孪生、展览展示、元宇宙等场景中应用非常广泛。图示为绿色双向箭头，代表在我们云端与客户端之间的虚拟通道，为三维应用建立快速通道。在这里，我们云端处理高帧率、高清晰度的三维应用，客户端处理业务流程及其他渲染。
使用本功能前，请确保授权码已开通“数据通道”权限。演示链接如下：https://www.pingxingyun.com:8035/
使用步骤：
- 集成数据通道到应用
- GitHub下载地址
- UE接入数据通道、UE蓝图接入数据通道
- Unity接入数据通道
- C++ Demo
【注意】如出现UE开发应用使用数据通道组件，由应用向客户端传递字符串缺失问题时，注意需要进行utf-8编码。
int UPXYComponent::PXY_Client_SendText(FString SendData)
{
int sendsize;
std::string MyStdString(TCHAR_TO_UTF8(*SendData));
sendsize = lr_client_send(DATA_STRING, MyStdString.c_str(), MyStdString.size());
return sendsize;
}
2. WebGL数据通道
将LarkXR升级到V3.3.2.6及以上版本，就可以使用WebGL数据通道功能组件。步骤分为：
2.1 初始化数据通道
在WebGL页面加载完成后，需要初始化数据通道。此函数会调用 window.larkxr_dc_init() 方法，完成数据通道的初始化。
2.2 接收文本数据
当用户端页面发送文本数据时，页面会调用 onDcTxtData 函数。此函数会将接收到的文本数据显示在WebGL页面上的指定 div 元素中。
2.3 接收TaskId
当数据通道连通，WebGL页面会调用 onTaskStatus 函数。此函数会接收到TaskId参数。
2.4 发送消息到用户端页面
WebGL页面上有一个按钮，点击该按钮会调用 larkxr_dc_send 函数，将消息发送到用户端页面。以下是页面的WebGL HTML 结构 Demo：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>LarkXR Data Channel Example</title><style>.fixed-size-div {width: 100px;height: 100px;background-color: lightblue;display: flex;justify-content: center;align-items: center;font-size: 14px;}</style></head><body><h1>LarkXR Data Channel Example</h1><button onclick="larkxr_dc_send('Hello from WebGL page!')">发送消息"Hello from WebGL page!"到用户端页面</button><div class="fixed-size-div">This is the target div，接收用户端页面发送的数据:<span id="targetDiv"></span></div><script>// 初始化数据通道function larkxr_init() {console.log("Data Channel Initialized");window.larkxr_dc_init();}// 接收用户端页面发送的文本数据function onDcTxtData(data) {console.log("Received text data from user end:", data);// 获取目标 div 元素const targetDiv = document.getElementById('targetDiv');// 将参数值赋值给 div 的 innerTexttargetDiv.innerText = data;}// 接收当前的taskIdfunction onTaskStatus(taskId) {console.log("Received task status with taskId:", taskId);}// 页面加载完成后调用初始化函数window.onload = function () {larkxr_init();};</script></body></html>
2.5 实现WebGL数据通道
1. WebGL 页面地址设置到 LarkXR
根据 LarkSR 帮助手册 3.3，添加 WebGL 程序。在手册中找到相关章节，按照说明填写 WebGL 页面的地址。
2. 使用 WebSDK 实现数据通道
- 下载源码 从[GitHub - ParaverseTechnology/lark_sr_websdk_demos 下载 WebSDK 源码。此项目提供了如何使用 LarkSR WebSDK 创建云渲染客户端的简单介绍。
- 参考手册 详细操作请参考 [LarkSR WebClient SDK 文档]。文档中包含了如何安装、使用 SDK 以及如何实现数据通道的具体步骤。
本文已首发于官网：https://www.pingxingyun.com/