ARの使い道の考え方と、その具体例です。

具体例では、画像を登録して、現実の紙からその部分を切り取ります。

ARってなかなか使い道がわからない

ARって楽しそうなものの、イマイチどういうアプリケーションに使えばいいかわからない。

現実のものとどうインタラクトするかが鍵

リアリティを拡張するもの、ということは、ベースとなるリアルの理解が鍵となります。

ARはセンシングである

現実を拡張するためには、現実を理解する必要があります。

ARとは、コンテンツを表示するもの、というのに加えて、
「センシングである」
というところから考えてみます。

ARコンテンツの配置は、あくまで現実を拡張する手段の一つであって、
コンテンツを現実のどこに配置するか、それによって何の現実を拡張しているか、がARの目的を形作るのではないでしょうか。

となると、まずは現実をどのように認識するのか、というセンシングの部分が重要になります。

ARKitはワールドトラッキングやフェイストラッキングから始まり、最近ではLidarによるオブジェクト理解など、
現実をセンサーによって把握する部分が鍵となっています。

現実から考えよう

バーチャルコンテンツではなく、まずは理解すべき現実から考えてみましょう。
あなたの周りにはどんな現実のものがありますか？
それは、コンピュータによってどのようにセンシングして理解することが可能でしょうか？
最後に、その現実をどのように拡張すれば、面白い効果、便利な効果が得られるでしょうか？

例

画像を登録して、現実の紙からその部分を切り取ります。

私たちの周りには、様々な画像があります。
雑誌の表紙、ポスター、広告。

そこには、多くの人の顔が写っています。

幸い、機械学習のおかげで、画像を認識し、顔を検出することができます。
ここがセンシングの部分です。

顔という現実をARに与え、拡張してみましょう。

拡張は、何も加えることだけではありません。
それを無くす（減らす）ことも拡張と言えます。

把握した顔を、切り取って無くしてみましょう。
まずは顔の把握フェーズです。

Visionで、カメラフレームから顔を検出して、顔だけの画像を作成します。

let request = VNDetectFaceRectanglesRequest()
let pixelBuffer = frame.capturedImage
let handler = VNImageRequestHandler(cvPixelBuffer: pixelBuffer)
do {
    try handler.perform([self.qualityRequest])
    guard let result = request?.results?.first as? VNFaceObservation else { return }
        
    let boundingBox = result.boundingBox
    let ciImage = CIImage(cvImageBuffer: pixelBuffer)
    let faceRect = VNImageRectForNormalizedRect((boundingBox),Int(ciImage.extent.size.width), Int(ciImage.extent.size.height))
    let croppedImage = ciImage.cropped(to: faceRect) 
} catch let error {
    print(error)
}

作成した顔の画像をARReferenceImageとして登録します。
これによって、ARKitは顔の画像を認識し、画像アンカーを作成してコンテンツを配置できるようになります。

guard let cgImage = context.createCGImage(croppedImage, from: croppedImage.extent),
      let imageData = UIImage(cgImage: cgImage).pngData(),
      let url = try? FileManager.default.urls(for: .documentDirectory, in: .userDomainMask)[0].appendingPathComponent("temp.png"),
      ((try? imageData.write(to: url)) != nil) else {isRequesting = false; return}
            
let referenceImage = ARReferenceImage(cgImage, orientation: .up, physicalWidth: 0.1)
let config = ARImageTrackingConfiguration()
config.trackingImages = [referenceImage]
arView.session.run(config, options: [.removeExistingAnchors])

ARKitで登録した顔を認識し、そこに顔画像を貼り付けたボックスを置いて、移動させることで切り抜きに見せます。

func session(_ session: ARSession, didAdd anchors: [ARAnchor]) {
    for anchor in anchors {
        guard let imageAnchor = anchor as? ARImageAnchor else {continue}
        Timer.scheduledTimer(withTimeInterval: 3, repeats: false) { timer in
            let anchorEntity = AnchorEntity(anchor: imageAnchor)
            var material = UnlitMaterial(color: .white)
            let texture = try? TextureResource.load(contentsOf: self.url!)
            material.baseColor = MaterialColorParameter.texture(texture!)
            let faceBox = ModelEntity(mesh: .generateBox(size: [0.1,0.02,Float(imageAnchor.referenceImage.physicalSize.height)]), materials: [material])
                
            let croppedBox = ModelEntity(mesh: .generateBox(size: [0.1,0.02,Float(imageAnchor.referenceImage.physicalSize.height)]), materials: [SimpleMaterial(color: .black, isMetallic: true)])
            croppedBox.position = [0,-0.01,0]
            anchorEntity.addChild(croppedBox)
            anchorEntity.addChild(faceBox)
            self.arView.scene.addAnchor(anchorEntity)
            faceBox.move(to: Transform(translation:[0,0,0.3]), relativeTo: faceBox, duration: 3, timingFunction: .easeInOut)
        }    
    }
}

身の回りからはじめよう

あなたの周りにあるもので、コンピュータによって把握できるものはなんですか？
コンピュータはどのようにそれらのものを認識しますか？
そして、あなたはそれをどのように拡張できますか？

🐣

フリーランスエンジニアです。
お仕事のご相談こちらまで
rockyshikoku@gmail.com

Core MLやARKitを使ったアプリを作っています。
機械学習／AR関連の情報を発信しています。

Twitter
Medium