50行で目線トラッキング（iPhone）

はじめに

こちらの記事を見て目線トラッキングが面白そうだなと思いました。
目線でブラウザをスクロールするアプリを作ってみた

調べてみると 50 行くらいで下記ができました（動作確認は iOS 15.1 の iPhone 12 mini）。

目線トラッキングができてるようなできてないような👀
コード量50行！ pic.twitter.com/6uiApUJnPn

— am10 (@am103141592) January 28, 2022

実装

とりあえずソース。

import UIKit
import ARKit

final class ViewController: UIViewController {

    private let session = ARSession()
    private var lookAtPointView: UIImageView = {
        let image = UIImageView(image: .init(systemName: "eye"))
        image.frame = .init(origin: .zero, size: CGSize(width: 30, height: 30))
        image.contentMode = .scaleAspectFit
        return image
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.addSubview(lookAtPointView)
        session.delegate = self
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)

        let configuration = ARFaceTrackingConfiguration()
        configuration.isLightEstimationEnabled = true
        session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
    }
}

extension ViewController: ARSessionDelegate {

    func session(_ session: ARSession, didUpdate frame: ARFrame) {
        guard let faceAnchor = frame.anchors.first(where: { $0 is ARFaceAnchor }) as? ARFaceAnchor else {
            return
        }
        let lookingPoint = frame.camera.projectPoint(faceAnchor.lookAtPoint,
                                                     orientation: .portrait,
                                                     viewportSize: view.bounds.size)
        DispatchQueue.main.async {
            self.lookAtPointView.center = lookingPoint
        }
    }
}

これだけで目線トラッキングぽいことができます

必要条件

ARKit の ARFaceTrackingConfiguration を利用するので TrueDepth カメラを搭載した端末（iPhone X 以降？）が必要です。

ドキュメント：ARFaceTrackingConfiguration

やりたかったこと

ピアノ演奏中の楽譜への目線とか本読むのが速い人の目線の動きとかを iPhone で見れたらおもしろいと思った。

が、厳密に目線を取得はできなかったのであきらめました。。。（どちらかというと顔の向きの取得？）

ドキュメント：ARFaceAnchor

つくったもの

上記のものは作れなさそうでしたが目線トラッキングはおもしろいので何か他のものを作れないかと思い色々考えてみました。

調べてみると ARFaceAnchor.BlendShapeLocation で左右の瞬きなどが取れそうです。

ドキュメント：ARFaceAnchor.BlendShapeLocation

１つ目

瞬きで撃つシューティングゲーム（音声あり）。

やりたいことできなそうだったから路線変更して瞬きで撃つシューティングつくった😉 pic.twitter.com/nDSIIEMBz3

— am10 (@am103141592) January 29, 2022

２つ目

目線をマウスカーソル瞬きをクリックに対応させた PC のような操作ができるなにか。

目線をマウスカーソルまばたきをクリックに対応させることでiPhoneでPCのような操作を実現😉 pic.twitter.com/9KFblAJ5bp

— am10 (@am103141592) January 30, 2022

おわりに

目線トラッキングおもしろそうなのでなにか使えそうなのですが私の発想ではなかなかむずかしかったです。

なにかに使えそう

参考

• 目線でブラウザをスクロールするアプリを作ってみた
• ドキュメント：ARFaceTrackingConfiguration
• ドキュメント：ARFaceAnchor