探索 ARKit 5

使用 ARKit 5 构建下一代增强现实 app。探索如何在其他区域使用位置锚定，以及如何更轻松地引导用户体验您的基于位置的 AR 功能。了解有关面部跟踪和动作捕捉的更多信息。同时探索在现实世界中放置 AR 内容的最佳实践。我们还将展示如何将轻 App 代码集成到您的 AR app，以便轻松发现和精确定位虚拟内容。

资源

相关视频

WWDC22

探索 ARKit 6

WWDC21

WWDC20

探索 ARKit 4

WWDC19

将真人带入到 AR

下载

大家好我叫大卫是ARKit团队的工程师今天克里斯托弗和我会分享 ARKit 5的广泛改进我们很期待能讨论iOS 15 即将到来的改变今年我们在各方面都做了许多升级我们也会讨论许多功能在这之前我们想要展示你们一直以来用激光雷达打造的体验我们已经见到各种用到激光雷达的 app 使用到了场景重建及深度API 包括效率类app、照片滤镜特效、娱乐甚至是你们可以在客厅玩的游戏我们很高兴见到 ARKit社群展示的创意和机智你们在创造这些app时我们也在努力为你们带来世界上最棒的增强现实(AR)框架并突破可能实现的疆界让我们来看看ARKit 5 即将出现的改变首先我们会分享位置锚点的一些更新和最佳实践这能让用户在现实户外位置体验AR 接下来我们会讨论 App Clip Code 这是一种探索 App Clip 的绝佳方式也能让你在AR中放置你的内容我们会特别强调我们在利用新iPad Pro上的超广角前置摄像头的人脸跟踪方面做的一些改进最后我们会讨论ARKit 动作捕捉方面的一些提升我们会从位置锚点开始讨论我们一直在改进这方面来拓展区域支持并提供生活品质上的一些改进我们也会建议一些适用于创造应用程序的最佳实践位置锚点是去年引进的用途是让AR内容可以被放置在特定经纬度上它们的目的是让AR体验的创建与地理位置绑在一起我们来看个例子吧这是ScavengAR应用程序里的 New Nature体验是利用位置锚点API建构的 ScavengAR支持现实位置上的AR内容使虚拟公共艺术的设置及活动能够成功创建这是个好例子显示位置锚点能够随着全世界重新开放来增强户外体验地图app也引进了一种在iOS 15 使用这种API的新AR功能我们来看看吧今年地图加入了以AR显示的逐向导航步行路线就是使用位置锚点API 里面整合了几项我们建议的实践我们稍后会讨论这几个部分来展示你能怎么建构很棒的应用程序现在我们已经看到一些样本我们来摘要说明我们能怎么使用位置锚点来创建它们要从设置 GeoTrackingConfiguration 开始说起首先确认设备是否支持这项功能位置锚点需要A12或更新的芯片蜂窝网络及GPS支持接着启动之前确认该位置是否可以使用这项功能设备所有者必须批准相机和位置权限有需要的话 ARKit会要求权限去年的发布会介绍ARKit 4 和示例工程《在AR中跟踪地理位置》更深入地说明这些内容与API的用法我们强烈建议你们熟悉一下这两个资源这个代码样本显示如何进行上一张幻灯片提到的检查它会询问设备支持然后确认该功能在当前位置是否可以使用然后才会试着运行 GeoTrackingConfiguration 接着可以把GeoAnchors 加入ARSession 就跟其他类型的锚点一样它们会用经纬度坐标来指定也可以选择性用高度来指定一定要监测GeoTrackingConfiguration 的状态看看该功能是否已经定位以及是否可能有问题还没解决开发者网站有一个例子显示了如何实现一个方法来接收状态更新检查设备位置附近的可用性对于开启带有地理跟踪的应用程序是很重要的我们一直在努力支持更多地区位置锚点起初发布时只限五个都会区然后自那时起支持范围就扩展到美国各地超过25个城市我们也在努力把位置锚点推广到全球各地的城市我们很高兴宣布在美国之外的第一个市场位置锚点要到伦敦了我们会随着时间持续努力增加新的地区如果你没有住在获得支持的都市区你也可以开始使用录制和回放来试验位置锚点我们稍后会在这次展示中说明想知道获得支持地区的名单请随时查看 ARGeoTrackingConfiguration 的线上文件由于愈来愈多地区可以使用位置锚点我们意识到需要有一种通用视觉语言来引导大家为了提供一致的新手引导流程我们增加了一个新的.geoTracking目标来配合ARCoachingOverlayView使用和现有的世界跟踪的叠加层类似通过展示动画来协助用户获得良好体验因为指导叠加层被用于许多不同的AR app 包括地图所以大家已经在一定程度上熟悉它们也知道如何反应我们鼓励你们纳入指导叠加层来降低这项功能的学习曲线即使在使用指导叠加层的时候我们也建议你们监测.geoTracking的状态更新这其中包括跟踪状态的详细信息这是.geoTracking指导叠加层的样子这个 UI指引用户把设备不要朝向地面而应该指向建筑外观几秒之后跟踪成功了你的app就能放置与位置绑定的内容用于展示这种动画的代码非常类似用于其他指导叠加层的代码独特的是为叠加层引进.geoTracking目标请确保设定这个目标来展示正确的引导我们已经看到指导叠加层能够如何创建统一的新手引导流程现在我们要来看看其他一些最佳实践这会帮助你创建地理跟踪AR体验我们的第一个建议是使用录制和回放来促进更快的开发 ARKit会话能在使用 Reality Composer的设备上录制你可以在App Store上获得Reality Composer 这对于位置锚点特别有用这样你就不需要常常出去测试了它也允许你与位置遥远的创建者协作录制内容可以通过Xcode在设备上回放为了避免不兼容问题建议使用相同设备及iOS版本这也适用于其他类型的 ARKit应用程序回放并不是位置锚点特有的功能让我们来看看捕捉录制内容的过程要进行录制请打开 Reality Composer 点击右上角查看更多选项然后打开开发人员窗格选择“录制AR会话” 请确定位置服务已经启用点击红色按钮来开始和停止录制要回放录制内容请把设备连到运行Xcode的电脑单击“Edit Scheme” 然后配置ARKit Replay data 选项它在run配置项下面接着运行应用程序尽管录制及回放能有助于加速开发但我们也推荐其他用于内容放置的实践以下是一段示范这些实践的视频请注意这里的AR内容有多大又有多清晰可见信息的传达也不需要与环境中的结构重叠作为开发时间与放置精确性之间的权衡你可以考虑创建浮在空中的内容而不是试图把内容紧密叠加在现实对象上我们还有几个有关放置内容的建议为了取得经纬度坐标来放置对象请使用Apple地图app 并复制坐标精确到小数点之后至少第六位介绍ARKit 4的视频已经显示过这方面的步骤所以请参看该视频取得更多细节创建应用程序时也一定要调整内容相对于位置锚点的高度这是产出良好体验所必需的如果app要求更精确的内容放置请于设备在地理锚点位置的 50米内的时候再添加地理锚点如果ARKit放置锚点时有精确的高度它会更新锚点的高度源场来显示锚点高度 CLLocation类有一个方法能用于计算两点之间以米为单位的距离这可以用来在添加锚点之前先确认用户是否接近位置我们关于位置锚点的说明到此结束还有更多方法能在使用ARKit 5的 app上放置AR内容所以我要把镜头交给克里斯托弗他会为你们提供更多说明谢谢你大卫嗨我叫克里斯托弗我是ARKit团队的工程师我很高兴能告诉你们更多有关ARKit 5 其他新功能的事情让我从ARKit的 App Clip Code开始吧你们或许还记得我们在去年的WWDC上介绍过App Clip app clip是app的一小部分能引导用户完成app的关联工作流程却不需要安装整个app 由于文件很小 app clip 可以节省下载时间并立即把用户直接带到 app的特定部分也就是当下与用户的内容高度相关的部分我们也介绍了App Clip Code 这是让用户能在视觉上探索与启动 app clip的好方法完全不需要前往App Store 这是App Clip Codes的外观它们可以有各式各样的形状和色彩身为开发人员你可以创建最符合你的设想的外观你也能决定要在App Clip Code里编码什么数据以及哪个app clip 跟哪个代码有关联所有App Clip Code都含有一种视觉上可浏览的模式有些App Clip Code 例如这里显示的红、蓝、橙色代码也含有一个NFC标记方便用户使用人们可以用相机扫描代码或者把手机靠近嵌入式NFC标记来启动相关的app clip 现在你也可以在AR体验中辨识及跟踪App Clip Code 我们稍后会在本次说明会中介绍这要怎么做不过首先让我们来看看这个由Primer开发的 app clip 他们利用一个App Clip Code 来启动AR体验 Primer跟Clay Tile合作来向人们展示在App Clip Code的帮助下他们的样品在AR中会是什么样子只要把你的iPhone和iPad 放在App Clip Code上就能调用AR体验现在人们可以在墙上预览磁砖花色完全不需要下载app 挺酷的吧？所以从iOS和iPad 14.3开始你可以在AR体验中侦测和跟踪App Clip Code 请注意 App Clip Code跟踪需要设备具有 A12 Bionic处理器或更新版本例如iPhone XS 让我们来仔细看看如何在ARKit中使用App Clip Code 在iOS 14.3 我们引进了一种新型 ARAnchor 叫做 ARAppClipCodeAnchor 这个锚点具有三种新属性嵌入App Clip Code的URL URL解码状态还有App Clip Code 以米为单位的作用范围半径让我来解释一下每个App Clip Code都有一个URL 这个URL会被解码来展示正确的内容解码URL不是实时的 ARKit能迅速侦测 App Clip Code的存在但ARKit可能花稍微较久时间来解码URL 取决于用户跟代码之间的距离以及其他因素例如照明强弱这就是为什么 App Clip Code锚点含有一个.decoding状态属性而且它的状态有三种初始状态.decoding代表 ARKit还在解码URL 只要ARKit成功解码了URL 状态就会转换成.decoded 无法解码URL的时候状态则会转换成.failed 举例来说这种情况可能发生在有人扫描了一个跟app clip不相关的 App Clip Code 要使用App Clip Code跟踪你应该先检查设备是否支持这项功能请记得App Clip Code跟踪只在具有A12 Bionic处理器或更新版本的设备上才有支持然后在你的配置上设置 appClipCodeTrackingEnabled为true 然后运行会话要读取App Clip Code的URL 请监测AR会话的didUpdate anchors 回调并检查任何已侦测到的 App Clip Code锚点的解码状态 ARKit在解码App Clip Code时你或许想要在App Clip Code上方展示占位符可视化来提供用户立即反馈也就是App Clip Code 已被侦测到但仍需要进行解码正如之前提到的解码App Clip Code 也可能失败比如有人把手机指向不属于自己的app clip的 App Clip Code 我们建议你在这种状况下也提供反馈只要App Clip Code被解码了你就能访问它的URL 并开始展示这个App Clip Code的正确内容比如说在稍早你看到的 Primer app clip案例中 URL含有关于展示哪种磁砖花色的信息只要App Clip Code被解码了问题就是你该在哪里展示与这个代码有关的内容呢？有个选项是直接在 App Clip Code锚点上方展示不过依据你的用途 App Clip Code本身可能不是展示内容的最佳位置所以你可以把内容放在 App Clip Code附近的一个固定相对位置想让这种做法有很好的效果可以把App Clip Code 印在某个物件上例如一台咖啡机而且你可以在机器按钮上方展示关于如何操作的虚拟指令或者你可以结合App Clip Code跟踪及ARKit支持的其他跟踪技术例如图像跟踪让我们来看看这种做法的一个实例你接下来看到的视频和代码是以 “Interacting with App Clip Codes in AR”样本代码为基础你可以在developer.apple.com上下载这个代码你现在看到的是该样本AR体验的一段录制内容首先我打开相机app 扫描一包向日葵种子或许我在一间园艺店里购物试图决定该买什么植物的种子 iOS辨识出包装上的 App Clip Code 然后启动关联的 Seed Shop app clip 我在这里再次扫描App Clip Code 然后长成的向日葵就出现在种子包装上请注意app clip使用了整个种子包装的图像跟踪并把向日葵放在上面这种做法在这个案例中很合理因为人的注意力最有可能放在整个种子包装上而不是右上角那个小小的App Clip Code 但要是有人想看看植物在自家花园里生长的样子呢？这是可能看起来的样子我们看到当code第一次被扫描时它调用了一个app clip下载然后当同样的code从app clip内再次被扫描时它会把code 跟向日葵种子包关联起来接着点击在草地上就会让一株向日葵出现在那里如果app clip看到的是玫瑰种子包上的code 它会在草地上显示一株玫瑰请注意 app clip应该只含有一个工作流程但这个app clip能提供一个按钮来下载完整的Seed Shop app使用户体验能在自家空间中预览的其他植物请记得 App Clip Code跟踪也能在App Clip的父应用中运行让我们来看看把向日葵放在草地上所需要的代码首先你把tapGestureRecognizer 添加到视图来侦测屏幕上的点击当有人在屏幕上点击时你可以投射射线到世界上然后取回在他们设备前的水平面上的结果位置在我们的例子中这会是那个人的草地然后你抓取最后一个被解码的App Clip Code URL 然后在草地上添加一个新的ARAnchor 最后你下载向日葵3D模型在草地上展示它现在我们来谈谈ARKit的 App Clip Code 所呈现的一些最佳实践 app clip能被用于不同环境以及不同用途请考虑这对你来说是不是用来创建 NFC App Clip Codes的选项之一我们建议在人们能靠近 code 的环境中使用NFC App Clip Code 使用NFC App Clip Code时采用合适的行动文案指引用户用设备触碰标签或者提供明确的方式来扫描code 最后但同样重要的是你需要确保你的App Clip Code 是以适合用户环境的大小印刷的比如一间餐厅的菜单可能印在A4纸上在那张菜单上人们就适合从至多50厘米的距离扫描一个2.5厘米的App Clip Code 不过电影海报通常大得多可能有足够空间放置一个12厘米的App Clip Code 人们可以从至多2.5米的距离用手机扫描请查看我们的人机交互指南 App Clip Codes的部分了解更多关于建议code尺寸的信息以上就是你在ARKit 使用App Clip Code的方式如果你想更深入探索 app clip和App Clip Code 请一定要观看《关于App Clip的新内容》和《建构轻巧快速的App Clip》课程现在我们跳到人脸跟踪的部分人脸跟踪让你能识别前置摄像头的人脸在之上叠加虚拟内容以及实时驱动面部表情自从推出iPhone X之后 ARKit就产生一大堆利用人脸跟踪的优秀app 从跟踪多人脸到同时运行前后置摄像头的场景里运行人脸跟踪这些年内这个API已经有许多进展去年我们在没有TrueDepth传感器的设备上引入人脸跟踪只要它们有A12 Bionic 或更新版本的处理器就行今年稍早我们也推出了新的iPad Pro 它提供了一个超广角的前置摄像头让你能用于AR人脸跟踪体验我们来看看吧这里你看到的是普通前置摄像头的视野这个是新iPad Pro的新超广角视野差别真的很大对吧？请注意你现有的app会继续使用普通摄像头来进行人脸跟踪如果你想要把你的用户体验升级到新iPad Pro上的超广角视野你需要检查哪些视频格式可用并选择使用新的超广角格式你能使用的做法是迭代所有支持的视频格式然后检查builtInUltraWideCamera选项然后在你的AR配置上设置这种格式并运行会话有件需要注意的事就是新iPad Pro的超广角摄像头拥有的视野比TrueDepth传感器大得多因此使用超广角视频格式时你不会在ARFrame上得到 capturedDepthData缓冲区最后但同样重要的是我们来谈谈动作捕捉吧自从动作捕捉在2019年推出以来它已经实现了真人在AR场景中的强大集成例如驱动虚拟角色以及用于2D和3D模拟在iOS 15中动作捕捉又变得更好了在具有Apple A14 Bionic 处理器的设备上例如iPhone 12 动作捕捉现在支持各式各样的身体姿势而且完全不需要改变代码 iOS 15上的所有动作捕捉app 都会从中受益最明显的是旋转比以往更加准确帮助你更加精确地跟踪体育活动的动作另一个很大的改进是你的设备摄像头现在能够从更远的距离跟踪身体关节另外四肢动作的跟踪范围也有显著增加让我们来看一个例子这是我的同事艾勒他用Driven2win这个app 跟踪自己的锻炼 iOS 15上的结果比以往更精确回顾一下 ARKit 5带来许多新功能与改进位置锚点能在更多城市使用并显示一个新的指导叠加层 App Clip Code跟踪能协助你在app clip中轻松探索并使用AR 以及精确放置你的虚拟内容人脸跟踪在新iPad Pro上配合新的超广角视野运行而动作捕捉添加更好的准确性及更大的动作范围我很期待看到你们将会用ARKit 5 创建的所有精彩体验 [音乐]

