ARKit by Example - 第1部分:AR立方体

这篇第一篇文章将使用ARKit创建一个非常简单的hello world AR应用程序。最后,我们将能够在增强的世界中定位3D立方体,并使用我们的iOS设备移动它。

要在ARKit中呈现3D内容,我们将使用SceneKit:https//developer.apple.com/scenekit/这是一个在iOS设备上渲染3D图形的框架。如果您熟悉基本的3D概念,那将非常简单。

如果你不能等到文章结尾,这里有一个应用程序的视频。正如您在使用ARKit时所看到的,我们可以将虚拟对象放置在现实世界中,并在我们移动相机时将它们固定到位。

即使这是一个非常简单的应用程序,我们将通过这些系列文章继续构建越来越多的功能,包括几何检测,3D物理和更多有趣的东西。

Youtube

要求

截至撰写本文时,您需要一台带有A9 / A10处理器的iOS设备来支持ARKit。这意味着iPhone 6S或更好,或iPad 2017或更好。

对于sfotware,您需要安装:

安装好后,您就可以开始了。

创建项目

首先打开XCode,选择ARKit项目模板:

XCode 9 Beta - 新项目模板选择器

填写项目详细信息,确保选择“Scene Kit”作为“内容技术”选项。默认情况下可能会说“Sprite Kit”用于2D渲染,但我们想要用于渲染3D内容的“Scene Kit”。

image.png

运行项目,如果设备上的所有内容都按预期工作,您应该会看到一个应用程序,其中显示了实时摄像头源和位于物理空间中的飞机的3D模型。

移动并观察飞机在现实世界中保持的位置,即使您移动相机也是如此:

image.png

示例项目中的上述示例实际上比我们要创建的更高级,但这里的重点是学习如何从头开始编写这些项目,以便打开项目,并从viewDidLoad方法中删除所有代码(除了超级电话)。

ARKit核心课程

ARSCNView  - 辅助视图,有助于使用SceneKit渲染的3D内容增强实时摄像机视图。这堂课有几件事:

  • 从视图中的设备相机渲染实时视频流,作为3D场景的背景
  • ARKit的3D坐标系与SceneKit的3D坐标系匹配,因此在此视图中渲染的对象将自动匹配增强的ARKit世界视图
  • 自动移动虚拟SceneKit 3D相机以匹配ARKit跟踪的3D位置,因此不需要额外的代码来连接ARKit移动事件以映射到SceneKit 3D渲染。

ARSession  - 每个增强现实会话都需要一个ARSession实例。它负责控制摄像机,从设备中收集所有传感器数据等,以构建这种无缝体验。ARSCNView实例已经有一个ARSession实例,您只需要在启动时配置它。

ARWorldTrackingSessionConfiguration  - 此类向ARSession指示我们想要使用六个自由度来跟踪现实世界中的用户,滚动,俯仰,偏航和X,Y和Z中的平移。这使我们可以在您可以创建AR体验不仅可以在同一个位置旋转以查看增强内容,还可以在3D空间中移动对象。如果您不需要翻译部分,并且用户在项目扩充内容时保持静止,则可以使用ARSessionConfiguration类来初始化ARSession实例。

对于本系列的第1部分,我们只需要这些类,还有更多,但这是一个很好的起点。回到我们的项目,我们可以在viewWillAppear方法中看到初始化ARSession实例,self.sceneView引用ARSCNView实例。

- (void)viewWillAppear:(BOOL)animated {
  [super viewWillAppear:animated];
  // Create a session configuration
  ARWorldTrackingSessionConfiguration *configuration = [ARWorldTrackingSessionConfiguration new];
  // Run the view's session
  [self.sceneView.session runWithConfiguration:configuration];
}

绘制立方体

我们将使用SceneKit绘制3D立方体。SceneKit有几个基本类,SCNScene是所有3D内容的容器,您可以在场景中添加多个3D几何体,包括各种位置,旋转,比例等。

要向场景添加内容,首先要创建一些几何体,几何体可以是复杂的形状,或简单的形状,如球体,立方体,平面等。然后将几何体包裹在场景节点中并将其添加到场景中。然后SceneKit将遍历场景图并渲染内容。

要添加场景并绘制立方体,我们将在viewDidLoad方法中添加以下代码:

