/ 开发笔记

#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