棧無(wú)縫協(xié)作加快你的開發(fā))
UEWebNativeBrowser高性能跨平臺(tái)WebUI插件如果你在 UE 項(xiàng)目中需要復(fù)雜表格、圖表、表單、富文本、數(shù)據(jù)大屏、地圖、視頻、iframe 或高頻改版的業(yè)務(wù)界面UMG 和 Slate 往往不是最高效的選擇。Web 技術(shù)棧有成熟的組件庫(kù)、工程化工具和 AI 生成能力但把現(xiàn)代 Web 項(xiàng)目穩(wěn)定地嵌入 UE 并交付給客戶中間有大量工程問題需要解決。WebNativeBrowser就是為了解決這些問題而生的。關(guān)于 WebNativeBrowser 的完整文檔和示例可以訪問我們的 GitHub 倉(cāng)庫(kù)starTechnology1994/UEWebNativeBrowser一句話定位WebNativeBrowser 是面向Unreal Engine 5.1–5.8的高性能企業(yè)級(jí)跨平臺(tái) Web UI 與 Chromium 瀏覽器插件讓 Web 技術(shù)棧與 UE 三維渲染在同一畫面里無(wú)縫協(xié)作。支持平臺(tái)Windows x64 · Linux x86_64 · Linux ARM64 · GLIBC ≥ 2.17核心能力一覽1. 高性能 GPU 加速渲染特性說明GPU 直通渲染基于 GPU 共享內(nèi)存的跨進(jìn)程紋理傳輸畫面直通 UE5 渲染管線無(wú) CPU 拷貝開銷多渲染后端Windows D3D11/D3D12、Linux Vulkan多渲染后端自適應(yīng)零顯存浪費(fèi)持久紋理復(fù)用每幀零額外顯存分配智能幀率靜態(tài)畫面自動(dòng)暫停渲染動(dòng)態(tài)內(nèi)容按需喚醒視頻自適應(yīng)匹配幀率幀率上限最高120 FPS這不是能顯示網(wǎng)頁(yè)是能在客戶現(xiàn)場(chǎng)跑三天不卡不崩。2. 極致性能的雙向通信指標(biāo)數(shù)據(jù)單條消息延遲 1ms10 萬(wàn)條消息~220ms單條消息上限JS→UE 4 MiB / UE→JS 2 MiB每幀派發(fā)預(yù)算默認(rèn) 5000 條上限 10 萬(wàn)條通信架構(gòu)// JS → UE網(wǎng)頁(yè)發(fā)消息WebNative.send(Scene.Device.Select,{deviceId:device-008,timestamp:Date.now()});// UE → JSUE 回復(fù)// 藍(lán)圖調(diào)用 SendMessageToJS(Scene.Device.Select.Result, {ok:true})// JS 訂閱回調(diào)WebNative.on(Scene.Device.Select.Result,(messageBody){constresultJSON.parse(messageBody);console.log(result.ok);});支持字符串、數(shù)字、布爾、對(duì)象自動(dòng)序列化業(yè)務(wù)層不需要提前JSON.stringify()消息自動(dòng)回調(diào)到 UE 主線程不需要自己做線程同步JS 端send/on/off完整生命周期組件卸載時(shí)解除監(jiān)聽。3. 跨平臺(tái)統(tǒng)一體驗(yàn)平臺(tái)架構(gòu)渲染后端狀態(tài)Windows 10x64D3D11 / D3D12?LinuxUbuntu/麒麟/UOSx86_64Vulkan?Linux國(guó)產(chǎn) ARM64ARM64Vulkan?國(guó)產(chǎn) GPU礪算/摩爾線程——? 專項(xiàng)適配同一份前端代碼不需要為不同平臺(tái)重復(fù)適配Linux 最低 GLIBC 2.17覆蓋 CentOS 7 等老系統(tǒng)面向公開客戶建議 GLIBC 2.31。4. 完整的現(xiàn)代 Web 能力基于Chromium 內(nèi)核不是閹割版WebRTC、WebGL 2.0、MediaSource、Canvas4K 視頻最高 8K 應(yīng)用場(chǎng)景Widevine DRM 受保護(hù)媒體WebSocket、requestAnimationFrameVue、React、普通 HTML 全部兼容5. 透明交互與鼠標(biāo)穿透網(wǎng)頁(yè)的透明區(qū)域可以讓鼠標(biāo)點(diǎn)擊穿透到 UE 場(chǎng)景bEnableMouseTransparency開啟 alpha 命中測(cè)試MouseTransparencyAlphaThreshold可配置透明像素判定閾值0~255典型場(chǎng)景半透明 HUD 面板面板空白處點(diǎn)擊可直接操作場(chǎng)景中的對(duì)象透明背景配置[WebNative] cef_argsshow-background-color background-color0x00000000html, body{background:transparent;}6. 從網(wǎng)頁(yè)到 UE 場(chǎng)景的拖拽/點(diǎn)擊放置用戶可以從網(wǎng)頁(yè)資產(chǎn)庫(kù)點(diǎn)擊或拖拽資源直接在 UE 場(chǎng)景中預(yù)覽和放置網(wǎng)頁(yè)發(fā)送資源 ID 和放置命令UE 調(diào)用SetFocusToGameViewport()切換輸入焦點(diǎn)DeprojectCursorToWorld()將光標(biāo)反投影到世界空間項(xiàng)目藍(lán)圖/C 執(zhí)行射線檢測(cè)、預(yù)覽、放置適用場(chǎng)景游戲道具放置、數(shù)字孿生設(shè)備部署、建筑目錄拖放、展廳交互。7. 中文輸入Linux 重點(diǎn)產(chǎn)品能力在國(guó)產(chǎn) Linux 上完成完整的中文輸入驗(yàn)證中文拼音連續(xù)輸入、候選詞選擇中英文切換、刪除、光標(biāo)移動(dòng)復(fù)制、粘貼、全選普通輸入框、密碼框、textarea、Vue/React 受控組件多瀏覽器控件焦點(diǎn)切換已完成礪算、摩爾線程等國(guó)產(chǎn) GPU 環(huán)境專項(xiàng)適配。8. 文件上傳下載input typefile彈出文件選擇窗口Windows 系統(tǒng)原生 / Linux 運(yùn)行時(shí)窗口下載進(jìn)度回調(diào)webNativeDownloadProgress/webNativeDownloadComplete/webNativeDownloadFailed內(nèi)置下載進(jìn)度提示可關(guān)閉由業(yè)務(wù)自行繪制 UI9. 18 項(xiàng)權(quán)限控制權(quán)限配置鍵默認(rèn)麥克風(fēng)allow_microphone?攝像頭allow_camera?屏幕捕獲allow_desktop_capture?剪貼板allow_clipboard?地理位置allow_geolocation?桌面通知allow_notifications?本地網(wǎng)絡(luò)allow_local_network_access?文件系統(tǒng)allow_file_system_access?DRM 受保護(hù)媒體allow_protected_media?… 等 18 項(xiàng)全局策略allow/deny/prompt 單項(xiàng)開關(guān)兩層控制。面向公開客戶的產(chǎn)品可以按業(yè)務(wù)需要收緊權(quán)限。10. 多控件、多實(shí)例與多開同一個(gè) UE 應(yīng)用中創(chuàng)建多個(gè) WebNativeBrowser 控件同一個(gè)打包應(yīng)用同時(shí)啟動(dòng)多個(gè)獨(dú)立實(shí)例多實(shí)例緩存/日志隔離GPU 共享紋理并發(fā)控制11. 調(diào)試與運(yùn)維內(nèi)置 DevToolsCtrlF12 或ToggleDevTools()遠(yuǎn)程調(diào)試端口默認(rèn) 9223–9262Chrome/Edge 訪問http://127.0.0.1:端口內(nèi)置性能監(jiān)視器實(shí)時(shí) FPS / 內(nèi)存 / 渲染模式疊加層CEF 日志和 UE 日志分離ini 配置文件統(tǒng)一管理所有運(yùn)行期參數(shù)12. Pixel Streaming 云渲染支持Web UI 作為 UE 最終畫面的一部分輸出隨 Pixel Streaming 傳輸?shù)竭h(yuǎn)端瀏覽器云端數(shù)字孿生遠(yuǎn)程工業(yè)控制臺(tái)在線展廳集中式 GPU 工作站快速上手10 分鐘跑通完整鏈路第一步安裝插件YourProject/ ├─ Plugins/ │ └─ WebNativeBrowser/ # 完整插件目錄 └─ YourProject.uproject?? 插件目錄名必須是WebNativeBrowser請(qǐng)先重命名再放入項(xiàng)目。第二步創(chuàng)建網(wǎng)頁(yè)!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發(fā)送到 UE/buttonscriptdocument.getElementById(send).addEventListener(click,(){WebNative.send(OnHello,{text:來自網(wǎng)頁(yè)的消息});});WebNative.on(HelloResult,(messageBody){constresultJSON.parse(messageBody);document.getElementById(title).textContentresult.text;});/script/body/html第三步在 UE 中加載創(chuàng)建 Widget Blueprint拖入WebNative Browser控件設(shè)置InitialURL為file:///E:/YourProject/hello.html綁定OnMessageReceived事件調(diào)用SendMessageToJS回復(fù)第四步運(yùn)行頁(yè)面顯示在三維場(chǎng)景中點(diǎn)擊按鈕UE 收到OnHelloUE 回復(fù)后網(wǎng)頁(yè)標(biāo)題變?yōu)閁E 已經(jīng)收到消息加載網(wǎng)頁(yè) 雙向通信的完整閉環(huán)已經(jīng)跑通。完整能力對(duì)比能力WebNativeBrowserUE 自帶 Web Browser渲染GPU 直通智能幀率120 FPSCPU 軟渲染通信FunctionName MessageBody10 萬(wàn)條/220msBindUObject性能有限平臺(tái)Win Linux x86_64 Linux ARM64僅 Windows中文輸入完整輸入法兼容矩陣未驗(yàn)證透明交互alpha 命中測(cè)試 鼠標(biāo)穿透不支持場(chǎng)景交互拖拽/點(diǎn)擊放置到 UE 場(chǎng)景不支持文件上傳/下載/進(jìn)度回調(diào)有限權(quán)限18 項(xiàng)權(quán)限開關(guān) 兜底策略無(wú)多開多控件 多實(shí)例 隔離不支持調(diào)試DevTools 性能監(jiān)視器 日志分離有限配置ini 配置統(tǒng)一管理有限云渲染Pixel Streaming 組合支持未驗(yàn)證適用場(chǎng)景場(chǎng)景Web 負(fù)責(zé)UE 負(fù)責(zé)數(shù)字孿生設(shè)備樹、屬性面板、工單、報(bào)表三維場(chǎng)景、鏡頭、碰撞游戲工具道具庫(kù)、活動(dòng)頁(yè)、商城角色、資產(chǎn)、聯(lián)網(wǎng)邏輯AI 應(yīng)用界面對(duì)話、生成結(jié)果展示場(chǎng)景命令執(zhí)行數(shù)據(jù)大屏圖表、表格、地圖三維聯(lián)動(dòng)、空間關(guān)系展廳/控制臺(tái)業(yè)務(wù)流程、權(quán)限、登錄空間展示、動(dòng)畫平臺(tái)與兼容性項(xiàng)目范圍Unreal Engine5.1 – 5.8每個(gè)版本獨(dú)立包WindowsWin64Windows 10Linuxx86_64 / ARM64最低 GLIBC 2.17瀏覽器內(nèi)核Chromium 內(nèi)核渲染后端D3D11 / D3D12Windows、VulkanLinux最大幀率120 FPS國(guó)產(chǎn) GPU已完成礪算、摩爾線程專項(xiàng)適配編程語(yǔ)言C17獲取方式GitHub 倉(cāng)庫(kù)starTechnology1994/UEWebNativeBrowser完整文檔Wikihttps://github.com/starTechnology1994/uewebbrowser/wiki問題反饋https://github.com/starTechnology1994/uewebbrowser/issues商務(wù)合作 / 授權(quán)咨詢startechnology1994163.com如果這篇對(duì)你有幫助歡迎點(diǎn)贊收藏。WebNativeBrowser 支持 UE 5.1–5.8覆蓋 Windows / Linux x86_64 / Linux ARM64已完成礪算、摩爾線程等國(guó)產(chǎn) GPU 專項(xiàng)適配。