こんにちは、海行です。

そう言えば去年の年末にUnityAframeExporterを作ったんですが、そのまま放置してて、ブログにも記事にしてなかったので、書いてみます。

UnityAframeExporterとは何か？
UnityのSceneをA-Frameとして出力できるUnityアセットです。

ではA-Frameとは何か？

A-Frameとは？

Mozillaが開発している、手軽にWebVRコンテンツを作れるフレームワークです。
ブラウザから閲覧できる３ＤのVRコンテンツを、htmlのタグ打ちみたいなノリでササッと作れます。

公式サイトはこちら。
Examplesで色々なサンプルを見れるので、どんな事ができるのか大体確認できます。

詳細な情報はすでに親切な解説を上げてくださってる方々がいらっしゃるのでそちらをご参考に。

参考リンク：
新しいWebVRフレームワークA-Frame入門
HTML数行でVRできるA-Frame

A-Frameで何が嬉しいかというと、これまであまり簡単に制作する手段の無かったWebVRコンテンツを、お手軽に制作できるようになりました。
何でWebVRがいいのかというと、何といってもマルチプラットフォームですから、一つのコンテンツをOculus Riftからでも普通のＰＣブラウザからでも、Cardboardからでもスマホ単体からでも楽しむことができます。
わざわざユーザーにアプリをインストールしてもらう必要もないのでめんどくさくなくて、気軽に体験してもらえるはずです。

とりあえず今すぐA-Frameが活躍できそうな分野は、

・全天球写真、動画をHMDやブラウザで楽しむコンテンツは一瞬で作れる（全天球動画はYoutubeでも楽しめますが）
・自作の３ＤモデルをHMDやブラウザで眺めたりウォークスルーするコンテンツは一瞬で作れる

要するにこういう置いただけのライトなコンテンツはすぐ作れます。
ただしそれ以上に色々凝ったギミックをやろうとするとjavascriptを書きまくるはめになります。

UnityAframeExporterとは？

A-Frameのおかげで簡単にWebVRコンテンツが作れるようになりました。
しかし、私なんかはA-Frameのタグ打ち自体がすでにダルい！

３Ｄ空間にタグで座標指定してhtmlを保存してブラウザをリロードして確認して…もうちょっと上かな…って修正して…
なんて事チマチマやってられないという訳です。

３Ｄにオブジェクトを配置するならエディタが必要不可欠でしょう。
が、A-Frameのためにイチから３Ｄエディタの開発なんてそれこそやってられません。

そこで一計を案じて、UnityエディタをA-Frameエディタとして使ってしまおうという訳です。
Unityエディタで好きなように３Ｄオブジェクトを配置して、そのシーンをそのままA-Frameとして出力出来れば一発ＯＫです。

今回はA-Frameを出力しましたが、フォーマットさえ変えれば、どんな形式の物でも出力できると思います。
やろうと思えばUE4に対して出力することもできるでしょう。
というかもう作られてます。

参考リンク：
Thread: Unity to UE4 scene converter

さて、UnityのシーンをA-Frameに変換するわけですが、これでUnityのアセットストアの3DモデルをA-Frameに持ち込んだらどうなるんだろう？
そもそもアセットストアのアセットをUnity以外で使っていいのか？
アセットストアの人に訊いてみました。

との事でした。
アセットストアのアセットはUnityからしか使えません！

ちなみに、ユニティちゃん関係のアセットはアセットストアじゃなくてユニティちゃんオフィシャルウェブサイトで配布されてますので、ライセンスはユニティちゃんライセンスのみが適用されます。

現在のユニティちゃんライセンスの規約ではUnityに縛る規定は無いので、A-Frameで出力も可能ですね。

UnityAframeExporterを使ってみよう

とりあえずサンプルの出力までを解説してみます。

まず、GitHubのUnityAframeExporterのリポジトリをクローンするか、「Download Zip」のボタンを押してZipファイルをダウンロードして解凍します。

Unityを起動してダウンロードしたリポジトリをプロジェクトとして開きます。

↓「sample」シーンを開きます。

AFrame1

↓プロジェクトビューのAFrameExporterプレハブをクリックしてインスペクタを開きます

AFrame2

インスペクタのExportボタンを押すとexportというフォルダにA-Frameを出力できます。

