WebNativeBrowser：UE与Web技术栈无缝协作加快你的开发

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. 极致性能的双向通信指标数据单条消息延迟 1ms10 万条消息~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 → JSUE 回复// 蓝图调用 SendMessageToJS(Scene.Device.Select.Result, {ok:true})// JS 订阅回调WebNative.on(Scene.Device.Select.Result,(messageBody){constresultJSON.parse(messageBody);console.log(result.ok);});支持字符串、数字、布尔、对象自动序列化业务层不需要提前JSON.stringify()消息自动回调到 UE 主线程不需要自己做线程同步JS 端send/on/off完整生命周期组件卸载时解除监听。3. 跨平台统一体验平台架构渲染后端状态Windows 10x64D3D11 / D3D12✅LinuxUbuntu/麒麟/UOSx86_64Vulkan✅Linux国产 ARM64ARM64Vulkan✅国产 GPU砺算/摩尔线程——✅ 专项适配同一份前端代码不需要为不同平台重复适配Linux 最低 GLIBC 2.17覆盖 CentOS 7 等老系统面向公开客户建议 GLIBC 2.31。4. 完整的现代 Web 能力基于Chromium 内核不是阉割版WebRTC、WebGL 2.0、MediaSource、Canvas4K 视频最高 8K 应用场景Widevine DRM 受保护媒体WebSocket、requestAnimationFrameVue、React、普通 HTML 全部兼容5. 透明交互与鼠标穿透网页的透明区域可以让鼠标点击穿透到 UE 场景bEnableMouseTransparency开启 alpha 命中测试MouseTransparencyAlphaThreshold可配置透明像素判定阈值0~255典型场景半透明 HUD 面板面板空白处点击可直接操作场景中的对象透明背景配置[WebNative] cef_argsshow-background-color background-color0x00000000html, body{background:transparent;}6. 从网页到 UE 场景的拖拽/点击放置用户可以从网页资产库点击或拖拽资源直接在 UE 场景中预览和放置网页发送资源 ID 和放置命令UE 调用SetFocusToGameViewport()切换输入焦点DeprojectCursorToWorld()将光标反投影到世界空间项目蓝图/C 执行射线检测、预览、放置适用场景游戏道具放置、数字孪生设备部署、建筑目录拖放、展厅交互。7. 中文输入Linux 重点产品能力在国产 Linux 上完成完整的中文输入验证中文拼音连续输入、候选词选择中英文切换、删除、光标移动复制、粘贴、全选普通输入框、密码框、textarea、Vue/React 受控组件多浏览器控件焦点切换已完成砺算、摩尔线程等国产 GPU 环境专项适配。8. 文件上传下载input typefile弹出文件选择窗口Windows 系统原生 / Linux 运行时窗口下载进度回调webNativeDownloadProgress/webNativeDownloadComplete/webNativeDownloadFailed内置下载进度提示可关闭由业务自行绘制 UI9. 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. 调试与运维内置 DevToolsCtrlF12 或ToggleDevTools()远程调试端口默认 9223–9262Chrome/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请先重命名再放入项目。第二步创建网页!doctypehtmlhtmllangzh-CNheadmetacharsetutf-8stylehtml, 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/headbodyh1idtitleHello Unreal Engine/h1buttonidsend发送到 UE/buttonscriptdocument.getElementById(send).addEventListener(click,(){WebNative.send(OnHello,{text:来自网页的消息});});WebNative.on(HelloResult,(messageBody){constresultJSON.parse(messageBody);document.getElementById(title).textContentresult.text;});/script/body/html第三步在 UE 中加载创建 Widget Blueprint拖入WebNative Browser控件设置InitialURL为file:///E:/YourProject/hello.html绑定OnMessageReceived事件调用SendMessageToJS回复第四步运行页面显示在三维场景中点击按钮UE 收到OnHelloUE 回复后网页标题变为UE 已经收到消息加载网页 双向通信的完整闭环已经跑通。完整能力对比能力WebNativeBrowserUE 自带 Web Browser渲染GPU 直通智能帧率120 FPSCPU 软渲染通信FunctionName MessageBody10 万条/220msBindUObject性能有限平台Win Linux x86_64 Linux ARM64仅 Windows中文输入完整输入法兼容矩阵未验证透明交互alpha 命中测试 鼠标穿透不支持场景交互拖拽/点击放置到 UE 场景不支持文件上传/下载/进度回调有限权限18 项权限开关 兜底策略无多开多控件 多实例 隔离不支持调试DevTools 性能监视器 日志分离有限配置ini 配置统一管理有限云渲染Pixel Streaming 组合支持未验证适用场景场景Web 负责UE 负责数字孪生设备树、属性面板、工单、报表三维场景、镜头、碰撞游戏工具道具库、活动页、商城角色、资产、联网逻辑AI 应用界面对话、生成结果展示场景命令执行数据大屏图表、表格、地图三维联动、空间关系展厅/控制台业务流程、权限、登录空间展示、动画平台与兼容性项目范围Unreal Engine5.1 – 5.8每个版本独立包WindowsWin64Windows 10Linuxx86_64 / ARM64最低 GLIBC 2.17浏览器内核Chromium 内核渲染后端D3D11 / D3D12Windows、VulkanLinux最大帧率120 FPS国产 GPU已完成砺算、摩尔线程专项适配编程语言C17获取方式GitHub 仓库starTechnology1994/UEWebNativeBrowser完整文档Wikihttps://github.com/starTechnology1994/uewebbrowser/wiki问题反馈https://github.com/starTechnology1994/uewebbrowser/issues商务合作 / 授权咨询startechnology1994163.com如果这篇对你有帮助欢迎点赞收藏。WebNativeBrowser 支持 UE 5.1–5.8覆盖 Windows / Linux x86_64 / Linux ARM64已完成砺算、摩尔线程等国产 GPU 专项适配。