Unity WebGL を ASP.NET Core で動かす

ページ更新日 : 2023年9月29日金曜日

ページ作成日 : 2022年3月24日木曜日

検証環境

Windows

Windows 11

Unity エディター

2020.3.25f1

Visual Studio

Visual Studio 2022

ASP.NET Core

ASP.NET Core 6.0

Internet Information Services (IIS)

IIS 10.0

はじめに

Unity で WebGL として出力したゲームを ASP.NET Core が動く Web サーバーで動かす方法について説明します。ゲームプログラムについては以下の Tips の手順で出力したものを使用します。ゲームのサンプルとしては Unity Hub から作成できる「2D Platformer Microgame」を使用しています。

Web 向け (WebGL) のゲームを出力する

WebGL のゲームを動かすために「無圧縮の WebGL」「Gzip で圧縮した WebGL」「Brotli で圧縮した WebGL」の設定方法を説明しますが、途中まではいずれも同じ手順です。

ここでは Visual Studio 2022, ASP.NET Core 6.0 を使っていますが、古いバージョンでもおそらく動作します。ただ、初期コードの構成が各バージョンで異なっているので差異については自身で汲み取ってください。

ASP.NET Core プロジェクトの作成

スタートメニューから「Visual Studio 2022」を起動します。

「新しいプロジェクトの作成」を選択します。

今回はサンプルとして「ASP.NET Core Web アプリ」を選択します。 ASP.NET Core で動いているなら他のテンプレートでも動かせますが構築方法については各テンプレートに従う必要があります。

プロジェクト名や場所は任意に設定してください。

追加情報はそのままとします。

プロジェクトが作成されました。

無圧縮の WebGL を動かす

無圧縮で作成した WebGL プログラムを用意しておいてください。

手っ取り早くゲームが動くことを確認する

ASP.NET Core の作法に則らずにまずは少ない設定で WebGL のゲームを動かしてみます。

ASP.NET Core では初期設定の状態だと Unity で出力された WebGL のいくつかのファイルにアクセスできません。これをアクセスできるようにします。

Program.cs

プロジェクトから Program.cs を開きます。以前の ASP.NET Core のバージョンでは Startup.cs に該当します。

コードの先頭に名前空間を追加し、コードの app.UseStaticFiles(); の箇所を以下のように置き換えます。

// ここから追加
using Microsoft.AspNetCore.StaticFiles;
// ここまで追加

var builder = WebApplication.CreateBuilder(args);

// --- 省略 ---

app.UseHttpsRedirection();

//app.UseStaticFiles();
// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

app.UseRouting();

// --- 省略 ---

.data, .wasm のファイルにアクセスしたときに、指定した Content-Type でクライアントに返せるように設定します。

WebGL の配置

Unity で出力した以下のファイル・フォルダをプロジェクトの wwwroot に配置します。

index.html
Build
TemplateData

Index.cshtml を開き index.html にアクセスできるようにリンクを置きます。

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<a href="index.html">index.html</a>

プログラムを実行してゲームが動くことを確認してください。

Razor ページ上で WebGL のプログラムを動かす

先ほどのゲームは静的である HTML ファイル上で動かしたので ASP.NET Core とは関係ない場所で動作しています。プログラムの統一性としてもあまり好ましくないので HTML ファイルの動作を Razor ページに移行します。

プロジェクトから Pages フォルダを右クリックして新しい項目を追加します。

「Razor ページ - 空」を選択します。名前の指定は特にありませんがここでは WebGL.cshtml とし追加します。

コードが表示されます。

index.html ファイルの中身を参考に WebGL.cshtml に移植します。 link タグの置き方などいくつかおかしいところはありますが説明の簡略化のためにそのままとします。

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="TemplateData/favicon.ico">
  <link rel="stylesheet" href="TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "Build";
    var loaderUrl = buildUrl + "/WebGL.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL.data",
      frameworkUrl: buildUrl + "/WebGL.framework.js",
      codeUrl: buildUrl + "/WebGL.wasm",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

Index.cshtml に WebGL へのリンクを追加します。

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
</ul>

プログラムを実行してみます。WebGL のページにヘッダーとフッターが _Layout.cshtml に従って表示されていることを確認できます。

WebGL のファイルの置き場所を変更する

WebGL のファイルを wwwroot の直下に置きましたが、この方法だと２つ以上の WebGL のファイルを置いたときに上書きされてしまいます。これを別々のフォルダに置いて動かす方法について説明します。

まず今回のファイルは新たに「webgl」というフォルダを作成してそこに移動させます。移動させるのは Build, TemplateData の２つのフォルダです。 index.html についてはすでに Razor ページに移植したので削除して問題ありません。

フォルダの階層を深くしたので WebGL.cshtml に記述されているパスも深くします。修正箇所は３行です。

修正前

<link rel="shortcut icon" href="TemplateData/favicon.ico">
<link rel="stylesheet" href="TemplateData/style.css">

    var buildUrl = "Build";

修正後

