使用 Unity 构建的 Oculus Go VR 应用程序中的 Web 浏览器
Web Browser in Oculus Go VR application built with Unity
我目前正在尝试寻找一种在 VR 应用程序中使用 Web 浏览器的方法。基本上,目标是在面板中打开一个像 https://whosebug.com 这样的页面,并让它通过 oculus go 控制器滚动。
我已经对实现此目的的插件进行了一些研究,例如 this,但其中 none 似乎适用于 oculus go。
更新:我更新了 repo 以支持视频,它是一个基于 GeckoView 浏览器引擎的全功能 3D 浏览器。它依赖于 Oculus 的 OVROverlay
将 Android 插件中生成的帧渲染到 Unity3D 纹理上。
This 是我制作的一个 repo,希望我们可以实现一个不错的游戏内浏览器。这有点 buggy/slow 但它有效(大部分时间)。
它使用 Java 插件,通过覆盖视图的 Draw
方法将 Android WebView
渲染为 Bitmap
,将其转换为 png并将其传递给一个统一体 RawImage
。有很多工作要做,所以请随意改进它!
使用方法:
在 repo 你可以找到你需要导入到 Assets/Plugins/Android/ 和 BrowserView.cs
和 UnityThread.cs
的插件 (unitylibrary-debug.aar
),你可以用它来转换一个Android WebView
到 Unity RawImage
可以显示的纹理。适当填写 BrowserView.cs
的 public 字段。确保您的 API 级别在 Unity 的播放器设置中设置为 25。
代码示例
这里重写 WebView
的 Draw
方法来创建位图和 PNG,并初始化您需要的变量:
public class BitmapWebView extends WebView{
private void init(){
stream = new ByteArrayOutputStream();
array = new ReadData(new byte[]{});
bm = Bitmap.createBitmap(outputWindowWidth,
outputWindowHeight, Bitmap.Config.ARGB_8888);
bmCanvas = new Canvas(bm);
}
@Override
public void draw( Canvas ){
// draw onto a new canvas
super.draw(bmCanvas);
bm.compress(Bitmap.CompressFormat.PNG, 100, stream);
array.Buffer = stream.toByteArray();
UnityBitmapCallback.onFrameUpdate(array,
bm.getWidth(),
bm.getHeight(),
canGoBack,
canGoForward );
stream.reset();
}
}
// you need this class to communicate properly with unity
public class ReadData {
public byte[] Buffer;
public ReadData(byte[] buffer) {
Buffer=buffer;
}
}
然后我们把png传给一个unityRawImage
。
这是 Unity 接收端:
// class used for the callback with the texture
class AndroidBitmapPluginCallback : AndroidJavaProxy
{
public AndroidBitmapPluginCallback() : base("com.unityexport.ian.unitylibrary.PluginInterfaceBitmap") { }
public BrowserView BrowserView;
public void onFrameUpdate(AndroidJavaObject jo, int width, int height, bool canGoBack, bool canGoForward)
{
AndroidJavaObject bufferObject = jo.Get<AndroidJavaObject>("Buffer");
byte[] bytes = AndroidJNIHelper.ConvertFromJNIArray<byte[]>(bufferObject.GetRawObject());
if (bytes == null)
return;
if (BrowserView != null)
{
UnityThread.executeInUpdate(()=> BrowserView.SetTexture(bytes,width,height,canGoBack,canGoForward));
}
else
Debug.Log("TestAndroidPlugin is not set");
}
}
public class BrowserView : MonoBehaviour {
// Browser view needs a RawImage component to display webpages
void Start () {
_imageTexture2D = new Texture2D(Screen.width, Screen.height, TextureFormat.ARGB32, false);
_rawImage = gameObject.GetComponent<RawImage>();
_rawImage.texture = _imageTexture2D;
#if !UNITY_EDITOR && UNITY_ANDROID
// Get your Java class and create a new instance
var tempAjc = new AndroidJavaClass("YOUR_LIBRARY.YOUR_CLASS")
_ajc = tempAjc.CallStatic<AndroidJavaObject>("CreateInstance");
// send the callback object to java to get frame updates
AndroidBitmapPluginCallback androidPluginCallback = new AndroidBitmapPluginCallback {BrowserView = this};
_ajc.Call("SetUnityBitmapCallback", androidPluginCallback);
#endif
}
// Android callback to change our browser view texture
public void SetTexture( byte[] bytes, int width, int height, bool canGoBack, bool canGoForward)
{
if (width != _imageTexture2D.width || height != _imageTexture2D.height)
_imageTexture2D = new Texture2D(width, height, TextureFormat.ARGB32, false);
_imageTexture2D.LoadImage(bytes);
_imageTexture2D.Apply();
_rawImage.texture = _imageTexture2D;
}
}
据我所知,最佳解决方案是 this 3D browser plugin。它不像我尝试过的其他选项那样缓慢或错误,它只是通过在您的场景中放置一个您可以单击和滚动的预制件来工作。
void CreateWebView(float width, float height, Vector3 position) {
var prefab = WebViewPrefab.Instantiate(width, height);
prefab.transform.position = position;
prefab.transform.LookAt(Camera.main.transform);
prefab.Initialized += (sender, args) => prefab.WebView.LoadUrl("https://whosebug.com");
}
我目前正在尝试寻找一种在 VR 应用程序中使用 Web 浏览器的方法。基本上,目标是在面板中打开一个像 https://whosebug.com 这样的页面,并让它通过 oculus go 控制器滚动。
我已经对实现此目的的插件进行了一些研究,例如 this,但其中 none 似乎适用于 oculus go。
更新:我更新了 repo 以支持视频,它是一个基于 GeckoView 浏览器引擎的全功能 3D 浏览器。它依赖于 Oculus 的 OVROverlay
将 Android 插件中生成的帧渲染到 Unity3D 纹理上。
This 是我制作的一个 repo,希望我们可以实现一个不错的游戏内浏览器。这有点 buggy/slow 但它有效(大部分时间)。
它使用 Java 插件,通过覆盖视图的 Draw
方法将 Android WebView
渲染为 Bitmap
,将其转换为 png并将其传递给一个统一体 RawImage
。有很多工作要做,所以请随意改进它!
使用方法:
在 repo 你可以找到你需要导入到 Assets/Plugins/Android/ 和 BrowserView.cs
和 UnityThread.cs
的插件 (unitylibrary-debug.aar
),你可以用它来转换一个Android WebView
到 Unity RawImage
可以显示的纹理。适当填写 BrowserView.cs
的 public 字段。确保您的 API 级别在 Unity 的播放器设置中设置为 25。
代码示例
这里重写 WebView
的 Draw
方法来创建位图和 PNG,并初始化您需要的变量:
public class BitmapWebView extends WebView{
private void init(){
stream = new ByteArrayOutputStream();
array = new ReadData(new byte[]{});
bm = Bitmap.createBitmap(outputWindowWidth,
outputWindowHeight, Bitmap.Config.ARGB_8888);
bmCanvas = new Canvas(bm);
}
@Override
public void draw( Canvas ){
// draw onto a new canvas
super.draw(bmCanvas);
bm.compress(Bitmap.CompressFormat.PNG, 100, stream);
array.Buffer = stream.toByteArray();
UnityBitmapCallback.onFrameUpdate(array,
bm.getWidth(),
bm.getHeight(),
canGoBack,
canGoForward );
stream.reset();
}
}
// you need this class to communicate properly with unity
public class ReadData {
public byte[] Buffer;
public ReadData(byte[] buffer) {
Buffer=buffer;
}
}
然后我们把png传给一个unityRawImage
。
这是 Unity 接收端:
// class used for the callback with the texture
class AndroidBitmapPluginCallback : AndroidJavaProxy
{
public AndroidBitmapPluginCallback() : base("com.unityexport.ian.unitylibrary.PluginInterfaceBitmap") { }
public BrowserView BrowserView;
public void onFrameUpdate(AndroidJavaObject jo, int width, int height, bool canGoBack, bool canGoForward)
{
AndroidJavaObject bufferObject = jo.Get<AndroidJavaObject>("Buffer");
byte[] bytes = AndroidJNIHelper.ConvertFromJNIArray<byte[]>(bufferObject.GetRawObject());
if (bytes == null)
return;
if (BrowserView != null)
{
UnityThread.executeInUpdate(()=> BrowserView.SetTexture(bytes,width,height,canGoBack,canGoForward));
}
else
Debug.Log("TestAndroidPlugin is not set");
}
}
public class BrowserView : MonoBehaviour {
// Browser view needs a RawImage component to display webpages
void Start () {
_imageTexture2D = new Texture2D(Screen.width, Screen.height, TextureFormat.ARGB32, false);
_rawImage = gameObject.GetComponent<RawImage>();
_rawImage.texture = _imageTexture2D;
#if !UNITY_EDITOR && UNITY_ANDROID
// Get your Java class and create a new instance
var tempAjc = new AndroidJavaClass("YOUR_LIBRARY.YOUR_CLASS")
_ajc = tempAjc.CallStatic<AndroidJavaObject>("CreateInstance");
// send the callback object to java to get frame updates
AndroidBitmapPluginCallback androidPluginCallback = new AndroidBitmapPluginCallback {BrowserView = this};
_ajc.Call("SetUnityBitmapCallback", androidPluginCallback);
#endif
}
// Android callback to change our browser view texture
public void SetTexture( byte[] bytes, int width, int height, bool canGoBack, bool canGoForward)
{
if (width != _imageTexture2D.width || height != _imageTexture2D.height)
_imageTexture2D = new Texture2D(width, height, TextureFormat.ARGB32, false);
_imageTexture2D.LoadImage(bytes);
_imageTexture2D.Apply();
_rawImage.texture = _imageTexture2D;
}
}
据我所知,最佳解决方案是 this 3D browser plugin。它不像我尝试过的其他选项那样缓慢或错误,它只是通过在您的场景中放置一个您可以单击和滚动的预制件来工作。
void CreateWebView(float width, float height, Vector3 position) {
var prefab = WebViewPrefab.Instantiate(width, height);
prefab.transform.position = position;
prefab.transform.LookAt(Camera.main.transform);
prefab.Initialized += (sender, args) => prefab.WebView.LoadUrl("https://whosebug.com");
}