iOS ARKit教程：赤手在空中绘画

前言

这次推荐的是ios上的文章，无奈ios上的东西没接触过，权且当做开拓视野了。老规矩，原文如下：

iOS ARKit Tutorial: Drawing in the Air with Bare Fingers

文章正文

最近，苹果宣布了其名为ARKit的新增强现实（AR）库。对许多人来说，它看起来只是另一个优秀的AR库，而不是值得关注测technology disruptor。但是，如果你在过去几年里看到AR的进展情况，那么你不应该太快得出这样的结论。

为什么我们现在应该关心iOS ARKit？

每个有经验的开发人员都可能意识到AR是一个旧概念。我们可以确定AR的第一次真正的开发是在开发人员从网络摄像头获取个人轮廓的时候。那时的应用通常是用来改变你的脸的。然而，人类并没有花很长时间意识到把脸变成兔子并不是他们最迫切需要的，很快这种炒作就消失了！

ARKit的沉浸性

ARKit提供了两个主要功能;第一个是三维空间中的相机位置，第二个是水平平面检测。为了实现这一目标，ARKit假设你的手机是一个在真实3D空间中移动的摄像头，这样一来，在任何时候，任何一个3D虚拟物体都会被固定在3D空间的那个点上。而对于后者，ARKit检测到水平面，比如桌子，这样你就可以在上面放置物体。

iOS中的ARKit入门

在撰写本文的时候，ARKit是iOS 11的一部分，目前仍处于测试阶段。因此，要想开始，你需要在iPhone 6s及以上版本下载iOS 11测试版，以及新的Xcode测试版。我们可以如此开始一个新的ARKit项目： New > Project > Augmented Reality App。然而，我发现使用官方Apple ARKit示例启动此增强现实教程更为方便，该示例提供了一些基本代码块，对于平面检测特别有用。所以，让我们从这个例子开始，先解释一下它的要点，然后把它修改成我们的项目。

self.session = ARSession()
sceneView.session = session
sceneView.delegate = self
setupFocusSquare()

override func viewDidAppear(_ animated: Bool) {
    let configuration = ARWorldTrackingSessionConfiguration()
    configuration.planeDetection = .horizontal
    session.run(configuration, options: [.resetTracking, .removeExistingAnchors])
}

func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {
    updateFocusSquare()
}

检测平面

ARKit可以探测到新的平面，更新现有的平面，或者移除它们。

为了方便地处理平面，我们将创建一个虚拟场景节点，该节点包含平面位置信息和对焦点正方形的引用。平面是在X和Z方向上定义的，Y是表面的法线。如果我们想让它看起来就像在平面上打印一样，我们应该始终保持我们的绘图节点的位置在相同的Y值上。

平面探测是通过ARKit提供的回调函数完成的。例如，每当检测到新平面时，就会调用以下回调函数:

var planes = [ARPlaneAnchor: Plane]()

func renderer(_ renderer: SCNSceneRenderer, didAdd node: SCNNode, for anchor: ARAnchor) {
    if let planeAnchor = anchor as? ARPlaneAnchor {
        serialQueue.async {
            self.addPlane(node: node, anchor: planeAnchor)
            self.virtualObjectManager.checkIfObjectShouldMoveOntoPlane(anchor: planeAnchor, planeAnchorNode: node)
        }
    }
}
    
func addPlane(node: SCNNode, anchor: ARPlaneAnchor) {
    let plane = Plane(anchor)
    planes[anchor] = plane
    node.addChildNode(plane)
}

...

class Plane: SCNNode {
    
    var anchor: ARPlaneAnchor
    var focusSquare: FocusSquare?
    
    init(_ anchor: ARPlaneAnchor) {
        self.anchor = anchor
        super.init()
    }
    ...
}

func updateFocusSquare() {
    let worldPos = worldPositionFromScreenPosition(screenCenter, self.sceneView)
    self.focusSquare?.simdPosition = worldPos
}

func worldPositionFromScreenPosition(_ position: CGPoint, in sceneView: ARSCNView) -> float3? {
    let planeHitTestResults = sceneView.hitTest(position, types: .existingPlaneUsingExtent)
    if let result = planeHitTestResults.first {
        return result.worldTransform.translation
    }
    return nil
}

画图

让我们先来解释一下，在计算机视觉中，用手指来绘制图形的方法。绘图的方法是通过检测移动手指的每个新位置，在那个位置上放置一个顶点，然后将每个顶点与上一个顶点连接起来。如果我们需要一个平滑的输出，顶点可以通过一条简单的线连接起来，或者通过一条更细的曲线来连接。

let POINT_SIZE = CGFloat(0.003)
let POINT_HEIGHT = CGFloat(0.00001)

class PointNode: SCNNode {
    
    static var boxGeo: SCNBox?
    
    override init() {
        super.init()
        
        if PointNode.boxGeo == nil {
            PointNode.boxGeo = SCNBox(width: POINT_SIZE, height: POINT_HEIGHT, length: POINT_SIZE, chamferRadius: 0.001)
            
            // Setup the material of the point
            let material = PointNode.boxGeo!.firstMaterial
            material?.lightingModel = SCNMaterial.LightingModel.blinn
            material?.diffuse.contents  = UIImage(named: "wood-diffuse.jpg")
            material?.normal.contents   = UIImage(named: "wood-normal.png")
            material?.specular.contents = UIImage(named: "wood-specular.jpg")
        }
        
        let object = SCNNode(geometry: PointNode.boxGeo!)
        object.transform = SCNMatrix4MakeTranslation(0.0, Float(POINT_HEIGHT) / 2.0, 0.0)
        
        self.addChildNode(object)
        
    }
    
    . . .

}

在上面的代码中你会注意到，我们将几何图形沿着y轴平移了一半的高度。这样做的原因是为了确保物体的底部总是在y=0处，这样它就会出现在平面上。

接下来，在SceneKit的呈现器回调函数中，我们将使用相同的PointNode 类，绘制一些类似钢笔尖点的指示符。如果启用了绘图功能，我们将在该位置放置一个点，或者在启用3D模式的情况下将绘图提升到3D结构中：

func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {

    updateFocusSquare()

    // Setup a dot that represents the virtual pen's tippoint
    if (self.virtualPenTip == nil) {
        self.virtualPenTip = PointNode(color: UIColor.red)
        self.sceneView.scene.rootNode.addChildNode(self.virtualPenTip!)
    }

    // Draw
    if let screenCenterInWorld = worldPositionFromScreenPosition(self.screenCenter, self.sceneView) {
            
        // Update virtual pen position
        self.virtualPenTip?.isHidden = false
        self.virtualPenTip?.simdPosition = screenCenterInWorld

        // Draw new point
        if (self.inDrawMode && !self.virtualObjectManager.pointNodeExistAt(pos: screenCenterInWorld)){
            let newPoint = PointNode()
            self.sceneView.scene.rootNode.addChildNode(newPoint)
            self.virtualObjectManager.loadVirtualObject(newPoint, to: screenCenterInWorld)
        }
            
        // Convert drawing to 3D
        if (self.in3DMode ) {
            if self.trackImageInitialOrigin != nil {
                DispatchQueue.main.async {
                    let newH = 0.4 *  (self.trackImageInitialOrigin!.y - screenCenterInWorld.y) / self.sceneView.frame.height
                    self.virtualObjectManager.setNewHeight(newHeight: newH)
                }
            }
            else {
                self.trackImageInitialOrigin = screenCenterInWorld
            }
        }
            
    }

virtualObjectManager 是一个管理绘制点的类。在三维模型中，我们估计了与最后位置的不同，并增加/减少了所有点的高度。

到目前为止，我们正在绘制被探测的表面，假设虚拟笔位于屏幕的中心。现在，有趣的部分——可以检测用户的手指并使用它而不是屏幕中心。

检测用户的指尖

苹果在iOS 11中引入的一个很酷的库是Vision Framework。它以相当方便和有效的方式提供了一些计算机视觉技术。特别是，我们将使用对象跟踪技术。对象跟踪的工作原理如下：首先，我们为图像边界中的一个正方形的图像和坐标提供我们要跟踪的对象。之后，我们调用一些函数来初始化跟踪。最后，我们提供了一个新的图像，其中该对象的位置改变了以及之前操作的分析结果。鉴于此，它将为我们返回对象的新位置。

// MARK: Object tracking
    
fileprivate var lastObservation: VNDetectedObjectObservation?
var trackImageBoundingBox: CGRect?
let trackImageSize = CGFloat(20)
    
@objc private func tapAction(recognizer: UITapGestureRecognizer) {
        
    lastObservation = nil
    let tapLocation = recognizer.location(in: view)
        
    // Set up the rect in the image in view coordinate space that we will track
    let trackImageBoundingBoxOrigin = CGPoint(x: tapLocation.x - trackImageSize / 2, y: tapLocation.y - trackImageSize / 2)
    trackImageBoundingBox = CGRect(origin: trackImageBoundingBoxOrigin, size: CGSize(width: trackImageSize, height: trackImageSize))
        
    let t = CGAffineTransform(scaleX: 1.0 / self.view.frame.size.width, y: 1.0 / self.view.frame.size.height)
    let normalizedTrackImageBoundingBox = trackImageBoundingBox!.applying(t)
        
    // Transfrom the rect from view space to image space
    guard let fromViewToCameraImageTransform = self.sceneView.session.currentFrame?.displayTransform(withViewportSize: self.sceneView.frame.size, orientation: UIInterfaceOrientation.portrait).inverted() else {
        return
    }
    var trackImageBoundingBoxInImage =  normalizedTrackImageBoundingBox.applying(fromViewToCameraImageTransform)
    trackImageBoundingBoxInImage.origin.y = 1 - trackImageBoundingBoxInImage.origin.y   // Image space uses bottom left as origin while view space uses top left
        
    lastObservation = VNDetectedObjectObservation(boundingBox: trackImageBoundingBoxInImage)
        
}

func renderer(_ renderer: SCNSceneRenderer, updateAtTime time: TimeInterval) {

    // Track the thumbnail
    guard let pixelBuffer = self.sceneView.session.currentFrame?.capturedImage,
        let observation = self.lastObservation else {
             return
    }
    let request = VNTrackObjectRequest(detectedObjectObservation: observation) { [unowned self] request, error in
        self.handle(request, error: error)
    }
    request.trackingLevel = .accurate
    do {
        try self.handler.perform([request], on: pixelBuffer)
    }
    catch {
        print(error)
    }

    . . .
}

fileprivate func handle(_ request: VNRequest, error: Error?) {
    DispatchQueue.main.async {
        guard let newObservation = request.results?.first as? VNDetectedObjectObservation else {
            return
        }
        self.lastObservation = newObservation
                        
        var trackImageBoundingBoxInImage = newObservation.boundingBox
            
        // Transfrom the rect from image space to view space
        trackImageBoundingBoxInImage.origin.y = 1 - trackImageBoundingBoxInImage.origin.y
        guard let fromCameraImageToViewTransform = self.sceneView.session.currentFrame?.displayTransform(withViewportSize: self.sceneView.frame.size, orientation: UIInterfaceOrientation.portrait) else {
            return
        }
        let normalizedTrackImageBoundingBox = trackImageBoundingBoxInImage.applying(fromCameraImageToViewTransform)
        let t = CGAffineTransform(scaleX: self.view.frame.size.width, y: self.view.frame.size.height)
        let unnormalizedTrackImageBoundingBox = normalizedTrackImageBoundingBox.applying(t)
        self.trackImageBoundingBox = unnormalizedTrackImageBoundingBox
            
        // Get the projection if the location of the tracked image from image space to the nearest detected plane
        if let trackImageOrigin = self.trackImageBoundingBox?.origin {
            self.lastFingerWorldPos = self.virtualObjectManager.worldPositionFromScreenPosition(CGPoint(x: trackImageOrigin.x - 20.0, y: trackImageOrigin.y + 40.0), in: self.sceneView)
        }            
    }
}

ARKit和未来

在这篇文章中，我们已经演示了如何通过与用户手指和现实生活表的交互来模拟AR。随着计算机视觉技术的进步，以及向小设备(比如深度相机)添加更多的友好型硬件，我们可以获得越来越多的物体的3D结构。

了解基础知识

[toggle hide="yes" title="Apple ARKit为开发人员提供了哪些功能？" color=""]

要开始使用Apple ARKit，请在iPhone 6或更高版本上下载iOS 11，并从New> Project> Augmented Reality App创建一个新的ARKit项目。您还可以在此查看Apple提供的AR示例代码：https：//developer.apple.com/arkit/

[/toggle]