Rendu d'un site web en tant que texture dans Unity3D sur Android

Question

Résumé rapide :

Je travaille sur une application VR, et nous voulons rendre un site web en 3D dans notre scène VR, de préférence sur une texture. Il existe de nombreuses façons d'y parvenir sur un ordinateur de bureau (PC/Mac), mais pas sur les appareils Android.

Détails :

Nous disposons d'un prototype fonctionnel sous Windows qui s'appuie sur le logiciel Zen Fulcrum Plugin de navigateur intégré Mais nous voulons prendre en charge les appareils Android tels que Google DayDream, Gear VR et, à terme, les casques autonomes basés sur Android qui seront commercialisés au cours de l'année prochaine.

Voici une liste de toutes les solutions de rendu de pages web Unity que j'ai trouvées jusqu'à présent :

• Navigateur intégré par Zen Fulcrum - supporte Windows et OSX
• UniWebView par Yumigi - Ils ne soutiennent pas le rendu des pages web en textures. Les pages web sont rendues sur une couche plane au-dessus du rendu du moteur graphique.
• Navigateur Web intégré à l'application par Piotr Zmudzinski - Semble avoir la même limitation
• Webkit pour iOS by Chestnut Games - Ne fonctionne que pour iOS, leur site web ne semble pas fonctionner.
• Moteur HTML pour NGUI & Unity GUI by ZHing - Ne semble pas être un vrai navigateur web. On dirait simplement que quelqu'un a créé des scripts qui convertissent le HTML en éléments d'interface utilisateur.
• EasyWebViewTexture pour Android by JaeYunLee - Je connais quelques développeurs qui l'ont utilisé mais le projet a été mystérieusement supprimé et abandonné.
• Awesomium pour Unity by Khrona Software - Les articles de leur wiki pour Unity sont mystérieusement vides à la fois sur leur site wiki et sur leur GitHub . Les l'ensemble du site web awesomium a également été fermée, de même que le site Web de l Logiciel Krhona site web de l'entreprise. Ils disposent d'un Repo GitHub pour leur intégration Unity mais leur readme indique qu'il ne supporte que Windows et Mac.
• uWebKit3 par Mythos Labs - N'est plus disponible. Leur site web original n'existe plus. Les versions précédentes de uWebKit prétendaient prendre en charge Android. Leur annonce sur les forums Unity à propos de leur fermeture était très mystérieuse et abrupte. J'ai trouvé quelque chose sur GitHub qui prétend être uWebKit3, mais le readme dit ne supporter que PC et Mac.
• Widget du navigateur Web d'Unreal Engine 4 - Il s'agit d'un widget expérimental qui est intégré à UE4 et qui, sur le bureau, rend les pages web dans le monde 3D sans trop de problèmes. Malheureusement, même s'il prétend prendre en charge Android, lorsque vous le déployez sur un appareil, vous constaterez que le navigateur est rendu à plat au-dessus du moteur de jeu, et non dans le monde 3D.

Je n'arrive pas à trouver d'informations sur la raison pour laquelle ce système n'est plus supporté sur Android alors qu'il l'était auparavant. Peut-être que quelque chose a changé dans la pile Android ? Si j'essayais d'utiliser Chromium moi-même et de le faire fonctionner sur Android, est-ce que je me retrouverais dans les mêmes impasses que celles qui ont tué tous ces projets ?

Le SDK Android offre la fonction native WebView qui est rendu comme un élément indépendant à l'écran auquel nous ne pouvons pas vraiment nous connecter. Google vient de publier un aperçu de l'application Navigateur Chrome VR dans Daydream mais il est très tôt dans le développement et je ne pense vraiment pas qu'ils prévoient de fournir une solution pour les développeurs VR de sitôt. Oculus a le système expérimental Navigateur Carmel mais il semble plus axé sur le rendu WebVR que sur la fourniture d'outils pour les développeurs VR. J'ai été en contact avec quelqu'un de l'équipe de la Navigateur Web Oculus (je l'ai rencontré à la PAX, lol), et ils prévoient de mettre en place une fonctionnalité qui permettra aux développeurs de lancer plus facilement des pages web qui s'ouvrent dans le navigateur Oculus Web Browser intégré au Gear VR. Mais il s'agit d'un scénario de changement d'application, qui ne permet pas de rendre une page web dans sa propre scène 3D.

Une possibilité que j'envisage d'explorer : que se passerait-il si un serveur rendait les pages web pour les utilisateurs et transmettait le contenu à leurs appareils sous forme de données de texture ? Cela ressemblerait un peu à ce que OnLive a fait avec les jeux vidéo, sauf que l'on pourrait tolérer plus de latence à certains moments. On pourrait utiliser Selenium (ou un autre outil de test de régression visuel pour le développement web) pour gérer le rendu... Je ne sais pas si notre société peut se permettre de passer des mois sur un projet de ce genre, mais ça a l'air d'être une vraie galère à réaliser. -_-

Des suggestions ? Merci de votre compréhension.

Answer 1

J'ai cherché des plugins webview qui prennent en charge la vidéo et le plugin Plugin Unity 3D webview pour Android est le seul que j'ai trouvé qui le fasse. Je l'utilise depuis un certain temps et je le recommande. Voici un exemple d'utilisation :

using UnityEngine;
using Vuplex.WebView;

class SceneController : MonoBehaviour {

    // I set this in the editor to reference a webview in the scene
    public WebViewPrefab webPrefab;

    void Start() {
        webPrefab.Init(1.5f, 1.0f);
        webPrefab.Initialized += (sender, args) => {
            // load the video so the user can interact with it
            webPrefab.WebView.LoadUrl("https://www.youtube.com/watch?v=dQw4w9WgXcQ");
        };
    }
}

Answer 2

Je ne sais pas si cette question est un doublon ou si elle est la même que la précédente. plus récent l'un d'entre eux l'est, mais cette est un repo que j'ai créé dans l'espoir d'implémenter un navigateur dans le jeu. Il est un peu buggé/lent mais il fonctionne (la plupart du temps).

Il utilise un plugin Java qui rend une page Android WebView à un Bitmap en remplaçant la fonction Draw la convertit en png et la transmet à une unité RawImage . Il y a encore beaucoup de travail à faire, alors n'hésitez pas à l'améliorer !

Comment l'utiliser ?

Dans le repo, vous trouverez le plugin ( unitylibrary-debug.aar ), vous devez l'importer dans Assets/Plugins/Android/ et dans BrowserView.cs y UnityThread.cs que vous pouvez utiliser pour convertir une application Android WebView à une texture que la fonction RawImage peut afficher. Remplir BrowserView.cs Les champs publics de l'Union européenne doivent être gérés de manière appropriée. Assurez-vous que votre niveau d'API est défini sur 25 dans les paramètres du lecteur Unity.

Exemples de code

Il s'agit ici d'une surcharge de la fonction WebView 's Draw pour créer l'image bitmap et le PNG, et pour initialiser les variables dont vous avez besoin :

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;
    }
}

Ensuite, nous transmettons le png à une unité RawImage . Voici le côté réception de l'unité :

// 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;
    }
}