2019年2月26日火曜日

ARKitの仕組み



ARKitの仕組み





上の絵はARKitとアプリケーションとの関係を示したものになります。

それぞれ何かを説明すると

  • Application: あなたが作るアプリケーション
  • ARKit:   ARを実現するためのフレームワーク
  • SceneKit:  3Dデータを扱うためのフレームワーク
  • SpriteKit:  2Dデータを扱うためのフレームワーク
  • Metal:    コンピュータグラフィックスを扱うためのフレームワーク

ARKitを利用すると、ApplicationはARKitより検知された画面上の平面情報等を受け取ることができます。

Applicationは受け取った情報(例えば平面の座標情報)を元にSceneKitかSpriteKit、Metalのいずれかの方法で画面上に独自の演出を行うことができます。





ARKit自身はAVFoundationとCoreMotionというフレームワークからビデオフレーム情報とデバイスセンサー情報を受け取ります。

単純なデバイスの向きだけであればジャイロセンサー情報だけで良いのですが、デバイスがどれだけ動いたかについては、加速度センサーを元に推定を行います。

ARKitは現実世界に仮想情報を組み合わせるために、まず目の前の空間を認識する必要があります。

最近流行りのデュアルカメラであれば奥行きを認識することが容易であるため空間を認識することも容易です。

ARKitはデュアルカメラではない端末でも動作することができます。それは、複数の地点のビデオフレームと画像認識技術を駆使しているためです。




ARKitはビデオフレームから得た画像より特徴点をいくつか設定します。

デバイスが別の地点に移動した時に先ほどの特徴点を見つけ出し、三角測量の要領で特徴点との距離を導き出します。

その様にすることで空間を認識していきます。Apple公式のメジャーアプリでも開始時に端末を動かす様に求められますが、これは上記の様な動作をすることで空間を認識しているためです。


2019年2月25日月曜日

ARKitとは



概要


ARKitとはiOSデバイスで拡張現実(AR)を実現するためのフレームワークです。

iOSデバイスのカメラとデバイスのモーションセンサから得られる情報を統合してARを実現します。

iOSデバイスには2つのフロントカメラとバックカメラがありますが、それぞれできることが異なります。

  • フロントカメラ: Faceトラッキングによるユーザーの顔情報を元にしたAR
  • バックカメラ: Worldトラッキングによるユーザーの周辺の空間情報を元にしたAR

これまでもカメラの情報とモーションセンサの情報を取得する方法はありましたが、それらを組み合わせてARを実現するには複雑な計算が必要でした。

ARKitを利用することで開発者はユーザーに対してどの様なAR体験を提供するかということに専念できる様になりました。


具体的には何ができるのか?


ARKitを利用すると次の様なAR体験を実現できる様になります。


Faceトラッキングを利用した擬似スカウター



Worldトラッキングを利用したペットアプリ



ユーザーがARKitを利用するために必要な条件


  1. A9以上のCPUを持つiOSデバイスであること
  2. iOSのバージョンは11以上であること

1の条件についてはiPhoneであればiPhone6S以上、iPadであれば第5世代以上となります。


開発者がARKitで開発するために必要な条件


  1. Xcode 9.0 以上
  2. macOS 10.12.6以上 

2の条件を満たすためには、必然的にMacは下記のいずれかのものが必要になります。

  • iMac (Late 2009) 以降
  • MacBook (Late 2009) 以降
  • MacBook Pro (Mid 2010) 以降
  • MacBook Air (Late 2010) 以降
  • Mac mini (Mid 2010) 以降
  • Mac Pro (Mid 2010) 以降

2019年2月17日日曜日

縦横それぞれで拡大縮小できるUIPinchGestureRecognizerの改良

はじめに


前回の投稿で縦横それぞれで拡大縮小できるUIPinchGestureRecognizerを作ったが、次の様な問題点があった。
  • たまにXとYのスケールが無限大になってしまう
  • 拡大縮小→指を離す→拡大縮小を繰り返していると、急にXとYのスケールが変わってしまう

原因


調査してみたところそれぞれ次の様なことが原因であった。


たまにXとYのスケールが無限大になってしまう


これはtouchesBegan()が必ず、touchesMoved()よりも前に認識されるだろうという前提のコードになっており、XとYのスケールの計算時にinitPinchWidthとinitPinchHeightの初期値である0で値を割ってしまっていることが原因であった。touchesBegan()のタイミングでユーザが初めに置いた指の間隔からinitPinchWidthとinitPinchHeightを計算するため、touchesMoved()が先に呼ばれるとこの様な状態に陥ってしまう。