- (void)viewDidLoad {
  [super viewDidLoad];
  // Container to hold all of the 3D geometry  
  SCNScene *scene = [SCNScene new];
  // The 3D cube geometry we want to draw
  SCNBox *boxGeometry = [SCNBox 
                          boxWithWidth:0.1 
                          height:0.1 
                          length:0.1 
                          chamferRadius:0.0];
  // The node that wraps the geometry so we can add it to the scene
  SCNNode *boxNode = [SCNNode nodeWithGeometry:boxGeometry];
  // Position the box just in front of the camera
  boxNode.position = SCNVector3Make(0, 0, -0.5);
  // rootNode is a special node, it is the starting point of all
  // the items in the 3D scene
  [scene.rootNode addChildNode: boxNode];
  // Set the scene to the view
  self.sceneView.scene = scene;
}

ARKit中的坐标大致对应于米,因此在这种情况下,我们创建一个10x10x10厘米的盒子。

ARKit和SceneKit的坐标系如下所示:

image.png

正如您在上面的代码中所看到的那样,摄像机前面的摄像机位置为-0.5,因为摄像机面向负Z方向。

当ARSession启动时,计算出的摄像机位置最初设置为X = 0,Y = 0,Z = 0。

如果您现在运行该示例,您应该会看到一个漂浮在空间中的小型立方体,当您四处移动时,它可以保持它的位置,您应该能够一直走动,向下看,在它上面。

我们想要做的一个快速调整是在3D场景中添加一些默认光照,这样我们就可以看到立方体的两侧,我们可以稍后添加一些更高级的光照但是现在我们可以在SCNScene实例上设置autoenablesDefaultLighting :

self.sceneView.autoenablesDefaultLighting = YES;

下一篇文章

在下一篇文章中,我们将开始使我们的应用程序更有趣,添加一些更复杂的对象,检测场景中的平面以及与场景中的几何体交互,敬请期待...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏伪君子的梦呓

用 Python 查看微信好友位置信息

0 前言 上一次是用 itchat 这个包,然后把好友的性别比例打印出来,并且弄出了饼图和柱状图,今天还是使用 itchat 这个包,不过是用来看一下微信好友...

34650
来自专栏菩提树下的杨过

Flash/Flex学习笔记(12):FMS 3.5之如何做视频实时直播

硬件条件:一个摄像头 + 一台FMS服务器即可 原理:摄像头实时采集视频源,然后推送到FMS服务器,其它客户从FMS上获取视频流。 需要做二个fla,一个用于向...

19980
来自专栏机器学习AI算法工程

Python爬虫股票评论,snowNLP简单分析股民用户情绪

一、背景 股民是网络用户的一大群体,他们的网络情绪在一定程度上反映了该股票的情况,也反映了股市市场的波动情况。作为一只时间充裕的研究僧,我课余时间准备...

51580
来自专栏CreateAMind

ROS探索总结(十二)——坐标系统

在机器人的控制中,坐标系统是非常重要的,在ROS使用tf软件库进行坐标转换。

16210
来自专栏腾讯移动品质中心TMQ的专栏

当我们讨论流畅度的时候,我们究竟在说什么?

前言:那些年我们用过的显示性能指标 相对其他 Android 性能指标(如内存、CPU、功耗等)而言,显示性能(包括但不仅限于我们常说的“流畅度”)的概念本来...

799100
来自专栏阿凯的Excel

复合饼图绘制(Excel绘制图表系列课程)

分享Excel的图表已经第三周了,曾经说给我好处的人,到现在还没有兑现。 嗯,我怎么会是这么庸俗的人,嗯嗯!!! 今天和大家分享一个相对于前两期都比较容易绘...

44750
来自专栏FreeBuf

极客DIY:制作一款属于自己的街机

还记得那些给人带来乐趣的街机吗?你是不是也想拥有一款属于自己的街机呢?如果你有想法,那么就请看看我们的极客大神是如何DIY属于自己的街机的吧,相信你会大呼过瘾的...

83960
来自专栏ThoughtWorks

TW洞见 | 可视化你的足迹

今日洞见 文章作者来自ThoughtWorks:邱俊涛。 本文所有内容,包括文字、图片和音视频资料,版权均属ThoughtWorks公司所有,任何媒体、网站或个...

400120
来自专栏Material Design组件

Human Interface Guidelines — Progress Indicators

11930
来自专栏ThoughtWorks

React全家桶与前端单元测试艺术|洞见

TL;DR——什么是好的单元测试? 其实我是个标题党,单元测试根本没有“艺术”可言。 好的单元测试来自于好的代码,如果说有艺术,那也是代码的艺术。 注:以下“...

38260

扫码关注云+社区

领取腾讯云代金券