Displaying an AR Experience with Metal

Build a custom AR view by rendering camera images and using position-tracking information to display overlay content.

通过渲染相机图像并使用位置跟踪信息来显示覆盖内容来构建自定义AR视图。


Overview

ARKit includes view classes for easily displaying AR experiences with SceneKit or SpriteKit. However, if you instead build your own rendering engine (or integrate with a third-party engine), ARKit also provides all the support necessary to display an AR experience with a custom view.


概述

ARKit包含视图类,用于通过SceneKit或SpriteKit轻松显示AR体验。 但是,如果您改为创建自己的渲染引擎(或与第三方引擎集成),则ARKit还提供必要的所有支持以显示具有自定义视图的AR体验。

In any AR experience, the first step is to configure an ARSession object to manage camera capture and motion processing. A session defines and maintains a correspondence between the real-world space the device inhabits and a virtual space where you model AR content. To display your AR experience in a custom view, you’ll need to:

Retrieve video frames and tracking information from the session.

Render those frame images as the backdrop for your view.

Use the tracking information to position and draw AR content atop the camera image.

在任何AR体验中,第一步是配置一个ARSession对象来管理相机捕获和运动处理。 会话定义并维护设备居住的真实世界空间与模拟AR内容的虚拟空间之间的对应关系。 要在自定义视图中显示您的AR体验,您需要:

从会话中检索视频帧和跟踪信息。

将这些帧图像渲染为您视图的背景。

使用跟踪信息在相机图像上定位和绘制AR内容。

Note

This article covers code found in Xcode project templates. For complete example code, create a new iOS application with the Augmented Reality template, and choose Metal from the Content Technology popup menu.

注意

本文介绍了Xcode项目模板中的代码。 有关完整的示例代码,请使用增强现实模板创建一个新的iOS应用程序,然后从内容技术弹出式菜单中选择Metal。

Get Video Frames and Tracking Data from the Session

Create and maintain your own ARSession instance, and run it with a session configuration appropriate for the kind of AR experience you want to support. The session captures video from the camera, tracks the device’s position and orientation in a modeled 3D space, and provides ARFrame objects. Each such object contains both an individual video frame image and position tracking information from the moment that frame was captured.

There are two ways to access ARFrame objects produced by an AR session, depending on whether your app favors a pull or a push design pattern. 

If you prefer to control frame timing (the pull design pattern), use the session’s currentFrameproperty to get the current frame image and tracking information each time you redraw your view’s contents. The ARKit Xcode template uses this approach:


从Session获取视频帧和跟踪数据

创建和维护自己的ARSession实例,并使用适合您希望支持的AR体验类型的Session配置运行它。 该Session从相机捕获视频,在建模的3D空间中跟踪设备的位置和方向,并提供ARFrame对象。 每个这样的对象包含从捕获帧的那一刻起的单独的视频帧图像和位置跟踪信息。

有两种方法可以访问ARSession产生的ARFrame对象,具体取决于您的应用是否支持拉式或推式设计模式。

如果您更愿意控制帧时序(拉式设计模式),则每次重新绘制视图内容时,请使用会话的currentFrame属性来获取当前帧图像和跟踪信息。 ARKit Xcode模板使用这种方法:

Alternatively, if your app design favors a push pattern, implement the session:didUpdateFrame: delegate method, and the session will call it once for each video frame it captures (at 60 frames per second by default).

Upon obtaining a frame, you’ll need to draw the camera image, and update and render any overlay content your AR experience includes.

或者,如果您的应用设计偏好推式模式,请实施Session:didUpdateFrame:delegate方法,并且Session将为其捕获的每个视频帧调用一次(默认情况下为每秒60帧)。

在获取框架后,您需要绘制相机图像,并更新和渲染AR体验包含的任何叠加内容。

Draw the Camera Image

Each ARFrame object’s capturedImage property contains a pixel buffer captured from the device camera. To draw this image as the backdrop for your custom view, you’ll need to create textures from the image content and submit GPU rendering commands that use those textures.

The pixel buffer’s contents are encoded in a biplanar YCbCr (also called YUV) data format; to render the image you’ll need to convert this pixel data to a drawable RGB format. For rendering with Metal, you can perform this conversion most efficiently in GPU shader code. Use CVMetalTextureCache APIs to create two Metal textures from the pixel buffer—one each for the buffer’s luma (Y) and chroma (CbCr) planes:


绘制相机图像

每个ARFrame对象的capturedImage属性都包含从设备摄像头捕获的像素缓冲区。 要将此图像作为自定义视图的背景,您需要从图像内容创建纹理并提交使用这些纹理的GPU渲染命令。

