UEWebNativeBrowser：高性能跨平台WebUI插件
如果你在 UE 项目中需要复杂表格、图表、表单、富文本、数据大屏、地图、视频、iframe 或高频改版的业务界面，UMG 和 Slate 往往不是最高效的选择。Web 技术栈有成熟的组件库、工程化工具和 AI 生成能力，但把现代 Web 项目稳定地嵌入 UE 并交付给客户，中间有大量工程问题需要解决。
WebNativeBrowser 就是为了解决这些问题而生的。 关于 WebNativeBrowser 的完整文档和示例，可以访问我们的 GitHub 仓库：starTechnology1994/UEWebNativeBrowser
一句话定位
WebNativeBrowser 是面向 Unreal Engine 5.1–5.8 的高性能企业级跨平台 Web UI 与 Chromium 浏览器插件，让 Web 技术栈与 UE 三维渲染在同一画面里无缝协作。
支持平台：Windows x64 · Linux x86_64 · Linux ARM64 · GLIBC ≥ 2.17
核心能力一览
1. 高性能 GPU 加速渲染
| GPU 直通渲染 | 基于 GPU 共享内存的跨进程纹理传输，画面直通 UE5 渲染管线，无 CPU 拷贝开销 |
| 多渲染后端 | Windows D3D11/D3D12、Linux Vulkan，多渲染后端自适应 |
| 零显存浪费 | 持久纹理复用，每帧零额外显存分配 |
| 智能帧率 | 静态画面自动暂停渲染；动态内容按需唤醒；视频自适应匹配帧率 |
| 帧率上限 | 最高 120 FPS |
这不是"能显示网页"，是"能在客户现场跑三天不卡不崩"。
2. 极致性能的双向通信
| 单条消息延迟 | < 1ms |
| 10 万条消息 | ~220ms |
| 单条消息上限 | JS→UE 4 MiB / UE→JS 2 MiB |
| 每帧派发预算 | 默认 5000 条，上限 10 万条 |
通信架构：
// JS → UE：网页发消息
WebNative.send("Scene.Device.Select", {
deviceId: "device-008",
timestamp: Date.now()
});
// UE → JS：UE 回复
// 蓝图调用 SendMessageToJS("Scene.Device.Select.Result", '{"ok":true}')
// JS 订阅回调
WebNative.on("Scene.Device.Select.Result", (messageBody) => {
const result = JSON.parse(messageBody);
console.log(result.ok);
});
- 支持字符串、数字、布尔、对象自动序列化，业务层不需要提前 JSON.stringify()；
- 消息自动回调到 UE 主线程，不需要自己做线程同步；
- JS 端 send / on / off 完整生命周期，组件卸载时解除监听。
3. 跨平台统一体验
| Windows 10+ | x64 | D3D11 / D3D12 | ✅ |
| Linux（Ubuntu/麒麟/UOS） | x86_64 | Vulkan | ✅ |
| Linux（国产 ARM64） | ARM64 | Vulkan | ✅ |
| 国产 GPU（砺算/摩尔线程） | — | — | ✅ 专项适配 |
- 同一份前端代码，不需要为不同平台重复适配；
- Linux 最低 GLIBC 2.17，覆盖 CentOS 7 等老系统；面向公开客户建议 GLIBC 2.31+。
4. 完整的现代 Web 能力
基于 Chromium 内核，不是阉割版：
- WebRTC、WebGL 2.0、MediaSource、Canvas
- 4K 视频，最高 8K 应用场景
- Widevine DRM 受保护媒体
- WebSocket、requestAnimationFrame
- Vue、React、普通 HTML 全部兼容
5. 透明交互与鼠标穿透
网页的透明区域可以让鼠标点击穿透到 UE 场景：
- bEnableMouseTransparency：开启 alpha 命中测试
- MouseTransparencyAlphaThreshold：可配置透明像素判定阈值（0~255）
- 典型场景：半透明 HUD 面板，面板空白处点击可直接操作场景中的对象
透明背景配置：
[WebNative]
cef_args=show-background-color background-color=0x00000000
html, body { background: transparent; }
6. 从网页到 UE 场景的拖拽/点击放置
用户可以从网页资产库点击或拖拽资源，直接在 UE 场景中预览和放置：
适用场景：游戏道具放置、数字孪生设备部署、建筑目录拖放、展厅交互。
7. 中文输入（Linux 重点产品能力）
在国产 Linux 上完成完整的中文输入验证：
- 中文拼音连续输入、候选词选择
- 中英文切换、删除、光标移动
- 复制、粘贴、全选
- 普通输入框、密码框、textarea、Vue/React 受控组件
- 多浏览器控件焦点切换
已完成砺算、摩尔线程等国产 GPU 环境专项适配。
8. 文件上传下载
- <input type="file"> 弹出文件选择窗口（Windows 系统原生 / Linux 运行时窗口）
- 下载进度回调：webNativeDownloadProgress / webNativeDownloadComplete / webNativeDownloadFailed
- 内置下载进度提示，可关闭由业务自行绘制 UI
9. 18 项权限控制
| 麦克风 | allow_microphone | ✅ |
| 摄像头 | allow_camera | ✅ |
| 屏幕捕获 | allow_desktop_capture | ✅ |
| 剪贴板 | allow_clipboard | ✅ |
| 地理位置 | allow_geolocation | ✅ |
| 桌面通知 | allow_notifications | ✅ |
| 本地网络 | allow_local_network_access | ✅ |
| 文件系统 | allow_file_system_access | ✅ |
| DRM 受保护媒体 | allow_protected_media | ✅ |
| … 等 18 项 |
全局策略（allow / deny / prompt）+ 单项开关两层控制。面向公开客户的产品可以按业务需要收紧权限。
10. 多控件、多实例与多开
- 同一个 UE 应用中创建多个 WebNativeBrowser 控件
- 同一个打包应用同时启动多个独立实例
- 多实例缓存/日志隔离
- GPU 共享纹理并发控制
11. 调试与运维
- 内置 DevTools（Ctrl+F12 或 ToggleDevTools()）
- 远程调试端口（默认 9223–9262，Chrome/Edge 访问 http://127.0.0.1:<端口>）
- 内置性能监视器：实时 FPS / 内存 / 渲染模式叠加层
- CEF 日志和 UE 日志分离
- ini 配置文件统一管理所有运行期参数
12. Pixel Streaming 云渲染支持
Web UI 作为 UE 最终画面的一部分输出，随 Pixel Streaming 传输到远端浏览器：
- 云端数字孪生
- 远程工业控制台
- 在线展厅
- 集中式 GPU 工作站
快速上手：10 分钟跑通完整链路
第一步：安装插件
YourProject/
├─ Plugins/
│ └─ WebNativeBrowser/ # 完整插件目录
└─ YourProject.uproject
⚠️ 插件目录名必须是 WebNativeBrowser，请先重命名再放入项目。
第二步：创建网页
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<style>
html, body { margin: 0; min-height: 100vh; background: transparent; }
body { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 32px; color: #f5f5f5; font-family: -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif; }
h1 { font-size: 64px; color: #ffffff; }
button { font-size: 32px; padding: 16px 48px; border: none; border-radius: 8px; background: #2d8cf0; color: #fff; cursor: pointer; }
</style>
</head>
<body>
<h1 id="title">Hello Unreal Engine</h1>
<button id="send">发送到 UE</button>
<script>
document.getElementById("send").addEventListener("click", () => {
WebNative.send("OnHello", { text: "来自网页的消息" });
});
WebNative.on("HelloResult", (messageBody) => {
const result = JSON.parse(messageBody);
document.getElementById("title").textContent = result.text;
});
</script>
</body>
</html>
第三步：在 UE 中加载
第四步：运行
- 页面显示在三维场景中
- 点击按钮，UE 收到 OnHello
- UE 回复后，网页标题变为"UE 已经收到消息"
加载网页 + 双向通信的完整闭环已经跑通。
完整能力对比
| 渲染 | GPU 直通，智能帧率，120 FPS | CPU 软渲染 |
| 通信 | FunctionName + MessageBody，10 万条/220ms | BindUObject，性能有限 |
| 平台 | Win + Linux x86_64 + Linux ARM64 | 仅 Windows |
| 中文输入 | 完整输入法兼容矩阵 | 未验证 |
| 透明交互 | alpha 命中测试 + 鼠标穿透 | 不支持 |
| 场景交互 | 拖拽/点击放置到 UE 场景 | 不支持 |
| 文件 | 上传/下载/进度回调 | 有限 |
| 权限 | 18 项权限开关 + 兜底策略 | 无 |
| 多开 | 多控件 + 多实例 + 隔离 | 不支持 |
| 调试 | DevTools + 性能监视器 + 日志分离 | 有限 |
| 配置 | ini 配置统一管理 | 有限 |
| 云渲染 | Pixel Streaming 组合支持 | 未验证 |
适用场景
| 数字孪生 | 设备树、属性面板、工单、报表 | 三维场景、镜头、碰撞 |
| 游戏工具 | 道具库、活动页、商城 | 角色、资产、联网逻辑 |
| AI 应用界面 | 对话、生成结果展示 | 场景命令执行 |
| 数据大屏 | 图表、表格、地图 | 三维联动、空间关系 |
| 展厅/控制台 | 业务流程、权限、登录 | 空间展示、动画 |
平台与兼容性
| Unreal Engine | 5.1 – 5.8（每个版本独立包） |
| Windows | Win64，Windows 10+ |
| Linux | x86_64 / ARM64，最低 GLIBC 2.17 |
| 浏览器内核 | Chromium 内核 |
| 渲染后端 | D3D11 / D3D12（Windows）、Vulkan（Linux） |
| 最大帧率 | 120 FPS |
| 国产 GPU | 已完成砺算、摩尔线程专项适配 |
| 编程语言 | C++17 |
获取方式
- GitHub 仓库：starTechnology1994/UEWebNativeBrowser
- 完整文档（Wiki）：https://github.com/starTechnology1994/uewebbrowser/wiki
- 问题反馈：https://github.com/starTechnology1994/uewebbrowser/issues
- 商务合作 / 授权咨询：startechnology1994@163.com
如果这篇对你有帮助，欢迎点赞收藏。WebNativeBrowser 支持 UE 5.1–5.8，覆盖 Windows / Linux x86_64 / Linux ARM64，已完成砺算、摩尔线程等国产 GPU 专项适配。
