构建数字孪生应用B/S和C/S可以全要

前言

经过近1个月的密集研究和开发，我们团队成功实现了一套程序开发框架，同时构建B/S（浏览器/服务器）和C/S（客户端/服务器）模式的数字孪生应用。这一成果不仅大幅提高了开发效率，也极大地增强了我们的产品灵活性，使其能够满足客户在不同使用场景下的需求。无论客户是需要通过浏览器快速访问应用，还是需要一个功能更为丰富、响应更快的独立客户端应用，我们的解决方案都能提供高度定制的用户体验和卓越的性能表现。这标志着我们在提供跨平台解决方案方面迈出了重要的一步，为客户带来了前所未有的灵活性和便利。

实现思路

整个实现思路是通过在虚幻引擎使用Web Browser Widget来内嵌一个浏览器，从而在游戏或应用内访问网页内容。这个功能主要是通过UMG（Unreal Motion Graphics）提供的Web Browser控件实现的。Web Browser Widget依赖于Chromium Embedded Framework（CEF），这是一个开源的框架，允许开发者在应用程序中添加一个完整功能的Web浏览器。

业务页面如图表这些，可以通过vue，react这种开发框架进行，再通过内嵌浏览器嵌入。三维场景发挥虚幻引擎构建的优势，这样也避免了虚幻构建UI界面的弱点。

最后如果要web使用，即通过像素流将整个页面推送给前端，如果是C/S使用，直接把虚幻的打包程序给客户。

存在问题

像素流中文问题

我们发现虚幻引擎的像素流在中文支持上不行，目前还不支持中文输入，这导致业务页面无法输入中文，影响用户体验。目前这个问题还未解决。

鼠标穿透问题

当整个web铺满整个虚幻之后，鼠标无法穿透到虚幻引擎的场景，导致场景无法移动。

问题解决

我们团队改造了虚幻引擎的像素流插件，再基于我们开源的peerstream实现了中文像素流的交互，无需任何任何额外开发。

关于鼠标穿透，我们并没有采用通常的根据透明度来进行穿透，这个会存在偶发不灵的情况，而且会与前端来回调整透明度。我们提出一个全新的思路，不根据透明度即可实现鼠标的穿透，通过html代码注入的方式，直接将穿透逻辑注入到前端，而前端无需任何代码修改。即可实现鼠标的穿透，这个方案性能非常高，而且不存咋偶发不灵敏的情况。整个实现思路不需要修改官方的浏览器插件。

总结

本文提出了一种构建数字孪生应用的新思路，可以同时支持B/S和C/S的部署方案，满足客户的多种使用场景。另外我们团队即将推出peerstream像素流企业版，目前有5个VIP名额，欢迎联系，永久源码授权。

Inveta团队

Inveta团队由研发、美术设计、建模等组成。团队介绍:
https://www.inveta.cn/about.html
团队开源项目：
https://github.com/inveta
团队推出了UE像素流的技术支持服务，帮助大家更好的管理UE的像素流。