3:29 - Geo Tracking Recap I

// Check device support for geo-tracking
guard ARGeoTrackingConfiguration.isSupported else {
    // Geo-tracking not supported on this device
    return
}

// Check current location is supported for geo-tracking
ARGeoTrackingConfiguration.checkAvailability { (available, error) in
    guard available else {
        // Geo-tracking is not available at this location
        return
    }

    // Run ARSession
    let arView = ARView()
    arView.session.run(ARGeoTrackingConfiguration())
}

3:42 - Geo Tracking Recap II

// Create Location Anchor and add to session
let coordinate = CLLocationCoordinate2D(latitude: 37.795313, longitude: -122.393792)
let geoAnchor = ARGeoAnchor(name: “Ferry Building”, coordinate: coordinate)
arView.session.add(anchor: geoAnchor)

// Monitor geo-tracking status updates
func session(_ session: ARSession, didChange geoTrackingStatus: ARGeoTrackingStatus) {
    …
}

6:02 - Geo Tracking Coaching Overlay

// Declare coaching view
let coachingOverlay = ARCoachingOverlayView()

// Set up coaching view (assuming ARView already exists)
coachingOverlay.session = self.arView.session
coachingOverlay.delegate = self
coachingOverlay.goal = .geoTracking
     
coachingOverlay.translatesAutoresizingMaskIntoConstraints = false
self.arView.addSubview(coachingOverlay)

