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 專項適配。