UE数据大屏开发-Web+UE双向联动

UE数据大屏开发：Web+UE双向联动

先说结论：数字孪生的本质是"业务数据 + 空间可视化"，Web 擅长前者，UE 擅长后者。数据大屏的"数据"部分由前端开发，"三维联动"部分由 UE 开发，双方通过消息契约协作。真正的双向联动是"报表点击设备，三维场景聚焦；三维场景选中设备，报表更新"。

很多数字孪生项目一开始尝试用纯 UE 做所有界面，结果发现：设备树、属性面板、工单系统、报表统计、权限管理这些业务功能，用 UMG 开发效率极低，而且每次改版都要重新编译打包。最后团队不得不引入前端工程师，用 Web 重做业务层，UE 只负责三维场景。

WebNativeBrowser 是面向 UE 5.1–5.8 的高性能企业级跨平台 Web UI 插件，让 Web 数据大屏与 UE 三维场景在同一画面里无缝协作。

数字孪生项目的两类需求

业务数据类需求：

设备树、资产列表、属性面板；
实时告警、工单、巡检、事件记录；
趋势图、统计报表、地图、筛选条件；
登录、权限、流程和已有企业业务系统。

这些需求的共同特点：结构化数据、复杂交互、高频迭代。

空间可视化类需求：

园区、建筑、产线、设备和城市空间；
实时三维渲染、镜头、动画与空间关系；
Actor/UObject 状态、碰撞和场景交互。

这些需求的共同特点：空间关系、实时渲染、物理交互。

为什么 Web 适合业务数据层

1. 生态成熟：Web 前端有海量的组件库——表格、图表、表单、树形结构、地图、富文本。UMG 里没有现成的数据表格组件，需要自己实现虚拟滚动、排序、筛选、分页。而 Ant Design、Element Plus 等组件库，这些功能都是开箱即用的。

2. 开发效率高：前端工程师可以用 Vue/React 快速搭建页面，AI 也可以生成页面骨架。

3. 迭代成本低：Web 页面修改后，刷新即可看到效果，不需要重新编译 UE 项目。

4. 与现有系统对接：很多企业已经有 Web 端的业务系统（ERP、MES、SCADA 等），Web 页面可以直接调用现有 API。

为什么 UE 适合空间可视化层

1. 实时渲染能力：UE5 的 Nanite、Lumen、虚拟阴影贴图等技术，可以渲染大规模场景。

2. 空间交互能力：碰撞检测、射线检测、物理模拟、镜头控制。

3. 资产工作流：材质编辑器、动画蓝图、粒子系统，适合处理复杂的三维内容。

数据大屏应该由谁开发

模块	负责方	技术栈
图表、表格、地图	前端工程师	Vue/React + ECharts/AntV
布局、主题、响应式	前端工程师	CSS/Grid/Flex
数据请求、状态管理	前端工程师	Axios/Pinia
三维场景渲染	UE 工程师	UE5 蓝图/C++
镜头控制、高亮	UE 工程师	UE5 蓝图/C++
消息桥接	双方协商	WebNative.send / SendMessageToJS

关键约定：

// 消息契约示例
前端 → UE：Chart.Device.Click { deviceId: "device-008" }
UE → 前端：Scene.Device.Focus.Result { deviceId: "device-008", status: "running" }

双向联动的四个场景

场景 1：报表 → 三维场景

用户操作：在报表中点击某台设备。

期望效果：三维场景镜头聚焦到该设备，设备高亮显示。

// Web → UE
Chart.Device.Click { deviceId: "device-008", timestamp: 1234567890 }

// UE → Web
Scene.Device.Focus.Result { deviceId: "device-008", status: "running", temperature: 45 }

场景 2：三维场景 → 报表

用户操作：在三维场景中点击某台设备。

期望效果：报表自动滚动到该设备的数据行，显示详细数据。

// UE → Web
Scene.Device.Select { deviceId: "device-008", timestamp: 1234567890 }

// Web → UE
Chart.Device.Select.Result { deviceId: "device-008", data: {...} }

场景 3：报表筛选 → 三维场景

用户操作：在报表中修改筛选条件。

期望效果：三维场景中高亮符合条件的设备，不符合的变灰。

// Web → UE
Chart.Filter.Change { filter: { temperature: { gt: 50 } } }

// UE → Web
Scene.Filter.Result { matchedDevices: ["device-001", "device-003"], total: 2 }

场景 4：三维场景镜头 → 报表

用户操作：在三维场景中移动镜头。

期望效果：报表自动更新，显示当前视野内的设备数据。