<link rel="shortcut icon" href="webgl/TemplateData/favicon.ico">
<link rel="stylesheet" href="webgl/TemplateData/style.css">

    var buildUrl = "webgl/Build";

プログラムを実行して正しく動作するか確認してください。

Gzip で圧縮されている WebGL を動かす

Gzip で圧縮されたファイルの拡張子は .gz となっており一応 ASP.NET Core では扱えるファイルなのですが、 Unity WebGL と Content-Type の扱いが異なるので変換が必要です。

まずは WebGL のファイルの配置とページを作成します。

WebGL のファイル配置

wwwroot の下に webgl-gzip フォルダを作成して Gzip で作成した WebGL のファイルから Build, TemplateData のフォルダをコピーします。

Razor ページの作成

無圧縮の時と同じ手順で今度は WebGLGzip.cshtml ファイルを作成します。

コードは Unity で出力した index.html を参考に以下のようにします。パスは先ほど WebGL のファイル用に作成した webgl-gzip フォルダに合わせています。

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLGzipModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-gzip/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-gzip/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-gzip/Build";
    var loaderUrl = buildUrl + "/WebGL_Gzip.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Gzip.data.gz",
      frameworkUrl: buildUrl + "/WebGL_Gzip.framework.js.gz",
      codeUrl: buildUrl + "/WebGL_Gzip.wasm.gz",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

このページに遷移できるように Index.cshtml を修正します。

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
</ul>

Program.cs の修正

app.UseStaticFiles メソッドを処理している箇所を以下のように修正します。

修正前

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
});
// ここまで追加

修正後

// ここから追加
var provider = new FileExtensionContentTypeProvider();
provider.Mappings[".data"] = "application/octet-stream";
provider.Mappings[".wasm"] = "application/wasm";
provider.Mappings[".br"] = "application/octet-stream";   // .br ファイルにアクセスできるように追加
provider.Mappings[".js"] = "application/javascript";     // 後の変換の為に追加

app.UseStaticFiles(new StaticFileOptions()
{
  ContentTypeProvider = provider,
  OnPrepareResponse = context =>
  {
    var path = context.Context.Request.Path.Value;
    var extension = Path.GetExtension(path);

    // 「.gz」「.br」ファイルにアクセスした場合は Content-Type と Content-Encoding を設定する
    if (extension == ".gz" || extension == ".br")
    {
      var fileNameWithoutExtension = Path.GetFileNameWithoutExtension(path) ?? "";
      if (provider.TryGetContentType(fileNameWithoutExtension, out string? contentType))
      {
        context.Context.Response.ContentType = contentType;
        context.Context.Response.Headers.Add("Content-Encoding", extension == ".gz" ? "gzip" : "br");
      }
    }
  },
});
// ここまで追加

ASP.NET Core では .gz ファイルの Content-Type を application/x-gzip で返すのですが、そのままだとクライアントの Unity WebGL で判別できないので .gz を抜いたファイルの拡張子に合わせて Content-Type を書き換えて返すようにしています。また Content-Encoding も必要なので gzip を設定しています。

ちなみに Brotli のコードも一緒にいれたので次項目の Brotli の対応でこのコードをそのまま使用できます。 Brotli の方も .br を抜いたファイルの拡張子に合わせて Content-Type を書き換え Content-Encoding に br を設定しています。ただ、.br ファイルは ASP.NET Core では標準でアクセス不可になっているので provider.Mappings で .br を追加しています。

後はデバッグ実行してゲームが正しく動くか確認してください。

正しく設定したのにゲームが表示できない場合は Web ブラウザのキャッシュクリアで cookie を削除してみてください。

Brotli で圧縮されている WebGL を動かす

手順については Gzip とほぼ同じで Gzip の部分を Brotli に置き換える形になります。ただし、Brotli (.br) ファイルは ASP.NET Core ではデフォルトでアクセスできないファイルになっているのでアクセスできるように設定を行う必要がありますが Gzip の時のコードを使用している場合は対応済みです。

まずは WebGL のファイルの配置とページを作成します。

WebGL のファイル配置

wwwroot の下に webgl-brotli フォルダを作成して Brotli で作成した WebGL のファイルから Build, TemplateData のフォルダをコピーします。

Razor ページの作成

Gzip の時と同じ手順で今度は WebGLBrotli.cshtml ファイルを作成します。

コードは Unity で出力した index.html を参考に以下のようにします。パスは先ほど WebGL のファイル用に作成した webgl-brotli フォルダに合わせています。

@page
@model UnityPublishWebglAspNetCore.Pages.WebGLBrotliModel
@{
}

<div id="unity-container" class="unity-desktop">
  <canvas id="unity-canvas" width=960 height=600></canvas>
  <div id="unity-loading-bar">
    <div id="unity-logo"></div>
    <div id="unity-progress-bar-empty">
      <div id="unity-progress-bar-full"></div>
    </div>
  </div>
  <div id="unity-warning"> </div>
  <div id="unity-footer">
    <div id="unity-webgl-logo"></div>
    <div id="unity-fullscreen-button"></div>
    <div id="unity-build-title">Platformer</div>
  </div>
