FacebookのAR studioを先行トライしてわかったARのこれから

AR Ojisan
15 min readNov 12, 2017

--

【約1年半ぶりのハッカソン】

こんばんは!昨日と本日はFacebookとMashup awardが主催するAR ハッカソンに参加してきました。弊社代表の梶谷と「ARの新しいツールを見に行こう」ってことで参加したハッカソンでしたが、色々な発見や出会いもあり楽しく参加させていただきました。

惜しくも優勝は逃してしまいましたが、ハッカソン参加者の方からのオーディエンス賞やウフル社賞、それから上位3チームの優秀賞には入れてもらえたし、個人的にも面白いものが作れたかなと思っています。

今回のチームメンバー

【AR studioとは】

さて今回はFacebook社が現在ベータローンチしているAR Studioというツールを使ってARアプリを作るというハッカソンでした。現在のFacebookのアプリで横スワイプするとカメラが起動して、色々のアニメーションやマスクを顔につけることができますが、それを自作して色々なFacebookユーザーに使ってもらえるのが、このAR Studioです。

二日間AR studioを触って見た個人的なAR Studioに対する感想を一言でいうなら「簡易版Unity」でした。(決して悪い意味ではないです)

基本的な機能やUIはUnityとほぼ同等でUnityをやったことある人ならスラスラ使えると思います。(むしろやれることが制限されている分、やきもきする部分もあるかも)

こちらがAR Studioの操作画面。Assetsがあり、Sceneがあり、Layerがあり、(以下略)

一つ大きくUnityと違う点は(Facebookが作ってるので当たり前ですが)顔を使ったAR 表現はとても得意ということです。

Sceneに追加できるオブジェクトがいくつか用意されていますが、その中にFace Trackerというものがあります。これがこのAR Studioの目玉で、これを追加するだけで画面に映る顔にトラッキングするオブジェクトを生成します。顔に追従してほしいオブジェクトはこのFace Trackerの子ノードに設定してあげるだけで実現できてしまうのはすごい

そしてもう一つすごいのは基本的に顔の形についてはめちゃめちゃ学習データを持ってるFacebookだからこそ成せる技ですが、顔の表面にぺったり張り付いた表現も簡単にできます。

FaceMeshをFace Trackerの子ノードに追加することで下のように顔にしっかりとくっつくメッシュを生成することが可能となります。

ちなみに先ほどから気になっている方もいると思いますが、先ほどからスクリーンショットに登場してくる女性はAR Studioにデフォルトで用意されている動画の方で、AR Studioではこの人以外にも様々な人種、性別の方で実験することが可能です。

「FaceTime HD Camera」を選択すれば自分のPCのウェブカメラから自分の顔で実験できます。

ファンキー。。。(笑)

Unityだと最近Appleが出したiPhoneXを使ってARKitで顔にぴったりくっつくメッシュが作れるようになったばかりなので、その部分においてはウェブカメラやiPhone X以外のスマホからこの表現ができるようになっているのはすごいなと感じました。

ちなみにこちら目、鼻、口や顔の方向など様々な動きをイベントとして受け取れるライブラリも用意されているので、顔の動きに合わせた様々なARイベントを作り出すことが可能となっています。

【まだまだ未開発な部分も】

一方でベータ版であるためまだまだ未開発な部分もありました。スクリプト部分はJavascriptで書くのですが、スクリプトは1ファイルのみだったり、3Dモデルなど重いファイルをモリモリ入れていくと一部のスマホで動かなかったり、URL叩けるのはGETだけなどなど。

ちなみに今回のハッカソンで僕らのチームが開発したものも、最後の最後にiPhone8でビルドしたらカメラアクセスができなくなって、今回のメンターエンジニアに聞いても原因がわからない(辛い)などまだまだ闇の部分も多そうでした。これから色々と改善されて行くようなので、新しいバージョンリリースに期待しましょう!

【今回の作品】

今回のハッカソンで作成したのは友達とストリートファイター(風)なゲームを顔でコマンド入力しながら戦うゲームアプリ「フェイス スマッシュ」でした。

「顔を上下左右に動かす」や「眉を上下する」など決められた顔の動きをコマンドとして入れると技を繰り出すことができます。技を繰り出すと通信している相手にダメージを与えることができ、三回先にダメージを食らわせた方が勝ちになります。

個人的に今回の作品の推しポイントとしては、今のFacebookのARカメラアプリはどうしても1人で体験するものになっていて、そのAR体験にコミュニケーションは生まれません。現在世に出ているその他多くのARアプリもAR動画のシェアなどはあれど、基本的にAR体験は1人の世界に閉じこもってしまっています。でもそれではインターネットができる前のスタンドアロンなコンピュータと一緒で本当のARの能力は発揮できていないと思います。自分が見ているARの世界、これが自分以外のユーザーからの干渉によって変わる。そんな体験がこれからのARにも必要だと思っていて、今回はそんな世界を実現するための一つの実験として「通信対戦」の機能を核にしながら実装して見ました。

とはいうものの、先ほどもあげたようにGETしか呼べない上に二日(というか11時間)しかないので、そこまで凝ったことはしていません。

今回協賛企業して参加いただいていたウフルさんのenebularを使わせていただき、サクッとHTTPサーバーを作って攻撃コマンドが成功した際にはコマンド名と自分のUUIDを登録し、それとは別に0.5秒おきに相手からの攻撃がないかを確かめに行って、あればjsonで取得して、ダメージエフェクトを発動しています。(雑)

エフェクトの発動はUnityでよくやる手法で各攻撃と各ダメージ時に発動したいオブジェクトをNull Object(Unityでいう空のGameObject)の子ノードとしてまとめて、Javascriptから親のNull Objectのhiddenパラメータをbooleanで操作しています。

