Статьи

Зашифруйте свое первое приложение дополненной реальности с ARKit

Февраль 18, 2019

До недавнего времени дополненная реальность была одной из тех «футуристических» идей, которые изображались в научно-фантастических утопиях. Но пришло время, когда создание приложения AR стало реальностью, и вы можете иметь его в своем кармане.

В этом уроке вы узнаете, как перенести Марс, ближайшую планету на Землю, в свою комнату.

Начиная

Версия XCode

Прежде чем мы начнем, убедитесь, что на вашем Mac установлена ​​последняя версия Xcode. Это очень важно, потому что ARKit будет доступен только на Xcode 9 или новее. Вы можете проверить свою версию, открыв Xcode и перейдя в Xcode > About Xcode на верхней панели инструментов.

Если ваша версия Xcode старше, чем Xcode 9, вы можете зайти в Mac App Store и обновить ее бесплатно. Если у вас еще нет Xcode, вы также можете скачать и установить его бесплатно.

Пример проекта

Новый проект

После того, как вы убедитесь, что у вас есть правильная версия Xcode, вам нужно будет создать новый проект Xcode.

Запустите Xcode и нажмите « Создать новый проект XCode».

Рисунок 1. Создание проекта XCode.

Возможно, вы привыкли создавать приложение с одним представлением, но для этого урока вам нужно будет выбрать приложение дополненной реальности и нажать « Далее».

Рисунок 2. Выберите приложение дополненной реальности.

Игровые рамки

Вы можете назвать свой проект как угодно, но я буду называть мои ARPlanets. Вы также заметите, что внизу есть опция, в которой вы можете выбрать из SceneKit, SpriteKit и Metal.

Все это игровые среды Apple, и для целей данного руководства мы будем использовать SceneKit, поскольку будем использовать трехмерные объекты.

Идите вперед и выберите SceneKit, если он еще не выбран. Ваш экран должен выглядеть примерно так:

Рисунок 3 Создайте свой проект

Подготовка к тесту

Подключение iPhone

Поскольку Xcode Simulator не имеет камеры, вам нужно подключить свой iPhone. К сожалению, если у вас нет iPhone, вам понадобится его взять, чтобы иметь возможность следовать этому руководству (и любым другим приложениям, связанным с камерой). Если у вас уже есть iPhone, подключенный к Xcode, вы можете перейти к следующему шагу.

Отличная новая функция в Xcode 9 заключается в том, что вы можете отлаживать свое приложение по беспроводной связи на устройстве, поэтому давайте потратим время, чтобы настроить это сейчас:

В верхней строке меню выберите « Окно» > « Устройства и симуляторы». В появившемся окне убедитесь, что устройства выбраны сверху.

Теперь подключите устройство с помощью кабеля молнии. Это должно привести к тому, что ваше устройство появится в левой панели окна « Устройства и симуляторы» . Просто щелкните свое устройство и установите флажок Подключаться через сеть .

Рисунок 4 Устройства и симуляторы

Теперь вы сможете выполнять беспроводную отладку на этом iPhone для всех будущих приложений.

Полная настройка

Теперь ваша настройка завершена. У вас должно быть работающее приложение ARKit, и вы можете протестировать его на iPhone, который вы только что подключили. В верхнем левом углу Xcode, рядом с кнопками Run и Stop , выберите устройство из симулятора выпадающего списка.

Рисунок 5 Выберите симулятор

Я выбрал iPhone от Vardhan, но вам нужно выбрать конкретное устройство.

Теперь вы закончили создание своего стартового проекта, и вы должны увидеть виртуальный космический корабль, появившийся в вашем мире, как только вы нажмете « Запустить». Вот как это должно выглядеть:

Космический корабль дополненной реальности

Дайвинг глубже

Хорошо, мы наконец-то готовы углубиться и написать код. У вас уже есть работающее приложение ARKit, так что давайте продолжим и сделаем что-нибудь классное.