NSLayoutConstraint.activate([
    coachingOverlay.centerXAnchor.constraint(equalTo: view.centerXAnchor),
    coachingOverlay.centerYAnchor.constraint(equalTo: view.centerYAnchor),
    coachingOverlay.widthAnchor.constraint(equalTo: view.widthAnchor),
    coachingOverlay.heightAnchor.constraint(equalTo: view.heightAnchor),
])

8:53 - GeoTracking Distance Method

// Method to compute distance (in meters) between points
func distance(from location: CLLocation) -> CLLocationDistance

12:16 - App Clip Code: check device support

func viewDidLoad() {
    // Check device support for app clip code tracking
    guard ARWorldTrackingConfiguration.supportsAppClipCodeTracking else { return }
    
    let worldConfig = ARWorldTrackingConfiguration()
    worldConfig.appClipCodeTrackingEnabled = true
    arSession.run(worldConfig)
}

12:34 - Accessing the URL of an App Clip Code

/// Accessing the URL of an App Clip Code 
override func session(_ session: ARSession, didUpdate anchors: [ARAnchor]) {
    for anchor in anchors {
        guard let appClipCodeAnchor = anchor as? ARAppClipCodeAnchor, appClipCodeAnchor.isTracked else { return }
        
        switch appClipCodeAnchor.urlDecodingState {
        case .decoding:
            displayPlaceholderVisualizationOnTopOf(anchor: appClipCodeAnchor)
        case .failed:
            displayNoURLErrorMessageOnTopOf(anchor: appClipCodeAnchor)
        case .decoded:
            let url = appClipCodeAnchor.url!
            let anchorEntity = AnchorEntity(anchor: appClipCodeAnchor)
            arView.scene.addAnchor(anchorEntity)
            let visualization = AppClipCodeVisualization(url: url, radius: appClipCodeAnchor.radius)
            anchorEntity.addChild(visualization)
          }
    }
}

