揚げログ

karaageの技術開発関連のブログです

AR kit で顔面キャスアプリを作る (その2 ARFaceAnchorを理解してみる)

前回、SwiftでSocketIOをアプリに実装するところまで終わりました。

今回は、ソケットで送る内容について検討していきます。

まず大前提として、ソケットで送れるのはStringのみですので、必要な情報を適当なJSON配列にしていきたいと思います。

f:id:en0qi:20190124224051j:plain

続きを読む

AR kit で顔面キャスアプリを作る (その1 xcodeprojにsocketIOを導入)

前回(昨日)に引き続きやって行きます。

 

実装

実際キャスティングアプリとなると、配信者が何人もいて、それぞれの配信ページに多数の閲覧者がいる状況が自然な想定になります。 しかし、まずは実験ということで、配信者は1人、閲覧者が数人という状況(手持ちの端末数にも制約があるため)で動くように作っていきたいと思います。

socketIOでARAnchorデータを転送する

端末側SocketIO準備(Swift)

Carthageを使ってXcode projectにsocketIOを導入していきます。導入するライブラリはこれです。

github.com

Carthageはbrewでインストールできるので、簡単に構築できました。(普段からbrewをよく使うので)

carthageインストール手順 (as of 2019/01/24, macOS 10.14.3, Homebrew 1.9.2)

brew install carthage

これで通常は完了ですが、このように怒られる場合があります。

Linking /usr/local/Cellar/carthage/0.31.2... Error: Permission denied @ dir_s_mkdir - /usr/local/Frameworks

これはそもそも /usr/local/Frameworks が存在しないことが原因ですので、

sudo mkdir /usr/local/Frameworks

sudo chown $(whoami):admin /usr/local/Frameworks

sudo brew link carthage

で解決します。

CarthageでsocketIO-Client-Swiftを導入

cd [Xcode Projectが入ってるディレクトリ]

nano Cartfile

github "socketio/socket.io-client-swift" ~> 13.3.0

と書き保存(バージョン番号は更新されていくので、

Carthage/README.md at master · Carthage/Carthage · GitHubCarthage/README.md at master · Carthage/Carthage · GitHub

で確認してください。)

carthage update --platform ios

Xcode projectの依存関係に追加

dyld: Library not loaded のエラーが出まくって詰まったので、以下を参考に進めました。画像付きでわかりやすいです。

Step by step guide on using Carthage dependency manager

重要 同時にCarthage/Build/iOSに導入されるStarscream.frameworkも同時に追加する必要があります。

コーディング

2019/01/24現在、以下のStackOverFlowの解答に記載されているサンプルコードで動きました。 swift - Socket.io for swift4 ios - Stack Overflow

サーバー側SocketIO準備(nodeJS)

サーバー側については、同内容の分かりやすい記事がたくさんあるのと、すでにAWSにSocketIOをセットアップ済みのページを準備してあったので、飛ばします。

動作確認

f:id:en0qi:20190124144410p:plain

ひとまずString型変数をアプリからPostすることに成功しました。 次回は、ARAnchorをPostするところから始めたいと思います。

AR kit で顔面キャスアプリを作る (その0 なんで作るのか)

今回から、1つのアプリを作る過程を、0の状態から完成まで、何回かに分けて記事を投稿していきます。

今回はまだ実装には入らず、前提の確認です。ちょうど卒論に時期で、頭が卒論になってるので、見出しが論文っぽくなってますが、まあ分かりやすいのでいいとしましょう。

お題

AR kit の FaceTrackingConfigurationを使ったVR顔面キャスティングアプリを作る

ツイキャスのAnimoji版というと分かりやすい…?

iPhone Xから搭載され始めたインカメのデプスカメラ、これを使った何か面白いアプリを作ってみようと思います。ただ作ってる間に違う方向にいくことは十分ありえます。

f:id:en0qi:20190123233015j:plain
Animojiで作った自分の顔(似てない)

完成予想図を描いてみる

続きを読む

AR kit 2のARImageTrackingConfigurationで遊んでみた

背景

数学の教科書とかで、グラフが値の変化に応じて動いたら分かりやすいのにな、と思ったことがある。 図をスマホで写したら動き出す、立体は飛び出して色んな方向から見ることが出来る、このようなAR体験がARImageTrackingConfigurationで簡単に精度よく作れるようになったと感じたので、以下その紹介。

ARImageTrackingConfiguration

これはARkit2から新たに追加されたARsessionのconfigurationだ。今まで実世界をトラッキングするのには、ARWorldTrackingConfigurationが使われていたが、2Dの画像トラッキングに特化したConfigurationということだ。

さっそく実演

紙面上のある画像をARImageTrackingConfigurationで追尾し、3Dオブジェクトや動画が紙面上に表示されるサンプルアプリを作ってみた。

以下の実演では、iPad上(紙面を想定)に表示した画像に、別の画像を重ねて表示し、追従させた。

まず、iPadにこのように画像を表示させる。この画像はXcodeからアプリのアセットに追加して、トラッキングする画像にセットした。

続きを読む