また今回のゲームではゲームが発動してから一定時間だけオブジェクトを発生したいという要件があったので、そこはFacebook側が用意しているTimeクラスを使って指定された時間だけオブジェクトを出現させる関数を用意しています。アニメーションも同様。

function appearEffect(obj) {
obj.hidden = false;
Time.setTimeout(function (elapsedTime) {
obj.hidden = true;
}, animationTime);
}

JSも久々に触ったので色々勉強になりました。今回書いたコード含め、アプリケーションは未整理ですがこちらで確認できます。URLの部分だけ編集していますので、それっぽいHTTPサーバー立てるか、サーバー通信部分はコメントアウトして1人で楽しむかしてもらえればと思います。

AR Studioは現在はベータ版なので、使用の申し込みを行って、審査に合格すれば使えるとのことです。

また他のチームの方々が作られた作品もこちらから確認できます。

個人的に「空前絶後のヘッドバンキング」はプレゼンだけで笑ってしまいました笑

【思ったこと①:ARが誰でも作れる時代へ】

さてここからはFacebookのハッカソンに参加して見て思ったことをいくつか

まず一つは「ARが誰でも作れる時代になってきている」ということでした。最初にも申し上げた通り、AR StudioはARに特化した「簡易版Unity」でした。これは決して悪い意味ではなくて、ノンプログラムで多くの方が自分の面白いと思うARや欲しいARを作り出すことができます。実際に弊社代表の梶谷もノンプログラムでこれくらいの表現はできていました。

プログラムといってもJavascriptですし、プログラムもそこまでとっつきにくいものではありませんでした。Facebook側も多くのAPIを提供してくれていますし、これからさらに拡充されていく予定だそうです。

Facebook以外でもAppleのARkitやGoogleのARCore、昔からあるVuforiaやKudanなど様々なARに必要なツールが揃っており、各々が自分の得意分野の中でARの作成をユーザーに提供しています。これらツールの拡充によってこれからはより一層ARコンテンツが増えていくはずです。

【思ったこと②:ARは次のステップへ】

しかし現状ではAR体験はまだまだ1人の世界に閉じられたものとなっており、(AR空間において)ユーザー同士が干渉し合ったり、共有するということができていません。ARコンテンツが増えれば、ARを使うユーザーが増える一方で、ユーザーが増えたことにより今後一層このAR空間での繋がりというニーズが増えるはずです。

先日Twitterでも触れましたが、Super Venturesの方も次に必要となるのはARクラウドであると言及しています。

一方で個人的に僕はARクラウドをどこかの企業が提供するよりも現状のWorld Wide WebにARコンテンツが載せられるようになり、Webブラウザがカメラで見える世界とそのユーザーのコンテキストから適切なURLを引っ張ってきて、HTMLドキュメントからAR空間を生成するというような形になるのではと思っています。

今回のサポートエンジニアの方にもこのアイデアについて議論させていただき、大変興味を持っていただいた一方で技術的な難しさについても議論できました。

どちらにしろこれからはARがより他のユーザーと繋がったAR空間のなかでARを体験できるようになるし、そのような仕組みが出来上がってくると思います。

【思ったこと③:ARのデバッグって大変(笑)】

これはUnityの時から思っていたことですが、ARのデバッグって大変なんですよね(笑)

今回の件でいうと正しい技がでるのかどうかを試すために顔をめちゃめちゃ振り回したり、デバッグ中や開発中は自分の顔が常時開発画面に写っているのでなかなか辛い。

そんな中で今回のAR Studioではあらかじめ用意された顔が一定の動きをしてデバッグができるというのは新しかったし、とても良い仕組みだなと思いました。今後この顔の複雑な動きなどが簡単に指定できたりするとより開発者にとっては嬉しいかなと思います(Facebookのみなさんよろしくお願いします)

あとこの「AR開発のデバッグ」ってのは何か新しい仕組みをうむチャンスがありそうだなと思いました。

【思ったこと④:インカメのARの方が簡単】

今までARKitやKudanでの開発の際には全て外向きのカメラを使ったARの開発をしていたので、今回初めてインカメ想定のARを作って見ました。

そこで気づいたのはインカメのARの方が作るの簡単ってことでした。なぜかっていうとインカメの場合、基本的にユーザーの顔が写っていて、そのアクションに対して何かするという想定されるシチュエーションが非常に限られており、認識しなくてはならないものも少ない(今回の場合顔だけ)ので開発者側も用意するコンテンツが作りやすい。

一方で外向きのARカメラの場合には部屋の壁や床、人やその他諸々様々なものが写り、カメラが認識するものもかなり増えてしまいます。そうすると開発者側はARを作る際の想定シチュエーションや、ARエンジンが認識しなくてはならないものも増えてしまい、開発がインカメに比べて難しくなります。まあこれは言い換えればインカメARの方がやれることも少ないということですが、そこらへんはトレードオフですし、インカメでもやれることが複雑になれば今後難しくなっていく可能性もあります。

【という訳で】

僕のハッカソンはこれにて終了です(笑)

今回のハッカソンは自分にとって初のARのハッカソンだったこともあり、多くのことに気づけましたし、ARのこれからについて色々な方と話せたのもとても刺激になりました。

実は来週もAVEXさんが主催するARハッカソンに出場しますが、そこでも色々な方と議論できればと思います。

長くなりましたが読んでいただいたみなさんありがとうございました!そしてハッカソン参加者のみなさまお疲れ様でした〜!

懇親会の様子
訪問者は自分の会社のロゴがかけます
我々は一番目立つとこに書かせていただきました(笑)

※今回のAR Studioの紹介はFacebook側から許可をいただいて掲載しています。

--

--