おもちゃラボ

Unityで遊びを作ってます

【iOS12対応】Visionを使って顔検出を行う

ここではVisionを使って顔を検出する方法を紹介します。VisionはiOS11から使える画像処理フレームワークです。ここではiOS12を使って説明します。

f:id:nn_hokuson:20190725211217j:plain:w550

Visonフレームワークとは

Vision は画像処理用のフレームワークです。ただOpenCVなどのように汎用的な画像処理ではなく、顔検出や文字検出など機械学習に特化したフレームワークになっています。

Visionフレームワークを使うと、次のようなものを簡単に検出することができます。それぞれのものについては個別に説明します。

  • 顔検出
  • 顔ランドマーク検出
  • 文字検出
  • 矩形検出
  • バーコード
  • オブジェクトトラッキング

顔検出の流れ

Visionフレームワークを使って顔検出をするには「リクエスト」と「リクエストハンドラ」の2つを使います。

リクエストハンドラ(VNImageRequestHandler)に処理したい画像とリクエスト内容を渡すことで、指定されたオブジェクトの検出処理が行われます。検出結果はObservationクラスを使って取得することができます。

f:id:nn_hokuson:20190725210217j:plain

リクエストには次のような種類があります。ここでは顔検出をしたいのでVNDetectFaceRectanglesRequestを使用しています。

VNDetectFaceRectanglesRequest 顔検出
VNDetectFaceLandmarksRequest 顔ランドマーク検出
VNDetectRectanglesRequest 矩形検出
VNDetectBarcodesRequest バーコード検出
VNDetectTextRectanglesRequest テキスト検出

それでは早速、写真から顔を検出するプログラムを作ってみましょう。

写真から顔を検出する

まずは読み込んだ写真から顔の位置を検出して、その周りに矩形を表示するプログラムを作ってみましょう。

Xcodeのプロジェクトを作成して、次のtest.jpgの画像をプロジェクトに追加します。追加できたらViewController.swiftに次のプログラムを入力してください。

import UIKit
import Vision

class ViewController: UIViewController {

    var image : UIImage!
    
    func drawRect(box:CGRect){
        let xRate : CGFloat = self.view.bounds.width / self.image.size.width
        let yRate : CGFloat = self.view.bounds.height / self.image.size.height
        
        let faceRect = CGRect(
            x: (box.minX) * self.image.size.width * xRate,
            y: (1 - box.maxY) * self.image.size.height * yRate,
            width: box.width * self.image.size.width * xRate,
            height: box.height * self.image.size.height * yRate
        )
        
        let faceTrackingView = UIView(frame: faceRect)
        faceTrackingView.backgroundColor = UIColor.clear
        faceTrackingView.layer.borderWidth = 1.0
        faceTrackingView.layer.borderColor = UIColor.green.cgColor
        self.view.addSubview(faceTrackingView)
        self.view.bringSubviewToFront(faceTrackingView)
    }
        
    override func viewDidLoad() {
        super.viewDidLoad()

		// 画像を読み込む
        self.image = UIImage(named: "test.jpg")
        
        // 顔検出用のリクエストを生成
        let request = VNDetectFaceRectanglesRequest { (request: VNRequest, error: Error?) in

            for observation in request.results as! [VNFaceObservation] {
                
                // 枠線を描画する
                self.drawRect(box:observation.boundingBox)
            }
        }
        
        // 顔検出開始
        if let cgImage = image.cgImage {
            let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
            try? handler.perform([request])
        }
    }
}

viewDidLoadメソッドの最初でVNDetectFaceRectanglesRequestで顔検出のリクエストを作成しています。

顔が見つかった場合はrequest.resultsにVNFaceObservationの配列として結果が格納されているので、ひとつずつ取り出してdrawRectメソッドで矩形を描画しています。

リクエストは作成しただけでは実行されません。最後にVNImageRequestHandlerを作って、performメソッドに先程の顔検出のリクエストを渡して実行しています。このタイミングで実際の顔検出が行われています。