像素缓冲区的内容以双平面YCbCr(也称为YUV)数据格式编码; 要渲染图像,您需要将此像素数据转换为可绘制的RGB格式。 对于使用Metal进行渲染,您可以在GPU着色器代码中最有效地执行此转换。 使用CVMetalTextureCache API从像素缓冲区创建两个Metal纹理 - 缓冲区的亮度(Y)和色度(CbCr)平面各一个:

Next, encode render commands that draw those two textures using a fragment function that performs YCbCr to RGB conversion with a color transform matrix:

接下来,编码使用片段函数绘制这两个纹理的渲染命令,该片段函数使用颜色转换矩阵执行YCbCr转换为RGB转换:

Note

Use the displayTransformForOrientation:viewportSize: method to make sure the camera image covers the entire view. For example use of this method, as well as complete Metal pipeline setup code, see the full Xcode template. (Create a new iOS application with the Augmented Reality template, and choose Metal from the Content Technology popup menu.)


注意

使用displayTransformForOrientation:viewportSize:方法确保摄像机图像覆盖整个视图。 例如,使用此方法以及完整的Metal管道设置代码,请参阅完整的Xcode模板。 (使用增强现实模板创建一个新的iOS应用程序,并从内容技术弹出式菜单中选择Metal。)

Track and Render Overlay Content 

AR experiences typically focus on rendering 3D overlay content so that the content appears to be part of the real world seen in the camera image. To achieve this illusion, use the ARAnchorclass to model the position and orientation of your own 3D content relative to real-world space. Anchors provide transforms that you can reference during rendering. 

For example, the Xcode template creates an anchor located about 20 cm in front of the device whenever a user taps on the screen:


跟踪和渲染叠加内容

AR体验通常专注于渲染3D叠加内容,以便内容看起来是摄像机图像中看到的真实世界的一部分。 为了达到这种幻想,请使用ARAnchor类对相对于现实世界空间的3D内容的位置和方向进行建模。 锚点提供可在渲染过程中引用的变换。

例如,无论用户何时点击屏幕,Xcode模板都会在设备前创建一个位于设备前方约20厘米的锚点:

In your rendering engine, use the transform property of each ARAnchor object to place visual content. The Xcode template uses each of the anchors added to the session in its handleTap method to position a simple cube mesh:


在渲染引擎中,使用每个ARAnchor对象的transform属性来放置可视内容。 Xcode模板使用每个在其handleTap方法中添加到会话中的锚来定位简单的多维数据集网格:

Note

In a more complex AR experience, you can use hit testing or plane detection to find the positions of real-world surfaces. For details, see the planeDetection property and the hitTest:types: method. In both cases, ARKit provides results as ARAnchor objects, so you still use anchor transforms to place visual content.

注意

在更复杂的AR体验中,您可以使用命中测试或平面检测来查找真实世界曲面的位置。 有关详细信息,请参阅planeDetection属性和hitTest:types:方法。 在这两种情况下,ARKit都会提供结果作为ARAnchor对象,因此您仍然使用锚点转换来放置可视内容。

Render with Realistic Lighting

When you configure shaders for drawing 3D content in your scene, use the estimated lighting information in each ARFrame object to produce more realistic shading:

当您配置着色器以在场景中绘制3D内容时,请使用每个ARFrame对象中的估计光照信息来生成更逼真的着色:


Note

For the complete set of Metal setup and rendering commands that go with this example, see the full Xcode template. (Create a new iOS application with the Augmented Reality template, and choose Metal from the Content Technology popup menu.)

注意

有关此示例中完整的Metal安装和渲染命令集,请参阅完整的Xcode模板。 (使用增强现实模板创建一个新的iOS应用程序,并从内容技术弹出式菜单中选择金属。)

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,491评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,856评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,745评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,196评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,073评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,112评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,531评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,215评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,485评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,578评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,356评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,215评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,583评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,898评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,497评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,697评论 2 335

推荐阅读更多精彩内容

  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,258评论 0 10
  • ARkit Introducing ARKit iOS 11引入ARKit,这是 个全新的框架,允许开发者轻松地为...
    坤哥爱卿阅读 1,311评论 0 1
  • PLEASE READ THE FOLLOWING APPLE DEVELOPER PROGRAM LICENSE...
    念念不忘的阅读 13,413评论 5 6
  • 文字是表达思想的工具。码字砌文则是一件有趣的工作。写文章和小时候搭积木是同一个原理。...
    冰夫阅读 422评论 0 0
  • 何为社交电商: 所谓社交化电子商务,是指将关注、分享、沟通、讨论、互动等社交化的元素应用于电子商务交易过程的...
    青岛大唐阅读 336评论 0 0