[Unity] アプリをWebGLで出力して3Dをブラウザ上で動かす方法

2021年2月28日

ブラウザ上で3Dモデルを動かす方法として Three.js を紹介しました。

Three.js入門 - ブラウザで様々な3Dを表示するサンプル

しかし、物理シミュレーションを行うためには Cannon.js などと組み合わせる必要があり、少し手間がかかります。

もし Unity が使えるのであれば、物理挙動も含めた複雑なゲームを WebGL として出力し、他のプラットフォームと同じようにブラウザ上で動かすことができます。

今回は Unity(バージョン2020.2.1f1) によってWebページ上で動作するWebGLアプリの出力方法について紹介します。

WebGLで出力する手順

以下のような3Dのプロジェクトを Unity で作成したとします。

Unityで作成した簡単な3Dオブジェクトのみのプロジェクト

立方体には Rigidbody を設定しました。立方体が床に落ちるだけの簡単なプロジェクトです。

1.WebGL出力用モジュールをインストール

上部メニューから File > Build Settings を選択します。

Unity Build Settings

開いたウィンドウで"Add Open Scene"のボタンをクリックし、現在のシーンを出力対象として指定します。

その後「WebGL」のタブを選択します。まだ WebGL のためのモジュールをインストールしていない場合は"Install with Unity Hub"のボタンをクリックしてインストールを完了させてください。

UnityのBuildSetting画面

インストール完了後、Unity を再起動すると、画面が以下のように変化します。

WebGLモジュールインストール後のBuildSetting画面

これでモジュールの準備は完了です。

2.出力設定を変更

次に、設定画面左下の"Player Setting..."のボタンをクリックします。

開いたプレイヤー設定において"Publish Settings"のタブを開き、"Decompression Fallback"にチェックを入れます。このバージョンの Unity では、これを行わないと起動時にロードが途中で止まってしまう現象が発生します。

また、"Resolution and Presentation"のタブから画面サイズなど、ブラウザ上でのアプリの見た目の変更も行えます。

WebGLアプリの表示方法を変更

2.出力ファイルをサーバー上に置く

以上を設定後"Build Settings"ウィンドウの Build をクリックしてアプリを出力します。出力に成功すると、以下のようなファイルとフォルダが作成されるはずです(設定によってはTemplateDataフォルダはつくられないことがあります)。

UnityのWebGLプロジェクトファイル

index.html をブラウザで開いて動かしたいところですが、ローカルではクロスオリジンの問題によるエラーによって動かない場合があります。

Access to XMLHttpRequest at 'XXX' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

ファイルをサーバー上にアップロードするか、XAMPP など localhost によって動かしましょう。出力時に「Build And Run」を選択すると自動的に localhost で起動されます。

実際にページに埋め込んだ例を以下に示します。

起動時にロードが途中で止まってしまう場合

読み込み中、以下のエラーが発生し、ロードゲージが終了間近で進まなくなってしまうことがあるかも知れません。

unityFramework is not defined at HTMLScriptElement.r.onload

Unityで出力したWebGLのゲームロードが止まってしまう不具合

この問題は圧縮自体を無効にするか、上記の設定によって解決するはずです。

以上によってWebページ上で Unity で作成したアプリを動かすことができます。

参考: Bug - Uncaught ReferenceError: unityFramework is not defined at HTMLScriptElement.script.onload (WebGL) - Unity Forum

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です