使用ARKit编写您的第一个增强现实应用程序

程序员文章站 2022-07-14 20:44:04

...

直到最近，增强现实还是科幻小说乌托邦中刻画的“未来主义”思想之一。但是构建AR应用程序的时机已经到来，您可以随身携带一个。

在本教程中，您将学习如何将离地球最近的火星带入自己的房间。

入门

Xcode版本

在开始之前，请确保您的Mac上安装了最新版本的Xcode。这非常重要，因为ARKit仅在Xcode 9或更高版本上可用。您可以通过打开Xcode并转到上方工具栏中的Xcode > 关于Xcode来检查您的版本。

如果您的Xcode版本早于Xcode 9，则可以转到Mac App Store并免费进行更新。如果您还没有Xcode，也可以免费下载并安装。

样例项目

新项目

确定具有正确版本的Xcode之后，您需要创建一个新的Xcode项目。

继续并打开Xcode，然后单击“ 创建新的Xcode项目”。

使用ARKit编写您的第一个增强现实应用程序

您可能习惯于制作“ 单视图”应用程序，但是对于本教程，您将需要选择“ 增强现实”应用程序 ，然后单击“ 下一步”。

游戏框架

您可以根据自己的喜好为项目命名，但我将命名为ARPlanets。 您还将注意到，底部有一个选项，您可以从其中选择SceneKit，SpriteKit和Metal。

这些都是Apple的游戏框架，在本教程中，我们将使用SceneKit，因为我们将使用3D对象。

继续并选择SceneKit（如果尚未选择）。您的屏幕应如下所示：

准备测试

连接iPhone

由于Xcode Simulator没有相机，因此您需要插入iPhone。不幸的是，如果您没有iPhone，则需要借用一本才能随本教程一起使用（以及与其他任何与相机相关的应用程序）。如果您已经将iPhone连接到Xcode，则可以跳到下一步。

Xcode 9中的一个令人讨厌的新功能是您可以在设备上无线调试应用程序，因此让我们花点时间现在进行设置：

在顶部菜单栏中，选择“ 窗口” >“ 设备和模拟器”。 在出现的窗口中，确保在顶部选择了设备。

现在，使用避雷线插入设备。这应该使您的设备出现在“ 设备和模拟器”窗口的左窗格中。只需单击您的设备，然后选中通过网络连接框。

现在，您将可以在所有未来的应用程序的iPhone上进行无线调试。

完成设定

现在您的设置完成。您应该有一个运行良好的ARKit应用程序，并且可以在刚刚连接的iPhone上对其进行测试。在Xcode左上方的“ 运行”和“ 停止”按钮旁边，选择模拟器下拉菜单中的设备。

我已经选择了Vardhan的iPhone，但是您需要选择特定的设备。

现在，您已经完成了创建入门项目的工作，单击“运行”后 ，您应该会看到虚拟飞船出现在您的世界中。它应该是这样的：

深潜

好的，我们终于准备好深入研究并编写一些代码了。您已经有一个可以正常工作的ARKit应用，因此让我们在此基础上做一些有趣的事情。

探索样本项目

节点和纹理

如果查看名为art.scnassets的文件夹，您会注意到它已经包含了两件事：宇宙飞船节点及其纹理。在此示例中，Apple创建了一个空白的宇宙飞船对象，并基本上使用图像叠加层来形成其颜色和形状。

同样，我们将创建自己的球体，并覆盖火星表面图像以创建火星的准确表示。

探索示例代码

Xcode中的ARKit模板附带了一堆预先编写的代码，以使飞船出现，因此，让我们花一些时间来探索一切的含义以及它为什么起作用。

在文件顶部，您将看到以下内容：

import UIKit
import SceneKit
import ARKit

在顶部，正在导入UIKit ，我们需要它，因为主视图将是UIViewController 。还记得在项目设置中选择SceneKit的时候吗？它正与下面的ARKit一起导入。这些是此文件使用的所有库。

在此之下，您将看到一个类声明和以下代码行：

@IBOutlet var sceneView: ARSCNView!

我们在这里不需要深入，但这是一个增强现实SceneKit视图，该视图通过@IBOutlet链接到情节@IBOutlet 。这是我们将在本教程中放置的所有内容的主要视图。

再往前走一点 viewDidLoad()方法应如下所示：

override func viewDidLoad() {
    super.viewDidLoad()
  
    // 1
    sceneView.delegate = self
    
    // 2
    sceneView.showsStatistics = true
    
    // 3
    let scene = SCNScene(named: "art.scnassets/ship.scn")!
    
    // 4
    sceneView.scene = scene
}

这是此代码的作用：