尚、Appleの公式のドキュメントにも下記の様に記載があるが、
When the value of this property is false (the default), views analyze touch events in UITouch.Phase.began and UITouch.Phase.moved in parallel with the receiver.

デフォルトの状態ではUIGestureRecognizerはbegan状態とmoved状態を並行して検知してしまうらしく、touchesBegan()がtouchesMoved()よりも先に呼ばれることを前提としてはいけなかった。


拡大縮小→指を離す→拡大縮小を繰り返していると、急にXとYのスケールが変わってしまう


これはオーバライドしたtouchesBegan()とtouchesMoved()の頭でスーパークラスのメソッドを呼んでしまっていることが原因であった。オーバライドしたメソッドの先頭で呼んでしまうとその時点でtouchイベントが発火して次のイベントが検知されてしまうことになる。そうなると、touchesMoved ()のなかでXとYの間隔を計算しているタイミングで次のtouchesBegan()イベントが発生してしまい、initPinchWidthとinitPinchHeightの値が書き換わり、スケールが狂ってしまっていた。

修正コード


上記2点の不具合を修正したコードは次の通り

class TwoDimentionsPinchGestureRecognizer : UIPinchGestureRecognizer {
    private var initPinchWidth : CGFloat = 0
    private var initPinchHeight : CGFloat = 0
    private var _scaleX : CGFloat = 0
    private var _scaleY : CGFloat = 0
    
    var scaleX : CGFloat {
        get { return _scaleX }
    }
    var scaleY : CGFloat {
        get { return _scaleY }
    }
    
    override func touchesBegan(_ touches: Set, with event: UIEvent) {
        guard touches.count == 2 else { return }
        
        let locations = touches.compactMap { touch in
            return touch.location(in: self.view)
        }
        
        initPinchWidth = abs(locations[0].x - locations[1].x)
        initPinchHeight = abs(locations[0].y - locations[1].y)
        
        super.touchesBegan(touches, with: event)
    }
    
    override func touchesMoved(_ touches: Set, with event: UIEvent) {
        guard touches.count == 2 else { return }
        guard initPinchWidth != 0 else { return }
        guard initPinchHeight != 0 else { return }
        
        let locations = touches.compactMap { touch in
            return touch.location(in: self.view)
        }
        
        let newPinchWidth = abs(locations[0].x - locations[1].x)
        let newPinchHeight = abs(locations[0].y - locations[1].y)
        
        _scaleX = newPinchWidth / initPinchWidth
        _scaleY = newPinchHeight / initPinchHeight
        
        super.touchesMoved(touches, with: event)
    }
    
    override func touchesEnded(_ touches: Set, with event: UIEvent) {
        initPinchWidth = 0
        initPinchHeight = 0
        
        super.touchesEnded(touches, with: event)
    }
 }

2019年2月14日木曜日

縦横それぞれで拡大縮小できるUIPinchGestureRecognizer

はじめに

標準のUIPinchGestureRecognizerだと得られるScaleはタッチした2点の距離をベースに計算されます。そのため、縦に伸ばしたか横に伸ばしたかは結果に反映されません。
縦横それぞれでScaleが欲しかったため、UIPinchGestureRecognizerを拡張してTwoDimentionsPinchGestureRecognizerというクラスを作成しました。

実装と解説

実際のコード

class TwoDimentionsPinchGestureRecognizer : UIPinchGestureRecognizer {
    private var initPinchWidth : Float = 0
    private var initPinchHeight : Float = 0
    private var _scaleX : Float = 0
    private var _scaleY : Float = 0
    
    var scaleX : Float {
        get { return _scaleX }
    }
    var scaleY : Float {
        get { return _scaleY }
    }
    
    override func touchesBegan(_ touches: Set, with event: UIEvent) {
        super.touchesBegan(touches, with: event)
        
        guard touches.count == 2 else { return }
        
        let locations = touches.compactMap { touch in
            return touch.location(in: self.view)
        }
        
        initPinchWidth = Float(abs(locations[0].x - locations[1].x))
        initPinchHeight = Float(abs(locations[0].y - locations[1].y))
    }
    
