ARでマンガを覗き読み【iOS】

Last updated at 2019-12-21Posted at 2019-12-21

はじめに

AR、いいですよね。素敵な世界。
マンガ、いいですよね。素敵な世界。

ということで、今回はiOSのARKitを利用して、紙のマンガを覗き読みできるアプリ

を実装してみました。

デモに利用させていただいているマンガは、
マンガボックスで連載中の「ネコの手、借りてます。」🙏
作家の遥那もより様から許可をいただき動画掲載させていただいてます🙏🙏🙏
最高オブ最高の癒しマンガなのでみなさん是非読んでください🙏🙏🙏

いつでも、どこでも、だれもが、この素敵な世界を実現できるよう、
実装を、コメント多めで紹介します✨

前準備

1.お高めなiPhone（A9以降のプロセッサを搭載したもの）を購入💸します

2.プロジェクトを作ります
[ File > New > Project > Single View App ]

3.Storyboard に ARSCNView を貼り付け、ViewController と紐付けます

4.カメラ利用の許可を取るために、Info.plistに追加します
[ Privacy - Camera Usage Description ]

5.Assets.xcassetsを開き、[ New AR Resource Group ]を追加。
フォルダの中にマーカーとして検出したい画像（今回はマンガの表紙）を入れます。

この時、画像の名前と現実世界での大きさを入力します。
マーカーにふさわしい画像についてはこちらを参考にしてください。

6.ARオブジェクトとして表示したい画像（今回はマンガの原稿）を[ New Image Set ]で追加します。

実装

1.設定

ARImageTrackingConfigurationを設定します。

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController {

    @IBOutlet weak var sceneView: ARSCNView!

    var session: ARSession {
        return sceneView.session
    }

    let updateQueue = DispatchQueue(label: Bundle.main.bundleIdentifier! + ".serialSceneKitQueue")

    override func viewDidLoad() {
        super.viewDidLoad()
        sceneView.delegate = self
        resetTracking()
    }

    func resetTracking() {
        // Assetsの読み込み
        guard let referenceImages = ARReferenceImage.referenceImages(inGroupNamed: "AR Resources", bundle: nil) else {
            fatalError("Missing expected asset catalog resources.")
        }

        // 既知の2D画像を追跡するconfigの設定
        let configuration = ARImageTrackingConfiguration()
        configuration.trackingImages = referenceImages
        // ARオブジェクトの手前に人が映り込む時、オクルージョン処理してくれる設定
        configuration.frameSemantics = .personSegmentation

        // session開始
        // .resetTracking: デバイスの位置をリセットする
        // .removeExistingAnchors: 配置したオブジェクトを取り除く
        session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
    }

    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        // session停止
        sceneView.session.pause()
    }
}

configuration.frameSemantics = .personSegmentationは、
ARKit3から追加されたピープルオクルージョンの設定で、設定するとこのように

人の指が原稿の手前にくるので、マンガの中を覗き読んでいる！という世界をよりリアルに実現できます。
ただ、まだ少し精度が甘くチリチリすることは否めないので、お好みでオフにして下さい🤗

2.マーカーを検知してオブジェクトを表示

表紙を検知し、ARSCNViewDelegateで通知を受け取ったら原稿を表示します。

// MARK: - ARSCNViewDelegate
extension ViewController: ARSCNViewDelegate {
    // 新しいARアンカーに対応するノードが追加されたことを通知
    func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
        guard let imageAnchor = anchor as? ARImageAnchor else {
            return
        }
        // 表示したいオブジェクトをARアンカーの名前から決定
        let objectImage: UIImage
        switch imageAnchor.referenceImage.name {
        case "nekonote" :
            objectImage = nekonotes[nekonoteIndex]
        case "hanakaku":
            objectImage = hanakakus[hanakakuIndex]
        default:
            return
        }

        updateQueue.async {
            // sceneにノードを追加
            node.addChildNode(self.createNode(image: objectImage, name: imageAnchor.referenceImage.name ?? "no name"))
        }
    }

    private func createNode(image: UIImage, name: String) -> SCNNode {
        // 検出されたARアンカーの位置を視覚化する平面に合わせて、長方形のノード（SCNPlane）を作成
        let scale: CGFloat = 0.2
        let plane = SCNPlane(width: image.size.width * scale / image.size.height,
                             height: scale)
        // firstMaterial:平面の最初のマテリアル
        // diffuse: 表面から拡散反射される光の量、拡散光はすべての方向に等しく反射されるため、視点に依存しない、contentsに画像をset
        plane.firstMaterial?.diffuse.contents = image
        let planeNode = SCNNode(geometry: plane)
        planeNode.name = name
        // SCNPlaneはローカル座標空間で垂直方向を向いているが、ARアンカーは画像が水平であると想定しているため
        // 一致するように回転させる
        planeNode.eulerAngles.x = -.pi / 2
        // アニメーション
        planeNode.position = SCNVector3(0.0, 0.0, -0.15)
        planeNode.scale = SCNVector3(0.1, 0.1, 0.1)
        planeNode.runAction(self.imageAction)
        return planeNode
    }
}

3.アニメーション

ARはかっこよく表示したい、ですよね、ですよね。
ということで、はじめに検知した時にフェードアニメーションを追加します🕺

    var imageAction: SCNAction {
        return .sequence([
            .scale(to: 1.5, duration: 0.3),//スケール
            .scale(to: 1, duration: 0.2),
            .fadeOpacity(to: 0.8, duration: 0.5),//フェード
            .fadeOpacity(to: 0.1, duration: 0.5),
            .fadeOpacity(to: 0.8, duration: 0.5),
            .move(to: SCNVector3(0.0, 0.0, 0.0), duration: 1),//移動
            .fadeOpacity(to: 1.0, duration: 0.5),
        ])
    }

.sequenceで連続したアニメーションを処理することができます。
センスがないとか言わないで😭

4.タップ

画面をタップでページをめくりましょう。

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        guard
            let location = touches.first?.location(in: sceneView),
            let result = sceneView.hitTest(location, options: nil).first else {
                return
        }
        // ノードの名前を取得し画像変更
        let node = result.node
        let objectImage: UIImage
        switch node.name {
        case "nekonote" :
            nekonoteIndex += 1
            objectImage = nekonotes[nekonoteIndex % 4]
        case "hanakaku":
            hanakakuIndex += 1
            objectImage = hanakakus[hanakakuIndex % 4]
        default:
            return
        }
        // アニメーションしながら画像差し替え
        node.runAction(self.pageStartAction, completionHandler: {
            node.geometry?.firstMaterial?.diffuse.contents = objectImage
            node.runAction(self.pageEndAction, completionHandler: nil)
        })
    }

    var pageStartAction: SCNAction {
        return .fadeOpacity(to: 0.0, duration: 0.1)
    }
    var pageEndAction: SCNAction {
        return .fadeOpacity(to: 1.0, duration: 0.2)
    }