↓Runボタンを押すと出力したA-Frameをブラウザで実行できます。

AFrame3

Unityのシーンビューとほぼ同じ見た目でA-Frameに出力できました。

こんな感じです。
その他の細かい仕様や注意点はGitHubリポジトリのREADMEをご確認ください。

互換性はかなり低いので、Unityで作ったバリバリのゲームのシーンをそのままA-Frameにコンバートしようとしても表示が崩れると思います。
そこはあくまでUnityエディタをA-Frameエディタとして使えればいいと私は割り切ってるので、ご了承願います。

UnityAframeExporterの使用例

なにか使用例があった方がいいだろうなと思って作りました。

ユニティちゃん達

ユニティちゃん達を置いただけのA-Frameです。

↓URLはこちら
http://umiyuki.github.io/aframe-sample/

GitHubPagesに置くだけで公開できるのでラクでいいですね。
ホントはもうちょっと何かギミックを仕込もうと思ってアレコレ触ってたんですが、色々あって断念しました。

さて、まるですんなりとUnityからA-Frameをエクスポートできたように言ってますが、実際には色々と手間がかかりました。
まず、前述のサンプル出力画像を見てもらえばわかるのですが、出力されたユニティちゃんに微妙なシェーディングがかかってます。
これはA-FrameではUnityのシェーダをそのまま適用できる訳ではないので適当に変換してるせいです。
微妙なシェーディングになるくらいなら、いっそシェーディング無しにしましょう。

UnityでUnlit系のシェーダを適用するとA-FrameのFlat（シェーディング無し）になるようにしてあるので、ユニティちゃん達のすべてのメッシュのシェーダをUnlit/Textureに差し替えます。
さらに、ユニティちゃん達のテクスチャはtga形式ですが、A-Frameはtgaに対応してないのでpngで保存し直した物に差し替えます。
これで大体ＯＫかなとGitHubPagesに上げてみたら何故かユニティちゃん達の身体が表示されずに生首が浮いてました。

なぜ？とあれこれ調べてたら、何故かはわかりませんがGitHubPagesだとアンダーバーから始まる名前のファイルの読み込みに失敗するようです。
これもチマチマリネームしました。

そんなこんなで結局一筋縄ではいかない感じですが、それでも使いこなせば便利かもしれないので、よかったら使ってみてください。

A-Frameについて思う事

そんなA-Frameですが、試した感じとしてはまだちょっと安定してないかな？という印象です。
なんかローカルだとファイル読み込みが上手くできなかったり、CHANGELOGを見たらガッツンガッツン仕様変更が入ったりしてます。
個人的には、VRモードのままA-Frameから別のアドレスのA-Frameにジャンプしたりしたいのに、ブラウザの制限のせいでできないのがつらい所ですね。

慌てて使うより、もう少し成熟するのを待った方がいいかな？と思いますが、WebVRやる必要があるなら試す価値アリです。
スマホでどこまで動作するのか怪しいあたりがイマイチ手放しにプッシュできない所なんですよね。

記事では散々ライトなコンテンツしか作れない的な言い方をしてますが、実はかなり奥深いところもあります。

例えばこちらのa-invadersでは、A-Frameでゲームっぽいものが動いてます！

A-Frame内の要素はEntity-Componentパターンで構成されています。
つまり、自分でjavascriptで書いたコンポーネントを各エンティティにアタッチして機能拡張することができます。
考え方としてはUnityのコンポーネント指向に似てるんですよね～。

使いこなせば結構凝ったゲームとか作れるかも！？

だからA-Frameは今後成熟にともなって大きなポテンシャルを発揮するかもしれないと思ってます。

今後の展望

UnityAframeExporterは改良の余地がありますが、もうあまり弄らないかも…
せっかくGithubにMitライセンスでアップしたので、誰かがいい感じに直してくれるのを期待します！（他力本願

そもそもWebVRの今後の展望が気になります。
果たしてWebVRの時代はやって来るのでしょうか。

単発のＶＲコンテンツが散発的にあちこち置かれてるだけだとイマイチスケールしなさそうな感じがするので、何はともあれWebVRからWebVRへシームレスにリンクして、巨大なVRネットワーク世界を形成できるようになる事が重要な気がします。