#スニリプ をARで見よう[Vuforia + argon.js]
こちらはアイドルマスターアドベントカレンダー4日目の記事です。前日は、導線さんのデレマス声優事務所探訪です。
はじめに
- アイドルマスターのコンテンツを使った技術記事です。
みなさんは#スニリプを覚えているでしょうか?
#スニッカーズの写真ツイートでシンデレラガールズからリプが届くかも!?略して #スニリプ
今年の4月から6月にかけてTwitter上で行われたデレマスとスニッカーズのコラボキャンペーンです。
現在は公式サイトが見つからなくなっていますが、実際にちひろさん(?)が運用していたTwitterアカウント@sni_repは残っているので、どのようなものか思い出せない方は覗いてみると良いかもしれません。
このキャンペーンの概要は、「#スニリプ」とハッシュタグを付けて、スニッカーズの映った写真ツイート(事実上のネタツイ)を行うことで、アイドルからリプが届く(かも!?)というものです。
つまり、スニッカーズからアイドルのリプが出てくるってことじゃないか!
この妄想を体現するにはARしかない!
やっと家に帰って暇になった〜。ちゃんと動きますね。 pic.twitter.com/oPya9EWiUS
— croMisaP (@croMisa) 2017年5月23日
というわけで、試行錯誤の上に以下の構成へたどり着きました。
私の環境が、iPhone持ちのWindows使いという残念なため、ネイティブアプリやUnityを使った製作は諦めました。
Web側は、node.js+express(ejs)でJSで動くサーバーサイド+フレームワークとして珍しくない(と思う)組み合わせで作りました。
黄色い「Ar」は、argon.jsというフレームワークと組み合わせて使うArgon4というブラウザです。argon.jsとはブラウザ上でARを動かそうというもので、カメラ映像をブラウザ上に載せるためにArgon4を使います。カメラ映像を使わない(向きやGPSだけ)ならば、普通のブラウザにも対応しています。
argon.jsではARにVuforiaというARプラットフォームを用います。単なる画像だけでなく、立体やテキストといったものを高精度で認識できるものです。
例:
これらを使って、スニッカーズからアイドルのリプが浮かびだすARを作っていきます。
サーバーサイド
はじめはnode.jsで、ツイートコンテンツを取り出します。
node-twitter-apiを用いてAPIのキーやらトーンやらを取得します。(npmにSampleあるので省略)
twitterを使って、目的のコンテンツを探します。
var TweetGet = function (ret) { var d = Q.defer(); var client = new Twitter({ consumer_key: consKey, consumer_secret: consSec, access_token_key: ret.token, access_token_secret: ret.Secret }); var params = { screen_name: 'sni_rep', count: 5 } client.get('statuses/user_timeline', params, function (error, tweets, response) { if (!error) { for (var index in tweets) { var i = tweets[index]; if (i.text.indexOf('@') > -1) { var name = i.text.split('【')[1].split('】')[0]; var text = i.text.split('】')[1].split('#')[0] || "NO TEXT."; for (var jndex in i.entities.media) { var j = i.entities.media[jndex]; if (j.media_url_https.indexOf('https') > -1) { var url = j.media_url_https; break; } } break; } } d.resolve({ "name": name, "text": text, "url": url }); //抜き出したのを次へ渡す } else { console.log(error); } }); return d.promise; }
メディアの無いツイート(宣伝とか開始アナウンスとか)を覗いた最新のリプっぽいツイートを見つけたら、
- アイドル名
- セリフテキスト
- 画像のURL
を荒々しくも抜き出しています。この3つをexpressのレンダラであるejsへ渡します。
ブラウザサイド
ejsでは、送られてきた3つのツイートコンテンツを使って、ARコンテンツを作っていきます。
こちらを参考に使います。
- https://docs.argonjs.io/tutorial/part4/
- https://github.com/argonjs/docs/tree/gh-pages/code/4-vuforia
というかgithubの改変です。中心となっているコードは次のリンクにあります。
ejsの一部だよ · GitHub
サンプルコードでは、文字を3Dモデルに変換するライブラリを呼び出していますが、今回は使わないので代わりに先程ツイートから抜き出した背景画像とデレステ風のセリフテキスト背景を読み出すのに利用しました。
【台詞枠】デレステっぽいメッセージ背景【素材配布中】 / おたもん さんのイラスト - ニコニコ静画 (イラスト)
読み込んだついでに、板に透過を有効にして2枚を貼り付けています。そして、小さくして見えなくしています。
Vuforiaを初期化したらいよいよARに関する記述です。
api.objectTracker.createDataSet
では、VuforiaにARターゲットを登録した時に提供される.xmlのファイルを読み込ませます。これがトラッキングするための情報です。それらにはいくつかのターゲットを登録できるので、ターゲット名を指定して目的のターゲットを取り出します。
app.context.updateEvent
はいわゆる描画ループで、ARターゲットが映ってる時(KNOWN)、現れた時(FOUND)、消えた時(LOST)に分けて処理を書きます。
KNOWでは、常にターゲットの位置、向きをvar gvuBrochureObject = new THREE.Object3D
にコピーしています。このオブジェクトに、ARで操作したいものを追加することでまとめて操作できます。親みたいなものです。
FOUNDでは、実際にgvuBrochureObject
に``argonTextObject```というARで表示したいものが入ったオブジェクトを追加しています。逆にLOSTでは、別のオブジェクトへ追加することでARターゲットを追従しないようにしています。
最後に文字のオブジェクトを作ります。three.jsでは文字を3D空間上に描画するクラスは無いみたいなので、こちらを利用しました。
three.jsで文字列を利用する方法
こちらのクラスで名前部分とセリフテキスト部分を作ります。ただ、はみ出ても改行はしてくれないので、40文字ごとに分割して改行させています。
これらを背景画像と同じようにargonTextObject
へ追加することで完成です。
かなり端折りましたが、説明は以上です。
今回はブラウザからARするという聞き慣れない方法で行いましたが、実はVuforiaはUnityとも連携しており、Unityだともっと簡単にARが出来ます。ただ、Windowsだし(今はまだ)iOS向けにビルドできなかったのでこの方法を取りました...
— croMisaP (@croMisa) 2017年4月9日
長々となってしまいましたが、この記事がアイマスエンジニアなど多くの方の新たなプロデュースに結びつければ良いなと思っております。
アイマスエンジニアといえば、、、、
12/16日にアイマスハッカソンがありますね!
参加は難しいな、興味はあるけどなぁ、という方はYouTube Liveにて配信を行うみたいですので、IM@Studyを要チェックです!
ここまで読んでいただきありがとうございます!
アイドルマスターアドベントカレンダー4日目の記事でした。明日は、popkirbyさんのカラースキームを作ろうです。