Table of Contents
ブラウザ上で3Dモデルを動かす方法として Three.js を紹介しました。
しかし、物理シミュレーションを行うためには Cannon.js などと組み合わせる必要があり、少し手間がかかります。
もし Unity が使えるのであれば、物理挙動も含めた複雑なゲームを WebGL として出力し、他のプラットフォームと同じようにブラウザ上で動かすことができます。
今回は Unity(バージョン2020.2.1f1) によってWebページ上で動作するWebGLアプリの出力方法について紹介します。
WebGLで出力する手順
以下のような3Dのプロジェクトを Unity で作成したとします。
立方体には Rigidbody を設定しました。立方体が床に落ちるだけの簡単なプロジェクトです。
1.WebGL出力用モジュールをインストール
上部メニューから File > Build Settings を選択します。
開いたウィンドウで”Add Open Scene”のボタンをクリックし、現在のシーンを出力対象として指定します。
その後「WebGL」のタブを選択します。まだ WebGL のためのモジュールをインストールしていない場合は”Install with Unity Hub”のボタンをクリックしてインストールを完了させてください。
インストール完了後、Unity を再起動すると、画面が以下のように変化します。
これでモジュールの準備は完了です。
2.出力設定を変更
次に、設定画面左下の”Player Setting…”のボタンをクリックします。
開いたプレイヤー設定において”Publish Settings”のタブを開き、”Decompression Fallback“にチェックを入れます。このバージョンの Unity では、これを行わないと起動時にロードが途中で止まってしまう現象が発生します。
また、”Resolution and Presentation“のタブから画面サイズなど、ブラウザ上でのアプリの見た目の変更も行えます。
2.出力ファイルをサーバー上に置く
以上を設定後”Build Settings”ウィンドウの Build をクリックしてアプリを出力します。出力に成功すると、以下のようなファイルとフォルダが作成されるはずです（設定によってはTemplateDataフォルダはつくられないことがあります）。
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
この問題は圧縮自体を無効にするか、上記の設定によって解決するはずです。
以上によってWebページ上で Unity で作成したアプリを動かすことができます。