動画から顔を検出する

一枚の写真から顔が検出できるようになったところで、次は動画から顔を検出してみます。といっても動画は時系列に画像が並んだものとみなせるので、顔検出の方法はほとんど同じです。ただiOSで動画を扱うにはAVCaptureSessionを使う必要があり、これが結構面倒です・・・

動画で顔検出する処理を追加したプログラムは、次のようになります。まずは全プログラムを載せておきます。

import UIKit
import Vision
import AVFoundation

class ViewController: UIViewController, AVCaptureVideoDataOutputSampleBufferDelegate {

    private var _captureSession = AVCaptureSession()
    private var _videoDevice = AVCaptureDevice.default(for: AVMediaType.video)
    private var _videoOutput = AVCaptureVideoDataOutput()
    private var _videoLayer : AVCaptureVideoPreviewLayer? = nil
    private var rectArray:[UIView] = []
    var image : UIImage!
    
    func setupVideo( camPos:AVCaptureDevice.Position, orientaiton:AVCaptureVideoOrientation ){
        // カメラ関連の設定
        self._captureSession = AVCaptureSession()
        self._videoOutput = AVCaptureVideoDataOutput()
        self._videoDevice = AVCaptureDevice.default(.builtInWideAngleCamera, for: .video, position: camPos)
        
        // Inputを作ってSessionに追加
        do {
            let videoInput = try AVCaptureDeviceInput(device: self._videoDevice!) as AVCaptureDeviceInput
            self._captureSession.addInput(videoInput)
        } catch let error as NSError {
            print(error)
        }
        
        // Outputを作ってSessionに追加
        self._videoOutput.videoSettings = [kCVPixelBufferPixelFormatTypeKey as AnyHashable as! String : Int(kCVPixelFormatType_32BGRA)]
        self._videoOutput.setSampleBufferDelegate(self, queue: DispatchQueue.main)
        self._videoOutput.alwaysDiscardsLateVideoFrames = true
        self._captureSession.addOutput(self._videoOutput)
        
        for connection in self._videoOutput.connections {
            connection.videoOrientation = orientaiton
        }
        
        // 出力レイヤを作る
        self._videoLayer = AVCaptureVideoPreviewLayer(session: self._captureSession)
        self._videoLayer?.frame = UIScreen.main.bounds
        self._videoLayer?.videoGravity = AVLayerVideoGravity.resizeAspectFill
        self._videoLayer?.connection?.videoOrientation = orientaiton
        self.view.layer.addSublayer(self._videoLayer!)
        
        // 録画開始
        self._captureSession.startRunning()
    }
    
    private func imageFromSampleBuffer(sampleBuffer: CMSampleBuffer) -> UIImage {
        let imageBuffer: CVImageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer)!
        CVPixelBufferLockBaseAddress(imageBuffer, CVPixelBufferLockFlags(rawValue: 0))
        
        let colorSpace = CGColorSpaceCreateDeviceRGB()
        let bitmapInfo = (CGBitmapInfo.byteOrder32Little.rawValue | CGImageAlphaInfo.premultipliedFirst.rawValue)
        let context = CGContext(data: CVPixelBufferGetBaseAddressOfPlane(imageBuffer, 0), width: CVPixelBufferGetWidth(imageBuffer), height: CVPixelBufferGetHeight(imageBuffer), bitsPerComponent: 8, bytesPerRow: CVPixelBufferGetBytesPerRow(imageBuffer), space: colorSpace, bitmapInfo: bitmapInfo)
        let imageRef = context!.makeImage()
        
