Unity で Web コンテンツ開発

こんにちは。ウェブ共同開発部の梶野です。

私は趣味で Unity を使った 3D のアクションゲームを製作しているのですが、これを Web 開発にも活かせないかと思い、最近は社内勉強会などを開催しています。

Web で 3D コンテンツを作りたいが 3D は取っ付きにくそうで中々手が出せないでいるような人は参考になるかと思います。

今回は Unity を使った Web コンテンツ作成の概略と流れを簡単に説明します。

Unity とは？

ご存知の方も多いかと思いますが Unity は統合開発環境を含むゲームエンジンです。

最大の特徴はその使いやすさとマルチプラットフォームへの出力機能です。

ほぼ全ての機能を無料版( Personal 版)で使用可能です。

Unity と Web

Unity で製作された 3D コンテンツはマルチプラットフォームへの出力機能により Web コンテンツとして出力することが可能です。

※ 以前は WebGL を標準でサポートしているブラウザが少なかったため Flash への出力機能もサポートされていましたが、現在は廃止されています。

Web での 3D コンテンツ開発なら three.js などのライブラリもありますが、それを上手く活用するには 3D に関する多くの知識が必要とされます。

Unity を使うことで 3D に今まで触れて来なかった Web エンジニアでも比較的簡単に 3D の Web コンテンツを作成できるようになるはずです。もしも、最終的に Unity ではなく別のライブラリでコンテンツを作成することになったとしても Unity を触ってみることは直感的に 3D を理解する良い教材になると思います。

現在の対応ブラウザ

Unity で出力できる Web コンテンツが対応しているブラウザは以下の通りです。残念ながら全てのブラウザというわけにはいきませんが、多くのモダンブラウザに対応しています。

• Safari
• Chrome
• Firefox
• Edge

※ モバイル端末は未サポート(動くものもあるが重い)

詳しくはこちらを参照してください。

Unity の導入

こちらから Unity のインストーラをダウンロードし、起動します。

試すだけならばライセンスは無料の Personal で十分です。機能的にも有料版とほとんど変わりませんが、起動時の Unity ロゴが消せないなどの制限事項があります。

インストール時には Unity component selection の項目で WebGL Build Support を選択しておく必要があります。

AssetStore からアセットをインポート

3D コンテンツを作成するなら当然 3D モデルのデータが必要になります。しかし、ほとんどの人は 3D モデルを自作する知識はないと思います。そこで、Unity が用意している AssetStore を使って 3D モデルを用意することにします。

AssetStore は Unity で使用できる 3Dモデル、音楽、プラグインなどのあらゆる素材を購入できるショップです。無料の素材も多く存在するので今回はここから 3D モデルを入手します。

折角なので Unity Technologies Japan が作っている無料のキャラクター「ユニティちゃん」をインポートしてみます。そうすると Project ビューの領域にユニティちゃんの素材が追加されます。

オブジェクトを配置

Unity の開発で使う用語やオブジェクト操作等の説明は本題ではないので省略しますが、今回は下記の手順でオブジェクトを配置しました。

• Project ビューから Assets > UnityChan > Prefabs > unityChan を Hierarchy ビューにドラッグ&ドロップすることでシーンの中心に配置
• Hierarchy ビューを右クリックし 3D Object > Plane を選択して床を生成
• Hierarchy ビューから Main Camera を選択し Game ビューでユニティちゃんの全体が表示されるように位置や角度を調整
• シーンを保存

ここまでできると以下のような表示になリます。

再生ボタンを押下することでシーンを再生することができます。今回追加したユニティちゃんのモデルはプレハブという機能でポージング・アニメーションを切り替えるスクリプトやその他の必要となるオブジェクトをあらかじめ含んだ形になっていますので、画面上に表示されたボタンを押下することで動かすことができます。

Web コンテンツを出力

いよいよ Web コンテンツとして出力してみます。とは言ってもやることは簡単です。メインメニューから Build Settings を選択し下記のウインドウを表示します。

• Add Open Scenes を押下して現在開いているシーンをビルド対象として追加
• Platform から WebGL を選択し、Build And Run ボタンを押下
• 出力先の指定を求められるので適当な場所を選んで Save ボタンを押下

出力されるのは index.html と素材データ一式です。ビルドにはしばらく時間がかかりますが、完了すると自動でローカルサーバを立ててブラウザで表示してくれます。

実用までの道のり

もっとリッチなコンテンツを作成するには

今回紹介したものは単一の 3D オブジェクトを見るだけの簡単なものでしたが、ロードには早くても数秒かかります。もっとリッチなコンテンツを作成する場合は読み込まなければならない素材も増え、さらに初期ロードに時間がかかるようになります。

そこで登場するのがアセットバンドルと呼ばれる仕組みです。これを使うことで初期ロード時ではなく後から非同期で素材データをロードすることができます。

ブラウザのスクリプトと通信を行うには

Unity で Web コンテンツを構築していくとき Web ページ上の Unity 以外の JavaScript と通信を行う必要が出てくる場合があります。または Unity API として実装されていない Web API を使用して機能を実装したい場合もあるかもしれません。このような場合のために幾つかの連携手段が提供されています。

Unity 側から JavaScript を呼び出す一番簡単な方法としては Application.ExternalCall() と Application.ExternalEval() 関数を使って、埋め込まれた Web ページで JavaScript コードを起動する方法が一般的です。
ブラウザから JavaScript を使って Unity 側のメソッドを呼び出すには、以下のコードを使用できます。

SendMessage ('MyGameObject', 'MyFunction', 'foobar');

詳しくはこちらを参照してください。

まとめ

今回は Unity で 3D の Web コンテンツを作成する方法を試してみました。単純な 3D ビューア程度であれば予備知識がなくとも直ぐに作成可能であることがわかっていただけたかと思います。

しかし、リッチなコンテンツや他のスクリプトとの連携などを考えると多少なりとも勉強は必要になるでしょう。

Unity は公式のドキュメントも(日本語版も)充実していますので、この記事を読んで興味を持たれた方はそちらを読んで見るのが良いかと思います。

エンジニア募集

フェンリル島根支社ではウェブエンジニアを募集しています。また、プロジェクトマネージャやスマートフォンアプリ開発エンジニアも募集しています。

島根支社の採用ページが公開されているのでぜひ一度ご覧になってください！

フェンリルのオフィシャル Twitter アカウントでは、フェンリルプロダクトの最新情報などをつぶやいています。よろしければフォローしてください！