【AR】ARKitを使用して仮想オブジェクト（四角形）を現実世界に描画してみる

みなさん、こんにちは！

本日は仮想オブジェクト(四角形)をスクリーンを通りて見える現実世界に配置するやり方をまとめてみました。

その題材として写真のような物を作ろうかと思います。

x,y,z座標を画面から指定のうえ「オブジェクト生成」ボタンを押下すると、指定した場所に仮想オブジェクトが生成作成される。

早速作っていきましょう

まずは、Single View APPを選択して新規プロジェトを作成しましょう。

次に、仮想オブジェクトを描画するために必要な領域(ARSCNView)を作成します。

領域を作成するためにはstoryboard情にARSCNViewを配置しなければなりませんが、デフォルトでは配置できません。

infoにARkitを定義する必要があります。

以下のスクショのように定義を追加してください。

定義出来たら、storyboardを開きましょう。

検索窓に「ar」と入力すると、ARKIt SceneKit Viewが候補として表示されると思います。

このARKIt SceneKit Viewを画面上にドラックアンドドロップしてください。そして画面上部を覆うように幅を調整してください。

また、x,y,zzそれぞれのstepperとlabelを配置しましょう。

storyboardの作成が完了したら、ViewControlller.switを編集していきます。

createObjectメソッドの中で仮想オブジェクトの生成を行っております。

それ以外の部分はもう少し効率よく記述できると思いますが、見逃してください。

//
//  ViewController.swift
//  sampleAr3
//
//  Copyright © 2020 エンジニアの日記. All rights reserved.
//

import UIKit
import SceneKit
import ARKit

class ViewController: UIViewController, ARSCNViewDelegate  {

    @IBOutlet weak var sceneView: ARSCNView!
    @IBOutlet weak var x: UILabel!
    @IBOutlet weak var y: UILabel!
    @IBOutlet weak var z: UILabel!
    
    @IBOutlet weak var ValueX: UIStepper!
    @IBOutlet weak var ValueY: UIStepper!
    @IBOutlet weak var ValueZ: UIStepper!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        //デグレードを設定する
        sceneView.delegate = self
        //デバッグモード
        sceneView.debugOptions = [ARSCNDebugOptions.showWorldOrigin]
    }
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        
        createObject(x : 0,y: 0,z: 0)
        
        // Create a session configuration
        let configuration = ARWorldTrackingConfiguration()

        // Run the view's session
        sceneView.session.run(configuration)
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        
        // Pause the view's session
        sceneView.session.pause()
    }

    @IBAction func stepperX(_ sender: UIStepper) {
        x.text = String(format: "%.1f",sender.value)
    }

    @IBAction func stepperY(_ sender: UIStepper) {
        y.text = String(format: "%.1f",sender.value)
    }
    
    @IBAction func stepperZ(_ sender: UIStepper) {
        z.text = String(format: "%.1f",sender.value)
    }
    
    @IBAction func addObject(_ sender: Any) {
        createObject(x : Float(ValueX.value),y : Float(ValueY.value),z : Float(ValueZ.value))
    }
    //オブジェクト生成
    func createObject(x:Float,y:Float,z:Float) {
        //四角形オブジェクトのインスタンスを生成
        let sampleBox = SCNBox(width: 0.05, height: 0.05, length: 0.05, chamferRadius: 0)
        //視覚的プロパティ定義するためにmaterialのインスタンスを生成
        let sampleMaterial = SCNMaterial()
        //色を定義
        sampleMaterial.diffuse.contents = UIColor.black
        //四角形オブジェクトに視覚的効果を付与
        sampleBox.materials = [sampleMaterial]
        //ノードにsampleBok追加
        let sampleNode = SCNNode(geometry: sampleBox)
        //ノードの位置情報を定義
        sampleNode.position = SCNVector3(x,y,z)
        //ノードにオブジェクトを追加
        sceneView.scene.rootNode.addChildNode(sampleNode)
    }

}

最後にアプリがカメラにアクセスできるように設定します。

今一度infoを開いてPrivacy – camera・・・の定義を追加しましょう。