【Unity WebGL】3Dコンテンツ作成開始！まずは開発環境を選ぼう！

smartio開発部のシバトウが現在進行形で作成中の3Dコンテンツについて、完成までの進捗を順を追って報告していきます！今回はsmartioが求める3Dコンテンツを作成するため、まずは開発環境を選んでいくところを見てみましょう！

どんな3Dコンテンツをつくるの？

新しいコンテンツに求めるには、「スマートスピーカーやIoTガジェットを使うことで具体的に何ができるかを買う前に体験できる」ということ！はじめに、最低でも以下の条件を達成しようと決めました。

• サイトを見に来た時にスマートホームが疑似体験できる！
• 起動しないとコンテンツが見れないアプリはNG！あくまでブラウザ上で体験させる！

これらの条件を満たすには、Webブラウザで閲覧可能な3Dコンテンツが必要。つまり、WebGLで動作するようにコンテンツを作成しなければなりません。

WebGLコンテンツを作成するための環境を選ぶ！

Three.jsなどWebGL用のライブラリが存在するんですけど、オブジェクトの位置や大きさの定義をベタ書きするのは敷居が高いですよ。本当に！

というわけで、WebGLが扱えるエディタとして以下の2つに候補を絞り込みました。これで最低でもオブジェクトを定義する部分は書かなくて済むので、ぜひこの中から選びたいところです。

Unreal Engine(アンリアルエンジン)

Unreal Engineは、ストリートファイターVやフォートナイトなどの有名なゲームで使用されているゲームエンジンのこと。WebGLでの出力もできるので、候補の1つとして挙がりました。

オブジェクトの配置をエディタ上で行うことができ、その挙動はブループリントを使うことで手軽に作成できます。

ブループリントとは？

ブループリントは、ノンプログラミングでオブジェクトの挙動を作成できる機能のこと。コーディングの知識を全く必要としないので、直感的に挙動を設定していけるのが魅力的！

ではあるのですが、Web上のローディングがすごく長め。これは実際にサイトに埋め込んだ時のことを考えると、非現実的なものでした。

Unity(ユニティ)

UnityもUnreal Engineと並び、代表的なゲームエンジンの1つ。こちらでもWebGLをターゲットにした開発が行えます。埋め込み時のローディング時間もUnreal Engineに比べれば短く、これが決め手となりUnityの方を開発環境として使うことにしました！

ただし、Unreal Engineのようなブループリントがありません。オブジェクトの配置はエディタで簡単に行えるのですが、オブジェクトの挙動をスクリプトで書いてあげる必要が出てきました。

コンテンツのローディング時間が選択の決め手に！

どちらも3Dオブジェクトが簡単に配置できるというメリットがありますが、最終的な決め手はやはりコンテンツのローディング時間でした。サイトのページを表示したときに、3Dコンテンツのロードを延々と待つなんてことはできませんからね！

	Unreal Engine	Unity
ローディング時間	約88秒	約30秒

各エディタで作成したコンテンツをWeb上で読み込んだときのローディング時間はこんな感じでした！かなり大きな差が出ていることが分かります。ただ、30秒というのもかなり長いのでここは改善の余地ありですね。

Unityのスクリプトに慣れていく

そこで最初は、オブジェクトの挙動をつかさどるスクリプトをテストで作ってみることから始めました！

このテストでは、ボタンを押したら特定のキューブを照らしている電気のON/OFFが操作できるようにしてみました。ひとまずオブジェクトの挙動も作成できそうなので、完成に向けて先が見えますよね。

次回はUnityのアセットを利用して、だんだんスマートホームが体験できるように近づけていきたいと思います。スマートスピーカーなどの3Dモデルを別途入れてかなきゃだね！