</div>

@section Scripts {
  <link rel="shortcut icon" href="webgl-brotli/TemplateData/favicon.ico">
  <link rel="stylesheet" href="webgl-brotli/TemplateData/style.css">
  <script>
    var container = document.querySelector("#unity-container");
    var canvas = document.querySelector("#unity-canvas");
    var loadingBar = document.querySelector("#unity-loading-bar");
    var progressBarFull = document.querySelector("#unity-progress-bar-full");
    var fullscreenButton = document.querySelector("#unity-fullscreen-button");
    var warningBanner = document.querySelector("#unity-warning");

    // 一時的なメッセージバナー/リボンを数秒間表示するか、
    // type == 'error'の場合はキャンバスの上部に永続的なエラーメッセージを表示します。
    // type == 'warning'の場合、黄色のハイライト色が使用されます。
    // この関数を変更または削除して、重要ではない警告とエラーメッセージがユーザーに表示されるように
    // 視覚的に表示される方法をカスタマイズします。
    function unityShowBanner(msg, type) {
      function updateBannerVisibility() {
        warningBanner.style.display = warningBanner.children.length ? 'block' : 'none';
      }
      var div = document.createElement('div');
      div.innerHTML = msg;
      warningBanner.appendChild(div);
      if (type == 'error') div.style = 'background: red; padding: 10px;';
      else {
        if (type == 'warning') div.style = 'background: yellow; padding: 10px;';
        setTimeout(function() {
          warningBanner.removeChild(div);
          updateBannerVisibility();
        }, 5000);
      }
      updateBannerVisibility();
    }

    var buildUrl = "webgl-brotli/Build";
    var loaderUrl = buildUrl + "/WebGL_Brotli.loader.js";
    var config = {
      dataUrl: buildUrl + "/WebGL_Brotli.data.br",
      frameworkUrl: buildUrl + "/WebGL_Brotli.framework.js.br",
      codeUrl: buildUrl + "/WebGL_Brotli.wasm.br",
      streamingAssetsUrl: "StreamingAssets",
      companyName: "DefaultCompany",
      productName: "Platformer",
      productVersion: "2.1.0",
      showBanner: unityShowBanner,
    };

    // デフォルトでは、Unity は WebGL キャンバスレンダリングのターゲットサイズを
    // キャンバス要素の DOM サイズ（window.devicePixelRatio でスケーリング）と一致させます。
    // この同期がエンジン内で発生しないようにする場合は、これを false に設定し、
    // 代わりにサイズを大きくします。 キャンバスの DOM サイズと WebGL は、
    // ターゲットサイズを自分でレンダリングします。
    // config.matchWebGLToCanvasSize = false;

    if (/iPhone|iPad|iPod|Android/i.test(navigator.userAgent)) {
      container.className = "unity-mobile";
      // モバイルデバイスでフィルレートのパフォーマンスを低下させないようにし、
      // モバイルブラウザで低 DPI モードをデフォルト/オーバーライドします。
      config.devicePixelRatio = 1;
      unityShowBanner('WebGL builds are not supported on mobile devices.');
    } else {
      canvas.style.width = "960px";
      canvas.style.height = "600px";
    }
    loadingBar.style.display = "block";

    var script = document.createElement("script");
    script.src = loaderUrl;
    script.onload = () => {
      createUnityInstance(canvas, config, (progress) => {
        progressBarFull.style.width = 100 * progress + "%";
      }).then((unityInstance) => {
        loadingBar.style.display = "none";
        fullscreenButton.onclick = () => {
          unityInstance.SetFullscreen(1);
        };
      }).catch((message) => {
        alert(message);
      });
    };
    document.body.appendChild(script);
  </script>
}

このページに遷移できるように Index.cshtml を修正します。

<!-- 省略 -->

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <p>Learn about <a href="https://docs.microsoft.com/aspnet/core">building Web apps with ASP.NET Core</a>.</p>
</div>

<!-- 追加 -->
<ul>
  <li><a href="index.html">index.html</a></li>
  <li><a href="WebGL">WebGL</a></li>
  <li><a href="WebGLGzip">WebGLGzip</a></li>
  <li><a href="WebGLBrotli">WebGLBrotli</a></li>
</ul>

Program.cs の修正

Gzip 対応の時に修正していれば同じコードで対応可能です。

修正したらデバッグ実行してゲームが動くか確認してください。

正しく設定したのにゲームが表示できない場合は Web ブラウザのキャッシュクリアで cookie を削除してみてください。

IIS Web サーバーで Brotli ファイルにアクセスできない現象について

Brotli は IIS が標準でサポートしていないので IIS 側の設定が必要になります。拡張設定を行えば対応できるらしいですが、本 Tips では説明は省きます。以下のリンク先の情報を参考にしてください。

エラーメッセージ

Unable to load file webgl-brotli/Build/WebGL_Brotli.framework.js.br! Check that the file exists on the remote server. (also check browser Console and Devtools Network tab to debug)

Web 向け (WebGL) のゲームを出力する

ゲーム解像度を変更する