Unityで作成した3Dプロジェクトを、ブラウザ上で遊べたらと考えたことはないでしょうか。実際、WebGLで出力することで、Unityの3Dプロジェクトをブラウザ上でも遊べるようになります。
本記事では、Unityの3DプロジェクトをWebGLで出力する方法について解説しています。さらに、WebGLでできることやビルド時のエラーを防ぐための注意点も紹介しているので、Unityの3Dプロジェクトをブラウザ上で遊べるようにしたい方は、ぜひ参考にしてみてください。
Unityの3DプロジェクトをWeb上で遊ぶには
Unityで作成した3DプロジェクトをWeb上で遊べるようにするには、通常のビルド方法とは異なる手順が必要です。Unityの通常のビルドではパソコンに対応した実行ファイルを出力できますが、そのままではブラウザ上で3Dプロジェクトを動かすことはできません。
ブラウザ上で3Dプロジェクトを遊ぶには、WebGLと呼ばれる専用のプラットフォームに変更して出力する必要があります。Unityの3DプロジェクトをWebGLでビルドできれば、作成したゲームをWebサイトに設置したり、サーバーにアップロードして多くのユーザーに遊んでもらったりすることが可能になります。
WebGLとは
WebGLは「Web Graphics Library」の略で、Webブラウザ上で3Dグラフィックスを描画するための技術です。前提として、Webブラウザは動作が遅いため、3Dグラフィックスのような重い処理には向いていません。
しかし、WebGLを利用することで、ブラウザ上でも高速で3D描画を行えるようになり、快適に3Dゲームを遊べるようになります。また、ChromeやEdge、Firefox、Safariといった主要なWebブラウザは、すべてデフォルトでWebGLに対応しているため、特別な設定なしで利用できます。
WebGLでできること
WebGLの技術を活用することで、以下のようなことができるようになります。
- ブラウザ上で3Dゲームを遊べる
- ECサイトに3Dモデルを表示できる
- Webサイトに3Dの動的アニメーションを設置できる
これらのWebGLでできることについて詳しく見ていきましょう。
①ブラウザ上で3Dゲームを遊べる
WebGLを使うことで、UnityやUnreal Engineのようなゲームエンジンで作った3Dゲームをブラウザ上で遊べるようになります。完成した3Dプロジェクトをサーバーにアップロードすれば、手間のかかる操作不要で世界中の人に公開できます。
さらに、Webサイト内に3Dゲームを設置することで、ユーザーのサイト内滞在時間の向上も期待できるため、Webサイトのパフォーマンス向上の対策としても効果的です。
また、Unityを使ったゲーム制作スキルを高めたいなら、Unity基礎セミナーがおすすめです。Unity基礎セミナーでは、スクリプトやアセットを使った、本格的なゲーム制作の方法を学べます。Unityは専門的な知識が求められるので、効率的にスキルアップしたい方はぜひチェックしてみてください。
②ECサイトに3Dモデルを表示できる
WebGLを利用すれば、ブラウザ上に3Dモデルを表示することも可能です。この仕組みはECサイトでよく活用されており、商品を3D化して掲載することで、ユーザーはさまざまな角度から商品を確認できます。
写真だけでは伝わりにくい形状や質感も把握しやすくなるため、ユーザーの満足度向上につながります。細部までチェックできる点は、3D表示ならではの魅力といえるでしょう。
③Webサイトに3Dの動的アニメーションを設置できる
WebGLを活用すると、ユーザーの操作に応じて変化する動的な3DアニメーションをWebサイト上に設置できます。例えば、スクロールに合わせて3Dモデルが変形したり、ページを開いた際に3Dアニメーションが再生されたりといった演出が可能です。
WebGLで3Dアニメーションを取り入れることで、視覚的にも印象の強い、リッチなWebサイトを作成できるでしょう。
Unityの3DプロジェクトをWebGL出力する方法
実際に、Unityの3DプロジェクトをWebGLで出力するまでについて見ていきます。一緒に手を動かしながら進めていきましょう。
①Unityで3Dプロジェクトを作成する
まずはUnity Hubを起動します。画面左側にある「プロジェクト」タブを選択し、右上の「新しいプロジェクト」ボタンをクリックしてください。
テンプレートの一覧が表示されるので、「3D」テンプレートを選択し、右下の項目から任意のプロジェクト名と保存場所を設定します。
このとき、プロジェクト名は必ず半角英数字で入力してください。ひらがなや漢字、全角文字が含まれていると、後のWebGLビルド時にエラーが発生する原因になります。
設定ができたら「プロジェクトを作成」ボタンをクリックしましょう。
少し待つとUnity Editorが起動するので、3Dゲームの制作を進めていきます。
今回は、WebGLで出力する方法のみを確認するため、手の込んだ作り込みはせず、球体のオブジェクトのみをシーンに追加しました。Hierarchyウィンドウで右クリックして表示されるメニューの「3D Object」から「Sphere」をクリックすれば、球体のオブジェクトを追加できます。
また、Unityで3Dゲームを作る方法を知りたい方は、以下の記事を参考にしてください。3Dゲーム制作に欠かせない当たり判定を導入する方法について解説しています。
②WebGLのモジュールをインストールする
次に、WebGL出力に必要なモジュールをインストールします。Unity Editorの画面左上の「File」から「Build Settings」を開き、Platformの項目を「WebGL」に変更します。
WebGLがまだインストールされていないUnityのバージョンの場合、「WebGL」の項目はグレーアウトされていますが、「Install with Unity Hub」というボタンをクリックすることでWebGLのモジュールがインストールできます。
ボタンをクリックするとUnity Hubが開くので、「WebGL Build Support」を選択して「インストール」をクリックしましょう。
インストール後はUnityを一度再起動し、プロジェクトを開き直してください。
③WebGLで出力する
Unityを再起動したら、再度「Build Settings」を開きます。するとWebGLが選択できる状態になっているので、「Switch Platform」ボタンをクリックして、ビルド対象をWebGLに切り替えましょう。
次に「Player Settings」ボタンをクリックし、表示されたウィンドウから「Other Settings」を開きます。その中にある「Auto Graphics API」のチェックを外してください。
設定が完了したらウィンドウを閉じ、「Build Settings」に戻って「Build And Run」ボタンをクリックします。Build Settingsには「Build」と「Build and Run」の2つのオプションがあり、それぞれの違いは以下の表のとおりです。
| オプション | 説明 |
| Build | アプリケーションをビルドする |
| Build and Run | アプリケーションをビルドして実行まで行う |
今回は自動でブラウザを立ち上げたいので、「Build And Run」を選択しました。保存先を設定するように求められるので、新たにフォルダを作り、そこに保存しましょう。
すると、WebGL形式での出力が開始されます。
④ブラウザで3Dプロジェクトを確認する
ビルドが完了すると自動的にWebブラウザが起動し、出力した3Dプロジェクトが表示されます。
配置したオブジェクトが正しく表示されているかを確認してください。問題なく表示されていれば、Unityの3DプロジェクトをWebGLで出力する作業は完了です。
また、WebGLで出力するための3DゲームをUnityで作る方法について学びたい方は、Unity基礎セミナーがおすすめです。Unityを用いたゲーム作りの流れをハンズオン形式で学べるため、実践的な知識とスキルが身につきます。Unityを効率的に学びたい方は、ぜひ以下のリンクから詳細をチェックしてみてください。
セミナー名 Unity基礎セミナー 運営元 GETT Proskill（ゲット プロスキル） 価格(税込) 41,800円〜 開催期間 2日間 受講形式 対面（東京）・ライブウェビナー・eラーニング
さらに、Unityの操作方法を学べる無料のチュートリアルについては、以下の記事で紹介しています。Unityを独学で学びたい方は、ぜひこちらで紹介しているUnity公式のチュートリアルを活用してみてください。
Unityで3DをWebGL出力する際の注意点
Unityで制作した3DプロジェクトをWebGLで出力する際は、以下の点に注意が必要です。
- プロジェクト名は半角英数字にする
- 生成されたフォルダやファイル名は変更しない
これらの注意点について見ていきましょう。
①プロジェクト名は半角英数字にする
Unityの3DプロジェクトをWebGLで出力する場合、プロジェクト名は半角英数字で統一する必要があります。ひらがなや漢字、全角英数字が含まれていると、ビルド時にエラーが発生する原因になります。
予期せぬエラーを防ぐためにも、プロジェクト作成時から注意して名前をつけるようにしましょう。
②生成されたフォルダやファイル名は変更しない
Unityで制作した3DプロジェクトをWebGLで出力すると、ビルド時にフォルダやファイルが生成されます。これらのフォルダ名やファイル名は、後から変更してはいけません。
名前を変更すると、ブラウザ上で正常に動作しなくなる場合があります。
Unityの3DプロジェクトとWebGL出力のまとめ
今回は、Unityで作成した3DプロジェクトをWebGLで出力する方法について解説しました。WebGLを利用することで、Unityの3Dプロジェクトをブラウザ上で手軽に公開でき、多くのユーザーに遊んでもらえるようになります。
また、WebGLは3Dゲームだけでなく、ECサイトでの3Dモデル表示やWebサイトへの動的な3Dアニメーションの設置など、幅広い用途で活用できます。一方で、フォルダやファイル名の付け方、生成されたファイルの扱い方などを誤ると、エラーにつながる点には注意が必要です。
Unityを使ってブラウザ上で動く3Dコンテンツ作成に挑戦したい方は、ぜひ本記事の内容を参考にWebGLビルドを活用してみてください。