        CVPixelBufferUnlockBaseAddress(imageBuffer, CVPixelBufferLockFlags(rawValue: 0))
        let resultImage: UIImage = UIImage(cgImage: imageRef!)
        return resultImage
    }
    
    func drawRect(box:CGRect){
        let xRate : CGFloat = self.view.bounds.width / self.image.size.width
        let yRate : CGFloat = self.view.bounds.height / self.image.size.height
        
        let faceRect = CGRect(
            x: (1 - box.maxX) * self.image.size.width * xRate,
            y: (1 - box.maxY) * self.image.size.height * yRate,
            width: box.width * self.image.size.width * xRate,
            height: box.height * self.image.size.height * yRate
        )
        
        let faceTrackingView = UIView(frame: faceRect)
        faceTrackingView.backgroundColor = UIColor.clear
        faceTrackingView.layer.borderWidth = 1.0
        faceTrackingView.layer.borderColor = UIColor.green.cgColor
        self.view.addSubview(faceTrackingView)
        self.view.bringSubviewToFront(faceTrackingView)
        rectArray.append(faceTrackingView)
    }
    
    func captureOutput(_ output: AVCaptureOutput, didOutput sampleBuffer: CMSampleBuffer, from connection: AVCaptureConnection) {
        
        DispatchQueue.main.async {
            self.image = self.imageFromSampleBuffer(sampleBuffer: sampleBuffer)
            // 顔検出用のリクエストを生成
            let request = VNDetectFaceRectanglesRequest { (request: VNRequest, error: Error?) in
                
                self.rectArray.forEach{ $0.removeFromSuperview() }
                self.rectArray.removeAll()
                
                for observation in request.results as! [VNFaceObservation] {
                    
                    // 枠線を描画する
                    self.drawRect(box:observation.boundingBox)
                }
            }
            
            // 顔検出開始
            if let cgImage = self.image.cgImage {
                let handler = VNImageRequestHandler(cgImage: cgImage, options: [:])
                try? handler.perform([request])
            }
        }
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupVideo(camPos: .front, orientaiton: .portrait)
    }
}

AVCaptureSessionを使うために、次のようにプログラムを変更しています。

  1. import AVFoundationを追加
  2. AVCaptureVideoDataOutputSampleBufferDelegateを継承
  3. setupVideoメソッドの中でAVCaptureSessionの初期化
  4. captureOutputデリゲートを宣言して、その中で顔検出

AVCaptureSessionには入力ソースと出力形式を指定する必要があります。入力にはiPhoneデバイスのカメラを指定します。一方出力には「静止画」「動画」「音声」などを選ぶことができます。
f:id:nn_hokuson:20190725202848j:plain
ここでは入力にはフロントカメラを指定しました。また、出力には動画のフレームデータがほしいのでAVCaptureVideoDataOutput指定しています。また、画像フォーマットやdelegateメソッド、表示の向きなどもあわせて指定します。

AVCaptureSessionが正しく設定できると、captureOutputメソッドが1フレームごとに呼び出されるようになります。この中で顔検出の処理を行って矩形を描画しています(ここは写真から顔検出するのとほぼ同じです)

プログラムができたらinfo.plistにPrivacy - Camera Usage Descriptionを追加してから(忘れたらアプリがクラッシュします!)実行してみてください。↓のような感じで動くと思います。

【Unity】Blenderでテクスチャをベイクする

Unityでライトマップをベイクして、影をテクスチャに焼き付けることもできますが、Blenderでモデルを作った時点でAOなどの影をベイクすることもできます。ここではBlender2.8を使ってテクスチャに影をベイクする方法を紹介します。

f:id:nn_hokuson:20190716220927j:plain:w600

レンダリングの設定をする

テクスチャをベイクするには、Belnder2.8から採用されたEeveeではなくCyclesというレンダーエンジンを使う必要があります。そこで、Sceneアイコンを選択してレンダーエンジンを「Cycles」に設定します。

f:id:nn_hokuson:20190716220557p:plain:w300

アンビエントオクルージョンの影もベイクするためにワールドアイコンを選択して、アンビエントオクルージョンにチェックを入れます。

f:id:nn_hokuson:20190716220628p:plain:w300

ベイクするテクスチャを作成する