// UE → Web
Scene.Camera.Move { position: {x:100, y:200, z:50}, direction: {x:0, y:1, z:0} }

// Web → UE
Chart.Camera.Update { visibleDevices: ["device-001", "device-002"], data: {...} }

技术实现要点

1. 消息契约要稳定

{
  "version": "1.0",
  "requestId": "req-123456",
  "functionName": "Chart.Device.Click",
  "messageBody": {
    "deviceId": "device-008",
    "timestamp": 1234567890
  }
}

version：消息契约版本号，便于后续升级；
requestId：请求 ID，用于追踪消息是否成功送达；
functionName：业务事件名称；
messageBody：业务数据。

2. 消息通道要高性能

双向联动涉及高频消息交互，消息通道的性能直接影响用户体验。

WebNativeBrowser 的消息通道性能：

指标	数据
单条消息延迟	< 1ms
10 万条消息	~220ms
每帧派发预算	默认 5000 条，上限 10 万条

3. 前端要避免高频 DOM 更新

双向联动可能产生高频消息（如镜头移动时每秒几十条），如果每条消息都更新 DOM，页面会卡。

// 合并状态，按帧或业务周期更新
let pendingUpdates = {};

WebNative.on("Scene.Device.Select", (messageBody) => {
  const data = JSON.parse(messageBody);
  pendingUpdates[data.deviceId] = data;
});

// 每 100ms 批量更新一次
setInterval(() => {
  if (Object.keys(pendingUpdates).length === 0) return;
  updateChart(pendingUpdates);
  pendingUpdates = {};
}, 100);

4. UE 端要校验消息

三维场景收到的消息应被视为外部输入，需要校验设备 ID、参数范围和用户权限。

void AMyActor::OnMessageReceived(const FString& FunctionName, const FString& MessageBody)
{
    if (FunctionName == "Chart.Device.Click")
    {
        TSharedPtr<FJsonObject> JsonObject;
        if (!FJsonSerializer::Deserialize(TJsonReaderFactory<>::Create(MessageBody), JsonObject))
            return;
        
        FString DeviceId = JsonObject->GetStringField("deviceId");
        if (!IsValidDeviceId(DeviceId))
            return;
        
        if (!HasPermissionToViewDevice(DeviceId))
            return;
        
        FocusCamera(DeviceId);
        HighlightDevice(DeviceId);
        
        FString Result = FString::Printf(TEXT("{\"ok\":true,\"deviceId\":\"%s\"}"), *DeviceId);
        SendMessageToJS("Scene.Device.Focus.Result", Result);
    }
}

一个典型的数字孪生架构

┌─────────────────────────────────────────────────────────┐
│                      Web 业务层                          │
│  Vue/React 页面：设备树、属性面板、工单、报表、权限       │
└─────────────────────────────────────────────────────────┘
                          ↓↑
              JS ↔ UE 消息通道（WebNativeBrowser）
                          ↓↑
┌─────────────────────────────────────────────────────────┐
│                      UE 场景层                           │
│  三维场景、镜头控制、Actor 状态、碰撞检测、动画           │
└─────────────────────────────────────────────────────────┘
                          ↓↑
              UE 蓝图/C++ 业务逻辑
                          ↓↑
┌─────────────────────────────────────────────────────────┐
│                      业务服务层                          │
│  数据库、API、AI 推理、账号、权限、长期数据存储           │
└─────────────────────────────────────────────────────────┘

WebNativeBrowser 在数字孪生中的角色

WebNativeBrowser 是面向 UE 5.1–5.8 的高性能企业级跨平台 Web UI 插件，在数字孪生场景中负责：

承载前端页面：Vue/React 数据大屏直接加载到 UE 中，和三维场景在同一画面；
GPU 直通渲染：图表和视频画面通过 GPU 共享内存直接进入 UE 渲染管线，无 CPU 拷贝；
高性能消息通道：前端和 UE 之间的消息延迟 < 1ms，10 万条消息 ~220ms，满足双向联动的高频消息需求；
透明交互：大屏面板之间的间隙可以穿透鼠标点击到三维场景；
跨平台统一：Windows / Linux x86_64 / Linux ARM64，同一套前端代码无需修改。

如果这篇对你有帮助，欢迎点赞收藏。关于 WebNativeBrowser 的完整文档和示例，可以访问我们的 GitHub 仓库：starTechnology1994/UEWebNativeBrowser

商务合作 / 授权咨询：startechnology1994@163.com

posted @ 2026-08-13 11:11 StarTechnology 阅读(5) 评论(0) 收藏举报

刷新页面返回顶部