05 案例介绍WebNativeBrowser 不只是用于显示网页。它把成熟 Web 生态、业务数据和 Unreal Engine 实时三维能力连接起来特别适用于需要快速开发、频繁迭代和跨平台交付的产品。1. 推荐架构分工层级推荐职责Web页面布局、组件、图表、表格、业务流程和用户操作WebNativeBrowser页面承载、跨平台交互与 JS ↔ UE 连接UE 蓝图/C场景对象、镜头、三维交互、权限校验和最终业务执行业务服务数据库、API、AI 推理、账号、权限和长期数据存储这种分工既能发挥 Web 的开发效率也能保留 Unreal Engine 在实时三维、场景交互和渲染方面的优势。2. 数字孪生数字孪生是 WebNativeBrowser 的重点应用方向适用领域包括智慧城市、工业制造、能源、交通、园区、建筑、展厅、指挥中心和设备运维。Web 页面适合承载设备树、资产列表和属性面板实时告警、工单、巡检与事件记录趋势图、统计报表、地图和筛选条件登录、权限、流程和已有企业业务系统Unreal Engine 适合承载园区、建筑、产线、设备和城市空间实时三维渲染、镜头、动画与空间关系Actor/UObject 状态、碰撞和场景交互通过 JS ↔ UE 消息可以实现“页面选择设备 — UE 镜头定位 — 场景高亮 — 状态回推报表”的双向工作流。3. 游戏与运行时工具Web 可以快速构建道具库、活动页、商城、任务面板、内容门户和运行时编辑工具。结合 04-高级交互 的拖拽/点击放置能力用户可以从网页资源面板选择道具再在 UE 世界中预览和放置。角色、资产权限、Actor 创建、联网权威逻辑和玩法规则仍由 UE 项目负责。图 5-3 游戏与运行时工具案例4. AI 应用界面WebNativeBrowser 可用于将 AI 辅助生成的 Vue/React 页面带入 UE承载企业 AI 助手、智能问答和知识库界面展示生成式设计、文本、图片或分析结果将 AI 应用结果转换为受控的 UE 场景命令将 UE 场景状态回传给 AI 应用界面插件提供 Web UI 与 UE 的连接能力不内置大语言模型、推理服务、模型账号或客户业务知识库这些能力由客户现有 AI 服务或项目后端提供。5. 报表与数据大屏Web 前端拥有成熟的图表、表格、地图、筛选器、主题和响应式布局生态适合快速制作实时监控大屏经营分析报表工业数据驾驶舱多屏指挥中心与三维场景联动的趋势和告警视图UE 可以向页面推送场景状态页面也可以筛选、定位或控制三维对象。报表团队和 UE 场景团队可以依据稳定的消息契约并行开发。6. Vue / React 工程化工作流6.1 开发流程独立完成网页原型使用 Vue、React 或普通 HTML 项目开发页面先在桌面 Chromium 中验证布局、表单、路由、图表、视频、iframe 和响应式尺寸。设计消息契约在接入 UE 前列出 JS 会发出哪些业务事件、UE 返回哪些结果、每条消息的数据结构、错误格式、版本号和requestId。不要让 UI 直接依赖任意蓝图内部名称。开发阶段加载前端服务器可加载 Vite 等本地开发地址快速迭代正式发布切换为随项目打包的静态页面、企业内网地址或正式 HTTPS 服务。接入 UEWebNative.send(Scene.Camera.Focus,{targetId:device-008});UE 完成场景操作后回复FunctionName: Scene.Camera.Focus.Result MessageBody: {ok:true,targetId:device-008}分别打包验证前端构建成功不代表 UE 发布包一定正确每个目标平台都要验证静态资源包含、URL 路径、字体视频可访问、跨域证书策略、Development 与 Shipping 行为。6.2 推荐前端封装exportconstueBridge{send(name,body){if(!window.WebNative){console.warn(WebNative is not ready,name);returnfalse;}window.WebNative.send(name,body);returntrue;},on(name,handler){window.WebNative?.on(name,handler);},off(name,handler){window.WebNative?.off(name,handler);}};组件卸载时解除监听Vue 在onUnmountedReact 在useEffect的 cleanup 中调用off。6.3 使用 AI 生成 UI 的正确方式AI 很适合生成页面骨架和组件、根据截图搭建原型、生成 CSS 主题和响应式布局、创建模拟数据、生成消息契约初稿。AI 生成后必须人工检查第三方依赖许可证是否引用外网 CDNXSS、HTML 注入和不安全 URLToken、密钥或后台地址是否写入前端事件是否重复注册大量 DOM 更新和无效动画不同分辨率和 DPILinux 字体与中文输入离线部署能力7. 性能与安全建议性能不要每收到一条高频消息都直接更新 DOM合并状态后按动画帧或业务周期刷新。大列表使用虚拟滚动图表只更新变化的数据系列。图片和视频走资源 URL不通过消息体传二进制。页面隐藏时暂停非必要定时器和动画生产构建关闭无用开发日志和 Source Map 公开下载。安全只加载可信页面在线内容使用 HTTPS不在网页代码中保存长期密钥。UE 端把 JS 消息当作外部输入校验 FunctionName、字段、范围和权限。高风险命令加入业务确认和权限检查不因为页面运行在应用内部就绕过输入验证。权限策略的全局收紧方式见 06-CEF 参数配置。下一步拖拽/点击放置实现04-高级交互消息协议与性能上限02-双向通讯CEF 参数配置06-CEF 参数配置
05 案例介绍WebNativeBrowser 不只是用于显示网页。它把成熟 Web 生态、业务数据和 Unreal Engine 实时三维能力连接起来特别适用于需要快速开发、频繁迭代和跨平台交付的产品。1. 推荐架构分工层级推荐职责Web页面布局、组件、图表、表格、业务流程和用户操作WebNativeBrowser页面承载、跨平台交互与 JS ↔ UE 连接UE 蓝图/C场景对象、镜头、三维交互、权限校验和最终业务执行业务服务数据库、API、AI 推理、账号、权限和长期数据存储这种分工既能发挥 Web 的开发效率也能保留 Unreal Engine 在实时三维、场景交互和渲染方面的优势。2. 数字孪生数字孪生是 WebNativeBrowser 的重点应用方向适用领域包括智慧城市、工业制造、能源、交通、园区、建筑、展厅、指挥中心和设备运维。Web 页面适合承载设备树、资产列表和属性面板实时告警、工单、巡检与事件记录趋势图、统计报表、地图和筛选条件登录、权限、流程和已有企业业务系统Unreal Engine 适合承载园区、建筑、产线、设备和城市空间实时三维渲染、镜头、动画与空间关系Actor/UObject 状态、碰撞和场景交互通过 JS ↔ UE 消息可以实现“页面选择设备 — UE 镜头定位 — 场景高亮 — 状态回推报表”的双向工作流。3. 游戏与运行时工具Web 可以快速构建道具库、活动页、商城、任务面板、内容门户和运行时编辑工具。结合 04-高级交互 的拖拽/点击放置能力用户可以从网页资源面板选择道具再在 UE 世界中预览和放置。角色、资产权限、Actor 创建、联网权威逻辑和玩法规则仍由 UE 项目负责。图 5-3 游戏与运行时工具案例4. AI 应用界面WebNativeBrowser 可用于将 AI 辅助生成的 Vue/React 页面带入 UE承载企业 AI 助手、智能问答和知识库界面展示生成式设计、文本、图片或分析结果将 AI 应用结果转换为受控的 UE 场景命令将 UE 场景状态回传给 AI 应用界面插件提供 Web UI 与 UE 的连接能力不内置大语言模型、推理服务、模型账号或客户业务知识库这些能力由客户现有 AI 服务或项目后端提供。5. 报表与数据大屏Web 前端拥有成熟的图表、表格、地图、筛选器、主题和响应式布局生态适合快速制作实时监控大屏经营分析报表工业数据驾驶舱多屏指挥中心与三维场景联动的趋势和告警视图UE 可以向页面推送场景状态页面也可以筛选、定位或控制三维对象。报表团队和 UE 场景团队可以依据稳定的消息契约并行开发。6. Vue / React 工程化工作流6.1 开发流程独立完成网页原型使用 Vue、React 或普通 HTML 项目开发页面先在桌面 Chromium 中验证布局、表单、路由、图表、视频、iframe 和响应式尺寸。设计消息契约在接入 UE 前列出 JS 会发出哪些业务事件、UE 返回哪些结果、每条消息的数据结构、错误格式、版本号和requestId。不要让 UI 直接依赖任意蓝图内部名称。开发阶段加载前端服务器可加载 Vite 等本地开发地址快速迭代正式发布切换为随项目打包的静态页面、企业内网地址或正式 HTTPS 服务。接入 UEWebNative.send(Scene.Camera.Focus,{targetId:device-008});UE 完成场景操作后回复FunctionName: Scene.Camera.Focus.Result MessageBody: {ok:true,targetId:device-008}分别打包验证前端构建成功不代表 UE 发布包一定正确每个目标平台都要验证静态资源包含、URL 路径、字体视频可访问、跨域证书策略、Development 与 Shipping 行为。6.2 推荐前端封装exportconstueBridge{send(name,body){if(!window.WebNative){console.warn(WebNative is not ready,name);returnfalse;}window.WebNative.send(name,body);returntrue;},on(name,handler){window.WebNative?.on(name,handler);},off(name,handler){window.WebNative?.off(name,handler);}};组件卸载时解除监听Vue 在onUnmountedReact 在useEffect的 cleanup 中调用off。6.3 使用 AI 生成 UI 的正确方式AI 很适合生成页面骨架和组件、根据截图搭建原型、生成 CSS 主题和响应式布局、创建模拟数据、生成消息契约初稿。AI 生成后必须人工检查第三方依赖许可证是否引用外网 CDNXSS、HTML 注入和不安全 URLToken、密钥或后台地址是否写入前端事件是否重复注册大量 DOM 更新和无效动画不同分辨率和 DPILinux 字体与中文输入离线部署能力7. 性能与安全建议性能不要每收到一条高频消息都直接更新 DOM合并状态后按动画帧或业务周期刷新。大列表使用虚拟滚动图表只更新变化的数据系列。图片和视频走资源 URL不通过消息体传二进制。页面隐藏时暂停非必要定时器和动画生产构建关闭无用开发日志和 Source Map 公开下载。安全只加载可信页面在线内容使用 HTTPS不在网页代码中保存长期密钥。UE 端把 JS 消息当作外部输入校验 FunctionName、字段、范围和权限。高风险命令加入业务确认和权限检查不因为页面运行在应用内部就绕过输入验证。权限策略的全局收紧方式见 06-CEF 参数配置。下一步拖拽/点击放置实现04-高级交互消息协议与性能上限02-双向通讯CEF 参数配置06-CEF 参数配置
平方复杂度无法被常规优化消除｜TaoToken 统一 Key 通道实测)
