UnityのWebGLビルドの機能制限

npaka

2020年2月9日 07:56

1. UnityのWebGLビルド

UnityアプリをWebGLビルドで出力することにより、WebGL対応のWebブラウザで実行できるようになります。

2. 対応ブラウザ

WebGL 2.0に対応しているブラウザは、Chrome 56 以降とFirefox 51 以降になります。

・WebGL のブラウザー間での互換性

3. UnityのWebGLビルドの機能制限

UnityのWebGLビルドには、以下のような機能制限があります。

・スレッド : System.Threadingはサポートしない。
・ネットワーク : IP ソケットに直接アクセスすることができない。
・グラフィックス : OpenGL ES 2.0・3.0と同等の制限。
・オーディオ : 「Web Audio API」の基本的なオーディオ機能のみサポート。
・動的コード生成 : System.Reflection.Emitはサポートしない。
・デバッグ : Visual Studioによるデバッグ機能はサポートしない。

4. WebGLビルドで生成されるファイル

「WebGLビルド」を行うと、以下のファイルが生成されます。

・index.html : ブラウザでコンテンツをロードするHTMLファイル。
・TemplateDataフォルダ : ビルドロゴ、プログレスバー、その他のテンプレート用のアセット。
・Buildフォルダ : ビルド出力ファイル。

Buildフォルダには、以下のファイルが含まれます。

・UnityLoader.js : UnityコンテンツをロードするJavaScriptファイル。
・MyProject.json : JSON ファイル。ビルドに必要なすべての情報が含まれるJSONファイル。
・MyProject.asm.framework.unityweb : asm.jsランタイムとJavaScriptプラグイン。
・MyProject.asm.code.unityweb : プレイヤー用の asm.jsモジュール。
・MyProject.asm.memory.unityweb : プレイヤーのヒープメモリを初期化するためのバイナリイメージ。
・MyProject.data.unityweb : アセットデータとシーン。

5. ネットワークの機能制限

セキュリティ上の理由で、JavascriptはIPソケットに直接アクセスしてネットワーク接続することはできません。System.Net、System.Net.Sockets、UnityEngine.Networkなどのネットワーククラスは利用できません。

ネットワーク機能が必要な場合は、次のAPIを利用します。

・WWWとWebRequest
・Unity Network
・JavascriptのWebSocketとWebRTC

◎ WWWとWebRequest
UnityのWebGLビルドは、「WWW」と「UnityWebRequest」をサポートします。クロスドメインやシングルスレッドによる制限があります。

・クロスドメイン
WebGLのコンテンツが置かれているサーバーから（URL が異なる）別のサーバーへとWWWリクエストを行う場合、アクセスしようとしている別のサーバー上でそのリクエストが認証されなければいけません。WebGLでクロスドメインの問題を解決するには「CORS」 (Cross-Origin Resource Sharing) を使用して承認を行う必要があります。

・シングルスレッド
WebGLビルドはシングルスレッドのため、ブラウザに制御を戻さない限り、ダウンロードは終了しません。以下のような、コードを使用しないでください。

while(!www.isDone) {}

◎ Unity Network
UnityのWebGLビルドは、「Unity Network」をサポートします。「Networking.NetworkManager.useWebSockets」を参照してください。

◎ JavascriptのWebSocketとWebRTC
「WebSocket」と「WebRTC」は両方ともUnityのビルトインAPIとして公開されていませんが、JavaScriptプラグインを使用し実装することが可能です。こちらのAssetStoreパッケージが参考になります。

6. グラフィックスの機能制限

「WebGL」は、WebブラウザでグラフィックをレンダリングするためのAPIです。「WebGL 1.0」は「OpenGL ES 2.0」、「WebGL 2.0」は「OpenGL ES 3.0」の機能に相当し、それらと同等の制限が課されます。

◎ フォントレンダリング
UnityのWebGLビルドは、ダイナミックフォントレンダリングをサポートしています。しかし、ユーザーのマシンにインストールされているフォントにアクセスすることはできないため、使用するフォントは全てプロジェクトフォルダに配置し、予備フォント名を設定してください。

