.NET - WebGLをWPFでホストする（WebView2 で Unity as a Library）

Unity 2019.3以降、「Unity as a Library」というAndroidやiOSのネイティブアプリに、Unityで作成したアプリをライブラリとして埋め込む機能が提供されています。

WebGL 自体はこの中に含まれないのですが、検証ついでに Unity で生成した WebGL のコンテンツを WPF で動かしたのでその覚書になります。

導入

WPF で標準で使える WebBrowser では IE の古いバージョンを使用しているらしく、WebGL がサポートされていません。*1 以前はレジストリをいじるなどの方法を使ったりしたようですが、WebView2 （Preview）を導入すると WebGL がサポートされた Edge（Chromium）を使用するので WebGL を表示できるようになります。

docs.microsoft.com

WebView2 の WPF でのチュートリアルは以下にあります。

docs.microsoft.com

前提条件にあるように、Microsoft Edge（Chromium）Canaryチャネルのインストールが必要になります。

手順

Unity で WebGL 向けのアプリを作ってビルドする
WPF のプロジェクトを作成する（今回は .NET Core）
NuGet で Microsoft.Web.WebView2 をインストールする
プレリリースを含めて検索した上で prerelease 版を選択してください。
XAML を編集する

<Window x:Class="WpfApp1.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
        xmlns:local="clr-namespace:WpfApp1"
        mc:Ignorable="d"
        Title="MainWindow" Height="450" Width="800">
    <Grid>
        <wv2:WebView2 Name="browser" Source=""/>
    </Grid>
</Window>

　5.コードを編集する

        public MainWindow()
        {
            InitializeComponent();
            Loaded += MainWindow_Loaded;
        }

        private void MainWindow_Loaded(object sender, RoutedEventArgs e)
        {
            if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
            {
                browser.Source = new Uri("http://127.0.0.1:8887/");
            }
        }

　XAML に直接URLを埋め込むとデザイナーが読み込みに行ってしまうので、状況に応じてコード側から書き換えてあげると良いでしょう。

　6.WebGL をローカルでホストする

　手っ取り早く以下の手順で実行しました。URLを先のコードのURL部分に埋め込んでください。

　yotiky.hatenablog.com

　7. 実行する　 f:id:yotiky:20200810061645g:plain