    override func touchesMoved(_ touches: Set, with event: UIEvent) {
        super.touchesMoved(touches, with: event)
        
        guard touches.count == 2 else { return }
        
        let locations = touches.compactMap { touch in
            return touch.location(in: self.view)
        }

        let newPinchWidth = Float(abs(locations[0].x - locations[1].x))
        let newPinchHeight = Float(abs(locations[0].y - locations[1].y))
        
        _scaleX = newPinchWidth / initPinchWidth
        _scaleY = newPinchHeight / initPinchHeight
    }
}

解説

まず、touchesBeganで初回のタッチした2点間の縦横それぞれの距離を計算します。そして、touchesMovedで初回の縦横の距離からどれだけ変わったかの比率を計算して、それぞれscaleXとscaleYとして値を呼び出し元に渡します。
尚、touchesBeganとtouchesMovedで取得されるtouchesはSetのため順番が保証されていません。より完成度を求めるならばcompactMapで得られた結果をソートする必要があります。


TwoDimentionsPinchGestureRecognizerのデモ


2019年2月10日日曜日

UIKitの表示変化をメンバ変数に頼り過ぎてはいけない

はじめに

先日AR Cake Dividerをリリースしましたが、早速バグが見つかりました(汗)
設定画面では設定項目をタップすると、ダイアログを表示し、そこに表示されるPickerで値を選択できる様にしています。そして、設定値は「ガイド形式」と「分割数」と二つ用意しているのですが、交互に表示していると急にアプリが落ちてしまうことがあります。
このバグは私のとりあえずメンバ変数でいいやという安易な考えが招いており、戒めのためにも不具合の原因を説明させて頂きます。

原因

Pickerが表示するリストはそれぞれ別の配列で定義しており、選ばれた設定項目とPickerで選択されたrowの値はViewControllerのメンバ変数として保持しています。
交互にダイアログを操作されるとrowの値はその都度変わりますが、rowの値を元に配列の値を参照しようとしたときに、rowの値が既に書き換えられてしまっており、配列の範囲外の場所を参照してしまいエラーが発生していました。




例えば、上の様に2つのボタンでそれぞれ、別のPickerを表示させ、選択した値でラベルを更新するプログラムがあったとします。


import UIKit

class ViewController: UIViewController, UIPickerViewDelegate, UIPickerViewDataSource {

    @IBOutlet weak var label: UILabel!
    
    enum ButtonId {
        case one
        case two
    }
    
    var selectedButton = ButtonId.one
    var selectedRow = 0
    
    let button1List : [String] = ["apple", "orange", "banana", "grape", "strawberry"]
    let button2List : [String] = ["black", "white"]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    @IBAction func pushButton1(_ sender: Any) {
        selectedButton = .one
        showAlert()
    }
    
    @IBAction func pushButton2(_ sender: Any) {
        selectedButton = .two
        showAlert()
    }
    
    func update() {
        switch selectedButton {
        case .one:
            label.text = button1List[selectedRow]
        case .two:
            label.text = button2List[selectedRow]
        default:
            break
        }
    }
    
    private func showAlert() {
        let vc = UIViewController()
        vc.preferredContentSize = CGSize(width: 250,height: 250)
        let pickerView = UIPickerView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
        pickerView.delegate = self
        pickerView.dataSource = self
        vc.view.addSubview(pickerView)
        
        var title = ""
        switch selectedButton {
        case .one:
            title = "fruit"
        case .two:
            title = "color"
        default:
            break
        }
        
        let editAlert = UIAlertController(title: title, message: "", preferredStyle: UIAlertController.Style.alert)
        editAlert.setValue(vc, forKey: "contentViewController")
        editAlert.addAction(UIAlertAction(title: "done", style: .default, handler: { (UIAlertAction) in
            self.selectedRow = pickerView.selectedRow(inComponent: 0)
            self.update()
        }))
        editAlert.addAction(UIAlertAction(title: "cancel", style: .cancel, handler: nil))
        self.present(editAlert, animated: true)
    }
    
    func numberOfComponents(in pickerView: UIPickerView) -> Int {
        return 1
    }
    
    func pickerView(_ pickerView: UIPickerView, numberOfRowsInComponent component: Int) -> Int {
        switch selectedButton {
        case .one:
            return button1List.count
        case .two:
            return button2List.count
        default:
            return 0
        }
    }
    
    func pickerView(_ pickerView: UIPickerView, titleForRow row: Int, forComponent component: Int) -> String? {
        switch selectedButton {
        case .one:
            return button1List[row]
        case .two:
            return button2List[row]
        default:
            return nil
        }
    }
}


