Unity 工具之内嵌网页/浏览器插件使用和学习笔记

1、Embedded Browser 插件（文件夹名ZFBrowserUnity）

优点：设置简单，功能强大：输入url地址，拉取网页信息，可设置页面尺寸，可显示透明背景的网页，可与显示的页面进行互动（页面互动和相应添加的unity事件）。PC端优选。

缺点：不支持android、iOS、UWP平台，仅支持PC端、Unity编辑器、 OS、Linux；

详见：Embedded Browser | GUI 工具 | Unity Asset Store；

2、UniWebView插件，

适用于Andriod、ios和Mac os，据说在移动端效果最好。支持WP8。

不支持windowsPC桌面系统，包括编辑器状态，显示的网页是贴屏显示。

测试结果：

（1）该插件显示的网页是贴屏显示，显示网页覆盖做的UI，UI放到显示网页的Image外部，不要有重叠部分才能相应实现对应UI功能。故，无法实现点击页面/页面位置，显示放大的页面，这个功能。（也可能了解不够深入，未能解决该问题）。

（2）该插件可以简单方便的设置需要加载什么样的网页（输入地址链接即可），较简单的设置是否显示网页，前进后退网页页面等功能，以及设置加载网页的显示位置、大小尺寸。但无法设置改变加载的网页的尺寸（以适配显示区域）。

详见：UniWebView 4 | 网络 | Unity Asset Store；

3、UnityAndroidWebviewToTexture插件

支持安卓移动端，3d环境使用，非贴屏显示使用。

测试结果：

理论：通过地址，获取网页页面byte信息，然后创建加载新的Texture2D显示在移动端。

优点：

1、使用简单，且通过地址获取的网页可以自适应显示在限定的显示区域。

2、网页端内容改变时，移动端会自动刷新；

3、支持触屏点击、双击等事件。

缺点：

1、移动端显示为静态的图片的Texture/Texture2D，或3d物体的Renderer的Mesh；无法与网页进行互动。

2、找不到设置网页透明通道和设置网页页面放缩的功能方法。

详见：Texture Web View (Android) | GUI 工具 | Unity Asset Store；

4、3D WebView for Android插件

有多种包，可选支持android、ISO、WindowsPC、macOS等待。

测试效果：功能挺强大。倾向优选

优点：

1、可以动态显示加载的页面，且可以和加载的页面进行交互（如加载百度页面，可使用百度页面里的搜索栏进行搜索、页面跳转等）；

2、对页面添加的事件也可以正常运行（如双击显示展示的页面，点击展示的页面之外区域，掩藏页面等）；

3、可动态更改页面地址，显示不同的页面；可动态设置显示页面的分辨率来实现在显示框里放大或缩小页面。

缺点：找不到设置加载的网页背景透明度的设置，显示的页面背景不透明度是百分之百。（在线卑微，说支持透明网页，但还没发现使用方法）

——————续2021/06/25（3D WebView显示问题）———————

1、通过使用插件文档里，在前端网页端里添加标签，实现显示的页面背景透明显示。

开发文档地址：

3D WebView: cross-platform web browser for Unity (Android, iOS, Windows, macOS, and UWP / Hololens) | Vuplex

具体透明度官方blog地址：

How can I make a webview transparent? | Vuplex Support

我这边是前端那边做的页面是全透明的，unity端给页面加背景底图。最初加载过来页面是不透明的，有网页背景显示，后来查官网blog，让前端同时帮忙在页面<head>加上
<meta name="transparent" content="true">这句话，解决透明度问题。

注：页面修改更新后，客户端这边记得清理下浏览器页面/unity缓存，不然加载的页面可能显示是修改前的页面，没有透明度效果。

2、项目中使用3D WebView问题：

（1）问题：

1）在3d环境中显示页面可正常显示（使用WebView）；

2）在画布环境中加载页面时（使用CanvasWebView），加载的页面完全看不到，环境中页面显示区域显示效果是什么都没有，但触摸点击，可发现该位置上有相关页面，且可正常与页面进行互动（如点击到百度页面的输入框，可以输入文字进行搜索），页面上相关点击事件也可正常使用。

（2）初步结论：

经测试排除画布方向错误、镜头位置和渲染层级影响，以及URP管道渲染影响（支持URP技术）的可能。

（3）深度研究：

原因：webview设置的分辨率和webview所在的canvas的设置冲突，WebView缩放问题；

EG：

1）默认情况设置：

CanvasWebViewPrefab预制体上分辨率InitialResolution=1;

CanvasWebViewPrefab预制体运行时生成的WebViewPrefab的分辨率InitialResolution=1300；

canvas的CanvasScaler可根据需求设置；

2）当我们需要根据需求缩放页面时：

如加载的页面在显示框里放大显示时，改CanvasWebViewPrefab的Resolution为0.3,0.4等等

3）页面不显示时的错误参数（无报错，也有可能是切换调试器晚了，错过开始的报错提示）：

CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;（实际加载显示的页面进行缩小）

canvas的CanvasScaler的Mode=Constant Pixel Size（没有设值预设尺寸：（Mode=ScaleWithScreenSize(3840*2160)））；

canvas的Canvas-RenderMode=ScreenSpace-Overlay（非项目下这个参数这样设置没问题，但项目里该模式不显示出页面）

4）页面不显示时的错误参数（有报错）：

CanvasWebViewPrefab预制体上分辨率InitialResolution=2.5;

canvas的CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=Main Camera

报错：WebView分辨率为1300，但画布设置分辨率过大，不匹配，请修改合适的分辨率；

ArgumentException: The application specified an abnormally large webview size (9550px x 4380px), and webviews of this size are normally only created by mistake. A webview's default resolution is 1300px per Unity unit, so it's likely that you specified a large physical size by mistake or need to adjust the resolution. For more information, please see IWebView.SetResolution: https://developer.vuplex.com/webview/IWebView#SetResolution

（4）解决问题时设置：

CanvasWebViewPrefab——InitialResolution=1;

canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=ScreenSpace-Camera;

canvas的Canvas-RenderCamera=Main Camera;

则可以正常显示。

（5）早期可正常运行时相关测试数据：

CanvasWebViewPrefab——InitialResolution=1;

canvas——CanvasScaler的Mode=ScaleWithScreenSize(3840*2160)；

canvas的Canvas-RenderMode=ScreenSpace-Camera;

canvas的Canvas-RenderCamera=ScreenSpace-Camera;

猜测问题原因：WebView缩放问题，导致页面虽加载，功能正常，但因为缩放适应出现错误，导致最终看不到加载页面的情况；

详见：3D WebView for Android (Web Browser) | GUI 工具 | Unity Asset Store；

———续2021/08/30（Embedded Browser 加载页面问题）————

关于unity和前端页面加载交互使用简单解析：

1）插件：Embedded Browser 插件（文件夹名ZFBrowserUnity）

1）环境：Unity客户端、支持PC端打包使用；

2）预制体：将插件文件里的Browser(GUI)预制体拖到目标UI上；

3）加载脚本：根据需求自己写加载页面的脚本，并绑定到Browser(GUI)预制体上：

（如下图中：LoadWebPage脚本）

使用到加载Api：gameObject.GetComponent<Browser>().LoadURL(url, true);

4）编辑器内运行，或打包后运行即可。

5）详细参考插件demo。

EG:string testURL = "https://www.baidu.com";gameObject.GetComponent<Browser>().LoadURL(testURL, true);

个人学习笔记，不足之处欢迎指点，诚心学习！

注：查找资料时，看到一篇插件整理挺详细的文章，贴下地址，联系侵删：

https://cloud.tencent.com/developer/article/1875790