◎ アンチエイリアシング
UnityのWebGLビルドは、ブラウザとGPUのほとんどの組み合わせでアンチエイリアスをサポートしています。これを使用するには、WebGLのデフォルトの品質設定でアンチエイリアスを有効にする必要があります。

◎ カメラのクリア
UnityのWebGLビルドは、「Camera.clearFlags」の設定に関係なく、フレームバッファのコンテンツがクリアされます。ただし、インスタンス化時にこの動作を変更できます。これを行うには、WebGLテンプレートで「webglContextAttributes.preserveDrawingBuffer」をtrueに設定します。

UnityLoader.instantiate("unityContainer", "%UNITY_WEBGL_BUILD_URL%", {
   Module: {
       "webglContextAttributes": {"preserveDrawingBuffer": true},
   }
});

◎ 遅延レンダリング
UnityのWebGLビルドでは、「WebGL 2.0」が利用可能な場合にのみ「遅延レンダリング」をサポートします。

◎ グローバルイルミネーション
UnityのWebGLビルドでは、「Baked GI」のみをサポートしています。「Realtime GI」は「WebGL」では今のところサポートされていません。「Non-Directionalライトマップ」のみがサポートされています。

◎ リニアレンダリング
UnityのWebGLビルドでは、WebGL 2.0での線形色空間レンダリングのみをサポートします。線形カラースペースレンダリングは、「WebGL 1.0」のフォールバックサポートを備えていません。線形色空間レンダリングを使用してWebGLプレーヤーを構築するには、[Player Settings]で「WebGL 1.0 API」を削除し、[Other Settings]で「Auto Graphics API」を無効にする必要があります。

◎ ムービーテクスチャ
UnityのWebGLビルドでは、MovieTextureクラスによる動画再生をサポートしていません。しかし、HTML5 video 要素を用いて WebGL コンテンツで効率よく動画を再生することはできます。こちらのAsset Storeパッケージが参考になります。

7. オーディオの機能制限

UnityのWebGLビルドのオーディオは他のプラットフォームとは異なります。「Web Audio API」を内部ベースとして、ブラウザ側でオーディオの再生とミキシングを実装しています。

以下に記載されていないものは現在サポートされていません。

・AudioSource
・AudioListener
・AudioClip
・SystemInfo.supportsAudio
・WWW.audioClip
・Microphone

8. 日本語入力の制限

InputFieldでの日本語入力はできません。日本語入力するには、Webブラウザ側の機能（promptなど）で入力する必要があります。

9. 各ブラウザにおける WebGL 対応状況

各ブラウザにおける WebGL 対応状況は、以下が参考になります

・各ブラウザにおける WebGL 対応状況（2019年12月時点）

10. Unity WebGLのスマホ対応

PCとスマホの両方でフルスクリーン表示対応のテンプレートは次のとおり。
「Build/SampleGame.json」の部分はプロジェクト名に合わせて変更。

<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>Unity WebGL Player | SampleGame</title>
    <script src="Build/UnityLoader.js"></script>
    <style>
    * {
      margin: 0px;
      padding: 0px;
    }
    </style>
    <script>
      UnityLoader.SystemInfo.mobile = false;
      var gameInstance = UnityLoader.instantiate("gameContainer", "Build/SampleGame.json");
    </script>
  </head>
  <body bgcolor="#000000">
    <script>
      document.write('<div id="gameContainer" style="width: '+
        document.documentElement.clientWidth+'px; height: '+
        document.documentElement.clientHeight+'px; margin: auto"></div>')
      var canvas = document.getElementById("gameContainer") ;
      window.onresize = function(){
        canvas.style.width = document.documentElement.clientWidth+"px";
        canvas.style.height = document.documentElement.clientHeight+"px";
      }
    </script>
  </body>
</html>

Unity WebGLのスマホ対応は、以下が参考になります。

・Unity WebGLのスマホ対応