还记得链接到情节sceneView吗？我们正在将其委托分配给我们的ViewController ViewController 因为它符合ARSCNViewDelegate协议。
下一行代码是可选的，当您实际在App Store上发布时，需要将其禁用（设置为false）。这将显示诸如FPS的数据和其他性能数据。
以前，我们在名为art.scnassets的文件夹中看到了ship.scn文件（3D渲染）。在这一行中，正在创建SCNScene ，它是节点的层次结构（在这种情况下，是飞船及其摄像头）。
最后，将场景添加到sceneView ，该场景通过@IBOutlet连接到情节@IBOutlet 。

我们没有涵盖ViewController.swift文件中的每一行，但是我们要涵盖的内容对您来说很重要，以便将来与本教程一起学习并构建自己的ARKit应用。

创造火星

卸下太空飞船

由于我们将在ARKit应用中制作行星而不是宇宙飞船，因此您需要将其删除。

首先，从art.scnassets文件夹中删除以下两个文件： ship.scn和texture.png 。我们将不再需要这些。

接下来，返回您的ViewController.swift文件并找到以下代码行：

// Create a new scene
let scene = SCNScene(named: "art.scnassets/ship.scn")!

由于我们不再拥有ship.scn文件，因此此代码行将导致我们的应用程序崩溃，尤其是因为此行末尾的感叹号将其强制。由于我们不会在船上使用.scn文件，因此无需使用字符串初始化SCNScene 。

只需将以下代码替换为以下代码：

// Create a new scene
let scene = SCNScene()

如果现在运行您的应用程序，您将看到现实，但不会得到增强。换句话说，宇宙飞船将消失。

功能声明

在viewDidLoad()下方，创建一个函数声明，如下所示：

// Creates planet Mars
function createMars() {
    // Do stuff
}

创建某些东西而不返回它似乎没有意义吗？在函数中，我们将需要返回一个SCNNode 。在此过程中，我们还要输入一个行星位置的参数。

进行这些修改之后，您的方法应如下所示：

// Creates planet Mars
function createMars(at position: SCNVector3) -> SCNNode {
    // Do stuff
}

编码球体

由于火星是球形的，因此让我们创建一个球体作为火星的基本形状。您可以选择直接在viewDidLoad()方法中执行此操作，但是我们将使用上面声明的函数。

在函数内部，插入以下代码：

// 1
let sphere = SCNSphere(radius: 0.4)

// 2
let node = SCNNode(geometry: sphere)

// 3
node.position = position

// 4
return node

这是此代码的作用：

这条线创建半径为0.4 SCNSphere类型的球体。
在这里，我们仅将球体变成一个SCNNode即可将其返回到函数调用站点。
当我们将位置作为createMars()函数的参数时，我们将在此处使用该参数设置在上一行中创建的SCNNode的位置。
这只是将SCNNode返回到函数。

添加球体

到目前为止，我们已经创建了一个球体，但是要使其完全显示，我们需要将其添加到当前场景中。为此，请将以下三行代码添加到viewDidLoad()方法中：

// 1
let position = SCNVector3(0, 0, -3)

// 2
let mars = createMars(at: position)

// 3
scene.rootNode.addChildNode(mars)

这是代码的作用：

该行创建一个SCNVector3类型的位置（这是空间中一个点的三维表示），该位置将传递到我们之前创建的createMars()函数中。
在这里，我们调用createMars()并从上一个变量传入位置。接下来，我们将将此函数返回的节点分配给名为mars的变量。
之后，我们将mars添加到Apple的示例项目中提供的场景中。

哇！我们已经取得了相当大的进步。如果现在运行您的应用程序，您应该能够看到世界上某个地方有一个白色的球体。如果尝试从其他角度看它，它看起来就像一个圆，但这是因为我们还没有任何纹理或阴影。这是它的外观：

添加纹理

现在我们有了一个球体，我们需要添加一个纹理，使其看起来像实际的行星火星。我只是搜索了火星表面的照片，并且将使用它，但是您可以使用任何您想要的照片（如果您要混合，甚至可以使用其他行星的纹理）。

要使用刚刚得到的图像，您需要将其放置在两个文件夹中： art.xcassets和art.scnassets 。需要注意的另一件事：如果您希望能够将此代码复制并粘贴到您的项目中，则需要将图像命名为mars_texture.png ，并且必须为PNG 文件。

在函数createMars()的return行之前添加以下代码：

let material = SCNMaterial()
material.diffuse.contents = #imageLiteral(resourceName: "mars_texture.png")
sphere.firstMaterial = material

首先，我们创建一个SCNMaterial ，SceneKit可以在以后使用该SCNMaterial包裹球体，然后将其分配给名为material的常量。然后，我们将选定的图像SCNMaterial然后将其重新分配给默认SCNMaterial的内容。换句话说， material常数现在包含要用作SCNMaterial图像。最后，我们用先前制作的SCNMaterial包裹球体。