Изучение образца проекта

Узлы и текстуры

Если вы посмотрите на папку с именем art.scnassets , вы заметите, что она уже содержит две вещи: узел космического корабля и его текстуру. В этом примере Apple создала пустой объект космического корабля и в основном использовала наложение изображения для формирования его цветов и форм.

Точно так же мы будем создавать нашу собственную сферу и накладывать изображение поверхности Марса, чтобы создать точное представление о Марсе.

Изучение образца кода

Шаблон ARKit в Xcode поставляется с кучей предварительно написанного кода, чтобы сделать космический корабль видимым, поэтому давайте потратим некоторое время на изучение того, что все значит и почему это работает.

В верхней части файла вы увидите следующее:

1
2
3
import UIKit
import SceneKit
import ARKit

Сверху импортируется UIKit , и он нам нужен, потому что основным представлением будет UIViewController . Помните, когда вы выбрали SceneKit в настройках проекта? Он импортируется прямо вместе с ARKit внизу. Это все библиотеки, которые использует этот файл.

Ниже вы увидите объявление класса и следующую строку кода:

1
@IBOutlet var sceneView: ARSCNView!

Нам не нужно вдаваться в подробности, но это представление дополненной реальности SceneKit, которое связано через @IBOutlet с раскадровкой. Это основной вид всего, что мы разместим в этом уроке.

Спускаясь немного дальше, viewDidLoad() должен выглядеть так:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
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
}

Вот что делает этот код:

  1. Помните sceneView которая была связана с раскадровкой? Мы назначаем его делегат нашему ViewController ViewController потому что это соответствует протоколу ARSCNViewDelegate .
  2. Следующая строка кода является необязательной, и ее нужно отключить (установить в false), когда вы действительно публикуете в App Store. Это показывает вам данные, такие как FPS и другие данные производительности.
  3. Ранее мы видели файл ship.scn (3D-рендеринг) в папке с именем art.scnassets. В этой строке создается SCNScene , представляющий собой иерархию узлов (в данном случае космического корабля и его камеры).
  4. Наконец, сцена добавляется в sceneView , который связан с раскадровкой с помощью @IBOutlet .

Мы не охватили каждую строку в файле ViewController.swift , но то, что мы рассмотрели, важно знать, чтобы следовать руководству и создавать свои собственные приложения ARKit в будущем.

Создание планеты Марс

Снятие космического корабля

Поскольку мы будем создавать планету вместо космического корабля в нашем приложении ARKit, вам нужно удалить ее.

Сначала удалите следующие два файла из папки art.scnassets : ship.scn и texture.png . Нам это больше не понадобится.

Затем вернитесь к файлу ViewController.swift и найдите следующую строку кода:

1
2
// Create a new scene
let scene = SCNScene(named: «art.scnassets/ship.scn»)!

Поскольку у нас больше нет файла ship.scn , эта строка кода вызовет сбой нашего приложения, особенно из-за того, что восклицательный знак в конце этой строки вызывает его. Поскольку мы не будем использовать файл .scn для нашего корабля, нет необходимости инициализировать SCNScene строкой.

Просто замените эту строку кода следующим:

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

Если вы сейчас запустите свое приложение, вы увидите реальность, но она не будет дополнена. Другими словами, космический корабль исчезнет.

Объявление функции

Прямо под viewDidLoad() создайте объявление функции следующим образом:

1
2
3
4
// Creates planet Mars
function createMars() {
    // Do stuff
}

Разве не кажется немного бессмысленным создавать что-то и не возвращать это? В функции нам нужно будет вернуть SCNNode . Пока мы на этом, давайте также примем параметр для положения планеты.

После внесения этих изменений ваш метод должен выглядеть следующим образом:

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

Кодирование сферы

Поскольку Марс сферический, давайте создадим сферу, которая будет основной формой Марса. Вы можете сделать это непосредственно в viewDidLoad() , но мы будем использовать функцию, которую мы объявили выше.