まずはベイクするためのテクスチャを作成します。メニューバーから「UV Editing」を選択して2画面にします。UV展開画面の上にある「新規」ボタンをクリックしてベイクするテクスチャを作成します。

f:id:nn_hokuson:20190716220647p:plain:w450

ここでは名前を「ao」、幅と高さは1024pxに設定しました。ベイクするテクスチャの大きさが大きくなるほど、ベイクにも時間がかかるので、最初は小さいテクスチャで実験したほうがいいかもしれません。

f:id:nn_hokuson:20190716220659p:plain:w300

次にモデルをUV展開します。右のモデリング画面で、すべての頂点を選択した状態で「Uキー」→「スマートUV投影」を選択してUV展開します。

f:id:nn_hokuson:20190716220736j:plain:w450

ベイクするマテリアルの設定

今作成したテクスチャをベイクするマテリアルに、指定します。画面左のエディター選択メニューから「シェーダーエディタ」を選択します。

f:id:nn_hokuson:20190716220812j:plain:w650

「追加」→「テクスチャ」→「画像テクスチャ」を選択します。

f:id:nn_hokuson:20190716220829j:plain:w600

追加された画像テクスチャノードのテクスチャに先程作成した「ao」を設定します。

f:id:nn_hokuson:20190716220716p:plain:w300

ベイクする

Sceneアイコンからベイクを選択して、ベイクボタンを押してください。簡単なモデルであれば数秒でベイクが完了して、次のようなベイクテクスチャが表示されます。

f:id:nn_hokuson:20190716220857j:plain:w350

画面上の画像ボタンから「保存」を選択してください。

f:id:nn_hokuson:20190716220917j:plain:w200

Unityで表示する

作成したモデルとベイクしたテクスチャをUnityにインポートし、シーンビューでマテリアルをアタッチしてください。次のようにAOの効果がベイクされた状態のテクスチャが設定できます。

f:id:nn_hokuson:20190716220927j:plain:w600

【InDesign】表を作る

InDesignを使って次のような表を作る方法を説明します。

f:id:nn_hokuson:20190714121004p:plain:w300

ここでは次のような流れで表を作成します。

表の内容を入力する

まずは本文中に「,」区切りで表の内容を入力してください(区切り文字は以下のダイアログで変更できます)
f:id:nn_hokuson:20190714113346p:plain:w300

作成した表を選択した状態で、メニューバーから「表」→「テキストを表に変換」を選択します。
f:id:nn_hokuson:20190714113511p:plain:w300

テキストを表に変換するダイアログが表示されるので列分解に「,」を指定してください。区切り文字に別の文字を使った場合は適宜変換して下さい。
f:id:nn_hokuson:20190714113643p:plain:w400

ここまでで次のような表が作成できます。表の大きさは縦線をドラッグすることで変更することができます。
f:id:nn_hokuson:20190714113919p:plain:w300

表の見た目を整える

グリッドに沿って表が配置されているため、表の項目のスペースがバラバラになってしまっています。グリッド揃えをやめるため、表を選択した状態で段落パネルから「グリッド揃え」→「なし」を選択してください。
f:id:nn_hokuson:20190714114407j:plain:w600

表のセル高さを指定の高さにしたい場合は、表パネルの「行の高さ」を「指定値を使用」に変更して高さを入力します。また、組方向は「中央揃え」にしておきます。
f:id:nn_hokuson:20190714114747j:plain:w300

ここまでで次のような表になりました。
f:id:nn_hokuson:20190714114929p:plain:w300

ヘッダに色を付ける

まずは色を付けたいヘッダ部分のセルを選択します。
f:id:nn_hokuson:20190714115555p:plain:w300

この状態で、スウォッチから色を選択することで、セルに指定した色をつけることができます。
f:id:nn_hokuson:20190714115652p:plain:w300

最終的には次のような見た目になります。
f:id:nn_hokuson:20190714121004p:plain:w300