このソースの様に、メンバ変数のselectedRowでPickerの橋渡しを行い、別途update()を呼ぶ様にすると、update()内で配列を参照するタイミングでユーザ操作によりselectedRowの値が書き換えられるとアウトになります。

この様な事を防ぐためにはCで言う"値渡し"でselectedRowの値をupdate()に伝える様にします。

    func update(_ selectedRow : Int) {
        switch selectedButton {
        case .one:
            label.text = button1List[selectedRow]
        case .two:
            label.text = button2List[selectedRow]
        default:
            break
        }
    }
    
    private func showAlert() {
        let vc = UIViewController()
        vc.preferredContentSize = CGSize(width: 250,height: 250)
        let pickerView = UIPickerView(frame: CGRect(x: 0, y: 0, width: 250, height: 250))
        pickerView.delegate = self
        pickerView.dataSource = self
        vc.view.addSubview(pickerView)
        
        var title = ""
        switch selectedButton {
        case .one:
            title = "fruit"
        case .two:
            title = "color"
        default:
            break
        }
        
        let editAlert = UIAlertController(title: title, message: "", preferredStyle: UIAlertController.Style.alert)
        editAlert.setValue(vc, forKey: "contentViewController")
        editAlert.addAction(UIAlertAction(title: "done", style: .default, handler: { (UIAlertAction) in
            let selectedRow = pickerView.selectedRow(inComponent: 0)
            self.update(selectedRow)
        }))
        editAlert.addAction(UIAlertAction(title: "cancel", style: .cancel, handler: nil))
        self.present(editAlert, animated: true)
    }


ついついクラス内でしか使わない値なのだからメンバ変数でいいやという発想になってしまいがちだったので、良い教訓になりました。



2019年2月7日木曜日

AR Cake Divider をリリースしました

この度初めてのiOS向けアプリ AR Cake Divider をリリースしました。
ケーキやピザを等分するときに役に立つアプリです。これまで同じ様なアプリはありましたが、ARKitを使ってガイドを付けるアプリは世界初なはずです。




予算の関係上スクリーンショットはピザになってしまいましたが…、今後ケーキを切ってるところをYouTubeにでもアップしたい思ってます。






2019年2月5日火曜日

ARアプリに必要なターゲットカーソルをBlenderで作る

はじめに

ARアプリを作ると、3Dオブジェクトをどこに置くかをユーザにわかりやすく伝えるためターゲットカーソルが必要になることがあります。
Apple公式のメジャーアプリでも出てくるアレです。


このカーソルは切れ目が入っているためSCNTubeやSCNPlaneを組み合わせて作ることが難しいですが、Blenderを使えば簡単に作れるのでその方法を紹介します。

作成環境

  • macOS 10.14.1
  • Blender 2.79

作成手順

1. Blenderを起動する

Blenderを起動するとイニシャルのプロジェクトで上記のような立方体が表示されます。

2. 立方体とカメラ、ライトを削除する

邪魔なので右のペインから全て削除してしまいましょう。

3. カーソルを原点に持ってくる

Shift + S でカーソルを原点に移動させることができます。

4. 円メッシュを2つ作成する

左のペインの「作成」タブ→円を選択して円を作成します。
そのまま「ツール」タブ→拡大縮小を選択すると円の大きさを調整できます。
これを繰り返し大きい円と少し小さな円を2つ作成します。


5. 2つの円メッシュを統合する

このままだとバラバラで面をはると穴なしの円になってしまうため2つを統合して細長いドーナッツを作ります。
「ツール」タブ→統合を選択します。

6. ドーナッツに面を張る


編集モードに変更して、下のペインのメニューから メッシュ > 面 > 面を張るを選択します。

7. ドーナッツ(輪っか)を削る

このままではただの輪っかなのでターゲットカーソルらしく一部分を削ります。
編集モードのままCを押して削りたい部分の頂点を選択します。
そのまま、メニューの削除→頂点を選択します。
同じ作業を繰り返して3箇所削ります。

8. 中央に小さな円メッシュを張る

中央にカーソルを持っていき先ほどの手順で小さな円メッシュを張ります。

9. 両面表示設定をする

このままだと中央の円と周りの輪っかがそれぞれ裏表逆になることがあるので、裏表無しになるように右側のペインを操作して両面表示をONにします。

10. DAE形式のファイルでエクスポート

Xcodeで扱うためDAE(Collada)形式でエクスポートします。

エクスポートが完了すると下記のようにXcodeで扱えるターゲットカーソルが出来上がります。