Внутри вашей функции вставьте следующий код:

01
02
03
04
05
06
07
08
09
10
11
// 1
let sphere = SCNSphere(radius: 0.4)
 
// 2
let node = SCNNode(geometry: sphere)
 
// 3
node.position = position
 
// 4
return node

Вот что делает этот код:

  1. Эта линия создает сферу типа SCNSphere с радиусом 0.4 .
  2. Здесь мы просто превращаем сферу в SCNNode который можно вернуть на сайт вызова функции.
  3. Когда мы принимаем позицию в качестве аргумента функции createMars() , мы используем этот параметр, чтобы установить позицию SCNNode которую мы создали в предыдущей строке.
  4. Это просто возвращает SCNNode в функцию.

Добавление сферы

Пока что мы создали сферу, но чтобы она вообще появилась, нам нужно добавить ее в нашу текущую сцену. Для этого добавьте эти три строки кода в ваш viewDidLoad() :

1
2
3
4
5
6
7
8
// 1
let position = SCNVector3(0, 0, -3)
 
// 2
let mars = createMars(at: position)
 
// 3
scene.rootNode.addChildNode(mars)

Вот что делает код:

  1. Эта строка создает позицию типа SCNVector3 (которая представляет собой трехмерное представление точки в пространстве) для передачи в createMars() которую мы создали ранее.
  2. Здесь мы вызываем createMars() и createMars() позицию из предыдущей переменной. Далее мы назначаем узел, который эта функция возвращает, переменной с именем mars .
  3. После этого мы добавляем mars в сцену, которая была предоставлена ​​в примере проекта от Apple.

Вот это да! Мы уже достигли значительного прогресса. Если вы запустите свое приложение сейчас, вы сможете увидеть, что где-то в вашем мире есть белая сфера. Если вы попытаетесь взглянуть на него с других сторон, он будет выглядеть как круг, но это потому, что у нас пока нет текстур или теней. Вот как это должно выглядеть:

Нетекстурированная сфера AR

Добавление текстуры

Теперь, когда у нас есть сфера, нам нужно добавить текстуру, чтобы она выглядела как настоящая планета, Марс. Я только что искал фотографию поверхности Марса, и я буду использовать ее, но вы можете использовать любую фотографию, какую захотите (если вы хотите смешать вещи, вы можете даже использовать текстуры других планет).

Чтобы использовать только что полученное изображение, вам нужно поместить его в две папки: art.xcassets и art.scnassets . Еще одна вещь, которую стоит отметить: если вы хотите иметь возможность скопировать и вставить этот код в свой проект, вам нужно будет назвать ваше изображение mars_texture.png , и оно должно быть PNG   файл.

Добавьте следующий код перед строкой return в функцию createMars() :

1
2
3
let material = SCNMaterial()
material.diffuse.contents = #imageLiteral(resourceName: «mars_texture.png»)
sphere.firstMaterial = material

Сначала мы создаем SCNMaterial который SceneKit может использовать позже для обтекания сферы, и назначаем его константе с именем material . Затем мы SCNMaterial выбранное изображение и переназначаем его на содержимое стандартного SCNMaterial . Другими словами, константа material теперь содержит это изображение для использования в качестве SCNMaterial . Наконец, мы обертываем сферу SCNMaterial который мы сделали ранее.

Теперь все готово, и если вы запустите свое приложение, вы сможете увидеть Марс в своей комнате! Вы даже можете обойти его и увидеть с разных сторон. Вот как это должно выглядеть:

Марс у тебя на заднем дворе

Вывод

Теперь вы можете увидеть, насколько легко реализовать дополненную реальность в вашем приложении. Вы можете заставить свое воображение сходить с ума и даже делать полные игры. Если у вас есть больше технических навыков трехмерного рендеринга, вы также можете интегрировать их со своими навыками.

Я надеюсь, что этот урок был информативным, и вам понравилось!

40
Share: