/ 开发笔记

#ARKit# ARKit图片检测新手教程

WWDC2019发布了ARKit3.0， 如果你对ARKit不是很了解，想尝试一下，本文将引导你实现ARKit的图片识别功能。

测试例子

下载Apple官方的例子：

官方示例下载地址

下载完，用XCode打开，就可以正常测试了。详细细节，可以参考上边的链接，或者例子中的README.md

测试用的图片在工程的Resouces/Assets.xcassets目录下。

ARKit3教程

添加自定义识别图

步骤

文档里有详细步骤，简单来说就是：

  1. 在Assets.xcassets添加一个新的资源，类型为AR Reference Image

ARKit3教程

  1. 把新的识别图拖到这个新资源里

  2. 选中新添加的资源，为它设置资源名字和物理尺寸

ARKit3教程

注意，这里的尺寸设置的越精确越好。ARKit需要利用这个尺寸来计算物理距离。

完成！

警告

慢，如果只是这样子，你会发现在新图片上有个警告图标：

ARKit3教程

错误信息：
Assets.xcassets: warning: Ambiguous Content: The AR reference image "" has an unassigned child.

如果忽略这个警告，直接测试，则会发现无法识别这个图。

修复错误

那么这个错误该怎么修复呢？

到这个图片所在的目录下，找到Contents.json文件

ARKit3教程

注意，XCode默认是不显示这个文件的。

用文本编辑器打开

ARKit3教程

{
  "images" : [
    
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  },
  "properties" : {
    "width" : 10,
    "unit" : "centimeters"
  }
}

如果对比例子中自带图片的Contents.json文件，你会发现有一个很大的区别：

ARKit3教程

{
  "images":[
      {"idiom":"universal","filename":"imac-27.jpg"}
  ],
  "info":{
      "version":1,
      "author":"xcode"
  },
  "properties":{
      "width":23.439,
      "unit":"inches"
  }
}

对比发现，自动生成的Contents.json文件中，images数组是空的。

需要手动添加图片的信息，像这样：

ARKit3教程

{
  "images" : [
    {"idiom":"universal","filename":"unitylogo.jpg"}
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  },
  "properties" : {
    "width" : 10,
    "unit" : "centimeters"
  }
}

这时候，XCode里的警告就消失了。

ARKit3教程

打包测试，也能正常识别图片了。

持续显示识别图

官方例子中，识别图被识别出来以后，高亮显示了一下，然后就消失了。怎么样才能持续显示呢？

需要修改一下显示的动画。

找到ViewController.swift文件，修改imageHighlightAction方法：

ARKit3教程

// 文件：ViewController.swift
    var imageHighlightAction: SCNAction {
//        return .sequence([
//            .wait(duration: 0.25),
//            .fadeOpacity(to: 0.85, duration: 0.25),
//            .fadeOpacity(to: 0.15, duration: 0.25),
//            .fadeOpacity(to: 0.85, duration: 0.25),
//            .fadeOut(duration: 0.5),
//            .removeFromParentNode()
//        ])
        return .sequence([
            .wait(duration: 0.25),
            .fadeOpacity(to: 0.85, duration: 0.25),
            .fadeOpacity(to: 0.15, duration: 0.25),
            .fadeOpacity(to: 0.85, duration: 0.25)
            ])
    }

测试，完成！

ARKit3教程

代码工程

https://github.com/zhangzhibin/ARKitImageDetection

后续

更多内容，欢迎关注我的公众号：耿直的IT男阿斌
qrcode_for_unitymvp