Unity 3D WebView for Android初次使用体验
3D WebView for Android基础问题
不同于其他WebView采用Chrome内核,3D WebView for Android内核使用的是Gecko引擎(由Mozilla开发用于FireFox内核),一般浏览器使用兼容性问题可以看FireFox使用规则。该插件不同于UniWebView等使用Activity嵌入方式,只能以贴屏形式使用WebView,3D Web View支持将网页渲染到离屏表面(Texture2D),可以在RawImage UI或者Mesh Renderer三维物体表面使用,支持在三维世界中嵌入页面,支持三维碰撞检测(可用于XR应用)
透明网页
Embedded Browser等使用Chrome内核的浏览器插件,网页在不设置背景颜色的前提下就是透明的。3D Web View要想使用透明页面需要设置专有meta和css。
HTML头增加transparent的meta说明
<meta name='transparent' content='true'>
上下文代码
<!DOCTYPE html>
<html lang="en">
<head>
<!-- This transparent meta tag instructs 3D WebView to allow the page to be transparent. -->
<meta name='transparent' content='true'>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
CSS为Gecko增加黑色背景色
/* For Gecko only, set the background color
to black so that the shader's cutout rect
can translate the black pixels to transparent.*/
@supports (-moz-appearance:none) {
body {
background-color: black;
}
}
LoadUrl动态加载问题
按照其他浏览器插件习惯用法,一般写成
void Start()
{
Vuplex.WebView.CanvasWebViewPrefab browser = GetComponent<Vuplex.WebView.CanvasWebViewPrefab>();
string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
browser.WebView.LoadUrl(url);
}
但是,上面这个写法在PC上调试可能没问题,但真机运行页面不会加载。问题出在调用browser.WebView.LoadUrl时WebView的值为空。
正确代码如下
async void Start()
{
Vuplex.WebView.CanvasWebViewPrefab browser = GetComponent<Vuplex.WebView.CanvasWebViewPrefab>();
await Task.WhenAll(new Task[] {
browser.WaitUntilInitialized()
});
string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
browser.WebView.LoadUrl(url);
}
Start()修饰为异步执行,增加browser等待初始化完成代码,WebView初始化完成后才能调用LoadUrl。
避免加载过程白屏
3D Web View在加载页面完成以前,显示的是白色的RawImage画面。我现在的处理方式是一开始将RawImage的Alpha设置为0,让RawImage透明
在URL加载完成后再将Alpha设置为1,显示出HTML页面
browser.WebView.LoadProgressChanged += (sender, eventArgs) =>
{
if (eventArgs.Type == Vuplex.WebView.ProgressChangeType.Finished)
{
foreach(UnityEngine.UI.RawImage image in images)
{
image.color = Color.white;
}
}
};
string url = "http://www.vrfab.com/?rand=" + Random.Range(0.0f, 1.0f);
browser.WebView.LoadUrl(url);