Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
10
Help us understand the problem. What is going on with this article?
@niwasawa

ARKit Hello World (宙に浮く Hello World テキスト in 拡張現実)

More than 1 year has passed since last update.

概要

  • iOS の ARKit を使って拡張現実で Hello World テキストが宙に浮くアプリを作る
  • Storyboard の状態を修正せず、ソースコードだけで実現する

今回の環境

  • Xcode 10.3
  • ARKit 2
  • iPhone X + iOS 12.4.1

プロジェクトの作成

Xcode にてテンプレートから iOS + Argumented Reality App を選択する。

hello-world-1.png

Language に Swift を、Content Technology に SceneKit を指定する。

hello-world-2.png

AppDelegate.swift と ViewController.swift という Swift のソースコードが用意される。

hello-world-3.png

ソースコード

ViewController.swift を修正する。

viewDidLoad メソッドを以下のように書き換える。
SCNText によるテキストをAR空間に表示する。

override func viewDidLoad() {
    super.viewDidLoad()

    // Set the view's delegate
    sceneView.delegate = self

    // Show statistics such as fps and timing information
    sceneView.showsStatistics = true

    // シーンを生成
    let scene = SCNScene()

    // Set the scene to the view
    sceneView.scene = scene

    // 表示するテキストを用意
    let str = "Hello, world!\nこんにちは、世界。"
    let depth:CGFloat = 0.2 // 奥行き0.2m
    let text = SCNText(string: str, extrusionDepth: depth)
    text.font = UIFont.systemFont(ofSize: 1.0)

    // テキストの色と質感を用意
    // SCNText には最大5つの要素があり、それぞれに SCNMaterial を指定できる
    // front, back, extruded sides, front chamfer, back chamfer
    // front material
    let m1 = SCNMaterial()
    m1.diffuse.contents = UIColor.red // 前面に赤色
    // 鏡面反射感を出す
    m1.lightingModel = .physicallyBased
    m1.metalness.contents = 1.0
    m1.metalness.intensity = 1.0
    m1.roughness.intensity = 0.0
    // back material
    let m2 = SCNMaterial()
    m2.diffuse.contents = UIColor.green // 背面に緑色
    m2.lightingModel = .physicallyBased
    m2.metalness.contents = 1.0
    m2.metalness.intensity = 1.0
    m2.roughness.intensity = 0.0
    // extruded sides material
    let m3 = SCNMaterial()
    m3.diffuse.contents = UIColor.blue // 側面に青色
    m3.lightingModel = .physicallyBased
    m3.metalness.contents = 1.0
    m3.metalness.intensity = 1.0
    m3.roughness.intensity = 0.0
    // front chamfer material
    let m4 = SCNMaterial()
    m4.diffuse.contents = UIColor.yellow
    // back chamfer material
    let m5 = SCNMaterial()
    m5.diffuse.contents = UIColor.yellow

    // テキストの色と質感をセット
    text.materials = [m1, m2, m3, m4, m5]

    // AR空間の要素としてテキストをセット
    let textNode = SCNNode(geometry: text)

    // テキストを配置する場所を決める
    let (min, max) = (textNode.boundingBox)
    let textBoundsWidth = (max.x - min.x)
    let textBoundsheight = (max.y - min.y)
    let z = CGFloat(-1.0) // 目の前1メートルの距離
    textNode.pivot = SCNMatrix4MakeTranslation(textBoundsWidth/2 + min.x, textBoundsheight/2 + min.y, 0)
    textNode.position = SCNVector3(0, 0, z)

    // AR空間にテキスト要素を配置
    sceneView.scene.rootNode.addChildNode(textNode)

    // 必要に応じて自動的に光源が追加されるように設定
    sceneView.autoenablesDefaultLighting = true

    // デバッグ用設定
    // バウンディングボックス、ワイヤーフレームを表示する
    sceneView.debugOptions = [.showBoundingBoxes, .showWireframe]
}

viewWillAppear メソッドを以下のように書き換える。
環境マッピングを有効にする。

override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    // Create a session configuration
    let configuration = ARWorldTrackingConfiguration()

    // 環境マッピングを有効にする
    configuration.environmentTexturing = .automatic

    // Run the view's session
    sceneView.session.run(configuration)
}

実機での実行結果

実機 (iPhone X + iOS 12.4.1) にインストールして実行してみる。
Hello World テキストが実空間の映像に合成されて表示されている。
表側は赤色。側面は青色。

hello-world-4.jpg

裏側は緑色。

hello-world-5.jpg

環境マッピング機能で、周囲の景色が多少映り込んでいる。

hello-world-6.jpg

参考資料

10
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
niwasawa
迷子になりがちな地図・位置情報系プログラマ。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
10
Help us understand the problem. What is going on with this article?