15:34 - Adding a gesture recognizer

/// Adding a gesture recognizer for user interaction
func viewDidLoad() {
    initializeARView()
    initializeCoachingOverlays()
        
    // Place sunflower on the ground when the user taps the screen
    let tapGestureRecognizer = UITapGestureRecognizer(
     target: self,
     action: #selector(handleTap(recognizer:)))
    arView.addGestureRecognizer(tapGestureRecognizer)
}

15:45 - Tap to place the sunflower

func handleTap(recognizer: UITapGestureRecognizer) {
    let location = recognizer.location(in: arView)
    // Attempt to find a 3D location on a horizontal
    // surface underneath the user's touch location.
    let results = arView.raycast(
      from: location, 
      allowing: .estimatedPlane,
      alignment: .horizontal)
    guard let firstResult = results.first else { return }
    // Fetch the last decoded app clip code URL
    guard let appClipCodeURL = decodedURLs.last else { return }
    // Add an ARAnchor & AnchorEntity at the touch location
    let anchor = ARAnchor(transform: firstResult.worldTransform)
    arView.session.add(anchor: anchor)
    let anchorEntity = AnchorEntity(anchor: anchor)
    arView.scene.addAnchor(anchorEntity)    
    // Download the 3D model associated with this app clip code.
    downloadAndDisplay(appClipCodeURL, on: anchorEntity)
}

18:33 - Checking for supported video formats for face tracking

// Check if the ultra wide video format is available.
// If so, set it on a face tracking configuration & run the session with that.

let config = ARFaceTrackingConfiguration()
for videoFormat in ARFaceTrackingConfiguration.supportedVideoFormats {
    if videoFormat.captureDeviceType == .builtInUltraWideCamera {
        config.videoFormat = videoFormat
        break
    }
}
session.run(config)

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。